JS扩展运算符(...)

• 定义

  💡 扩展运算符(...)是ES6的语法，用于取出参数对象的所有可遍历属性，然后拷贝到当前对象之中

• 基本用法

  let person = {name: "Amy", age: 15}
  let someone = { ...person }
  someone  // {name: "Amy", age: 15}
  

• 特殊用法

1. 数组

   由于数组是特殊的对象，所以对象的扩展运算符也可以用于数组

   let foo = { ...['a', 'b', 'c'] };
   foo
   // {0: "a", 1: "b", 2: "c"}
   

2. 空对象

   如果扩展运算符后面是一个空对象，则没有任何效果

   let a = {...{}, a: 1}
   a // { a: 1 }
   

3. Int类型、Boolen类型、undefined、null

   如果扩展运算符后面是上面这几种类型，都会返回一个空对象，因为它们没有自身属性

   // 等同于 {...Object(1)}
   {...1} // {}
   
   // 等同于 {...Object(true)}
   {...true} // {}
   
   // 等同于 {...Object(undefined)}
   {...undefined} // {}
   
   // 等同于 {...Object(null)}
   {...null} // {}
   

4. 字符串

   如果扩展运算符后面是字符串，它会自动转成一个类似数组的对象

   {...'hello'}
   // {0: "h", 1: "e", 2: "l", 3: "l", 4: "o"}
   

5. 对象合并

   let age = {age: 15}
   let name = {name: "Amy"}
   let person = {...age, ...name}
   person; // {age: 15, name: "Amy"}
   

• 注意事项

  自定义的属性和拓展运算符对象里面属性的相同的时候

1. 自定义的属性在拓展运算符后面，则拓展运算符对象内部同名的属性将被覆盖掉

   let person = {name: "Amy", age: 15};
   let someone = { ...person, name: "Mike", age: 17};
   someone;  //{name: "Mike", age: 17}
   

2. 自定义的属性在拓展运算度前面，则变成设置新对象默认属性值

   let person = {name: "Amy", age: 15};
   let someone = {name: "Mike", age: 17, ...person};
   someone;  //{name: "Amy", age: 15}