“……”？解释 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 只复制了值。
例如，如果向变量 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/