ES6数组扩展运算符详解与面试重点

"这篇文档是关于前端面试中关于数组扩展的题目，主要涉及ES6引入的新特性，如扩展运算符的应用及其在数组操作中的各种场景，包括数组的复制、合并、解构赋值等，并强调了扩展运算符进行浅拷贝的特点。" 在前端面试中，了解和掌握ES6对数组的扩展是非常重要的。扩展运算符 (`...`) 是一个关键的新特性，它在处理数组时提供了许多便利。以下是对文档中提到的知识点的详细说明： 1. **扩展运算符的应用**： 扩展运算符可以将数组转换为逗号分隔的参数序列，这在函数调用时非常有用。例如，`function add(x, y) { return x + y; }`，可以使用扩展运算符将数组`[4, 38]`传递给`add`函数，结果为42。 2. **数组的复制**： 使用扩展运算符可以轻松地实现数组的浅拷贝。例如，`const a1 = [1, 2]; const a2 = [...a1];`，这样创建的`a2`是`a1`的一个副本，但它们共享同一个内存空间，因此改变`a1`中的引用类型元素会影响到`a2`。 3. **数组的合并**： 合并多个数组时，扩展运算符可以简化代码。如`const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; [...arr1, ...arr2, ...arr3]`，将创建一个新的数组，包含所有这些数组的元素。 4. **解构赋值**： 结合扩展运算符，可以方便地进行数组的解构赋值。例如，`const [first, rest] = [1, 2, 3, 4, 5];`，`first`将得到1，`rest`将得到剩余的元素数组`[2, 3, 4, 5]`。 5. **限制与注意事项**： 当扩展运算符用于数组赋值时，必须放在参数的最后，如`const [butLast, last] = [1, 2, 3, 4, 5];`，如果放在中间则会导致语法错误。此外，由于扩展运算符进行的是浅拷贝，因此对于数组内的引用类型元素（如对象或数组），修改源数组会影响到新数组。 6. **浅拷贝示例**： 文档中提到了一个例子，`const arr1 = ['a', 'b', [1, 2]]; const arr2 = ['c']; const arr3 = [...arr1, arr2]; arr1[2][0] = 9999;`，由于浅拷贝，修改`arr1`里的子数组会影响`arr3`，所以`arr3`的第三项也会变为`['a', 'b', [9999, 2], 'c']`。 在实际的前端开发中，熟练运用这些技巧能提高代码的可读性和效率，也是面试中展示编程能力的重要方面。面试者应理解其工作原理，以及何时、如何正确使用这些特性，以应对可能的面试问题。