我写了js一年,其实我没怎么用过它,但是吧,我看别人写代码的时候会发现,总会有这三个点,我也不知道什么意思,最近遇到的越来越多了,所以我还学一下吧。
这三个点其实是扩展运算符!它可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开,说白话就是脱衣服不管是大括号([])、花括号({})
var a = [1,2,3],...a输出打印会是1,2,3,就是把它们展开了
// 数组
var number = [1,2,3,4,5,6]
console.log(...number) //1 2 3 4 5 6
//object类型
var man = {name:'chuichui',height:176}
console.log({...man})
对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中
let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }
同样,如果用户自定义的属性,放在扩展运算符后面,则扩展运算符内部的同名属性会被覆盖掉。
let bar = {a: 1, b: 2};
let baz = {...bar, ...{a:2, b: 4}}; // {a: 2, b: 4}
这个例子扩展运算符拷贝的对象是基础数据类型,因此对obj2
的修改并不会影响obj1
let obj1 = { a: 1, b: 2};
let obj2 = { ...obj1, b: 'aqing'};
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: "aqing"}
这里可以看到,对obj2
的修改影响到了被拷贝对象obj1
,原因上面已经说了,因为obj1
中的对象c
是一个引用数据类型,拷贝的时候拷贝的是对象的引用。
let obj1 = { a: 1, b: 2, c: {name: 'a'}};
let obj2 = { ...obj1};
obj2.c.name = 'aqing';
console.log(obj1); // {a: 1, b: 2, c: {name: 'aqing'}}
console.log(obj2); // {a: 1, b: 2, c: {name: 'aqing'}}
对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象,因此返回的不是空对象。
{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
可以将数组转换为参数序列
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42