es6中数组新增常用的方法有哪些

发布时间：2022-04-19 15:20:05 作者：zzz
来源：亿速云阅读：1058

ES6中数组新增常用的方法有哪些

ES6（ECMAScript 2015）是JavaScript语言的一个重要版本，它为开发者提供了许多新的特性和语法糖，极大地提升了开发效率和代码的可读性。在ES6中，数组（Array）作为JavaScript中最常用的数据结构之一，也得到了许多新的方法和功能的增强。本文将详细介绍ES6中数组新增的常用方法，帮助开发者更好地理解和应用这些新特性。

1. `Array.from()`

Array.from() 方法用于将类数组对象或可迭代对象转换为真正的数组。类数组对象是指具有length属性的对象，如arguments、NodeList等。

语法

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

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

示例

const arrayLike = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b', 'c']

const set = new Set([1, 2, 3]);
const arr2 = Array.from(set, x => x * 2);
console.log(arr2); // [2, 4, 6]

2. `Array.of()`

Array.of() 方法用于创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。

语法

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

示例

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

const arr2 = Array.of(7);
console.log(arr2); // [7]

3. `Array.prototype.find()`

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

语法

arr.find(callback[, thisArg])

callback: 测试函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

4. `Array.prototype.findIndex()`

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

语法

arr.findIndex(callback[, thisArg])

callback: 测试函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

5. `Array.prototype.fill()`

fill() 方法用于将数组中的所有元素替换为指定的静态值。

语法

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

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

示例

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

6. `Array.prototype.copyWithin()`

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

语法

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

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

示例

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

7. `Array.prototype.entries()`

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

语法

arr.entries()

示例

const arr = ['a', 'b', 'c'];
const iterator = arr.entries();

for (const [index, element] of iterator) {
  console.log(index, element);
}
// 0 'a'
// 1 'b'
// 2 'c'

8. `Array.prototype.keys()`

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

语法

arr.keys()

示例

const arr = ['a', 'b', 'c'];
const iterator = arr.keys();

for (const key of iterator) {
  console.log(key);
}
// 0
// 1
// 2

9. `Array.prototype.values()`

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

语法

arr.values()

示例

const arr = ['a', 'b', 'c'];
const iterator = arr.values();

for (const value of iterator) {
  console.log(value);
}
// 'a'
// 'b'
// 'c'

10. `Array.prototype.includes()`

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

语法

arr.includes(valueToFind[, fromIndex])

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

示例

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

11. `Array.prototype.flat()`

flat() 方法用于将嵌套的数组“拉平”，即将多维数组转换为一维数组。

语法

arr.flat([depth])

depth (可选): 指定要拉平的嵌套数组的深度，默认为1。

示例

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

12. `Array.prototype.flatMap()`

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。它相当于map()和flat()的组合。

语法

arr.flatMap(callback[, thisArg])

callback: 映射函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

13. `Array.prototype.reduceRight()`

reduceRight() 方法对数组中的每个元素（从右到左）执行一个提供的函数，将其结果汇总为单个返回值。

语法

arr.reduceRight(callback[, initialValue])

callback: 执行函数，接受四个参数：累加器、当前元素、当前索引、数组本身。
initialValue (可选): 作为第一次调用callback时的第一个参数的值。

示例

const arr = [1, 2, 3, 4];
const result = arr.reduceRight((acc, curr) => acc + curr);
console.log(result); // 10

14. `Array.prototype.some()`

some() 方法测试数组中是否至少有一个元素通过了提供的函数的测试。

语法

arr.some(callback[, thisArg])

callback: 测试函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

15. `Array.prototype.every()`

every() 方法测试数组中的所有元素是否都通过了提供的函数的测试。

语法

arr.every(callback[, thisArg])

callback: 测试函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

16. `Array.prototype.filter()`

filter() 方法创建一个新数组，其中包含通过所提供函数测试的所有元素。

语法

arr.filter(callback[, thisArg])

callback: 测试函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

17. `Array.prototype.map()`

map() 方法创建一个新数组，其结果是该数组中的每个元素调用一次提供的函数后的返回值。

语法

arr.map(callback[, thisArg])

callback: 映射函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

18. `Array.prototype.forEach()`

forEach() 方法对数组的每个元素执行一次提供的函数。

语法

arr.forEach(callback[, thisArg])

callback: 执行函数，接受三个参数：当前元素、当前索引、数组本身。
thisArg (可选): 执行callback时的this值。

示例

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

19. `Array.prototype.reduce()`

reduce() 方法对数组中的每个元素执行一个提供的函数，将其结果汇总为单个返回值。

语法

arr.reduce(callback[, initialValue])

callback: 执行函数，接受四个参数：累加器、当前元素、当前索引、数组本身。
initialValue (可选): 作为第一次调用callback时的第一个参数的值。

