【詳】JS 經常使用數組方法全涵蓋

數組的建立

• 經常使用方法:

  // 字面量
  var arr = [1,2,3]; // [1,2,3]
  // 構造方式
  var arr = Array(); // []
  var arr = Array(1,2,3); // [1,2,3]
  var arr = Array(3); //[,,]
  複製代碼

通常的， new Array === Array, 因此加不加new並無很大的影響。

• ES6 新增方法:

  • Array.of() 返回一個由參數組成的數組

  let arr = Array.of(1,2,3); // [1,2,3]
  複製代碼

  • Array.from() 將參數對象轉換爲數組,不改變原對象，而是返回一個新的數組對象

    對象的要求:

    1. 擁有 length 屬性
    2. 可迭代對象,即必需要有[Symbol.iterator]接口的數據類型結構 例如：Set，Map,NodeList，字符串等

    參數:

    1. (必需) 要轉化爲數組的對象。
    2. (可選) 相似於 map 方法，即對於每一個元素進行的處理，並會在處理後放入返回的新的數組中
    3. (可選) 用來綁定執行第二參數方法時的this指向.

  let a = {0: '1', 1: '2', 2: '3', 'length': 3};
  let arr = Array.from(a); //['1','2','3']
  // 字符串
  let arr = Array.from('array'); //['a','r','r','a','y']
  // Set、Map
  let arrset = Array.from(new Set(['func', window])); //['func', window]
  let arrMap = Array.from(new Map([1,2],[3,4],[5,6])); // [[1,2], [3,4],[5,6]]
  // 類 map 方法的使用
  let theArr = Array.from([1,2,3], x => ++x); // [2,3,4]
  複製代碼

數組的方法:

數組有多種方法，下面我將一一經過舉例等爲你們講解以及場景應用:

splice() 添加/刪除/替換 [改變原數組]

arr.splice(index, num, item1, item2, ...);

參數介紹:

1. index(必需): 一個整數，用來指定添加/刪除元素的位置，可使用負數來從尾部開始數。
2. num(可選): 刪除的元素數量，若不想刪除，設置爲0便可。
3. item1,item2....(可選): 向數組添加的元素.

返回值：若是是刪除操做,那麼會把刪除的元素放在一個新數組中返回。

使用場景:

• 刪除元素:

let arr = [1,2,3,4,5];
// 刪除 arr 的前三個元素
let before = arr.splice(0,3); //[1,2,3]
// 此時 arr 爲 [4,5]
// 刪除 arr 的最後一位元素
let after = arr.splice(-1,1); //[5], 注意，此時最後一位以後只有一個元素，後一位無論寫多大都只會是最後一位元素被刪除並返回
// 此時 arr 爲 [4]
複製代碼

• 添加元素:

let arr = [1,2,3,4,5];
let addFromStart = arr.splice(0,0,0); // [] 沒有刪除，因此這裏返回的是空數組
console.log(arr); // [0,1,2,3,4,5]
let addFromEnd = arr.splice(-1,0,6); // []
console.log(arr); // [0,1,2,3,4,6,5] !!! 注意，是從最後一位開始向前添加元素，因此 6 在 5 前。
複製代碼

• 刪除並添加

let arr = [1,2,3,4,5];
let arrAddAndDelete = arr.splice(0,2,100); //[1,2]
console.log(arr); //[100,3,4,5]
複製代碼

特色:

1.操做的元素會包括開始的元素。

2.若是數組的元素不夠，會一直刪除到最後一個數組。

pop() 刪除數組的最後一個元素[改變原數組]

arr.pop();

無參數

返回值: 被刪除的元素

使用場景:

let arr = [1,2,3];
let deleteItem = arr.pop(); // 3
console.log(arr); //[1,2]
複製代碼

shift() 刪除數組的第一個元素[改變原數組]

arr.shift();

無參數

返回值: 被刪除的元素

使用場景:

let arr = [1,2,3];
let deleteItem = arr.shift(); // 1
console.log(arr); // [2,3]
複製代碼

push() 向末尾添加元素[改變原數組]

