我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

本文基于js来说明一下三个点扩展运算符的用法，在很多编程语言中，都有这个三个点运算符，大体的用途都是用于解包一些数据。在具体的实际操作中，总还是会有一些出乎意料的事情发生的。如果您也有兴趣，可以随着苏南大叔的思路，来看看三个点的具体用法。

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - 三个点操作符dotdotdot
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-1）

大家好，这里是苏南大叔的程序如此灵动博客，这里记录苏南大叔和计算机代码的故事。本文描述三个点运算符的故事。测试环境：node@16.14.2。理论上浏览器环境下也是可以运行的，不过具体没实验。

解包用法

基本用法就是用于数据的解包，比如对array、object、string的解包操作。

console.log(...[1,2,3,4,5,6])       // 1 2 3 4 5 6
//console.log(...{"id":5})          // error
console.log([...["hello"]])         // [ 'hello' ]
console.log({...{"id":5}})          // {"id":5}
console.log([...'hello']);          // ['h', 'e', 'l', 'l','o']
console.log({...'hello'});          // { '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-1
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-2）

合并用法

这里其实还可以把这个解包操作，变成合并数据的操作目的，这个时候就有一些不合常规的操作了。

合并数组array

数组array合并，数组元素之间并不相互覆盖。

var arr1 = [0, [1, 2], 3 ];
var arr2 = [4, [5, 6, 7] ];
arr3 = [...arr1,...arr2];
console.log(arr3);                    // [ 0, [ 1, 2 ], 3, 4, [ 5, 6, 7 ] ]
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-2
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-3）

合并对象object

对象object合并，同key的object属性，会产生覆盖关系。而且是那种简单的覆盖，并不考虑深度的元素覆盖（合并）。

var arr1 = [0, [1, 2], 3 ];
var arr2 = [4, [5, 6, 7] ];
var obj3 = {...arr1,...arr2};          // { '0': 4, '1': [ 5, 6, 7 ], '2': 3 }
console.log(obj3);
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-3
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-4）

赋值变量

可以把解包的数据赋值给新的变量，但是带三个点的变量位置是有特殊规定的，需要放置在最后面。如果是解包个数组或者字符串的话，那么变量的名字是可以随便写的。

var [a, b, ...c] = "hello";
console.log(a,b,c);                        // h e [ 'l', 'l', 'o' ]
var [a, b, ...c] = [1, 2, 3, 4, 5];
console.log(a,b,c);                        // 1 2 [ 3, 4, 5 ]
// var [...abc, c]  = [1, 2, 3, 4, 5];     // error
// var [a, ...b, c] = [1, 2, 3, 4, 5];     // error
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-5
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-5）

但是，如果解包的是个对象的话，那么变量名字和属性名称必须对应，否则提取不到数据，会得到一个undefined。并且，只要注意变量的名字需要对应外，名字的顺序是无所谓的，（当然带三个点的变量一定要放在最后，并且叫啥都行）。

var {a, b, ...c} = {a:"aaa",b:"bbb",c:"ccc",d:"ddd"} 
console.log(a,b,c);           // aaa bbb { c: 'ccc', d: 'ddd' }
var {a, bb, ...c} = {a:"aaa",b:"bbb",c:"ccc",d:"ddd"}  
console.log(a,bb,c);          // aaa undefined { b: 'bbb', c: 'ccc', d: 'ddd' }
var {b, c, ...a} = {a:"aaa",b:"bbb",c:"ccc",d:"ddd"} 
console.log(a,b,c);           // { a: 'aaa', d: 'ddd' } bbb ccc
//var [a, b, ...c] = {a:"aaa",b:"bbb",c:"ccc",d:"ddd"}
//console.log(a,b,c);         // is not iterable
JavaScript
注意写法，{}而不是[]。

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-6
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-6）

函数的参数赋值

这里也分为两种情况，一种是函数定义的时候使用三个点，一种是函数调用的时候使用三个点。

函数定义使用三个点

在定义函数的时候使用三个点，这个和传入了一个数组操作是一样的。

function _sum(...arr) {
    let ret = 0;
    for (var i of arr) { ret += i; }
    return ret;
}
a = _sum(1, 2, 3)             // 6
b = _sum(1, 2, 3, 4, 5)       // 15
console.log(a, b)
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-7
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-7）

函数调用使用三个点

function f(x, y, z) {
    console.log(x, y, z)
}
f(1, ...[2, 3], 4, 5);         // 1 2 3
var args = [1, 2, 3];
f(...args);                    // 1 2 3
f.apply(null, args);           // 1 2 3
JavaScript
f.apply(null, args) 这是一个新的写法。

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-8
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-8）

切断引用关系

测试代码：

var var1 = ["sunan","大叔"]
var var2 = [...var1]
var2[0] = "苏南"
console.log(var1,var2)                         // [ 'sunan', '大叔' ] [ '苏南', '大叔' ]

var var1 = ["sunan","大叔"]
var var2=  ["sunan","大叔"]
var2[0] = "苏南"
console.log(var1,var2)                         // [ 'sunan', '大叔' ] [ '苏南', '大叔' ]

var var1 = ["sunan","大叔"]
var var2 = var1
var2[0] = "苏南"
console.log(var1,var2)                          // [ '苏南', '大叔' ] [ '苏南', '大叔' ]
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-10
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-9）

虽然把一个数组解包再封包，和原来没有啥区别。但是，切断了js默认自带的引用关系，是一个完全独立的变量了。对原变量的修改，并不会影响到第二个变量。下面的代码同理：

var var1 = {"name":"sunan大叔"}
var var2 = {...var1}
var1.name= "苏南大叔"
console.log(var1,var2)                         // { name: '苏南大叔' } { name: 'sunan大叔' }

var var1 = {"name":"sunan大叔"}
var var2=  {"name":"sunan大叔"}
var1.name= "苏南大叔"
console.log(var1,var2)                         // { name: '苏南大叔' } { name: 'sunan大叔' }

var var1 = {"name":"sunan大叔"}
var var2 = var1
var1.name= "苏南大叔"
console.log(var1,var2)                          // { name: '苏南大叔' } { name: '苏南大叔' }
JavaScript

苏南大叔：js代码，三个点扩展运算符如何解包数据array/object/string？ - dot-dot-dot-11
js代码，三个点扩展运算符如何解包数据array/object/string？（图10-10）

相关链接

总结

更多经验文章，请点击下面的链接：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   js