JavaScript 中三个点点 ... 的作用

作者:vkvi 来源:ITPOW(原创) 日期:2020-9-2

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);


相关文章