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

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