??前言

數(shù)組是 JavaScript 以及多數(shù)編程其他編程語言的一種基礎(chǔ)數(shù)據(jù)類型。ES6 提供了許多新的數(shù)組方法，這篇文章將介紹其中一些常用的數(shù)組方法及其使用示例。

??Array.from()

Array.from() 方法從一個類似數(shù)組或可迭代對象中創(chuàng)建一個新的，淺拷貝的數(shù)組實例。例如，將字符串轉(zhuǎn)換為字符數(shù)組。

const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

??Array.of()

Array.of() 方法創(chuàng)建一個具有可變數(shù)量參數(shù)的新數(shù)組實例，而不考慮參數(shù)的數(shù)量或類型。

const arr1 = Array.of(1, 2, 3, 4);
console.log(arr1); // [1, 2, 3, 4]
const arr2 = Array.of(10);
console.log(arr2); // [10]

??Array.find()

Array.find() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefined 。

const arr = [1, 2, 3, 4, 5];
const result = arr.find((element) => element > 3);
console.log(result); // 4

??Array.findIndex()

Array.findIndex() 方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的索引。否則返回 -1 。

const arr = [1, 2, 3, 4, 5];
const index = arr.findIndex((element) => element > 3);
console.log(index); // 3

??Array.includes()

Array.includes() 方法判斷一個數(shù)組是否包含某個指定的元素，根據(jù)情況，如果包含則返回 true ，否則返回 false 。

const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true
console.log(arr.includes(6)); // false

??Array.flat()

Array.flat() 方法創(chuàng)建一個新數(shù)組，其中所有子數(shù)組元素遞歸地連接到指定的深度。

const arr = [1, [2, [3, [4]]]];
console.log(arr.flat(1)); // [1, 2, [3, [4]]]
console.log(arr.flat(2)); // [1, 2, 3, [4]]
console.log(arr.flat(3)); // [1, 2, 3, 4]
console.log(arr.flat(4)); // [1, 2, 3, 4]

??Array.flatMap()

Array.flatMap() 方法首先使用映射函數(shù)映射每個元素，然后將結(jié)果壓縮成一個新數(shù)組?？梢酝瑫r實現(xiàn) map 和 flat 兩個操作。

調(diào)用 a.flatMap() 相當(dāng)于（但是效率遠(yuǎn)高于）a.map(f).flat() 。

const arr = [1, 2, 3];
const result = arr.flatMap(x => [x, x * 2]);
console.log(result); // [1, 2, 2, 4, 3, 6]

const arr = [-1, -2, 1, 2];
const result = arr.flatMap(x => x < 0 ? [] : Math.sqrt(x));
console.log(result); // [1, 1.4142135623730951]

??Array.every()

Array.every() 方法測試一個數(shù)組內(nèi)的所有元素是否都能通過某個指定函數(shù)的測試。如果函數(shù)對所有元素都返回 true，則該方法返回 true ，否則返回 false 。

let a = [1, 2, 3, 4, 5]
a.every(x => x < 10) // true 所有值小于10
a.every(x => x % 2 === 0) // false 并非所有值都為偶數(shù)

??Array.some()

Array.some() 方法測試一個數(shù)組內(nèi)的所有元素是否至少有一個能通過某個指定函數(shù)的測試。如果函數(shù)對任一元素返回 true，則該方法返回 true，否則返回 false。

let a = [1, 2, 3, 4, 5]
a.some(x => x % 2 === 0) // true a包含偶數(shù)
a.some(isNaN) // false a沒有非數(shù)值

??Array.reduce()

Array.reduce() 方法對數(shù)組中的每個元素執(zhí)行一個提供的函數(shù)，將其結(jié)果匯總為單個返回值。

const arr = [1, 2, 3, 4, 5];
const result = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(result); // 15

??Array.reduceRight()

reduceRight() 與 reduce() 類似，只不過是從高索引向低索引（從右到左）處理數(shù)組，而不是從低到高。

反正就是從數(shù)組的末尾開始執(zhí)行。它對數(shù)組中的每個元素（從右到左）應(yīng)用一個函數(shù)，將其結(jié)果匯總成單個值并返回。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduceRight((accumulator, currentValue) => {
  return accumulator + currentValue;
});
console.log(sum); // 15

