js扩展运算符...的用法

一、扩展运算符的写法是三个点：...；

二、什么是扩展运算符？

    扩展运算符是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}