一、扩展运算符的写法是三个点:...;
二、什么是扩展运算符?
扩展运算符是es6的语法,是用来获取参数对象的所有可遍历属性,然后拷贝到当前的对象中。
三、扩展运算符的用法。
基本用法:
对象
let person = {name: "zhangsan", age: 15}
let someone = { ...person }
console.log(someone ) // {name: "zhangsan", age: 15}
特殊用法:
数组
因为数组是特殊的对象,所以对象的扩展运算符也可以用于数组
let arr =['a', 'b', 'c'];
let newArr = {...arr};
console.log(newArr); // {0: "a", 1: "b", 2: "c"}
console.log(...arr); // a b c
空对象
如果扩展运算符的后面是一个空对象,则没有任何效果。
let obj = {...{},a:1}
console.log(obj); //{a:1}
Int类型、Boolen类型、Undefined类型、Null类型
如果扩展运算符的后面是上面这几种类型,都会返回一个空对象,因为这些类型本身就没有属性。
//Int类型
let a = {...1}
console.log(a) //{}
//Boolean类型
let bol = {...true}
console.log(bol) //{}
//Undefinded类型
let und = {...undefined}
console.log(und) //{}
//Null类型
let n = {...null}
console.log(n) //{}
字符串
如果扩展运算符后面是字符串,它会自动转成一个类似数组的对象。
let str = 'hello world'
let newStr = {...str}
console.log(newStr)
//{0: 'h', 1: 'e', 2: 'l', 3: 'l', 4: 'o', 5: ' ', 6: 'w', 7: 'o', 8: 'r', 9: 'l', 10: 'd'}
对象的合并
扩展运算符可以将两个对象合并在一起形成新的对象
let age = {age: 23}
let name = {name: "李四"}
let person = {...age, ...name}
console.log(person); // {age: 15, name: "李四"}
注意
自定义的属性和拓展运算符对象里面属性的相同的时候:
1.自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉。
let person = {name: "李四", age: 23};
let someone = { ...person, name: "张三", age: 17};
console.log(someone); //{name: "张三", age: 17}
2.自定义的属性在拓展运算度前面,则后面的扩展运算符中的属性会覆盖前面的自定义属性。
let person = {name: "李四", age: 23}
let someone = {name: "张三", age: 17, ...person}
console.log(someone); //{name: "李四", age: 23}