End.
转
JS中三个点(...)是什么东西?
在一些项目中,我们看到js代码(...)这样的符号。这里介绍一下它的含义和作用。
它其实是ES6的新语法,名为扩展运算符。
定义:
扩展运算符(...)是ES6的语法,用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。
基本用法
let person = {name: "XiaoMing", age: 18}
let someone = { ...person }
someone // {name: "XiaoMing", age: 18}
可以看到拷贝对象。
扩展运算符为一个传值操作:
let aa = { name: '123', age: 19 };
let bb = { ...aa }
console.log(aa) // { name: '123', age: 19 }
console.log(bb) // { name: '123', age: 19 }
bb.age = 20
console.log(aa) // { name: '123', age: 19 }
console.log(bb) // { name: '123', age: 20 }
传值和传址参考《JavaScript变量的传值和传址》
特殊用法
数组
由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。
let foo = { ...['a', 'b', 'c'] };
foo // {0: "a", 1: "b", 2: "c"}
数组快速变为对象。
空对象
如果扩展运算符后面是一个空对象,则没有任何效果。
let a = {...{}, a: 1}
a // { a: 1 }
Int类型、Boolen类型、undefined、null
如果扩展运算符后面是上面这几种类型,都会返回一个空对象,因为它们没有自身属性。
// 等同于 {...Object(1)}
{...1} // {}
// 等同于 {...Object(true)}
{...true} // {}
// 等同于 {...Object(undefined)}
{...undefined} // {}
// 等同于 {...Object(null)}
{...null} // {}
字符串
如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象
{...'hello'}
// {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
对象的合并
let age = {age: 15}
let name = {name: "XiaoMing"}
let person = {...age, ...name}
person; // {age: 15, name: "XiaoMing"}
注意事项
自定义的属性和拓展运算符对象里面属性的相同的时候:
自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。
let person = {name: "XiaoMing", age: 15};
let someone = { ...person, name: "Hong", age: 17};
someone; //{name: "Hong", age: 17}
自定义的属性在拓展运算度前面,则变成设置新对象默认属性值。
let person = {name: "XiaoMing", age: 15};
let someone = {name: "Hong", age: 17, ...person};
someone; //{name: "XiaoMing", age: 15}
自定义的属性在拓展运算度前面,且该属性是拓展预算符后对象里的,则会取出该对象的值,拓展预算符则会取出剩下的属性。
let person = {name: "XiaoMing", age: 15};
let someone = {name, ...person};
someone; //{name: "XiaoMing", age: 15}
End.