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

客官°小女子只卖身不卖艺 2023-10-15 14:06 4阅读 0赞

#### **一、前言** ####

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

#### **二、使用场景** ####

##### **1、函数调用** #####

![bae3402693d74f7c9d602057394578d2.png][]

**分析：**如上图结果，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 的用武之地了，先抛出普通赋值语句的一个问题：

![3d19dac8e0fe4c9f967d07387ddc63c2.png][]

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

![2ff799a42d2349df9a0346805e2dfb61.png][]

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

##### **3、变量拼接** #####

![5d4e352c8d334f638653dc32d5ba5689.png][]

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

#### **三、注意事项** ####

![49cdb83f80eb4b20bf631d183184d491.png][]

![3bacb97d14e4443dba3f3aa66c2e2d51.png][]

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

[bae3402693d74f7c9d602057394578d2.png]: https://img-blog.csdnimg.cn/bae3402693d74f7c9d602057394578d2.png
[3d19dac8e0fe4c9f967d07387ddc63c2.png]: https://img-blog.csdnimg.cn/3d19dac8e0fe4c9f967d07387ddc63c2.png
[2ff799a42d2349df9a0346805e2dfb61.png]: https://img-blog.csdnimg.cn/2ff799a42d2349df9a0346805e2dfb61.png
[5d4e352c8d334f638653dc32d5ba5689.png]: https://img-blog.csdnimg.cn/5d4e352c8d334f638653dc32d5ba5689.png
[49cdb83f80eb4b20bf631d183184d491.png]: https://img-blog.csdnimg.cn/49cdb83f80eb4b20bf631d183184d491.png
[3bacb97d14e4443dba3f3aa66c2e2d51.png]: https://img-blog.csdnimg.cn/3bacb97d14e4443dba3f3aa66c2e2d51.png