arr.push(item1,item2, item3,...);

參數: 向數組末尾添加的元素

返回值：添加後數組的 length

使用場景:

let a = [1,2,3];
let theLength = a.push(4); // 4
console.log(a); // [1,2,3,4]
複製代碼

unshift() 向數組開頭添加元素[改變原數組]

arr.unshift(item1,item2,...);

參數： 向數組開頭添加的元素

返回值：添加後數組的 length

使用場景:

let a = [1,2,3];
let theLength = a.unshift(0); // 4
console.log(a); // [0,1,2,3]
複製代碼

sort() 數組的排序[改變原數組]

arr.sort(func)

對數組進行排序，以後返回這個數組

參數：規定排序順序的比較函數(非必須)

傳入函數的參數：兩個默認參數，非別是要比較的兩個元素（後面用a，b指示），而且排序順序主要跟函數的返回值有關，若返回值 小於0， 則 a 在 b 以前；若返回值等於0， 則a，b位置不變；若返回值大於0,則 b 在 a 以前。

返回值： 排序後的數組

使用場景:

• 默認狀況下，不傳參數的話，默認按字母升序，若爲非字符串,則先調用toString()將元素轉化爲字符串的 Unicode ,再進行字符串比較.因此，默認的sort()不適合用來比較數字等。

  let arr = ["A","C","B","E","D"];
  arr.sort();
  console.log(arr); //["A","B","C","E","D"]
  複製代碼

• 數組的升序與降序排序

  let arr = [9,15,35,21,42,2,7];
  // 升序操做， 若 a < b, 則 a - b 小於 0， a將排在b以前
  arr.sort((a,b) => a-b);
  console.log(arr); //[2, 7, 9, 15, 21, 35, 42]
  // 降序操做, 若 a < b, 則 b - a 大於 0， a排在b以後
  arr.sort((a,b) => b-a);
  console.log(arr); // [42, 35, 21, 15, 9, 7, 2]
  複製代碼

• 複雜條件(自定義)判斷

  // 按年齡排序，若年齡相同，就女士(sex屬性爲0) 排在男士(sex屬性爲1)以前。
  let arr = [{age: 18, sex: 0}, {age: 19, sex: 0}, {age: 20, sex: 0}, {age: 18, sex: 1}, {age: 19, sex: 1}];
  arr.sort((a,b) => {
    if (a.age === b.age) { //若年齡相同就按性別排，女士優先
      return a.sex - b.sex;
    } else { //年齡不相同就默認按年齡排升序
      return a.age - b.age;
    }
  })
  
  console.log(arr); //[{age: 18, sex: 0}, {age: 18, sex: 1}, {age: 29, sex: 0}, {age: 19, sex: 1}, {age: 20, sex: 0}];
  複製代碼

reverse() 數組的反轉[改變原數組]

arr.reverse();

無參數

無返回值

使用場景:

let arr = [1,2,3];
arr.reverse();
console.log(arr); [3,2,1]
複製代碼

copyWithin() 數組的指定位置複製[改變原數組、ES6]

arr.copyWithin(index, start, end)

參數:

1. index(必需): 開始替換元素的位置，負值表示從後面查起。
2. start(可選): 從該位置讀取數據，默認值爲0，負值表示從後面查起。
3. end(可選): 到該位置中止讀取，默認爲數組長度，負值表示從後面查起，但實際上覆制的是到這位以前的元素。

無返回值

使用場景:

let arr = [1,2,3,4,5];
arr.copyWithin(0,2,4); //複製了幾個元素，就替代幾個元素
console.log(arr); // [3,4,3,4,5]
複製代碼

fill()數組的填充 [改變原數組、ES6]

arr.fill(value, start, end)

參數:

1. value(必需): 用來填充的值。
2. start(可選): 填充的起始位置，默認爲0。
3. end(可選)：填充的結束爲止，默認爲 數組的長度。

無返回值

使用場景:

let arr = new Array(3);
arr.fill(1);
console.log(arr); //[1,1,1]
arr.fill(2,1,3);
console.log(arr); //[1,2,2]
複製代碼

