ES6对象操作指南：对象赋值、动态键、方法定义与Object.is/assign用法

本文通过具体实例详细介绍ES6中对象的相关操作，供读者参考学习。

对象简写赋值

1. 对象简写赋值

在ES5中，对象属性的赋值通常需要将变量名与键名重复书写，具体写法如下：


let name="小明";
let skill= 'es6开发';
var obj= {name:name,skill:skill};
console.log(obj);

运行上述代码后的输出结果如下：

对象简写赋值

ES6引入了对象属性的简写语法，允许在声明对象时直接引用同名变量进行赋值，示例如下：


let name="小明";
let skill= 'es6开发';
var obj= {name,skill};
console.log(obj);

该方式生成的对象结果与前述ES5写法完全一致。

动态键名构建

2. 动态键名构建

在实际开发中，有时需要从后端接口获取键名（key），而非在前端硬编码。此时，我们需要根据获取到的动态key值来构建对象并返回给后端。

在前端JavaScript中，可以使用方括号语法 [key] 来动态构建对象的键名。


let key='skill';//假定是后台定义的key值
var obj={
  [key]:'web' //构建key值
}
console.log(obj.skill);//web

3. 定义对象方法

对象方法的定义是将属性值设置为匿名函数（或箭头函数），从而将数据属性转化为行为属性。


var obj={
  add:function(a,b){
    return a+b;
  }
}
console.log(obj.add(1,2)); //3

4. Object.is() 严格相等比较

在ES5中，判断两个值是否相等通常使用全等运算符 ===，示例如下：


var obj1 = {name:'admin'};
var obj2 = {name:'admin'};
console.log(obj1.name === obj2.name);//true

ES6引入了 Object.is() 方法来进行更精确的比较，用法如下：


var obj1 = {name:'admin'};
var obj2 = {name:'admin'};
console.log(Object.is(obj1.name,obj2.name))//true

为了清晰区分 === 与 Object.is() 的行为差异，请参考以下代码的输出结果。


console.log(+0 === -0); //true
console.log(NaN === NaN ); //false


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

核心区别在于：=== 运算符认为 +0 等于 -0，且 NaN 不等于 NaN；而 Object.is() 则区分 +0 与 -0，并认为 NaN 等于自身（严格相等）。

6. Object.assign() 对象合并

利用 Object.assign() 方法，可以实现类似数组拼接的对象合并操作。


var a={a:'a'};
var b={b:'b'};
var c={c:'c'};
let d=Object.assign(a,b,c)
console.log(d);

执行上述代码后的输出结果如下：

对象简写赋值

感兴趣的用户可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun 测试上述代码的运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述的ES6对象操作技巧对大家学习JavaScript程序设计有所帮助。