ES6新特性七：数组的扩充详解

概述

在ES6中，数组得到了很多的扩充和新增特性，这些特性可以让数组更加灵活和实用。在本篇攻略中，我们将深入了解数组的扩充。

新增的方法

Array.from()

Array.from()方法可以将一个类似数组或可迭代对象转换为一个新的数组实例。它还可以接收一个函数作为第二个参数，对浅拷贝的数组进行一些额外的操作。

示例代码：

let iterable = { 0: 'a', 1: 'b', 2: 'c', length: 3 };
let arr1 = Array.from(iterable);
let arr2 = Array.from(iterable, x => x.toUpperCase());

console.log(arr1);  // ['a', 'b', 'c']
console.log(arr2);  // ['A', 'B', 'C']

上面的例子中，我们将一个类似数组的对象转换为了一个新的数组实例。并在第二个参数中传入一个函数，将新数组中的元素全部变成了大写字母。

Array.of()

Array.of()方法可以将一组参数转换为一个数组实例。它比使用数组字面量方式更加直观和易读。如果你需要创建一个只有一个元素的数组，使用Array.of()方法会比使用数组字面量的方式更加方便。

示例代码：

let arr1 = Array.of(1, 2, 3, 4, 5);
console.log(arr1);  // [1, 2, 3, 4, 5]

let arr2 = Array.of("hello");
console.log(arr2);  // ["hello"]

上面的例子中，我们使用Array.of()方法创建了两个数组。

find() 和 findIndex()

find()方法返回数组中的第一个匹配元素，findIndex()方法返回数组中的第一个匹配元素的下标。

示例代码：

let arr = [1, 2, 3, 4, 5];
let result1 = arr.find(value => value > 3);
let result2 = arr.findIndex(value => value > 3);

console.log(result1);  // 4
console.log(result2);  // 3

上面的例子中，我们使用find()方法找到第一个大于3的元素，并使用findIndex()方法查找该元素的下标。

扩展的语法

Array.prototype.includes()

Array.prototype.includes()方法用于判断数组中是否包含某个元素，如果包含则返回true，否则返回false。该方法可以用于查找NaN和undefined类型。

示例代码：

let arr = ['a', 'b', 'c'];

console.log(arr.includes('a'));  // true
console.log(arr.includes('d'));  // false

上面的例子中，我们在数组中查找是否包含了字符串'a'和'd'。

...扩展操作符

...扩展操作符可以将一个可迭代对象扩展到数组中。它可以被用来克隆一个数组或者将两个数组合并成一个新数组。

示例代码：

let arr1 = ['a', 'b'];
let arr2 = ['c', 'd'];

let arr3 = [...arr1, ...arr2];
console.log(arr3);  // ['a', 'b', 'c', 'd']

上面的例子中，我们使用...扩展操作符将arr1和arr2的元素扩展到了arr3中。

总结

ES6为数组新增了很多特性和方法，这些特性和方法可以让数组的操作更加灵活和实用。在日常的开发工作中，合理运用这些特性和方法，将会降低代码的复杂度和提升开发效率。