手记

阮一峰的ES6---对象的扩展

属性和方法的简洁表示法
属性简写

function fn( x, y) {
    return {x,y}
}
//等同于
function fn(x,y){
     return {x:x,y:y};
}
fn(1,2)//{x:1,y:2}

方法简写

 let obj = {
       method () {
         return 'Hello';
           } 
};
//等同于
 let obj = {
     method:function(){
        return "hello";
        }
}

属性的赋值器(setter)和取值器(getter),事实上也是采用这种写法。

const cart = {
  _wheels: 4,

  get wheels () {
    return this._wheels;
  },

  set wheels (value) {
    if (value < this._wheels) {
      throw new Error('数值太小了!');
    }
    this._wheels = value;
  }
}

方法的name属性
函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。

const person = {
  sayName() {
    console.log('hello!');
  },
};

person.sayName.name   // "sayName"

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

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

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

+0 === -0 //true
NaN === NaN // false

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

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

const target = { a: 1 };

const source1 = { b: 2 };
const source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

//如果该参数不是对象,会先转成对象,然后返回
typeof Object.assign(2) //"object"

//由于undefined和null无法转成对象,所以如果他们作为参数,就会报错
Object.assign(undefined)//error
Object.assign(null) // 报错 

Object.assign的用途
为对象添加属性

class Point {
     constructor (x,y) {
           Object.assign(this, {x,y} );
         }
}
//使用Object.assign方法,将x属性和y属性添加到Point类的对象实例。

为对象添加方法

Object.assign( SomeClass.prototype , {
         someMethod(arg1,arg2){
            ...
           },
         antherMethod () {
           ...
           }
});

//等同于下面的写法
SomeClass.prototype.someMethod = function (arg1,arg2){
 ...
  };
SomeClass.prototype.anotherMethod = function () {
  ...
 };

Object.setPrototypeOf()和Object.getPrototypeOf()
Object.setPrototypeOf()方法的作用与proto相同,用来设置一个对象prototype对象,返回参数对象本身,他是ES6正式推荐的设置原型对象的方法。

let proto = {};
let obj = {x: 10 };
Object.setPrototypeOf(obj, proto);

proto.y = 20;
proto.z = 40;
obj.__proto__==proto
//true
obj.x // 10
obj.y // 20
obj.z // 40

Object.getPrototypeOf()
该方法与Object.setPrototypeOf方法配套,用于读取一个对象的原型对象。

Object.getPrototypeOf(obj);

Object.keys(),Object.values(),Object.entries()
ES6引入了Object.keys方法,返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键名。

var obj = {name:"MGT360124",age:18};
Object.keys(obj);
//[ 'name' , 'age' ]

ES2017 引入了跟Object.keys配套的Object.values和Object.entries,作为遍历一个对象的补充手段,供for...of循环使用。
Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值。

var obj = {name:"MGT360124",age:18};
Object.values(obj);
//[ 'MGT360124' , 18 ]

Object.entries方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历(enumerable)属性的键值对数组。

var obj = {name:"MGT360124",age:18};
Object.entries(obj);
//[ 'name' , 'age' ],[ 'MGT360124' , 18 ]

对象的扩展运算符
(1)解构赋值
对象的解构赋值用于从一个对象取值,相当于将所有可遍历的、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }
0人推荐
随时随地看视频
慕课网APP