“……”……？ 我将解释一下 ES2015 中添加的扩展语法。

感谢您的辛勤工作！
我是系统开发部的山田。

这次，我们将解释ES2015中添加的扩展数组等时可以使用的扩展语法。

什么是扩展语法？

扩展语法是指在数组或对象前面写入“...”。
当你想要扩展数组、对象等时可以使用它。
该功能是ES2015针对数组和ES2018针对对象添加的新功能！
具体来说，
当调用函数时指定多个参数时，或者当您想要复制数组或对象时，可以使用它。
从现在开始，我想使用实际代码检查运动。

与数组一起使用

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

const Fruits1 = ["apple", "banana", "peach"]; const newFruits1 = ["hassaku", ...fruits1]; // 结果: ['hassaku', 'apple ' 、‘香蕉’、‘莫莫’]

创建一个串联数组

const Fruits1 = ["苹果", "香蕉", "桃子"]; const Fruits2 = ["葡萄", "橘子"]; const newFruits2 = [...fruits1, ...fruits2]; ); // 结果: ['苹果', '香蕉', '桃子', '葡萄', '橘子']

使用扩展语法复制

constfruits1 = ["apple", "banana", "peaches"]; const spreadArray = [...fruits1]; // 结果： falsefruits1.push('Watermel' ) console.log(fruits1); // 结果: ['苹果', '香蕉', '桃子', '西瓜'] console.log(spreadArray); // 结果: ['苹果', '香蕉' , '莫莫']

如果使用严格相等运算符 (===) 比较变量fruits1 和变量spreadArray，则结果将为假。
这是因为只有值被复制到变量 spreadArray 中。
作为测试，如果将“西瓜”添加到变量fruits1中，它将反映在fruits1中，但您也可以确认它没有反映在变量spreadArray中，其中仅复制值。

在物体中的使用

创建一个添加了新元素的对象

const user = { id: 1, name: "Taro", 年龄: 20 }; const addHeightUser = { height: 170, ...user }; // 结果: {height: 170, id ：1，姓名：'太郎'，年龄：20}

创建一个带有修改元素的对象

const user = { id: 1, name: "Taro",age: 20 }; const changeNameUser = { ...user, name: "Jiro" }; // 结果: {id: 1 ，姓名：“二郎”，年龄：20}

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

创建组合对象

const user = { id: 1, name: "Taro", 年龄: 20 }; const userHobby = { hobby: "棋盘游戏" }; const data = { ...user, ...userHobby }; data); // 结果: {id: 1, name: '太郎', 年龄: 20, 爱好: '棋盘游戏'}

使用扩展语法复制

const user = { id: 1, name: "Taro", Age: 20 }; const spreadObj = { ...user }; // 结果: false

与数组一样，仅将值复制到变量 spreadObj，因此与严格相等运算符 (===) 进行比较将返回 false。

在方法中使用

可以扩展数组并在插入多个参数时使用它。

const array = ["Taro", 20]; const display = (userName, userAge) =>; console.log(`姓名为 ${userName}，年龄为 ${userAge}`); // 结果：名字是太郎，年龄是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 实验室： https://sekarakulab.beyondjapan.com/