摘要：示例使用作為深度，展開任意深度的嵌套數(shù)組會移除數(shù)組中的空項首先使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。注意對象數(shù)組不能使用方法來檢測。也就是返回值返回一個新的對象，該對象包含數(shù)組中每個索引的鍵值對。

寫久了業(yè)務(wù)代碼的我，已經(jīng)要被社會拋棄了。今天回過頭去鞏固基礎(chǔ)知識，發(fā)現(xiàn)有很多自己業(yè)務(wù)中不經(jīng)常用，或者說是不知道那個方法，導(dǎo)致自己重寫一個方法去實現(xiàn)。關(guān)于Array對象的方法你是否只用concat、join、pop、push、shift、unshift、reverse、sort、slice、splice、toString、indexOf、find等？接下來我們就一起回顧一下那些我們用的少或者沒有用過的Array對象方法！

從一個類似數(shù)組或可迭代對象中創(chuàng)建一個新的數(shù)組實例

/**
 * @description - 從一個類似數(shù)組或可迭代對象中創(chuàng)建一個新的數(shù)組實例(偽數(shù)組對象:擁有一個 length 屬性和若干索引屬性的任意對象;可迭代對象:可以獲取對象中的元素,如 Map和 Set 等)
 * @param arrayLike - 想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對象或可迭代對象.
 * @param mapFn - 可選參數(shù)，如果指定了該參數(shù)，新數(shù)組中的每個元素會執(zhí)行該回調(diào)函數(shù).
 * @param thisArg - 可選參數(shù)，執(zhí)行回調(diào)函數(shù) mapFn 時 this 對象.
 * @return { Array } - 一個新的數(shù)組實例
 */
Array.from(arrayLike[, mapFn[, thisArg]])

// 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中使用箭頭函數(shù)
Array.from([1, 2, 3], x => x + x);  
// [2, 4, 6]

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

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

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

淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個位置，并返回它，不會改變原數(shù)組的長度。

/**
 * @description - 淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個位置，并返回它，不會改變原數(shù)組的長度。
 * @param target - 0 為基底的索引，復(fù)制序列到該位置。如果 target 在 start 之后，復(fù)制的序列將被修改以符合 arr.length.
 * @param start - 0 為基底的索引，開始復(fù)制元素的起始位置。如果是負(fù)數(shù)，start 將從末尾開始計算。如果 start 被忽略，copyWithin 將會從0開始復(fù)制.
 * @param end - 0 為基底的索引，開始復(fù)制元素的結(jié)束位置。copyWithin 將會拷貝到該位置，但不包括 end 這個位置的元素。如果是負(fù)數(shù)， end 將從末尾開始計算.
 * @return { array } - 改變后的數(shù)組
 */
arr.copyWithin(target[, start[, end]])

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]

測試是否至少有一個元素通過由提供的函數(shù)實現(xiàn)的測試。

/**
 * @description - 測試數(shù)組的元素是否至少一個通過了指定函數(shù)的測試。
 * @param callback - 用來測試每個元素的函數(shù)。
 * @param thisArg - 執(zhí)行 callback 時使用的 this 值。
 * @return { Boolean } - 是否通過測試。
 */
arr.some(callback(element[, index[, array]])[, thisArg])

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

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

測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。

/**
 * @description - 測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。
 * @param callback - 用來測試每個元素的函數(shù)。
 * @param thisArg - 執(zhí)行 callback 時使用的 this 值。
 * @return { Boolean } - 是否通過測試。
 */
arr.every(callback[, thisArg])

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

會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。

/**
 * @description - 會按照一個可指定的深度遞歸遍歷數(shù)組，并將所有元素與遍歷到的子數(shù)組中的元素合并為一個新數(shù)組返回。
 * @param depth - 指定要提取嵌套數(shù)組的結(jié)構(gòu)深度, 默認(rèn)值為 1。
 * @return { array } - 一個包含將數(shù)組與子數(shù)組中所有元素的新數(shù)組。
 */
arr.flat(depth)

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 作為深度，展開任意深度的嵌套數(shù)組
arr3.flat(Infinity); 
// [1, 2, 3, 4, 5, 6]

// 會移除數(shù)組中的空項
var arr4 = [1, 2, , 4, 5];
arr4.flat();
// [1, 2, 4, 5]

首先使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 通常在合并成一種方法的效率稍微高一些。

/**
 * @description - 使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組。
 * @param callback - 可以生成一個新數(shù)組中的元素的函數(shù)，可以傳入三個參數(shù)：
 *         @param currentValue - 當(dāng)前正在數(shù)組中處理的元素。
 *         @param index - 可選的。數(shù)組中正在處理的當(dāng)前元素的索引。
 *        @param array - 可選的。被調(diào)用的 map 數(shù)組。
 * @param thisArg - 可選的。執(zhí)行 callback 函數(shù)時 使用的this 值。
 * @return { array } - 一個新的數(shù)組，其中每個元素都是回調(diào)函數(shù)的結(jié)果，并且結(jié)構(gòu)深度 depth 值為1。
 */
arr.flatMap(function callback(currentValue[, index[, array]]) {
    // 返回新數(shù)組的元素
}[, thisArg])

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

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

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

用來判斷一個數(shù)組是否包含一個指定的值，根據(jù)情況，如果包含則返回 true，否則返回false。
注意：對象數(shù)組不能使用includes方法來檢測。

/**
 * @description - 用來判斷一個數(shù)組是否包含一個指定的值。
 * @param valueToFind - 需要查找的元素值。
 * @param fromIndex - 可選的。從fromIndex 索引處開始查找 valueToFind。如果為負(fù)值，則按升序從 array.length + fromIndex 的索引開始搜 （即使從末尾開始往前跳 fromIndex 的絕對值個索引，然后往后搜尋）。默認(rèn)為 0。
 * @return { Boolean } - 是否包含。
 */
arr.includes(valueToFind[, fromIndex])

[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

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

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

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

對數(shù)組中的每個元素執(zhí)行一個由您提供的reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個返回值。

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

// 數(shù)組中最大值
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

這里我們可以看看累加的運行過程：

如果我們將 initialValue 這個參數(shù)也傳入進(jìn)去，我們再看一下效果：

var arr = [10, 0, 100, 99, 48, 101];

// 累加
var reducer2 = (x, y) => x + y;
// initialValue,作為第一次調(diào)用 callback 函數(shù)時的第一個參數(shù)的值。
// 也就是說第一次調(diào)用 callback 的時候 x 的值就是10了。
arr.reduce(reducer2, 10); // 368

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

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

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"]

注：以上大部分都是在文檔里面的，只是個人平時使用筆記少或者沒用過的，然后統(tǒng)一做個記錄。貌似還都是ES6的，都9102年了，趕緊用起來！意思就是抄襲了一下文檔，大佬輕噴！

我自己運營的公眾號，記錄我自己的成長！

公眾號：前端曰

公眾號ID：js-say

ps：是(yue)不是(ri)