JavaScript語法基礎：數組的經常使用方法詳解
本文最初發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript
如下是正文。html
數組的定義
以前學習的數據類型，只能存儲一個值（字符串爲一個值）。若是咱們想存儲多個值，就可使用數組。前端
數組的定義
（1）字面量定義。舉例：java
var arr = [1,2,3];
（2）對象定義（數組的構造函數）。格式：git
var arr = new Array(參數);
參數位置是一個數值時，表示數組長度；多個數值時，表示數組中的元素。github
數組的操做
一、求數組的長度：算法
數組的長度 = 數組名.length；
能夠經過修改數組的長度來改變數組中元素的個數，若是改小了，數組將從後面刪除元素。（僞數組arguments的長度能夠修改，可是不能修改裏面的元素，後面單獨講）編程
二、獲取數組中的元素：api
數組中的指定元素 = 數組名[索引值];
數組的索引表明的是數組中的元素在數組中的位置，從0開始。數組
若是索引值有誤（好比元素沒那麼多），系統不報錯，而是會給定值爲undefined。
遍歷數組（重要）
遍歷數組即：獲取並操做數組中的每個元素。
舉例：
var arr = ["生命壹號","許嵩","永不止步"];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]); // arr[i]表明的是數組中的每個元素i
}
console.log(arr);
打印結果：
數組Array的經常使用方法
Array數組是屬於內置對象，咱們能夠在下面的網站上查詢各類方法。
- MDN（開發者網站）：https://developer.mozilla.org/zh-CN/
Array有各類api接口（Application Programming Interface，應用程序編程接口），下面分別介紹。
（1）判斷是否爲數組：instanceof
布爾類型值 = A instanceof B;
解釋：判斷A是否爲B類型（instanceof 是一個關鍵字）。
在數組裏，這種方法已經用的很少了，由於有下面這種方法。
（2）判斷是否爲數組：isArray()
布爾類型值 = Array.isArray(被檢測的值) ;
PS：屬於HTML5中新增的方法。
（3）轉換數組：toString()
字符串 = 數組.toString();
解釋：把數組轉換成字符串，每一項用,分割。
（4）返回數組自己：valueOf()
數組自己 = 數組.valueOf();
這個方法的意義不大。由於咱們指直接寫數組對象的名字，就已是數組自己了。
（5）將數組中的元素用符號鏈接成字符串：join()
字符串 = 數組.join(參數);
參數決定用什麼符號進行鏈接。若是不寫參數，則和toString()的效果一致。
舉例：
var arr = ["生命壹號","許嵩","棒棒噠"];
console.log(arr.join()); //無參數
console.log(arr.join(" ")); //用空格進行鏈接
console.log(arr.join("")); //用空字符串進行鏈接
console.log(arr.join("&")); //用符號"&"進行鏈接
打印結果：
生命壹號,許嵩,棒棒噠
生命壹號 許嵩 棒棒噠
生命壹號許嵩棒棒噠
生命壹號&許嵩&棒棒噠
join方法有必定的實際用途：當咱們須要把一堆字符串進行鏈接時，咱們能夠把他們轉換成數組，而後調用數組的join()方法。這樣作有個好處是：內存不會溢出。
僞數組：arguments
arguments表明的是實參。有個講究的地方是：arguments只在函數中使用。
（1）返回函數實參的個數：arguments.length
舉例：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
console.log(arguments);
console.log(fn.length); //獲取形參的個數
console.log(arguments.length); //獲取實參的個數
console.log("----------------");
}
打印結果：
（2）返回正在執行的函數：arguments.callee
在使用函數遞歸調用時，推薦使用arguments.callee代替函數名自己。
（3）之因此說arguments是僞數組，是由於：arguments能夠修改元素，但不能改變數組的長短。舉例：
fn(2,4);
fn(2,4,6);
fn(2,4,6,8);
function fn(a,b) {
arguments[0] = 99; //將實參的第一個數改成99
arguments.push(8); //此方法不經過，由於沒法增長元素
}
數組的添加和刪除
（1）push()：在數組最後面插入項，返回數組的長度
數組改後的長度 = 數組.push(元素);
（2）pop()：取出數組中的最後一個元素，返回被刪除的元素
被刪除的元素 = 數組.pop();
（3）unshift()：在數組最前面插入項，返回數組的長度
數組改後的長度 = 數組.unshift(元素);
（4）shift()：取出數組中的第一個元素，返回被刪除的元素
被刪除的元素 = 數組.shift();
數組的反轉和排序
（1）reverse()：翻轉數組（返回值是反轉後的數組，並且原數組也已經被反轉了）
反轉後的數組 = 數組.reverse();
舉例：
var arr = ["a","b","c","d","e","f"];
console.log(arr); //反轉前打印
console.log(arr.reverse()); //反轉
console.log(arr); //反轉後打印
打印結果：
注意：反轉後，打印原來的數組發現，原來的數組已經被反轉了。
（2）sort()：給數組排序，返回排序後的數組（排序的規則看參數）
從小到大排序後的數組 = 數組.sort(function(a,b){
return a-b;
});
無參：按照數組元素的首字符對應的Unicode編碼值，從小到大排列數組元素。
- 帶參：必須爲函數（回調函數：callback）。這個回調函數中帶有兩個參數，表明數組中的先後元素。
- 若是返回值（a-b）爲負數，a排b前面。
- 若是返回值（a-b）等於0，不動。
- 若是返回值（a-b）爲正數，a排b後面。
上面的這個帶參的排序，實際上是調用了底層的冒泡排序，小的排前面，大的排後面。
PS：sort方法的功能很是強大，能對數字和字母進行排列。
數組的一些其餘方法
（1）concat() ：把參數拼接到當前數組（原數組不會被修改）
新數組 = 數組1.concat(數組2);
舉例：
var arr1 = [1,2,3];
var arr2 = ["a","b","c","d","e","f"];
console.log(arr1.concat(arr2)); //把參數拼接到當前數組
console.log(arr1);
console.log(arr2);
打印結果：
從打印結果中能夠看到，原數組（數組一、數組2）並無被修改。
（2）slice()：從當前數組中截取一個新的數組（不影響原來的數組）
新數組 = 原數組.slice(開始位置index，結束位置index); //注意：索引值包括左邊的，不包括右邊的
舉例：
var arr = ["a","b","c","d","e","f"];
console.log(arr.slice(2)); //從第二個值開始截取
console.log(arr.slice(2,4)); //截取從第二個到第四個之間的值（不包括第四個值）
console.log(arr.slice(-2)); //截取最後兩個值
console.log(arr.slice(4,2)); //空
打印結果：
（3）splice()：刪除當前數組的某些元素（原數組會被改變）
新數組 = 數組1.splice(起始索引index，須要操做的個數，彌補的值);
舉例：
var arr11 = ["a","b","c","d","e","f"];
var arr12 = arr11.splice(1); //從第一個位置開始，刪除元素
console.log("原數組："+arr11);
console.log("新數組："+arr12);
console.log("-----------");
var arr21 = ["a","b","c","d","e","f"];
var arr22 = arr21.splice(1,3); //從第一個元素開始刪除，一共刪除3個元素
console.log(arr21);
console.log(arr22);
打印結果：
PS：第三個參數不多用，這裏先不講。
（3）獲取數據的索引：indexOf()、lastIndexOf()
indexOf()：從前日後索引
lastIndexOf() ：從後往前索引
索引值 = 數組.indexOf/lastIndexOf(數組中的元素內容);
PS：若是沒找到返回-1。
舉例：
var arr = ["a","b","c","d","e","d","c"];
console.log(arr.indexOf("c")); //從前日後，找"c"在哪一個位置
console.log(arr.lastIndexOf("d")); //從前日後，找"d"在哪一個位置
打印結果：
數組迭代方法
數組迭代方法包括：every()、filter()、forEach()、map()、some()
PS：這幾個方法不會修改原數組。
語法格式：
數組/boolean/無 = 數組.every/filter/forEach/map/some(
function(element,index,arr){
程序和返回值；
有了這幾種方法，就能夠替代一些for循環了。下面依次來介紹。
every()方法
解釋：對數組中每一項運行回調函數，若是都返回true，every就返回true；若是有一項返回false，則中止遍歷，此方法返回false。
注意：every()方法的返回值是boolean值，參數是回調函數。
舉例：
var arr1 = ["千古", "宿敵", "南山憶", "素顏"];
var bool1 = arr1.every(function (element, index, array) {
if (element.length > 2) {
return false;
}
return true;
});
console.log(bool1); //輸出結果：false。只要有一個元素的長度是超過兩個字符的，就返回false
var arr2 = ["千古", "宿敵", "南山", "素顏"];
var bool2 = arr2.every(function (element, index, array) {
if (element.length > 2) {
return false;
}
return true;
});
console.log(bool2); //輸出結果：true。由於每一個元素的長度都是兩個字符。
some()方法
解釋：對數組中每一項運行回調函數，只要有一項返回true，則中止遍歷，此方法返回true。
filter()方法
解釋：對數組中每一項運行回調函數，該函數返回結果是true的項，將組成新的數組（返回值就是這個新的數組）。
var arr1 = ["千古", "宿敵", "南山憶", "素顏"];
var arr2 = arr1.filter(function (element, index, array) {
if (element.length > 2) { //arr1中的元素，若是是長度超過2個字符的，我就把它放到arr2中去
return true;
}
return false;
});
console.log(arr1);
console.log(arr2);
結果：
forEach()方法
解釋：遍歷數組。
注意：無返回值，純粹操做數組中的元素，因此應用場景並很少。
map()方法
解釋：對數組中每一項運行回調函數，返回該函數的結果，組成的新數組（返回值就是這個新的數組）。
舉例：
var arr1 = ["千古", "宿敵", "南山憶", "素顏"];
var arr2 = arr1.map(function (element, index, array) {
return element + "vae"; //給arr1中全部的元素增長字符串"vae"，放到arr2中。
});
console.log(arr1);
console.log(arr2);
結果：
清空數組
清空數組，有如下幾種方式：
var array = [1,2,3,4,5,6];
array.splice(0); //方式1：刪除數組中全部項目
array.length = 0; //方式1：length屬性能夠賦值，在其它語言中length是隻讀
array = []; //方式3：推薦
數組練習
練習1
問題：將一個字符串數組輸出爲|分割的形式，好比「千古|宿敵|素顏」。使用兩種方式實現。
答案：
方式1：（不推薦）
var arr = ["千古","宿敵","素顏"];
var str = arr[0];
var separator = "|";
for(var i = 1;i< arr.length;i++) {
str += separator+arr[i]; //從第1個數組元素開始，每一個元素前面加上符號"|"
}
console.log(str);
輸出結果：
不推薦這種方式，由於：因爲字符串的不變性，str拼接過多的話，容易致使內存溢出（不少個str都堆放在棧裏）。
方式2：（推薦。經過array數組自帶的api來實現）
var arr = ["千古","宿敵","素顏"];
console.log(arr.join("|"));
結果：
練習2
題目：將一個字符串數組的元素的順序進行反轉，使用兩種種方式實現。提示：第i個和第length-i-1個進行交換。
答案：
方式1：
function reverse(array) {
var newArr = [];
for (var i = array.length - 1; i >= 0; i--) {
newArr[newArr.length] = array[i];
}
return newArr;
}
方式2：（算法裏比較常見的方式）
function reverse(array){
for(var i=0;i<array.length/2;i++){
var temp = array[i];
array[i] = array[array.length-1-i];
array[array.length-1-i] = temp;
}
return array;
}
方式3：（數組自帶的reverse方法）
如今咱們學習了數組自帶的api，咱們就能夠直接使用reverse()方法。
練習3
問題：針對工資的數組[1500,1200,2000,2100,1800]，把工資超過2000的刪除。
答案：
var arr1 = [1500, 1200, 2000, 2100, 1800];
var arr2 = arr1.filter(function (ele, index, array) {
if (ele < 2000) {
return true;
}
return false;
})
console.log(arr1);
console.log(arr2);
結果：
練習4
問題：編寫一個方法去掉一個數組中的重複元素。
分析：建立一個新數組，循環遍歷，只要新數組中有老數組的值，就不用再添加了。
答案：
// 編寫一個方法 去掉一個數組的重複元素
var arr = [1,2,3,4,5,2,3,4];
console.log(arr);
var aaa = fn(arr);
console.log(aaa);
//思路：建立一個新數組，循環遍歷，只要新數組中有老數組的值，就不用再添加了。
function fn(array){
var newArr = [];
for(var i=0;i<array.length;i++){
//開閉原則
var bool = true;
//每次都要判斷新數組中是否有舊數組中的值。
for(var j=0;j<newArr.length;j++){
if(array[i] === newArr[j]){
bool = false;
}
}
if(bool){
newArr[newArr.length] = array[i];
}
}
return newArr;
}
個人公衆號
想學習代碼以外的軟技能？不妨關注個人微信公衆號：生命團隊（id：vitateam）。
掃一掃，你將發現另外一個全新的世界，而這將是一場美麗的意外：
- 1. JavaScript語法基礎：數組的經常使用方法詳解
- 2. Javascript的數組經常使用方法
- 3. JavaScript數組的經常使用方法
- 4. JavaScript基礎之數組經常使用方法
- 5. JavaScript基礎ES5/ES6經常使用數組方法彙總
- 6. javascript數組經常使用方法
- 7. Javascript 數組經常使用方法
- 8. JavaScript中數組經常使用方法
- 9. 一. JavaScript數組經常使用方法
- 10. javaScript數組之經常使用方法
- 更多相關文章...
- • Kotlin 基礎語法 - Kotlin 教程
- • Scala 基礎語法 - Scala教程
- • Kotlin學習（一）基本語法
- • 常用的分佈式事務解決方案
-
每一个你不满意的现在，都有一个你没有努力的曾经。