JavaScript|...扩展运算符

问题引入

最近在项目代码中经常会看到 ... 的操作符，不管是在 React 还是 Vue 的写法中都很通用

快速总结： ... 是 JS 中的扩展操作符，可以对变量操作，可以用在函数签名中，也可以用于组件props传递

• 对变量操作，可以将数组/对象变量进行展开
• 用在函数签名中，可以用于将函数签名中所有的参数都收集到指定的数组里（类似JDK8提供的可变形参）
• 用在组件props传递，可以定制更通用化的组件

下面展开进行描述：

对变量操作：

对对象进行操作

const userInfo = {
     name: "foo",
     code: "bar"
}

const userExt = {
     age: 12,
     address: "foo"
}

const user = {...userInfo, ...userExt}

console.log(user) // 同时包含{name,code,age,address} 这些字段

当然可能也会出现覆盖的情况，具体以最后一次定义的值为准

const userInfo = {
     name: "foo",
     code: "bar"
}

const userFront = {
     name: "userFront"
     ...userInfo
}

console.log(user) // 最终的name = "foo"


const userBack = {
     ...userInfo,
     name: "userBack"
}

console.log(userBack) //最终的name = "userBack"