在js日常开发中，经常会看到(…)这样的符号，这里介绍一下它的含义和作用。

定义

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

基本用法


let people = {name: "张三"，age: 18}
let someone = {...person}
someone //{name: "张三"，age: 18}
  • 1.
  • 2.
  • 3.


特殊用法
数组

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


let foo = {...['a', 'b', 'c']}
console.log(foo)
[object] {"0":"a","1":"b","2":"c"}
  • 1.
  • 2.
  • 3.


空对象

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


let a = {...{}, a: 1}
console.log(a)
[object] {"a":1}
  • 1.
  • 2.
  • 3.


Int类型、Boolean类型、undefined、null

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


// 等同于{...Object(1)}
let num = {...1}
console.log(num)

// 等同于{...Object(true)}
let boo = {...true}
console.log(boo)

// 等同于{...Object(undefined)}
let undef = {...undefined}
console.log(undef)

// 等同于{...Object(null)}
let nul = {...null}
console.log(null)
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.


字符串

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


let str = {...'hello'}
console.log(str)
[object] {"0":"h","1":"e","2":"l","3":"l","4":"o"}
  • 1.
  • 2.
  • 3.


对象的合并


let age = {age: 15}
let name = {'name': '张三'}
let person = {...age, ...name}
console.log(person)
[object] {"age":15,"name":"张三"}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.


注意事项

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

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


let person = {name: '张三', age: 15}
let someone = {...person, name: '李四', age:17}
console.log(someone)
[object] {"age":17,"name":"李四"}
  • 1.
  • 2.
  • 3.
  • 4.


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


let person = {name: '张三', age: 15}
let someone = { name: '李四', age:17,...person}
console.log(someone)
[object] {"age":15,"name":"张三"}
  • 1.
  • 2.
  • 3.
  • 4.