??Array.sort()

Array.sort() 方法對數(shù)組元素進(jìn)行排序，默認(rèn)情況下按照字符串排序。

const arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort();
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

若要按照數(shù)值大小排序，需要傳入一個比較函數(shù)。

const arr = [3, 1, 4, 1, 5, 9, 2, 6];
arr.sort((a, b) => a - b);
console.log(arr); // [1, 1, 2, 3, 4, 5, 6, 9]

??Array.reverse()

Array.reverse() 方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組的引用。

const arr = [1, 2, 3, 4, 5];
arr.reverse();
console.log(arr); // [5, 4, 3, 2, 1]

??Array.fill()

Array.fill() 方法填充一個數(shù)組中從起始索引到終止索引內(nèi)的全部元素，使用一個靜態(tài)值?？梢杂糜诔跏蓟粋€固定值的數(shù)組。

const arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3);
console.log(arr); // [1, 0, 0, 4, 5]

??Array.slice()

Array.slice() 方法返回一個新數(shù)組，包含從起始索引到終止索引（不包括終止索引）內(nèi)的所有元素。

const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // [2, 3, 4]

??Array.splice()

Array.splice() 方法通過刪除或替換現(xiàn)有元素或者在指定位置插入新元素來修改數(shù)組。（注意 Array.splice() 和 Array.slice() 不用混淆了）

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1); // 從第2個位置開始刪除1個元素
console.log(arr); // [1, 2, 4, 5]

??Array.copyWithin()

Array.copyWithin() 方法把數(shù)組切片復(fù)制到數(shù)組中的新位置，它會就地修改數(shù)組并返回修改后的數(shù)組，但不會改變數(shù)組的長度。該方法接受的參數(shù)：

• target（必需）：從該位置開始替換數(shù)據(jù)。如果為負(fù)值，則表示倒數(shù)第幾個位置。如果 target 大于等于數(shù)組長度，則什么也不發(fā)生。
• start（可選）：從該位置開始讀取數(shù)據(jù)，默認(rèn)為 0。如果為負(fù)值，則表示倒數(shù)第幾個位置。如果 start 被忽略，copyWithin() 將會從第一個元素開始復(fù)制。如果 start 大于等于數(shù)組長度，則什么也不發(fā)生。
• end（可選）：到該位置前停止讀取數(shù)據(jù)，默認(rèn)等于數(shù)組長度。如果為負(fù)值，則表示倒數(shù)第幾個位置。

const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, -3);
console.log(arr); // [3, 4, 5, 4, 5]

??Array.forEach()

Array.forEach() 方法對數(shù)組的每個元素執(zhí)行一次提供的函數(shù)，函數(shù)接受三個參數(shù)：當(dāng)前元素，當(dāng)前索引和數(shù)組本身。該方法沒有返回值。

const arr = [1, 2, 3, 4, 5];
arr.forEach((element, index) => {
  console.log(`arr[${index}] = ${element}`);
});
// 輸出：
// arr[0] = 1
// arr[1] = 2
// arr[2] = 3
// arr[3] = 4
// arr[4] = 5

??Array.map()

Array.map() 方法創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素都調(diào)用一個提供的函數(shù)后返回的結(jié)果。

const arr = [1, 2, 3, 4, 5];
const mappedArr = arr.map((element) => element * 2);
console.log(mappedArr); // [2, 4, 6, 8, 10]

??Array.filter()

Array.filter() 方法創(chuàng)建一個新數(shù)組，其中包含所有通過指定函數(shù)測試的元素。測試函數(shù)接受三個參數(shù)：當(dāng)前元素，當(dāng)前索引和數(shù)組本身。

const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter((element) => element > 3);
console.log(filteredArr); // [4, 5]

等等…

??最后

以上就是常用的 ES6 數(shù)組方法及其使用示例，這些方法為我們處理數(shù)組提供了非常便捷的方式，使用它們可以讓我們更加高效地編寫代碼。
文章來源地址http://www.zghlxwxcb.cn/news/detail-495325.html

到了這里，關(guān)于JavaScript筆記——快速了解 ES6 新增數(shù)組方法，開箱即用（含案例）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！