【ES6】对象的拓展

【ES6】对象的拓展

• ​​一、对象的两种表示法【掌握】​​

• ​​1）简洁表示法​​
• ​​2）属性名表达式法​​

• ​​二、Object.is()【了解】​​
• ​​三、Object.assign()【了解】​​

• ​​查看更多ES6教学文章：​​
• ​​参考文献​​

一、对象的两种表示法【掌握】

1）简洁表示法

        ES6允许直接写入变量和函数作为对象的属性和方法。ES6允许在对象中只写属性名，不写属性值。这时，属性值等于属性名所表示的变量。对象属性的简写如代码块1-1-1。

/***@@    代码块1-1-1    属性的简写    @@***/
var foo = 'bar';
var baz = {foo};
baz // {foo: "baz"}

function f(x,y){
  return {x,y};
}
//等同于
function f(x,y){
  return {x:x,y:y};
}

f(1,2);  //  Object {x :1, y: 2}

        除了属性的简写，方法也可以简写。如代码块1-1-2。

/***@@    代码块1-1-2    方法的简写    @@***/
var o = {
  method() {
    return "hello AJ";
  }
};
//等同于
var o = {
  method : function () {
    return "hello AJ";
  }
};

        下面给出一个综合的例子。如代码块1-1-3。

/***@@    代码块1-1-3    简写的综合例子    @@***/
var person = {
  name = "张雨泽",
  
  birth,//等同于birth:birth
  
  hello() { console.log('My name is ',this.name);}//等同于hello: function() ...
};

2）属性名表达式法

        属性名表达式法，顾名思义，就是用表达式的计算结果来作为属性名。如代码块1-2-1。

/***@@    代码块1-2-1    属性名表达式法    @@***/
var prop = 'val';
var obj= {
  [prop] : true,
  ['a'+'bc'] : 123
};
//obj { val : true, abc : 123}

二、Object.is()【了解】

        Object.is()用来比较两个值是否严格相等。它与严格相等比较运算符（===）的行为基本一致。见代码块2-1。

/***@@    代码块2-1    Object.is()用法规范    @@***/
Object.is('foo', 'foo') // true
Object.is({}, {}) // false

//Object.is与===的不同之处只有两个，一个是-0与+0，一个是NaN等于自身
+0 === -0 // true
NaN === NaN // false

Object.is(+0 , -0); // false
Object.is(NaN, NaN) // true

//ES5可以通过下面的代码来部署Object.is
Object.defineProperty(Object, 'is',{
  value: function(x,y){
    if(x===y) {
      //针对+0 不等于 -0的情况
      return x !==0 || 1/x ===1/y;
    }
    // 针对NaN的情况
    return x !== x&& y!==y;
  },
  configurable:true,
  enumerable: true,
  writable: true
});

三、Object.assign()【了解】

        Object.assign()用来将源对象source的所有可枚举属性复制到目标对象target。见代码块3-1。

/***@@    代码块3-1    Object.assign()    @@***/
var target = {a:1};
var source1 = {b:2};
var source2 = {c:3};

Object.assign(target,source1,source2);

target // {a:1,b:2,c:3}

查看更多ES6教学文章：

​​1. 【ES6】let与const 详解​​2. 【ES6】变量的解构赋值
3. 【ES6】字符串的拓展
4. 【ES6】正则表达式的拓展
5. 【ES6】数值的拓展
6. 【ES6】数组的拓展
7. 【ES6】函数的拓展
8. 【ES6】对象的拓展
9. 【ES6】JS第7种数据类型：Symbol
10. 【ES6】Proxy对象
11. 【ES6】JS的Set和Map数据结构
12. 【ES6】Generator函数详解
13. 【ES6】Promise对象详解
14. 【ES6】异步操作和async函数
15. 【ES6】JS类的用法class
16. 【ES6】Module模块详解
17. 【ES6】ES6编程规范 编程风格

参考文献

阮一峰 《ES6标准入门（第2版）》