slice() 拷貝數組元素 [不改變原數組]

arr.slice(start, end);

參數:

1. start(可選): 開始複製的索引位置，負值表示從尾部向前，默認值爲0。
2. end(可選): 結束複製的索引位置，複製到它的前一個元素，負值表示從尾部向前，默認值爲數組長度。

返回值: 複製後的新數組

使用場景:

• 複製簡單數據類型

  let a = [1,2,3];
  let b = a.slice(0,2);
  console.log(a,b); //[1,2,3] [1,2]
  // 淺拷貝，複製簡單數據類型，以後進行操做不會互相干擾。
  a[0] = 100;
  console.log(a,b); // [100, 2, 3] [1, 2]
  b[0] = 200;
  console.log(a,b); // [100, 2, 3] [200, 2]
  複製代碼

• 複製複雜引用類型

  let a = [{id:1,num:5}];
  let b = a.slice();
  console.log(a,b); //[{id:1,num:5}] [{id:1,num:5}]
  // 淺拷貝，複製複雜引用類型，以後進行操做會相互干擾。由於複製的只是對象的指向，而不是複製一個副本。
  a[0].id = 2;
  console.log(a,b); //[{id:2,num:5}] [{id:2,num:5}]
  b[0].num++;
  console.log(a,b); //[{id:2,num:6}] [{id:2,num:6}]
  複製代碼

join() 將數組轉換爲字符串[不改變原數組]

arr.join(str);

參數: str(可選): 用來做爲指定的分隔符，默認爲逗號。

返回值：返回轉換後的字符串。

使用場景:

let a = [1,2,3];
let str = a.join();
console.log(str); // "1,2,3"
let anotherStr = a.join('-');
console.log(anotherStr); //"1-2-3"
複製代碼

注意，當數組中爲對象時，join方法會默認打出 [object object]

toString() / toLocaleString()[不改變原數組]

arr.toString() / arr.toLocaleString();

無參數

返回值：轉換後的字符串。

兩個與join有點相似，只是 toLocaleString至關於先調用數組元素的 toLocaleString方法以後再進行join,toString()用逗號隔開數組元素拼接爲字符串。

使用場景:

let arr = [1,2,3];
let arrStr = arr.toString();
console.log(arrStr); //"1,2,3"
let arrLocale = [new Date(),1,2];
let LocaleStr = arrLocale.toLocaleString();
console.log(LocaleStr); //"2019/4/16 下午5:05:43,1,2"
複製代碼

concat() 鏈接合併多個數組，返回新數組。[不改變原數組]

arr.concat(arr1,arr2,arr3);

參數: arr1,arr2,arr3: 須要合併的數組，也能夠直接爲值。

返回值：合併後的新數組。

使用場景:

let arr = [1,2,3];
let arr1 = [4,5];
let afterArr = arr.concat(arr1);
console.log(afterArr); //[1, 2, 3, 4, 5]
console.log(arr); //[1, 2, 3]
console.log(arr1); //[4, 5]
複製代碼

關於合併數組咱們還可使用 ... ES6 提供的擴展運算符來合併

let arr = [1,2,3];
let arr1 = [...arr,4,5]; // [1,2,3,4,5]
複製代碼

indexOf() 查找數組中某元素的索引值。[不改變原數組]

arr.indexOf(value, fromIndex);

參數:

1. value(必需)：要查找的元素值
2. fromIndex(可選): 今後處開始查找，接受負值，默認爲0，若超過數組長度則函數返回-1。

返回值:

• 若查找到元素，則返回元素的索引值。
• 若數組中沒有此元素，返回 -1.

注意!!! indexOf使用的是嚴格相等(===),不存在隱式類型轉換。

let arr = [1,2,3];
console.log(arr.indexOf(1)); // 0
console.log(arr.indexOf(1,1)); // -1
console.log(arr.indexOf(4)); // -1
複製代碼

lastIndexOf() 查找指定元素在數組中的最後一個位置。[不改變原數組]

arr.lastIndexOf(value, fromIndex);

參數:

