9012 年了，Array 數組的方法趕忙用起來！

摘要： 用原生的方法多好啊。

• 原文：9012 年了，Array 數組的方法趕忙用起來！
• 做者：拾貳

Fundebug經受權轉載，版權歸原做者全部。

前言

寫久了業務代碼的我，已經要被社會拋棄了。今天回過頭去鞏固基礎知識，發現有不少本身業務中不常常用，或者說是不知道那個方法，致使本身重寫一個方法去實現。關於 Array 對象的方法你是否只用concat、join、pop、push、shift、unshift、reverse、sort、slice、splice、toString、indexOf、find等？接下來咱們就一塊兒回顧一下那些咱們用的少或者沒有用過的 Array 對象方法！

1. Array.from()

從一個相似數組或可迭代對象中建立一個新的數組實例

1.1 語法

/** * @description - 從一個相似數組或可迭代對象中建立一個新的數組實例(僞數組對象:擁有一個 length 屬性和若干索引屬性的任意對象;可迭代對象:能夠獲取對象中的元素,如 Map和 Set 等) * @param arrayLike - 想要轉換成數組的僞數組對象或可迭代對象. * @param mapFn - 可選參數，若是指定了該參數，新數組中的每一個元素會執行該回調函數. * @param thisArg - 可選參數，執行回調函數 mapFn 時 this 對象. * @return { Array } - 一個新的數組實例 */
Array.from(arrayLike[, mapFn[, thisArg]])
複製代碼

1.2 示例

// Array from a String
Array.from('foo');
// ["f", "o", "o"]

// Array from a Set
let s = new Set(['foo', window]);
Array.from(s)
// ["foo", window]

// Array from a Map
let m = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(m);
// [[1, 2], [2, 4], [4, 8]]

// Array from an Array-like object (arguments)
function f() {
  return Array.from(arguments);
}
f(1, 2, 3);
// [1, 2, 3]

// 在Array.from中使用箭頭函數
Array.from([1, 2, 3], x => x + x);
// [2, 4, 6]

// 僞數組
Array.from({length: 5});
// [undefined, undefined, undefined, undefined, undefined]
Array.from({length: 5}, (v, i) => i);
// [0, 1, 2, 3, 4]

// 改變回調函數 mapFn 時 this 對象
Array.from({[1, 2, 3], function(){console.log(this)});
// 瀏覽器環境下是三次 Window對象

var obj ={name: 'obj'}
Array.from({[1, 2, 3], function(){console.log(this)}, obj);
// 三次 obj 對象
複製代碼

2. Array.prototype.copyWithin()

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

2.1 語法

/** * @description - 淺複製數組的一部分到同一數組中的另外一個位置，並返回它，不會改變原數組的長度。 * @param target - 0 爲基底的索引，複製序列到該位置。若是 target 在 start 以後，複製的序列將被修改以符合 arr.length. * @param start - 0 爲基底的索引，開始複製元素的起始位置。若是是負數，start 將從末尾開始計算。若是 start 被忽略，copyWithin 將會從0開始複製. * @param end - 0 爲基底的索引，開始複製元素的結束位置。copyWithin 將會拷貝到該位置，但不包括 end 這個位置的元素。若是是負數， end 將從末尾開始計算. * @return { array } - 改變後的數組 */
arr.copyWithin(target[, start[, end]])
複製代碼

2.2 示例

let numbers = [1, 2, 3, 4, 5];

numbers.copyWithin(-2);
// [1, 2, 3, 1, 2]

numbers.copyWithin(0, 3);
// [4, 5, 3, 4, 5]

numbers.copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

numbers.copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

[].copyWithin.call({ length: 5, 3: 1 }, 0, 3);
// {0: 1, 3: 1, length: 5}

// ES2015 Typed Arrays are subclasses of Array
var i32a = new Int32Array([1, 2, 3, 4, 5]);

i32a.copyWithin(0, 2);
// Int32Array [3, 4, 5, 4, 5]

// On platforms that are not yet ES2015 compliant:
[].copyWithin.call(new Int32Array([1, 2, 3, 4, 5]), 0, 3, 4);
// Int32Array [4, 2, 3, 4, 5]
複製代碼

3. Array.prototype.some()

測試是否至少有一個元素經過由提供的函數實現的測試。

3.1 語法

/** * @description - 測試數組的元素是否至少一個經過了指定函數的測試。 * @param callback - 用來測試每一個元素的函數。 * @param thisArg - 執行 callback 時使用的 this 值。 * @return { Boolean } - 是否經過測試。 */
arr.every(callback[, thisArg])
複製代碼

3.2 示例

function isBiggerThan10(element, index, array) {
    return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10); // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true
複製代碼

4. Array.prototype.every()

測試數組的全部元素是否都經過了指定函數的測試。

4.1 語法

/** * @description - 測試數組的全部元素是否都經過了指定函數的測試。 * @param callback - 用來測試每一個元素的函數。 * @param thisArg - 執行 callback 時使用的 this 值。 * @return { Boolean } - 是否經過測試。 */
arr.every(callback[, thisArg])
複製代碼

4.2 示例

function isBigEnough(element, index, array) {
    return element >= 10;
}
var passed = [12, 5, 8, 130, 44].every(isBigEnough);
// passed is false
passed = [12, 54, 18, 130, 44].every(isBigEnough);
// passed is true
複製代碼

5. Array.prototype.flat()

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

5.1 語法

/** * @description - 會按照一個可指定的深度遞歸遍歷數組，並將全部元素與遍歷到的子數組中的元素合併爲一個新數組返回。 * @param depth - 指定要提取嵌套數組的結構深度, 默認值爲 1。 * @return { array } - 一個包含將數組與子數組中全部元素的新數組。 */
arr.flat(depth);

複製代碼

5.2 示例

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]

複製代碼

6. Array.prototype.flatMap()

首先使用映射函數映射每一個元素，而後將結果壓縮成一個新數組。它與 map 和 深度值 1 的 flat 幾乎相同，但 flatMap 一般在合併成一種方法的效率稍微高一些。

6.1 語法

/** * @description - 使用映射函數映射每一個元素，而後將結果壓縮成一個新數組。 * @param callback - 能夠生成一個新數組中的元素的函數，能夠傳入三個參數： * @param currentValue - 當前正在數組中處理的元素。 * @param index - 可選的。數組中正在處理的當前元素的索引。 * @param array - 可選的。被調用的 map 數組。 * @param thisArg - 可選的。執行 callback 函數時 使用的this 值。 * @return { array } - 一個新的數組，其中每一個元素都是回調函數的結果，而且結構深度 depth 值爲1。 */
arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新數組的元素
}[, thisArg])

