ES6 对象扩展

对象简写

对象中又分了属性和方法的简写

在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)
    }
}

属性名表达式

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

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)

.扩展运算符

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

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

这里需要注意的是在数组中因为他们的K值就是他们的顺序,所以是按顺序一一分开,但是在对象中是按他们的K值也就是他们的属性值来判断剩余的值是什么,例如这里c就是对象{c:1,d: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))
  1. 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}

当发出重叠的显现的时候以assign中的参数的顺序为参考

猜你喜欢

转载自blog.csdn.net/qq_39148344/article/details/89340810