归类 : JavaScript

ECMAScript 6 入门教程学习摘录之对象的扩展

1.简写

    let birth = '2000/01/01';
    const Person = {
      name: '张三',
      //等同于birth: birth
      birth,
      // 等同于hello: function ()...
      hello() { console.log('我的名字是', this.name); }
    };     
       

2.Object.is()

ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。

ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

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

3.Object.assign()

Object.assign方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

Object.assign方法实行的是浅拷贝,而不是深拷贝。

const obj1 = {a: {b: 1}};const obj2 = Object.assign({}, obj1);

obj1.a.b = 2;obj2.a.b // 2

同名属性的替换


      对于这种嵌套的对象,一旦遇到同名属性,Object.assign的处理方法是替换,而不是添加。

const target = { a: { b: 'c', d: 'e' } }const source = { a: { b: 'hello' } }Object.assign(target, source)// { a: { b: 'hello' } }

数组的处理

Object.assign可以用来处理数组,但是会把数组视为对象。

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

取值函数的处理

Object.assign只能进行值的复制,如果要复制的值是一个取值函数,那么将求值后再复制。

const source = {get foo() { return 1 }};const target = {};

Object.assign(target, source)// { foo: 1 }

上面代码中,source对象的foo属性是一个取值函数,Object.assign不会复制这个取值函数,只会拿到值以后,将这个值复制过去。

4.super 关键字

const proto = {x: 'hello',foo() {console.log(this.x);},};

const obj = {x: 'world',foo() {super.foo();}}

Object.setPrototypeOf(obj, proto);

obj.foo() // "world"

上面代码中,super.foo指向原型对象proto的foo方法,但是绑定的this却还是当前对象obj,因此输出的就是world。

5.Object.keys(),Object.values(),Object.entries()

ES2017 引入了跟Object.keys配套的Object.values和Object.entries,作为遍历一个对象的补充手段,供for...of循环使用。

let {keys, values, entries} = Object;let obj = { a: 1, b: 2, c: 3 };

for (let key of keys(obj)) {console.log(key); // 'a', 'b', 'c'}

for (let value of values(obj)) {console.log(value); // 1, 2, 3}

for (let [key, value] of entries(obj)) {console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]}

以上