複製代碼

6.2 示例

let arr = ["今每天氣不錯", "", "早上好"];

arr.map(s => s.split(""));
// [["今", "天", "天", "氣", "不", "錯"],[""],["早", "上", "好"]]

arr.flatMap(s => s.split(""));
// ["今", "天", "天", "氣", "不", "錯", "", "早", "上", "好"]

複製代碼

7. Array.prototype.includes()

用來判斷一個數組是否包含一個指定的值，根據狀況，若是包含則返回 true，不然返回 false。

注意：對象數組不能使用 includes 方法來檢測。

7.1 語法

/** * @description - 用來判斷一個數組是否包含一個指定的值。 * @param valueToFind - 須要查找的元素值。 * @param fromIndex - 可選的。從fromIndex 索引處開始查找 valueToFind。若是爲負值，則按升序從 array.length + fromIndex 的索引開始搜 （即便從末尾開始往前跳 fromIndex 的絕對值個索引，而後日後搜尋）。默認爲 0。 * @return { Boolean } - 是否包含。 */
arr.includes(valueToFind[, fromIndex])

複製代碼

7.2 示例

[1, 2, 3].includes(2); // true
[1, 2, 3].includes(4); // false
[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

複製代碼

8. Array.prototype.lastIndexOf()

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

8.1 語法

/** * @description - 返回指定元素在數組中的最後一個的索引。 * @param searchElement - 被查找的元素。 * @param fromIndex - 可選的。今後位置開始逆向查找。 * @return { Boolean } - 是否包含。 */
arr.lastIndexOf(searchElement[, fromIndex = arr.length - 1])

複製代碼

8.2 示例

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2);
// index is 3
index = array.lastIndexOf(7);
// index is -1
index = array.lastIndexOf(2, 3);
// index is 3
index = array.lastIndexOf(2, 2);
// index is 0
index = array.lastIndexOf(2, -2);
// index is 0
index = array.lastIndexOf(2, -1);
// index is 3

複製代碼

9. Array.prototype.reduce()

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

9.1 語法

/** * @description - 對數組中的每一個元素執行一個由您提供的**reducer**函數(升序執行)，將其結果彙總爲單個返回值。 * @param callback - 執行數組中每一個值的函數，包含四個參數： * @param accumulator - 累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue。 * @param currentValue - 當前正在數組中處理的元素。 * @param index - 可選的。數組中正在處理的當前元素的索引。 * @param array - 可選的。被調用的 map 數組。 * @param initialValue - 可選的。做爲第一次調用 callback函數時的第一個參數的值。 若是沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。 * @return - 函數累計處理的結果。 */
arr.reduce(callback[, initialValue])

複製代碼

9.2 示例

// 數組中最大值
var arr = [10, 0, 100, 99, 48, 101];
var reducer = (x, y) => Math.max(x, y);
arr.reduce(reducer); // 101

// 累加
var reducer2 = (x, y) => x + y;
arr.reduce(reducer2); // 358

複製代碼

10. Array.prototype.entries()

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

10.1 語法

/** * @description - 返回一個新的Array Iterator對象，該對象包含數組中每一個索引的鍵/值對。 * @return { Array Iterator } - 一個新的 Array 迭代器對象。 */
arr.entries();

複製代碼

10.2 示例

var arr = ["a", "b", "c"];
var iterator = arr.entries();
console.log(iterator);
/* Array Iterator {} __proto__:Array Iterator next:ƒ next() Symbol(Symbol.toStringTag):"Array Iterator" __proto__:Object */

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

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

複製代碼

注：以上大部分都是在文檔裏面的，只是我的平時使用筆記少或者沒用過的，而後統一作個記錄。貌似還都是 ES6 的，都 9012 年了，趕忙用起來！意思就是抄襲了一下文檔，大佬輕噴！

小廣告

我本身運營的公衆號，記錄我本身的成長！

公衆號：前端曰

公衆號 ID：js-say