示例

const arr = [1, 2, 3, 4];
const result = arr.reduce((acc, curr) => acc + curr);
console.log(result); // 10

20. `Array.prototype.sort()`

sort() 方法对数组的元素进行排序，并返回排序后的数组。默认排序顺序是根据字符串Unicode码点。

语法

arr.sort([compareFunction])

compareFunction (可选): 用来指定按某种顺序进行排列的函数。

示例

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

21. `Array.prototype.reverse()`

reverse() 方法将数组中元素的位置颠倒，并返回该数组。

语法

arr.reverse()

示例

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

22. `Array.prototype.concat()`

concat() 方法用于合并两个或多个数组，并返回一个新数组。

语法

arr.concat(value1[, value2[, ...[, valueN]]])

示例

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

23. `Array.prototype.slice()`

slice() 方法返回一个新的数组对象，这一对象是一个由begin和end（不包括end）决定的原数组的浅拷贝。

语法

arr.slice([begin[, end]])

begin (可选): 开始提取的索引，默认为0。
end (可选): 结束提取的索引，默认为数组的长度。

示例

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

24. `Array.prototype.splice()`

splice() 方法通过删除或替换现有元素或者添加新元素来修改数组，并以数组形式返回被修改的内容。

语法

arr.splice(start[, deleteCount[, item1[, item2[, ...]]]])

start: 指定修改的开始位置。
deleteCount (可选): 要删除的元素个数。
item1, item2, ... (可选): 要添加进数组的元素。

示例

const arr = [1, 2, 3, 4, 5];
arr.splice(2, 1, 'a', 'b');
console.log(arr); // [1, 2, 'a', 'b', 4, 5]

25. `Array.prototype.join()`

join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。

语法

arr.join([separator])

separator (可选): 指定一个字符串来分隔数组的每个元素，默认为逗号。

示例

const arr = [1, 2, 3, 4, 5];
const result = arr.join('-');
console.log(result); // '1-2-3-4-5'

26. `Array.prototype.toString()`

toString() 方法返回一个字符串，表示指定的数组及其元素。

语法

arr.toString()

示例

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

27. `Array.prototype.toLocaleString()`

toLocaleString() 方法返回一个字符串表示数组中的元素。数组中的元素将使用各自的toLocaleString方法转成字符串。

语法

arr.toLocaleString([locales[, options]])

locales (可选): 带有BCP 47语言标签的字符串或字符串数组。
options (可选): 一个可配置属性的对象。

示例

const arr = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const result = arr.toLocaleString('en', { timeZone: 'UTC' });
console.log(result); // '1,a,12/21/1997, 2:12:00 PM'

28. `Array.prototype.indexOf()`

indexOf() 方法返回在数组中可以找到给定元素的第一个索引，如果不存在，则返回-1。

语法

arr.indexOf(searchElement[, fromIndex])

searchElement: 要查找的元素。
fromIndex (可选): 开始查找的位置索引，默认为0。

示例

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

29. `Array.prototype.lastIndexOf()`

lastIndexOf() 方法返回指定元素在数组中的最后一个的索引，如果不存在则返回-1。

语法

arr.lastIndexOf(searchElement[, fromIndex])

searchElement: 要查找的元素。
fromIndex (可选): 开始查找的位置索引，默认为数组的长度减1。

示例

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

30. `Array.prototype.includes()`

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

语法

arr.includes(valueToFind[, fromIndex])

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

示例

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

es6中数组新增常用的方法有哪些

ES6中数组新增常用的方法有哪些

1. Array.from()

语法

示例

2. Array.of()

语法

示例

3. Array.prototype.find()

语法

示例

4. Array.prototype.findIndex()

语法

示例

5. Array.prototype.fill()

语法

示例

6. Array.prototype.copyWithin()

语法

示例

7. Array.prototype.entries()

语法

示例

8. Array.prototype.keys()

语法

示例

9. Array.prototype.values()

语法

示例

10. Array.prototype.includes()

语法

示例

11. Array.prototype.flat()

语法

示例

12. Array.prototype.flatMap()

语法

示例

13. Array.prototype.reduceRight()

语法

示例

14. Array.prototype.some()

语法

示例

15. Array.prototype.every()

语法

示例

16. Array.prototype.filter()

语法

示例

17. Array.prototype.map()

语法

示例

18. Array.prototype.forEach()

语法

示例

19. Array.prototype.reduce()

语法

示例

20. Array.prototype.sort()

语法

示例

21. Array.prototype.reverse()

语法

示例

22. Array.prototype.concat()

语法

示例

23. Array.prototype.slice()

语法

示例

24. Array.prototype.splice()

语法

示例

25. Array.prototype.join()

语法

示例

26. Array.prototype.toString()

语法

示例