ES6数组新增方法知识点有哪些

ES6数组新增方法知识点有哪些

ES6（ECMAScript 2015）是JavaScript语言的一次重大更新，引入了许多新特性，其中数组的扩展是开发者们非常关注的部分。ES6为数组新增了多个实用的方法，这些方法极大地简化了数组的操作，提升了开发效率。本文将详细介绍ES6中数组新增的方法及其使用场景。

1. Array.from()

Array.from() 方法用于将两类对象转换为真正的数组：类似数组的对象（array-like object）和可遍历的对象（iterable object）。

1.1 语法

Array.from(arrayLike[, mapFn[, thisArg]]) 

• arrayLike: 想要转换成数组的类数组对象或可迭代对象。
• mapFn (可选): 映射函数，用于对每个元素进行处理。
• thisArg (可选): 执行 mapFn 时的 this 值。

1.2 示例

// 将类数组对象转换为数组 let arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 }; let arr = Array.from(arrayLike); // ['a', 'b', 'c'] // 使用映射函数 let arr2 = Array.from([1, 2, 3], x => x * 2); // [2, 4, 6] 

1.3 应用场景

• 将 arguments 对象转换为数组。
• 将 NodeList 或 HTMLCollection 转换为数组。
• 将字符串转换为字符数组。

2. Array.of()

Array.of() 方法用于将一组值转换为数组。

2.1 语法

Array.of(element0[, element1[, ...[, elementN]]]) 

2.2 示例

let arr = Array.of(1, 2, 3); // [1, 2, 3] let arr2 = Array.of(7); // [7] 

2.3 应用场景

• 解决 new Array() 构造函数在传入单个数字参数时的歧义问题。

// new Array(3) 会创建一个长度为3的空数组 let arr = new Array(3); // [empty × 3] // Array.of(3) 会创建一个包含单个元素3的数组 let arr2 = Array.of(3); // [3] 

3. Array.prototype.copyWithin()

copyWithin() 方法用于将数组的一部分复制到同一数组中的另一个位置，并返回该数组，而不修改其大小。

3.1 语法

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

• target: 复制到的目标位置（索引）。
• start (可选): 开始复制的起始位置（索引），默认为0。
• end (可选): 结束复制的结束位置（索引），默认为数组长度。

3.2 示例

let arr = [1, 2, 3, 4, 5]; arr.copyWithin(0, 3, 4); // [4, 2, 3, 4, 5] 

3.3 应用场景

• 在数组内部进行数据复制和移动。

4. Array.prototype.find()

find() 方法用于查找数组中第一个满足条件的元素，并返回该元素。如果没有找到符合条件的元素，则返回 undefined。

4.1 语法

arr.find(callback[, thisArg]) 

• callback: 用于测试每个元素的函数，接受三个参数：
  • element: 当前元素。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 find 的数组。
• thisArg (可选): 执行 callback 时的 this 值。

4.2 示例

let arr = [1, 2, 3, 4, 5]; let found = arr.find(element => element > 3); // 4 

4.3 应用场景

• 查找数组中第一个满足特定条件的元素。

5. Array.prototype.findIndex()

findIndex() 方法用于查找数组中第一个满足条件的元素的索引，并返回该索引。如果没有找到符合条件的元素，则返回 -1。

5.1 语法

arr.findIndex(callback[, thisArg]) 

• callback: 用于测试每个元素的函数，接受三个参数：
  • element: 当前元素。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 findIndex 的数组。
• thisArg (可选): 执行 callback 时的 this 值。

5.2 示例

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

5.3 应用场景

• 查找数组中第一个满足特定条件的元素的索引。

6. Array.prototype.fill()

fill() 方法用于将数组的所有元素填充为指定的值。

6.1 语法

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

• value: 用来填充数组的值。
• start (可选): 开始填充的起始位置（索引），默认为0。
• end (可选): 结束填充的结束位置（索引），默认为数组长度。

6.2 示例

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

6.3 应用场景

• 初始化数组。
• 重置数组中的部分元素。

7. Array.prototype.includes()

includes() 方法用于判断数组是否包含某个特定的值，返回 true 或 false。

7.1 语法

arr.includes(valueToFind[, fromIndex]) 

• valueToFind: 需要查找的值。
• fromIndex (可选): 开始查找的起始位置（索引），默认为0。

