Array方法彙總（乾貨）

Array.from()

從一個類似數組或可迭代對象中創建一個新的，淺拷貝的數組實例

用途：

字符串轉數組
結合new Set()，進行數組去重
遍歷數組
生成一個數字序列

<!--字符串轉數組-->
Array.from('foo');// ["f", "o", "o"]

<!--去重-->
let s = new Set(['1', '2','2','3']); 
Array.from(s); // ['1','2','3']

<!--遍歷數組-->
Array.from([1, 2, 3], x => x + x);// [2, 4, 6]

<!--生成一個數字序列-->
Array.from({length: 5}, (v, i) => i);// [0, 1, 2, 3, 4]

Array.isArray()

用於確定傳遞的值是否是一個 Array

Array.isArray([1, 2, 3]); // true

Array.isArray({foo: 123});// false

Array.isArray(Array.prototype);// true

Array.of()

創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型

Array.of(7);       // [7] 
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

Array.prototype.concat()

用於合併兩個或多個數組

此方法不會更改現有數組，而是返回一個新數組。

concat方法不會改變this或任何作爲參數提供的數組，而是返回一個淺拷貝，它包含與原始數組相結合的相同元素的副本。原始數組的元素將複製到新數組中

var arr1 = [[1],2];
var arr2 = [].concat(arr1);
arr1[0].push(2);

arr1 => [[1,2], 2];
arr2 => [[1,2], 2];


var arr3 = [1,2,3];
var arr4 = [].concat(arr1);
arr3.push(5);

arr3 => [1, 2, 3, 5];
arr4 => [1, 2, 3];

Array.prototype.copyWithin()

淺複製數組的一部分到同一數組中的另一個位置，並返回它，不會改變原數組的長度

此方法會更改原有數組，但不會改變其長度

語法

arr.copyWithin(target[, start[, end]])

不常用，至少目前我沒用過。詳情可點擊這裏瞭解。

它是用來移動 Array 或者 TypedArray 數據的一個高性能的方法

Array.prototype.entries()

返回一個新的Array Iterator對象，該對象包含數組中每個索引的鍵/值對

Iterator對象的next方法可以遍歷迭代器取得原數組的[key,value]

<!--next方法獲取鍵值-->
var arr = ["a", "b", "c"]; 
var iterator = arr.entries();
console.log(iterator.next());

/*{value: Array(2), done: false}
          done:false
          value:(2) [0, "a"]
           __proto__: Object
*/
// iterator.next()返回一個對象，對於有元素的數組，
// 是next{ value: Array(2), done: false }；
// next.done 用於指示迭代器是否完成：在每次迭代時進行更新而且都是false，
// 直到迭代器結束done纔是true。
// next.value是一個["key","value"]的數組，是返回的迭代器中的元素值。

<!--for...of循環獲得鍵值-->
var arr = ["a", "b", "c"];
var iterator = arr.entries();

for (let e of iterator) {
    console.log(e);
}

// [0, "a"] 
// [1, "b"] 
// [2, "c"]

用於二維數組按行排序

function sortArr(arr) {
    var goNext = true;
    var entries = arr.entries();
    while (goNext) {
        var result = entries.next();
        if (result.done !== true) {
            result.value[1].sort((a, b) => a - b);
            goNext = true;
        } else {
            goNext = false;
        }
    }
    return arr;
}

var arr = [[1,34],[456,2,3,44,234],[4567,1,4,5,6],[34,78,23,1]];
sortArr(arr);

/*(4) [Array(2), Array(5), Array(5), Array(4)]
    0:(2) [1, 34]
    1:(5) [2, 3, 44, 234, 456]
    2:(5) [1, 4, 5, 6, 4567]
    3:(4) [1, 23, 34, 78]
    length:4
    __proto__:Array(0)
*/

Array.prototype.every()

測試一個數組內的所有元素是否都能通過某個指定函數的測試。它返回一個布爾值。

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

Array.prototype.fill()

用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。

語法

arr.fill(value[, start[, end]])

[1, 2, 3].fill(4);               // [4, 4, 4]
[1, 2, 3].fill(4, 1);            // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2);         // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1);         // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3);         // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2);       // [4, 2, 3]
[1, 2, 3].fill(4, NaN, NaN);     // [1, 2, 3]
[1, 2, 3].fill(4, 3, 5);         // [1, 2, 3]
Array(3).fill(4);                // [4, 4, 4]
[].fill.call({ length: 3 }, 4);  // {0: 4, 1: 4, 2: 4, length: 3}

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

Array.prototype.filter()

創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

Array.prototype.find()

返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。

Array.prototype.findIndex()

返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。

Array.prototype.flat() *

按照一個可指定的深度遞歸遍歷數組，將所有元素與遍歷到的子數組中的元素合併爲一個新數組返回。

用途

扁平化嵌套數組

var arr1 = [1, 2, [3, 4]];
arr1.flat(); 
// [1, 2, 3, 4]

var arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

var arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

//使用 Infinity 作爲深度，展開任意深度的嵌套數組
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

移除數組中的空項

var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

Array.prototype.flatMap()

首先使用映射函數映射每個元素，然後將結果壓縮成一個新數組