1. value(必需): 要查找的元素
2. fromIndex(可選):逆向查找的開始位置 ,默認爲數組長度 - 1，查找整個數組。

返回值: 元素的最後一個位置。

let arr = [1,2,3,2,1];
console.log(arr.lastIndexOf(1)); // 4
console.log(arr.lastIndexOf(2)); // 3
複製代碼

includes() 查找數組是否包含某個元素。[不改變原數組, ES7]

arr.includes(value);

參數:

1. value(必需)：要查找的元素值
2. fromIndex(可選): 今後處開始查找，接受負值，默認爲0，若超過數組長度則函數返回-1。

返回值：布爾型

與indexOf的區別:

1. indexOf 不能識別 NaN,但 includes 能夠。
2. 當咱們只須要查找是否含有時，若返回索引多是0的狀況，不方便咱們直接進行一些判斷操做。

let arr = [1,NaN, 100,'42'];
console.log(arr.includes(1)); //true
console.log(arr.includes(NaN)); //true
console.log(arr.includes(1,3)); //false
複製代碼

遍歷

forEach 按升序依次遍歷數組中的值

arr.forEach(function(value, index, arr), this);

參數:

1. value(必須): 當前遍歷時的數組值。
2. index(可選): 當前遍歷時的索引值。
3. arr(可選): 數組對象自己。
4. this(可選): 執行回調函數時的。

返回值：無

一些特色：

1. 在迭代過程當中遇到刪除的元素或者空元素，則會跳過回調函數。
2. 對空數組不進行回調。
3. 遍歷的次數在循環前就會確認，即在遍歷過程當中添加元素不會被遍歷到。

let arr = [1,2,3,4, ,5 ];
const obj = {name: 'obj'};
arr.forEach(function(value, index,array) {
  arr[4] = 'edited'; // 改變空元素的值,傳遞給回調的是遍歷到這一刻的值
  arr.push(6); //新添加的元素，不會被遍歷到。
  console.log(value, index);
  console.log(this.name); // "obj"
}, obj); // 用來讓回調函數內的this指向obj
複製代碼

some()檢測數組中是否存在知足條件的元素

arr.some(function(value, index, arr), this);

參數:

1. value(必須): 當前遍歷時的數組值。
2. index(可選): 當前遍歷時的索引值。
3. arr(可選): 數組對象自己。
4. this(可選): 執行回調函數時的。

返回值：布爾類型 ture or false

let arr = [1,2,3,4,5];
let result1 = arr.some((value) => value > 6); //false
let result2 = arr.some((value) => value < 2); //true
複製代碼

every()檢測數組中的元素是否所有知足條件

arr.some(function(value, index, arr), this);

參數:

1. value(必須): 當前遍歷時的數組值。
2. index(可選): 當前遍歷時的索引值。
3. arr(可選): 數組對象自己。
4. this(可選): 執行回調函數時的。

返回值：布爾類型 ture or false

let arr = [1,2,3,4,5];
let result1 = arr.every((value) => value > 6); //false
let result2 = arr.every((value) => value < 6); //true
複製代碼

filter()過濾原數組，返回新數組

arr.filter(function(value,index,arr), this);

參數:

1. value(必須): 當前遍歷時的數組值。
2. index(可選): 當前遍歷時的索引值。
3. arr(可選): 數組對象自己。
4. this(可選): 執行回調函數時的。

返回值: 新的數組。

let arr = [1,2,3,4,5];
// 只獲取數組中大於2的元素，並放入一個新數組中
let result = arr.filter(item => item > 2);
console.log(result); //[3,4,5]
複製代碼

map() 對數組中的每個元素都進行處理，返回新的數組

arr.map(function(value, index, arr), this);

map 遍歷的回調內必需要有一個返回值，必定要注意。

參數:

1. value(必須): 當前遍歷時的數組值。
2. index(可選): 當前遍歷時的索引值。
3. arr(可選): 數組對象自己。
4. this(可選): 執行回調函數時的。

返回值: 新的數組。

let arr = [1,2,3,4,5];
// 數組元素變爲原來的2倍
let result = arr.map(item => item * 2);
console.log(result); //[2, 4, 6, 8, 10]
複製代碼

