“……”？解释 ES2015 中新增的扩展语法

您好！
我是系统开发部的山田。

这次，我们将解释 ES2015 中新增的扩展语法，它可以用来展开数组等。

什么是扩展语法？

扩展语法是通过在数组或对象前加上“...”来实现的。
它可以用于展开数组或对象。ES2015
为数组添加了此功能，ES2018 为对象添加了此功能！
具体来说，
它可以用于在调用函数时指定多个参数，或者在需要复制数组或对象时。
接下来，我们将通过实际代码来了解它的工作原理。

与数组一起使用

创建一个数组，并添加一个新元素。

const fruits1 = ["apple", "banana", "peach"]; const newFruits1 = ["hassaku", ...fruits1]; console.log(newFruits1); // 结果：['hassaku', 'apple', 'banana', 'peach']

创建组合数组

const fruits1 = ["apple", "banana", "peach"]; const fruits2 = ["grapes", "tangerine"]; const newFruits2 = [...fruits1, ...fruits2]; console.log(newFruits2); // 结果：['apple', 'banana', 'peach', 'grapes', 'tangerine']

使用扩展语法复制

const fruits1 = ["apple", "banana", "peach"]; const spreadArray = [...fruits1]; console.log(spreadArray === fruits1); // 结果：false fruits1.push('watermelon') console.log(fruits1); // 结果：['apple', 'banana', 'peach', 'watermelon'] console.log(spreadArray); // 结果：['apple', 'banana', 'peach']

使用严格相等运算符 (===) 比较变量 `fruits1` 和 `spreadArray` 时，结果为 false。
这是因为只有值被复制到了变量 `spreadArray` 中。您
可以自行验证：如果您将“watermelon”添加到变量 `fruits1` 中，则更改会反映在变量 `fruits1` 中，但不会反映在变量 `spreadArray` 中，因为变量 `spreadArray` 只复制了值。

用于物体

创建包含新添加元素的对象

const user = { id: 1, name: "Taro", age: 20 }; const addHeightUser = { height: 170, ...user }; console.log(addHeightUser); // 结果: {height: 170, id: 1, name: 'Taro', age: 20}

创建包含已修改元素的对象

const user = { id: 1, name: "Taro", age: 20 }; const changeNameUser = { ...user, name: "Jiro" }; console.log(changeNameUser); // 结果: {id: 1, name: 'Jiro', age: 20}

对于重复的键，最后定义的那个键有效。

创建组合对象

const user = { id: 1, name: "Taro", age: 20 }; const userHobby = { hobby: "桌游" }; const data = { ...user, ...userHobby }; console.log(data); // 结果: { id: 1, name: 'Taro', age: 20, hobby: '桌游' }

使用扩展语法复制

const user = { id: 1, name: "Taro", age: 20 }; const spreadObj = { ...user }; console.log(spreadObj === user); // 结果：false

与数组一样，只有值会被复制到 spreadObj 变量中，因此严格的相等比较 (===) 将返回 false。

在方法中使用

插入多个参数时，可以展开并使用数组。

const array = ["Taro", 20]; const display = (userName, userAge) =>; console.log(`姓名是 ${userName}，年龄是 ${userAge}`); display(...array) // 结果：姓名是 Taro，年龄是 20

可以使用扩展语法来创建可变长度的参数。

const display = (...numbers) => console.log(numbers); display(1, 2, 3); // 结果：[1, 2, 3] display(1, 2, 3, 4); // 结果：[1, 2, 3, 4]

变量的值可以以数组的形式获取。

概括

这次我们讲解了扩展运算符，它是 ES2015 中新增的，允许你在 JavaScript 中展开数组和对象。
由于它使得从数组和对象中复制值变得容易，我以后会继续积极使用它。

最后

我已上线“SEKARAKU Lab”，这是我所属系统开发公司的服务网站。Beyond
提供从服务器设计、搭建到运维的一站式服务，如果您在服务器端开发方面遇到任何问题，欢迎随时联系我们。SEKARAKU
Lab：https://sekarakulab.beyondjapan.com/