它與 map 和深度值1的 flat 幾乎相同，但 flatMap 通常在合併成一種方法的效率稍微高一些。

Map && flatMap

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

arr1.map(x => [x * 2]); 
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 等價於
arr1.reduce((acc, x) => acc.concat([x * 2]), []);
// [2, 4, 6, 8]

// 只會將 flatMap 中的函數返回的數組 “壓平” 一層
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

Array.prototype.forEach()

沒有辦法中止或者跳出 forEach() 循環，除了拋出一個異常。

若需要提前終止循環，可以使用：簡單循環

for…of 循環
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()

最常用，不贅述。

Array.prototype.includes()

判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。

Array.prototype.indexOf()

返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。

Array.prototype.join()

將一個數組（或一個類數組對象）的所有元素連接成一個字符串並返回這個字符串。如果數組只有一個項目，那麼將返回該項目而不使用分隔符。

Array.prototype.keys()

返回一個包含數組中每個索引鍵的Array Iterator對象。

var arr = ["a", , "c"];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); // ['0', '2']
console.log(denseKeys);  // [0, 1, 2]

Array.prototype.lastIndexOf()

返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最後一個的索引，如果不存在則返回 -1。從數組的後面向前查找，從 fromIndex 處開始。

Array.prototype.map()

創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數後返回的結果。

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值爲[1, 2, 3], numbers的值仍爲[1, 4, 9]

Array.prototype.pop()

從數組中刪除最後一個元素，並返回該元素的值。

該方法更改數組的長度

Array.prototype.push()

將一個或多個元素添加到數組的末尾，並返回該數組的新長度。

Array.prototype.reduce()

對數組中的每個元素執行一個自定義的reducer函數(升序執行)，將其結果彙總爲單個返回值。

用途

將二維數組轉化爲一維

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
 ( acc, cur ) => acc.concat(cur),
 []
);

計算數組中每個元素出現的次數

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }

按屬性對object分類

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// { 
//   20: [
//     { name: 'Max', age: 20 }, 
//     { name: 'Jane', age: 20 }
//   ], 
//   21: [{ name: 'Alice', age: 21 }] 
// }

數組去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current) => {
    if(init.length === 0 || init[init.length-1] !== current) {
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]

還有其他詳見官網

Array.prototype.reduceRight()

接受一個函數作爲累加器（accumulator）和數組的每個值（從右到左）將其減少爲單個值。

reduce 與 reduceRight 之間的區別

var a = ['1', '2', '3', '4', '5']; 
var left  = a.reduce(function(prev, cur)      { return prev + cur; }); 
var right = a.reduceRight(function(prev, cur) { return prev + cur; }); 

console.log(left);  // "12345"
console.log(right); // "54321"

Array.prototype.reverse()

顛倒數組中元素的位置，並返回該數組的引用。

該方法會改變原數組。

Array.prototype.shift()

從數組中刪除第一個元素，並返回該元素的值

此方法更改數組的長度。

Array.prototype.slice()

返回一個含有提取元素的新數組，一個由 begin和 end（不包括end）決定的原數組的淺拷貝

原始數組不會被改變。

Array.prototype.some()

測試是否至少有一個元素可以通過被提供的函數方法，該方法返回一個Boolean類型的值。

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

Array.prototype.sort()

用原地算法對數組的元素進行排序，並返回數組。

默認排序順序是根據字符串Unicode碼點。

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

對非 ASCII 字符排序

一些非英語語言的字符串需要使用 String.localeCompare。這個函數可以將函數排序到正確的順序

var items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort(function (a, b) {
  return a.localeCompare(b);
});

// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']

Array.prototype.splice()

通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。

此方法會改變原數組。

<!--從第 2 位開始刪除 0 個元素，插入“drum” 和 "guitar"-->
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(2, 0, 'drum', 'guitar');

// 運算後的 myFish: ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"]
// 被刪除的元素: [], 沒有元素被刪除

<!--從倒數第 2 位開始刪除 1 個元素-->
var myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];
var removed = myFish.splice(-2, 1);

// 運算後的 myFish: ["angel", "clown", "sturgeon"]
// 被刪除的元素: ["mandarin"]

Array.prototype.toLocaleString()

返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串，這些字符串將使用一個特定語言環境的字符串（例如一個逗號 “,”）隔開。

var prices = ['￥7', 500, 8123, 12];
prices.toLocaleString('ja-JP', { style: 'currency', currency: 'JPY' });

// "￥7,￥500,￥8,123,￥12"

詳情點擊。

Array.prototype.toString()

返回一個字符串，表示指定的數組及其元素

var array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
//"1,2,a,1a"

Array.prototype.unshift()

將一個或多個元素添加到數組的開頭，並返回該數組的新長度。

該方法修改原有數組

let arr = [4,5,6];
arr.unshift(1,2,3);
console.log(arr); // [1, 2, 3, 4, 5, 6]

Array.prototype.values()

返回一個新的 Array Iterator 對象，該對象包含數組每個索引的值

let arr = ['w', 'y', 'k', 'o', 'p'];
let eArr = arr.values();
// 您的瀏覽器必須支持 for..of 循環
// 以及 let —— 將變量作用域限定在 for 循環中
for (let letter of eArr) {
  console.log(letter);
}