[转]js 扩展运算符(...)的用法 - yingzi

 在日常开发中，我们在看js代码时，经常会看到（...）这样的符号。这里介绍一下它的含义和作用。

定义：

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

基本用法

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

特殊用法

数组

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

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: "Amy"}let person = {...age, ...name}person; // {age: 15, name: "Amy"}

注意事项

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

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

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

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

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

---------------------
作者：yingzi__block
来源：CNBLOGS
原文：https://www.cnblogs.com/wangyingblock/p/15309047.html
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件