JavaScript 中三个点点 ... 的作用,我来描述就是:脱壳。
先看代码:
function foo(a, b, c) { // } var arr = [1,2,3]; foo(arr[0], arr[1], arr[2]);
再来看看三个点点 ... 能怎么用:
foo(...arr);
省略了点代码吧。
这是三个点点的原理,但是,根据这个原理可以扩展出很多有意思的代码:
var arr1 = []; var arr2 = []; var arr = [1, 2] arr1.push(arr); arr2.push(...arr); // 等效于 push(arr[0], arr[1]) alert(arr1.length); // 长度为 1,arr1[0] 值是数组,这个数组就是 arr。 alert(arr2.length); // 长度为 1,arr2[0] 值是 1,arr2[1] 值是 2。
再看看代替数组的 concat:
var arr1 = [1, 2]; var arr2 = [3, 4]; var arra = arr1.concat(arr2); var arrb = [...arr1, ...arr2]; alert(arra.length); // 长度为 4 alert(arrb.length); // 长度为 4
字符串也可以:
var arr = [...'itpow']; // arr 是一个长度为 5 的数组,分别有 5 个字母。
对象也可以用来合并:
var obj1 = { "name": "itpow" }; var obj2 = { "url": "http://www.itpow.com/" }; var obj = { ...obj1, ...obj2 }; // 这样 obj 就拥有了 obj1、obj2 两个对象的属性和值。 console.log(obj);