本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 數組的定義 之前學習的數據類型，只能存儲一個值（字元串為一個值）。如果我們想存儲多個值，就可以使用數組。 數組的定義 （1）字面量定義。舉例： （2）對 ...
以下是正文。
數組的定義
之前學習的數據類型，只能存儲一個值（字元串為一個值）。如果我們想存儲多個值，就可以使用數組。
數組的定義
（1）字面量定義。舉例：
var arr = [1,2,3];（2）對象定義（數組的構造函數）。格式：
var arr = new Array(參數);參數位置是一個數值時，表示數組長度；多個數值時，表示數組中的元素。
數組的操作
1、求數組的長度：
數組的長度 = 數組名.length；可以通過修改數組的長度來改變數組中元素的個數，如果改小了，數組將從後面刪除元素。（偽數組arguments的長度可以修改，但是不能修改裡面的元素，後面單獨講）
2、獲取數組中的元素：
數組中的指定元素 = 數組名[索引值];數組的索引代表的是數組中的元素在數組中的位置，從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);列印結果：
從列印結果中可以看到，原數組（數組1、數組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）。
掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：
