ES6对象的扩展运算符

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

let z = {a:3,b:4};
let n = {...z};
console.log(n);//{a:3,b:4}

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

let foo = {...['a','b','c']}
console.log(foo);//{ '0': 'a', '1': 'b', '2': 'c' }

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

console.log({...{},a:1});//{a:1}

4、如果扩展运算符后面是一个字符串，它会自动转成一个类数组对象，因此返回的不是空对象

console.log({...'hello'});//{ '0': 'h', '1': 'e', '2': 'l', '3': 'l', '4': 'o' }

5、如果扩展运算符后面不是对象，则会自动将其转为对象。由于该对象没有自身属性，所以返回一个空对象。

console.log({...1});//{}
console.log({...true});//{}
console.log({...undefined});//{}
console.log({...null});//{}

6、对象的扩展运算符等同于使用Object.assign()函数

let a = {name:'lisi',age:22
}
console.log({height:12,...a});//{ height: 12, name: 'lisi', age: 22 }
console.log(Object.assign({height:12},a));//{ height: 12, name: 'lisi', age: 22 }

7、扩展运算符可以用于合并两个对象相当于Object.assign()函数

let a = {name:'lisi'}
let b = {age:23}
console.log({...a,...b});//{ name: 'lisi', age: 23 }
// 等同于
console.log(Object.assign({},a,b));//{ name: 'lisi', age: 23 }

8、如果用户自定义的属性，放在扩展运算符后面，则扩展运算符内部的同名属性会被覆盖掉

let a = {x:3,y:4}
console.log({...a,x:1,y:2});//{ x: 1, y: 2 }
console.log({...a,...{x:1,y:2}});//{ x: 1, y: 2 }
let x = 1, y = 2
console.log({...a,x,y});//{ x: 1, y: 2 }
console.log(Object.assign({},a,{x:1,y:2}));//{ x: 1, y: 2 }

9、如果把用户自定义的属性放在扩展运算符前面，就变成了设置新对象的默认属性值

let a ={name:'lisi',age:12}
console.log({x:1,y:2,...a});//{ x: 1, y: 2, name: 'lisi', age: 12 }
console.log(Object.assign({},{x:1,y:2},a));//{ x: 1, y: 2, name: 'lisi', age: 12 }
console.log(Object.assign({x:1,y:2},a));//{ x: 1, y: 2, name: 'lisi', age: 12 }

10、对象的扩展运算符后面可以跟着表达式

const obj={...(8>1?{a:1}:{}),b:2
}
console.log(obj);//{a:1,b:2}

11、扩展运算符的参数对象之中，如果有取值函数get，这个函数是会执行的

 let a = {get x() {//   throw new Error('not throw yet');console.log('hello');}}let aWithXGetter = { ...a }; // 报错

ES6对象的扩展运算符相关推荐

es6 对象的扩展运算符
对象的扩展运算符 <数组的扩展>一章中,已经介绍过扩展运算符(...). const [a, ...b] = [1, 2, 3]; a // 1 b // [2, 3] ES2017 将这 ...
(...)ES6三点扩展运算符
来源:https://www.cnblogs.com/rlann/p/7222150.html (...)ES6三点扩展运算符扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(. ...
Vue的三个点es6知识，扩展运算符表达含义
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
ES6高级：扩展运算符，箭头函数，class类，iterator迭代器
2. 扩展运算符 ... 2.1 reset参数 reset参数==必须放在最后==,为了替代arguments,在函数形参中使用,==接受剩余参数==,以==数组==的形式去接受 //1. rese ...
ES6增加了扩展运算符: ... 三个点是ES几的
ES6 的扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. 1.将一个数组转为用逗号分隔的参数序列(把数组中元素展开). 如下: ...
ES6中的扩展运算符
扩展运算符(...)将一个数组转化为参数序列,通常与函数一起使用,show(...['judy','girl']). 数组合并:[...arr1,...arr2,...arr3] 字符串转字符数组:[ ...
es6之三个点（...）扩展运算符数组和对象的使用场景及最常见的用法（霸霸看了都说好）
概念 es6之扩展运算符 (-) 简称三个点数组的扩展运算符应用复制数组扩展运算符提供了复制数组的简便写法. const a1 = [1, 2]; // 写法一 const a2 = [...a ...
ES6 数组、对象的扩展
8. 数组的扩展扩展运算符(...),将一个数组转为用逗号分隔的参数序列. 复制数组 const a2=[...a1] 合并数组 [...arr1, ...arr2, ...arr3]; arr1. ...
es6 箭头函数 rest参数扩展运算符
Es6 箭头函数语法: 普通函数: fn=function(){} 箭头函数: fn=()=>{} 特性: this是静态的,this始终指向函数声明时所在作用域下的this的值(使用call ...

ES6对象的扩展运算符

ES6对象的扩展运算符相关推荐

最新文章

热门文章