ECMAScript 2016 中的数组扩展技巧与应用

在 ECMAScript 2016 中，新增了一些数组的扩展技巧，这些技巧大大提升了数组的操作能力。本文将详细介绍这些技巧，并给出实际的应用场景和示例代码，帮助读者更好地理解和掌握这些技巧。

1. Array.prototype.includes()

在 ECMAScript 5 中，我们可以使用 Array.prototype.indexOf() 方法来判断一个元素是否在数组中存在。但是，这个方法有一个缺点，就是如果数组中有 NaN 元素，它无法正确地判断。在 ECMAScript 2016 中，新增了一个 Array.prototype.includes() 方法，用来判断一个元素是否在数组中存在，它可以正确地判断 NaN 元素。

示例代码：

const arr = [1, 2, NaN, 4];

console.log(arr.indexOf(NaN)); // -1
console.log(arr.includes(NaN)); // true

2. 操作符 ...（展开操作符）

在 ECMAScript 2016 中，新增了一个操作符 ...，也称为展开操作符，它可以将一个数组展开成一个序列，或者将一个序列合并成一个数组。这个操作符非常实用，可以大大简化数组的操作。

2.1 展开操作符的用法

展开操作符可以用在多个地方，以下是它的用法示例：

2.1.1 展开数组

使用展开操作符可以将一个数组展开成一个序列：

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

const arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

2.1.2 展开函数参数

使用展开操作符可以将一个数组展开成函数的参数：

function sum(x, y, z) {
  return x + y + z;
}

const arr = [1, 2, 3];

console.log(sum(...arr)); // 6

2.1.3 展开对象

使用展开操作符可以将一个对象展开成另一个对象的属性：

const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };

console.log(obj2); // { x: 1, y: 2, z: 3 }

2.2 应用场景

展开操作符非常实用，可以用在很多地方，以下是它的一些应用场景：

2.2.1 数组合并

使用展开操作符可以将多个数组合并成一个数组：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [7, 8, 9];

const arr4 = [...arr1, ...arr2, ...arr3];

console.log(arr4); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

2.2.2 数组复制

使用展开操作符可以复制一个数组：

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

console.log(arr2); // [1, 2, 3]

2.2.3 数组拼接

使用展开操作符可以将数组拼接成一个字符串：

const arr = ['hello', 'world'];

console.log(...arr); // hello world

2.2.4 对象合并

使用展开操作符可以将多个对象合并成一个对象：

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };

console.log(obj3); // { x: 1, y: 2, z: 3 }

3. Array.prototype.fill()

在 ECMAScript 2016 中，新增了一个 Array.prototype.fill() 方法，用来填充数组。这个方法非常实用，可以大大简化数组的初始化操作。

3.1 fill() 方法的用法

fill() 方法有两个参数，第一个参数是要填充的值，第二个参数是要填充的起始位置和结束位置。如果不指定第二个参数，则默认填充整个数组。

以下是 fill() 方法的用法示例：

const arr = new Array(5);

arr.fill(0);

console.log(arr); // [0, 0, 0, 0, 0]

3.2 应用场景

fill() 方法非常实用，以下是它的一些应用场景：

3.2.1 数组初始化

使用 fill() 方法可以很方便地初始化一个数组：

const arr = new Array(5).fill(0);

console.log(arr); // [0, 0, 0, 0, 0]

3.2.2 数组清空

使用 fill() 方法可以很方便地清空一个数组：

const arr = [1, 2, 3, 4, 5];

arr.fill(0);

console.log(arr); // [0, 0, 0, 0, 0]

3.2.3 数组替换

使用 fill() 方法可以很方便地替换一个数组的部分元素：

const arr = [1, 2, 3, 4, 5];

arr.fill(0, 2, 4);

console.log(arr); // [1, 2, 0, 0, 5]

4. 总结

ECMAScript 2016 中的数组扩展技巧大大提升了数组的操作能力，包括 Array.prototype.includes() 方法、展开操作符和 Array.prototype.fill() 方法。这些技巧非常实用，可以大大简化数组的操作，提高代码的可读性和可维护性。在实际开发中，我们可以根据需要灵活运用这些技巧，提高开发效率和代码质量。

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