摘要： 用原生的方法多好啊。
- 原文：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