ES6学习笔记之对象的扩展

发表于 更新于 分类于 阅读次数： Disqus：

Learning Card

  • 新特性
    • 属性的简洁表达法
      • 可以直接写入变量和函数
      • 即先给属性赋值，再将属性添加到对象中
    • 属性名表达式
      • 可以在大括号{}中使用方括号属性名[]
    • 方法的name属性
      • 即函数的name属性
  • 新方法
    • Object.is()
      • 判断两个值是否严格相等
    • Object.assign()
      • 用于合并对象

新属性

1. 属性的简洁表达法

ES6可以直接写入变量和函数，作为对象的属性和方法

1
2
3
const foo = "bar";
const baz = {foo};
baz //{foo: "bar"}

这种方法用于写函数的返回值非常方便

1
2
3
4
5
6
function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}
getPoint()  // {x: 1, y: 10}

2. 属性名表达式

ES5中，表达对象的方法有两种：

1
2
3
4
//方法1
obj.prop = true;
//方法2
obj[prop] = true;

如果使用大括号来定义对象，则只能使用方法1来定义属性

1
2
3
let obj = {
  prop: true
}

ES6允许使用方法2作为属性名

1
2
3
let obj = {
  [prop]: true;
}

3. 方法的name属性

函数的name属性返回函数名，这点在函数的扩展中提到过。对象方法也是函数，因此也有name属性。

1
2
3
4
5
6
const person = {
  sayName() {
    console.log("hello");
  }
};
person.sayName.name  //"sayName"

新方法

Object.is()

用于判断两个值是否严格相等，与===基本一致

1
2
Object.is('abc', 'abc')  //true
Object.is({}， {})  //false

不同之处是正负零和NaN的判断

1
2
3
4
5
+0 === -0   //true
Object.is(+0, -0)  //false

NaN === NaN   //false
Object.is(NaN, NaN)  //true

Object.assign()

用于对象的合并，将源对象的所有可枚举属性赋值给目标对象。

1
2
3
4
const target = {a: 1};
const source = {b: 2};
Object.assign(target, source);
target // {a: 1, b: 2}

Object.assign方法的第一个参数是目标对象，后面都是源对象（可以有多个）；如果目标对象和源对象有同名属性，则后面的属性会覆盖前面的属性。

注意点：

  1. Object.assign实行的是浅拷贝，即当源对象的某个属性的值是对象时，目标对象只能拷贝到这个对象的引用

  2. 遇到同名对象时，后一个属性值会覆盖前一个

  3. 当Object.assign用来处理数组时，会把数组作为对象，即索引号被作为属性

    1
    Object.assign([1, 2, 3], [4, 5])  //[4, 5, 3]

ES6学习笔记的内容主要基于阮一峰老师的《ECMAScript 6入门》，原文请见链接