js中...variable的使用（解决变量的双向绑定）

一、前言

       普通的变量在前面增加三个点号有不一样的含义和用法，主要体现在函数调用、对象复制和变量拼接三个方面。

二、使用场景

1、函数调用

       分析：如上图结果，sum(...obj) 是等同于 sum(1,2,3) 的，也就是说 ...obj 表示将 obj 对象里的元素挨个取出来作为参数一对一地传给 sum 函数，如果直接使用 sum(obj) 就相当于 sum([1,2,3]) ，那么调用 sum函数后[1,2,3] 就作为整体赋值给了 x ，至于参数 y 和 z 由于没有对应数值就显示为未定义，最后结果就变成了 1,2,3undefinedundefined。

2、对象复制

       在对象复制这一块可谓是 ...variable 的用武之地了，先抛出普通赋值语句的一个问题：

       分析：将变量 info 赋值给 obj ，然后改变 obj 中其中一个元素的值，结果导致 info 这个对象的元素值也跟着改变，这是我们在开发中不愿意看到的数据双向绑定机制，如果想改变 obj 的属性而不影响到 info ，那就不能采用赋值方式，而应该采用复制变量的方式，...variable 在对象的复制上是特别方便的。

       分析：将语句 let obj = info 修改为 let obj = [...info] 后，表示的就不是普通的赋值操作了，而是对象的复制，此时 obj 无论如何修改都不会改变 info 对象的值，这种复制用法的功能类似函数 Object.assign({},info)，不同点在于 [...info] 既能适用于 Array 的变量类型也能适用于 Object 的变量类型，但是 Object.assign({},info) 只适用于 Object 变量类型。

3、变量拼接

       分析：[info1, info2] 与 [...info1, ...info2] 的不同点在于前者是整个变量拿去拼接，后者是分别从 info1 和 info2 中逐个元素取出来后再进行拼接，最终拼接成的 obj1 长度为 2 ，obj2 长度为 6 ，所以 obj1[2] = '7' 就是在第二个元素后面新增一个元素 ‘7’ ，而 obj2[2] = '7' 则表示替换掉该对象中的第三个元素的值。

三、注意事项

       分析：上述两幅图表明如果 info 的类型为 []（Array数组类型），那么 { ...info } 与 [ ...info ] 都不会报错，只是二者的值不同（{ ...info } 会自动将 Array 数组类型转换为 Object 对象类型）；如果 info 的类型为 {}（ Object 对象类型），那么 { ...info } 不会报错，但是 [ ...info ] 会报类型错误的异常，提示 info 是不可迭代变量，也就是说 [ ...info ] 是不会也不能够将 Object 对象类型自动转换为Array 数组类型的，所以使用 ...variable 时特别需要注意这一点。