es6之对象拓展

本文目录：

• 1.对象简写
• 2.属性名表达式
• 3.扩展运算符
• 4.Object新增方法

1.对象简写

在es5中，有这样一种写法

var name = "xiaoqiang";
var age = 12;
var obj = {
    name : name,
    age : age
}

在es6中，我们可以简写成这样一种形式

let name = "xiaoqiang";
let age = 12;
let obj = {
    name,
    age
}

以上只是属性的简写，如果有方法应该怎么写呢？首先我们来回顾一下es5中的写法

var obj = {
    show: function(){
        alert(1)
    }
}

在es6中我们可以简写成下面的形式

var obj = {
    show(){
        alert(1)
    }
}

2.属性名表达式

属性名表达式意思就是说在es6中可以把属性写成一个表达式的形式，在es5中我们写属性名的时候，key都是固定不变的

var obj = {
    name: "xiaoqiang",
    age: 19
}
//其中name和age是不变的固定写法

在es6中，支持属性名用一个表达式来表示，属性名可以是一个变量

let a = 'username';
let b = 'age';

let obj = {
    [a]:"admin",
    [b+'1']:19
}
console.log(obj) 
//{age1: 19,username: "admin"}

json中的强制要求：前面的key值必须要有双引号给包裹起来

3.扩展运算符

扩展运算符我们在前面接触过,用三个点表示(...),ES2018 将这个运算符引入了对象。

let {a,b,...c} = {c:1,b:2,a:3,d:4};
console.log(a, b, c)  //3 2 {c: 1, d: 4}

4.Object新增方法

1. Object.is()
这个方法用来比较两个值是否严格相等，与严格比较运算符(===)的行为基本一致

console.log(Object.is('a', 'a'))  //true
console.log(Object.is({},{})) //false
//和（===）不一样的是 解决NaN不等于自身的问题
console.log(NaN === NaN)  //false
console.log(Object.is(NaN, NaN))  //true

2. Object.assign()
这个方法用来合并对象

let obj1 = {a: 1};
let obj2 = {b: 2};
let obj3 = {c: 3};
console.log(Object.assign({}, obj1, obj2, obj3)) //{a: 1, b: 2, c: 3}