ES6学习笔记之对象的扩展

Learning Card

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

---

新属性

1. 属性的简洁表达法

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

const foo = "bar";
const baz = {foo};
baz //{foo: "bar"}

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

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}
getPoint()  // {x: 1, y: 10}

2. 属性名表达式

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

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

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

let obj = {
  prop: true
}

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

let obj = {
  [prop]: true;
}

3. 方法的name属性

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

const person = {
  sayName() {
    console.log("hello");
  }
};
person.sayName.name  //"sayName"

新方法

Object.is()

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

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

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

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

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

Object.assign()

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

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用来处理数组时，会把数组作为对象，即索引号被作为属性

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

---

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