ECMAScript6基础学习教程(五)对象

2020-09-22 10:47:47 浏览数 (1)

ES6在处理对象上,又添加了新方法。

1. 属性简洁写法

当属性名和属性值变量同名时,ES6允许在对象中只写属性名,不写属性。

关键点有两个:

  1. 属性值为变量
  2. 属性值变量名==属性名

例如:

代码语言:javascript复制
var foo = "abc";
var obj = {
  name: 'nicole',
  foo
}; //相当于是 var obj = {foo: foo}

如果属性值是函数,可以省略关键字function,如下:

代码语言:javascript复制
var obj = {
  say(name) {
    return "hello, "   name;
  }
}
//等价于
var obj = {
  say: function (name) {
    return "hello, "   name;
  }
}
2. 属性名表达式

ES5中,使用字面量方式定义对象时,属性名不能是变量。ES6中可以支持变量/表达式格式的属性名,格式为**[propertyName]**。

代码语言:javascript复制
var key = "property name";
var a = "hello";
var b = "world";
var obj = {
  [key]: 1,
  name: "nicole",
  [a " " b]: "good"
};
obj["property name"]; //1
obj["hello world"]; //"good"

注意:“属性简洁写法”和“属性名表达式”不能同时使用。

3. Object.is()

Object.is(val1, val2)用于判断两个值是否严格相等,用===判断。

注意:我们知道NaN===NaN会返回false,但是Object.is(NaN, NaN),返回true

4. Object.assign()

Object.assign(target, object1 [,objectN])用于对象拷贝,将对象object1...复制到对象target中。

Object.assign()**是浅拷贝**,类似jQuery.extend( false, target, object1 [, objectN ] )

代码语言:javascript复制
var obj1 = {a: {b:1}, x: 1};
var obj2 = {x: 3, y: 4};
var target = {};
Object.assign(target, obj1, obj2);
// 改变复制源对象的值
obj1.a.b = 11;
// 复制对象同步改变,说明复制的仅仅是源对象引用地址
console.log(target); // { a: { b: 11 }, x: 3, y: 4 }
小结

最常用的是“属性简洁写法”和“属性名表达式”。

做对象拷贝时,除了Object.assign(),更简便的方法是使用“扩展运算符”(参考上一节文章ECMAScript6基础学习教程(四)函数 - 扩展运算符)。

例子如下:

代码语言:javascript复制
var obj1 = {a: {b:1}, x: 1};
var obj2 = {x: 3, y: 4};
var target = {...obj1, ...obj2};
// 改变复制源对象的值
obj1.a.b = 11;
// 复制对象同步改变
console.log(target); // { a: { b: 11 }, x: 3, y: 4 }

0 人点赞