ES6 中数组的新特性详解-JavaScript中文网-JavaScript教程资源分享门户

ES6 中的数组新增了许多实用的方法和语法，这些特性可以大大提高开发效率和代码可读性。本文将详细介绍 ES6 中数组的新特性，并提供示例代码和使用建议。

扩展运算符

扩展运算符（spread operator）可以将一个数组展开成单个值，或将多个值合并成一个数组。它的语法是三个连续的点号（...）。

展开数组可以将一个数组的所有元素展开成单个值。比如，我们可以用扩展运算符将两个数组合并成一个新数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
// arr3 = [1, 2, 3, 4, 5, 6]

扩展运算符还可以将多个值合并成一个数组。比如，我们可以用扩展运算符将多个值合并成一个数组：

const arr = [..."hello", ...[1, 2, 3]];
// arr = ["h", "e", "l", "l", "o", 1, 2, 3]

使用扩展运算符可以轻松地克隆一个数组，而不必使用循环或其他方法：

const arr1 = [1, 2, 3];
const arr2 = [...arr1];
// arr2 = [1, 2, 3]

Array.from() 方法可以将一个类数组对象或可迭代对象转换为真正的数组。

假设我们有一个类数组对象，比如 arguments 对象，我们可以使用 Array.from() 方法将其转换为真正的数组：

function foo() {
  const args = Array.from(arguments);
  console.log(args);
}
foo(1, 2, 3); // [1, 2, 3]

Array.from() 方法还可以将可迭代对象（比如 Set、Map、字符串）转换为真正的数组：

const set = new Set([1, 2, 3]);
const arr = Array.from(set);
// arr = [1, 2, 3]

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

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

与 Array() 构造函数不同，Array.of() 方法不会将单个数字参数解释为数组长度，而是将它们作为元素添加到数组中。

find() 和 findIndex() 方法可以用来查找数组中符合条件的元素。

find() 方法返回数组中第一个符合条件的元素，如果没有符合条件的元素，则返回 undefined。

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

findIndex() 方法返回数组中第一个符合条件的元素的索引，如果没有符合条件的元素，则返回 -1。

const arr = [1, 2, 3, 4, 5];
const result = arr.findIndex(item => item > 3);
// result = 3

fill() 方法可以用来填充数组中的元素。

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

fill() 方法接受三个参数：填充值、起始位置和结束位置。

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

includes() 方法可以用来判断数组中是否包含某个元素。

const arr = [1, 2, 3];
const result1 = arr.includes(2);
// result1 = true
const result2 = arr.includes(4);
// result2 = false

includes() 方法接受两个参数：要查找的元素和起始位置。

const arr = [1, 2, 3];
const result1 = arr.includes(2, 1);
// result1 = true
const result2 = arr.includes(1, 1);
// result2 = false

ES6 中数组的新特性大大提高了开发效率和代码可读性，包括扩展运算符、Array.from()、Array.of()、find()、findIndex()、fill() 和 includes() 等方法。我们可以根据实际需求灵活使用这些特性，让代码更加简洁、易读、易于维护。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65d0085fadd4f0e0ff91d262