在js日常开发中,经常会看到(…)这样的符号,这里介绍一下它的含义和作用。
定义
扩展运算符(…)是ES6的用法,用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中。
基本用法
let people = {name: "张三",age: 18} let someone = {...person} someone //{name: "张三",age: 18}
特殊用法
数组
由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组
let foo = {...['a', 'b', 'c']} console.log(foo) [object] {"0":"a","1":"b","2":"c"}
空对象
如果扩展运算符后面是一个空对象,则没有任何效果
let a = {...{}, a: 1} console.log(a) [object] {"a":1}
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)
字符串
如果扩展运算符后面是字符串,它会自动转在一个类似数组的对象
let str = {...'hello'} console.log(str) [object] {"0":"h","1":"e","2":"l","3":"l","4":"o"}
对象的合并
let age = {age: 15} let name = {'name': '张三'} let person = {...age, ...name} console.log(person) [object] {"age":15,"name":"张三"}
注意事项
自定义的属性和拓展运算符对象里面属性的相同的时候:
1、自定义的属性在拓展运算符后面,则拓展运算符对象内部同名的属性将被覆盖掉
let person = {name: '张三', age: 15} let someone = {...person, name: '李四', age:17} console.log(someone) [object] {"age":17,"name":"李四"}
2、自定义的属性在拓展运算符前面,则变成设置新对象默认属性值
let person = {name: '张三', age: 15} let someone = { name: '李四', age:17,...person} console.log(someone) [object] {"age":15,"name":"张三"}
如若转载,请注明出处:开源字节 https://sourcebyte.vip/article/351.html