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

发布时间：2022-08-08 11:33:45 作者：iii
来源：亿速云阅读：126

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 是一个内置的符号，用于定义对象的

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

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

1. Array.from()

1.1 语法

1.2 示例

1.3 应用场景

2. Array.of()

2.1 语法

2.2 示例

2.3 应用场景

3. Array.prototype.copyWithin()

3.1 语法

3.2 示例

3.3 应用场景

4. Array.prototype.find()

4.1 语法

4.2 示例

4.3 应用场景

5. Array.prototype.findIndex()

5.1 语法

5.2 示例

5.3 应用场景

6. Array.prototype.fill()

6.1 语法

6.2 示例

6.3 应用场景

7. Array.prototype.includes()

7.1 语法

7.2 示例

7.3 应用场景

8. Array.prototype.flat()

8.1 语法

8.2 示例

8.3 应用场景

9. Array.prototype.flatMap()

9.1 语法

9.2 示例

9.3 应用场景

10. Array.prototype.entries()

10.1 语法

10.2 示例

10.3 应用场景

11. Array.prototype.keys()

11.1 语法

11.2 示例

11.3 应用场景

12. Array.prototype.values()

12.1 语法

12.2 示例

12.3 应用场景

13. Array.prototype[Symbol.iterator]

13.1 语法

13.2 示例

13.3 应用场景

14. Array.prototype[Symbol.unscopables]

14.1 语法

14.2 示例

14.3 应用场景

15. Array.prototype[Symbol.species]

15.1 语法

15.2 示例

15.3 应用场景

16. Array.prototype[Symbol.toPrimitive]

16.1 语法

16.2 示例

16.3 应用场景

17. Array.prototype[Symbol.toStringTag]

17.1 语法

17.2 示例

17.3 应用场景

18. Array.prototype[Symbol.isConcatSpreadable]

18.1 语法

18.2 示例

18.3 应用场景

19. Array.prototype[Symbol.match]

19.1 语法

19.2 示例

19.3 应用场景

20. Array.prototype[Symbol.replace]

20.1 语法

1. `Array.from()`

2. `Array.of()`

3. `Array.prototype.copyWithin()`

4. `Array.prototype.find()`

5. `Array.prototype.findIndex()`

6. `Array.prototype.fill()`

7. `Array.prototype.includes()`

8. `Array.prototype.flat()`

9. `Array.prototype.flatMap()`

10. `Array.prototype.entries()`

11. `Array.prototype.keys()`

12. `Array.prototype.values()`

13. `Array.prototype[Symbol.iterator]`

14. `Array.prototype[Symbol.unscopables]`

15. `Array.prototype[Symbol.species]`

16. `Array.prototype[Symbol.toPrimitive]`

17. `Array.prototype[Symbol.toStringTag]`

18. `Array.prototype[Symbol.isConcatSpreadable]`

19. `Array.prototype[Symbol.match]`

20. `Array.prototype[Symbol.replace]`

21. `Array.prototype[Symbol.search]`

22. `Array.prototype[Symbol.split]`

23. `Array.prototype[Symbol.toPrimitive]`

24. `Array.prototype[Symbol.toStringTag]`

25. `Array.prototype[Symbol.unscopables]`