7.2 示例

let arr = [1, 2, 3, 4, 5]; let hasThree = arr.includes(3); // true 

7.3 应用场景

• 判断数组中是否包含某个值。

8. Array.prototype.flat()

flat() 方法用于将嵌套的数组“拉平”，变成一维数组。

8.1 语法

arr.flat([depth]) 

• depth (可选): 指定要提取嵌套数组的结构深度，默认值为1。

8.2 示例

let arr = [1, [2, [3, [4]]]]; let flatArr = arr.flat(2); // [1, 2, 3, [4]] 

8.3 应用场景

• 处理嵌套数组，将其扁平化。

9. Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

9.1 语法

arr.flatMap(callback[, thisArg]) 

• callback: 用于映射每个元素的函数，接受三个参数：
  • element: 当前元素。
  • index (可选): 当前元素的索引。
  • array (可选): 调用 flatMap 的数组。
• thisArg (可选): 执行 callback 时的 this 值。

9.2 示例

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

9.3 应用场景

• 在映射过程中同时进行扁平化操作。

10. Array.prototype.entries()

entries() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键值对。

10.1 语法

arr.entries() 

10.2 示例

let arr = ['a', 'b', 'c']; let iterator = arr.entries(); for (let [index, value] of iterator) { console.log(index, value); } // 0 'a' // 1 'b' // 2 'c' 

10.3 应用场景

• 遍历数组的索引和值。

11. Array.prototype.keys()

keys() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键。

11.1 语法

arr.keys() 

11.2 示例

let arr = ['a', 'b', 'c']; let iterator = arr.keys(); for (let key of iterator) { console.log(key); } // 0 // 1 // 2 

11.3 应用场景

• 遍历数组的索引。

12. Array.prototype.values()

values() 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的值。

12.1 语法

arr.values() 

12.2 示例

let arr = ['a', 'b', 'c']; let iterator = arr.values(); for (let value of iterator) { console.log(value); } // 'a' // 'b' // 'c' 

12.3 应用场景

• 遍历数组的值。

13. Array.prototype[Symbol.iterator]

Symbol.iterator 是一个内置的符号，用于定义对象的默认迭代器。数组的 Symbol.iterator 方法返回一个迭代器对象，该对象可以用于遍历数组。

13.1 语法

arr[Symbol.iterator]() 

13.2 示例

let arr = ['a', 'b', 'c']; let iterator = arr[Symbol.iterator](); for (let value of iterator) { console.log(value); } // 'a' // 'b' // 'c' 

13.3 应用场景

• 自定义数组的迭代行为。

14. Array.prototype[Symbol.unscopables]

Symbol.unscopables 是一个内置的符号，用于定义对象的哪些属性在 with 语句中不可用。

14.1 语法

arr[Symbol.unscopables] 

14.2 示例

let arr = [1, 2, 3]; console.log(arr[Symbol.unscopables]); // { copyWithin: true, entries: true, fill: true, find: true, findIndex: true, flat: true, flatMap: true, includes: true, keys: true, values: true } 

14.3 应用场景

• 控制 with 语句中的属性可见性。

15. Array.prototype[Symbol.species]

Symbol.species 是一个内置的符号，用于定义对象的构造函数，该构造函数用于创建派生对象。

15.1 语法

arr[Symbol.species] 

15.2 示例

class MyArray extends Array { static get [Symbol.species]() { return Array; } } let myArr = new MyArray(1, 2, 3); let mapped = myArr.map(x => x * 2); console.log(mapped instanceof MyArray); // false console.log(mapped instanceof Array); // true 

15.3 应用场景

• 控制派生对象的构造函数。

16. Array.prototype[Symbol.toPrimitive]

Symbol.toPrimitive 是一个内置的符号，用于定义对象的原始值转换行为。

16.1 语法

arr[Symbol.toPrimitive](hint) 

• hint: 表示期望的转换类型，可以是 "number"、"string" 或 "default"。

16.2 示例

let arr = [1, 2, 3]; arr[Symbol.toPrimitive] = function(hint) { if (hint === 'number') { return this.reduce((a, b) => a + b, 0); } if (hint === 'string') { return this.join(', '); } return this; }; console.log(+arr); // 6 console.log(`${arr}`); // '1, 2, 3' 