reduce()數組的累加器，合併成爲一個值。

arr.reduce((total, value, index, arr), init)

參數:

1. total(必須)：初始值，以後爲上一次回調的返回值。
2. value(必須): 數組元素的值。
3. index(可選): 索引值。
4. arr(可選): 數組對象。
5. init(可選): 初始值。

返回值：累加後的值。

• 若 init 在調用 reduce時提供，那麼第一次total即爲 init， value 爲 第一個元素的值。
• 若 init 沒有提供， total爲數組第一個元素的值，value爲第二個元素的值。

let arr = [1,2,3,4];
let sum = arr.reduce((total,value) => total + value ); //10
複製代碼

find() / findIndex() 根據條件找到數組成員 [ES6]

arr.find(function(value, index, arr), this);

參數:

1. value(必須): 當前遍歷時的數組值。
2. index(可選): 當前遍歷時的索引值。
3. arr(可選): 數組對象自己。
4. this(可選): 執行回調函數時的。

返回值： find()返回第一個符合條件的數組成員，若不存在返回undefined。 findIndex()返回符合條件的數組成員的索引。

let arr = [1,2,3,4];
let result1 = arr.find((value) => value > 3); 
console.log(result1);//4
let result2 = arr.findIndex((value) => value > 3);
console.log(result2); //3
複製代碼

flat()深度遍歷展開數組

arr.flat(depth);

參數: depth(可選): 提取嵌套數組的結構深度，默認爲1。

返回值：展開後的新數組。

let arr = [1,2,[3,4,[5,6]]]
let one = arr.flat();
console.log(one); //默認值爲1， 因此只能展開一層嵌套 [1,2,3,4,[5,6]]
let two = arr.flat(2);
console.log(two); //[1,2,3,4,5,6]
// 若不清楚有多少層嵌套，能夠直接用 Infinity 設置，就可所有展開
let inf = arr.flat(Infinity);
console.log(inf); //[1,2,3,4,5,6]
// flat方法會移除數組中的空白項
let arr2 = [1,2,3,,5];
console.log(arr2.flat()); //[1,2,3,5]
複製代碼

分享一個能夠用這個解決的面試題，仍是經過這道題發現原來有flat這個方法 :joy:

題目: 將一個多維數組扁平化並去重，以後獲得一個升序數組。

let arr = [1,2,3,4,5,[2,4,5,8,[44,88,1,3,4,8,5,7,6,[123],111],15],2,8,7];
let newArr = Array.from(new Set(arr.flat(Infinity))).sort((a,b) => a - b)
console.log(newArr); //[1, 2, 3, 4, 5, 6, 7, 8, 15, 44, 88, 111, 123]
複製代碼

keys() 遍歷鍵名 / values() 遍歷鍵值/ entries() 遍歷鍵值對

arr.keys() / arr.values() / arr.entries()

無參數

返回值: 一個可遍歷的數組對象[Array Iterator],因此咱們是不能夠直接打印這個對象的，而是能夠遍歷它。

let arr = [9,8,7,6,5,4,3,2,1]
for(let index of arr.keys()){
    console.log(index); //0,1,2,3,4...依次打印
}

for(let value of arr.values()){
    console.log(value); //9,8,7,6,5....依次打印
}

for(let [index, value] of arr.entries()){
    console.log(index,value); // 0,9 1,8 2,7
}
複製代碼

固然也能夠手動調用遍歷器

let arr =["one","two","three"];
let result = arr.entries();
console.log(result.next().value); //[0, "one"]
console.log(result.next().value); //[1,"two"]
console.log(result.next().value); //[2, "three"]
複製代碼

總結

​ 以前一直用數組有關方法的時候感受老是隻能想起一些經常使用的，有時用一些數組方法還要去確認了文檔才能開始使用，感受數組的有些方法仍是須要有個系統的認知，能夠將一些更高效的原生方法應用在開發中。

​ 若對文中部份內容有異議，歡迎在評論區討論！

參考連接:

MDN

[ECMAScript 6 入門](