建議學習時長： 60分鐘
學習方式：深入

學習目標

• 知道什么數組
• 了解數組有哪些常用方法。

詳細介紹

數組（array）是按次序排列的一組值。每個值的位置都有編號（從0開始），整個數組用方括號表示。如

var arr = ['a', 'b', 'c']

上面代碼中的a、b、c就構成一個數組，兩端的方括號是數組的標志。a是0號位置(arr[0] 的值即為a)，b是1號位置，c是2號位置。

常用方法

創(chuàng)建數組

var arr = [];
var arr1 = [1,2,3];

常用方法

修改數組

• array.pop - 刪除數組最后一位元素。

var arr = [1, 2, 3];
arr.pop();// 返回 3
arr;// [1,2]

• array.shift - 刪除數組第一位元素。

var arr = [1, 2, 3];
arr.shift();// 返回 1
arr;// [2,3]

• array.push - 往數組的末尾新增一個或多個元素。

var arr = [];
arr.push(1);// 返回數組長度 1
arr;// [1]
arr.push(2,3);
arr;// [1,2,3]

• array.unshift - 往數組的開頭新增一個或多個元素。

var arr = [1, 2, 3];
arr.unshift(0);
arr.unshift(-1, -2);
arr;// [-1, -2, 0, 1, 2]

• array.reverse - 把數組元素順序逆轉。

var arr = [1, 2, 3];
arr.reverse();// [3, 2, 1]
arr;// [3, 2, 1]

• array.sort - 數組排序。

var arr = [1 ,-1, 2];
arr.sort();// [-1, 1, 2]
arr;// [-1, 1, 2]
arr = [{
  age: 10,
},{
  age: 1
}, {
  age: 12
}];
// 按照 age 從小到大排序
arr.sort(function(a, b){
  return a.age - b.age > 0 ? 1 : -1;
});

• array.splice - 給數組添加或者刪除元素。

// splice(開始下標, 刪除個數，插入元素(可以多個)）
var arr = [1, 2, 3, 4];
arr.splice(1, 2);// [2,3]
arr;// [1,4]
arr = [1, 2, 3, 4];
arr.splice(1, 2, 'a', 'b', 'c');// [2,3]
arr;// [1, "a", "b", "c", 4]

注意：當數組執(zhí)行上面的這些方法時，都會修改原數組。

迭代方法

• array.forEach - 遍歷數組。

['a' ,'b' ,'c'].forEach(function(each, index){
  console.log(each,index);
});
// 輸出 'a' 0  'b' 1 'c' 2

• array.filter - 從數組中找出所有符合指定條件的元素。

// 找出所有正數
var res = [3, 4, -1].filter(function(each){
  return each > 0;
});
res; //[3,4]

• array.every - 數組中是否每個元素都滿足指定的條件。

// 是否都為正數
var isAllPositive = [3, 4, -1].every(function(each){
  return each > 0;
});
isAllPositive; // false;
isAllPositive = [3, 4].every(function(each){
  return each > 0;
});
isAllPositive; // true;

• array.some - 數組中是否有元素滿足指定的條件。

// 是否有正數
var isSomePositive = [3, 4, -1].some(function(each){
  return each > 0;
});
isSomePositive; // true;
isSomePositive = [-3, -4].every(function(each){
  return each > 0;
});
isSomePositive; // false;

• array.map - 將數組映射成另一個數組。

// 內容 * 2
[1, 2, 3].map(function(each){
  return each * 2;
});
// 返回 [2, 4, 6]

• array.reduce - 將數組合成一個值。

// 數組內容求和。0 為初始值
[1, 2, 3].reduce(function(prev, each){
  return prev + each;
}, 0);
// 返回 6

當要使用迭代方法時，forEach 應該是最后被考慮的。主要原因是：forEach 與其他迭代方法比，語義性是最差的。更詳細的說明見 avoid forEach。

** 注意 IE8 及以下版本不支持 every, some, map, reduce。如果想在 IE 8 及以下版本用這幾個方法，可以用 es5-shim 或 lodash。**

其他方法

• Array.isArray - 是否是數組。IE9+ 支持該方法。

Array.isArray(3); // false
Array.isArray({}); // false
Array.isArray([]); // true

• array.concat - 合并數組或合并數組的值。

[1,2,3].concat(4,5); // 輸出 [1, 2, 3, 4, 5]

• array.join - 合并數組所有元素拼接成字符串。

[1,2,3].join(); // 輸出 '1,2,3'
[1,2,3].join('@'); // 輸出 '1@2@3'

• array.slice - 選擇數組中的一部分元素。

// slice(開始下標, 結束下標（可選，默認為數組長度）)
['a', 'b', 'c', 'd'].slice(1);// ["b", "c", "d"]
['a', 'b', 'c', 'd'].slice(1, 2);// ["b"]
['a', 'b', 'c', 'd'].slice(1, 3);// ["b", "c"]

• array.indexOf - 查找數組中指定元素的下標。

['a', 'b', 'c', 'd'].indexOf('c'); // 2
['a', 'b', 'c', 'd'].indexOf('g'); // -1

• array.lastIndexOf - 查找數組中指定元素的下標。查找方向為從后往前。

['c', 'd', 'c'].lastIndexOf('c'); // 2
['a', 'b', 'c', 'd'].lastIndexOf('g'); // -1