16.3 应用场景

• 自定义数组的原始值转换行为。

17. Array.prototype[Symbol.toStringTag]

Symbol.toStringTag 是一个内置的符号，用于定义对象的默认字符串描述。

17.1 语法

arr[Symbol.toStringTag] 

17.2 示例

let arr = [1, 2, 3]; console.log(arr.toString()); // '1,2,3' console.log(arr[Symbol.toStringTag]); // 'Array' 

17.3 应用场景

• 自定义数组的字符串描述。

18. Array.prototype[Symbol.isConcatSpreadable]

Symbol.isConcatSpreadable 是一个内置的符号，用于定义对象在 concat 方法中是否应该展开。

18.1 语法

arr[Symbol.isConcatSpreadable] 

18.2 示例

let arr = [1, 2, 3]; arr[Symbol.isConcatSpreadable] = false; let newArr = [].concat(arr); // [[1, 2, 3]] 

18.3 应用场景

• 控制数组在 concat 方法中的展开行为。

19. Array.prototype[Symbol.match]

Symbol.match 是一个内置的符号，用于定义对象的 match 方法。

19.1 语法

arr[Symbol.match](string) 

• string: 要匹配的字符串。

19.2 示例

let arr = [1, 2, 3]; arr[Symbol.match] = function(string) { return string.split(',').map(Number); }; console.log('1,2,3'.match(arr)); // [1, 2, 3] 

19.3 应用场景

• 自定义数组的 match 方法。

20. Array.prototype[Symbol.replace]

Symbol.replace 是一个内置的符号，用于定义对象的 replace 方法。

20.1 语法

arr[Symbol.replace](string, replacement) 

• string: 要替换的字符串。
• replacement: 替换的内容。

20.2 示例

let arr = [1, 2, 3]; arr[Symbol.replace] = function(string, replacement) { return string.split(',').map(Number).join(replacement); }; console.log('1,2,3'.replace(arr, '-')); // '1-2-3' 

20.3 应用场景

• 自定义数组的 replace 方法。

21. Array.prototype[Symbol.search]

Symbol.search 是一个内置的符号，用于定义对象的 search 方法。

21.1 语法

arr[Symbol.search](string) 

• string: 要搜索的字符串。

21.2 示例

let arr = [1, 2, 3]; arr[Symbol.search] = function(string) { return string.split(',').indexOf('2'); }; console.log('1,2,3'.search(arr)); // 1 

21.3 应用场景

• 自定义数组的 search 方法。

22. Array.prototype[Symbol.split]

Symbol.split 是一个内置的符号，用于定义对象的 split 方法。

22.1 语法

arr[Symbol.split](string, limit) 

• string: 要分割的字符串。
• limit (可选): 分割的最大次数。

22.2 示例

let arr = [1, 2, 3]; arr[Symbol.split] = function(string, limit) { return string.split(',').slice(0, limit); }; console.log('1,2,3'.split(arr, 2)); // ['1', '2'] 

22.3 应用场景

• 自定义数组的 split 方法。

23. Array.prototype[Symbol.toPrimitive]

Symbol.toPrimitive 是一个内置的符号，用于定义对象的原始值转换行为。

23.1 语法

arr[Symbol.toPrimitive](hint) 

• hint: 表示期望的转换类型，可以是 "number"、"string" 或 "default"。

23.2 示例

let arr = [1, 2, 3]; arr[Symbol.toPrimitive] = function(hint) { if (hint === 'number') { return this.reduce((a, b) => a + b, 0); } if (hint === 'string') { return this.join(', '); } return this; }; console.log(+arr); // 6 console.log(`${arr}`); // '1, 2, 3' 

23.3 应用场景

• 自定义数组的原始值转换行为。

24. Array.prototype[Symbol.toStringTag]

Symbol.toStringTag 是一个内置的符号，用于定义对象的默认字符串描述。

24.1 语法

arr[Symbol.toStringTag] 

24.2 示例

let arr = [1, 2, 3]; console.log(arr.toString()); // '1,2,3' console.log(arr[Symbol.toStringTag]); // 'Array' 

24.3 应用场景

• 自定义数组的字符串描述。

25. Array.prototype[Symbol.unscopables]

Symbol.unscopables 是一个内置的符号，用于定义对象的