es6对象的扩展,简单的学习

2017-07-18  本文已影响0人  语目

鉴于es6的出现对象以及数组出现了一些新的写法所以在此总结以防忘记重点在对象上

简洁的书写

    属性简写
    var foo = 'bar';
    var baz = {foo}
    此时baz等于{foo:"bar"}
    它相等于
    var baz = {foo:foo}  简写
    
    function f(x,y){
        return {x,y}
    }
    
    等于
    
    function f(x,y){
        return {x:x,y:y}
    }
    
    f(1,2)
    
    方法的简写
    
    var o = {
        method(){
            return "hello!"
        }
    };
    
    等于
    
    var o = {
        method:function(){
            return "hello!"
        }
    }
    
    以上方法简写了function以及简写的变量都是极为方便的写法
    
    块级作用域使用es6的写法会看到异常的简洁
    
    
    var ms = {};
    function getItem (key) {
      return key in ms ? ms[key] : null;
    }
    
    function setItem (key, value) {
      ms[key] = value;
    }
    
    function clear () {
      ms = {};
    }
    
    module.exports = { getItem, setItem, clear };
    // 等同于
    module.exports = {
      getItem: getItem,
      setItem: setItem,
      clear: clear
    };
    
    var obj = {
      class () {}
    };
    
    // 等同于
    
    var obj = {
      'class': function() {}
    };
    
    使用class等关键字声明加引号便不会出现解析class的情况

如果某个方法的值是一个Generator函数,前面需要加上星号。 Generator 生产者、发生器

    var obj = {
      * m(){
        yield 'hello world';
      }
    };

## 属性命名可以以一个表达式的形式存在方法名同样也可以,以下:

    let propKey = 'foo';
    
    let obj = {
      [propKey]: true,
      ['a' + 'bc']: 123
    };
    
    
    obj.foo = true;
    obj['a' + 'bc'] = 123;
    
    相等于
    
    var obj = {
      foo: true,
      abc: 123
    };
    
    let obj = {
          ['h' + 'ello']() {
            return 'hi';
          }
        };
        
    obj.hello() 

name属性

    函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。
    
    const person = {
      sayName() {
        console.log('hello!');
      },
    };
    
    person.sayName.name   // "sayName"
    上面代码中,方法的name属性返回函数名(即方法名)。
    
    如果对象的方法使用了取值函数(getter)和存值函数(setter),则name属性不是在该方法上面,而是该方法的属性的描述对象的get和set属性上面,返回值是方法名前加上get和set。
    
    const obj = {
      get foo() {},
      set foo(x) {}
    };
    
    obj.foo.name
    // TypeError: Cannot read property 'name' of undefined
    
    const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
    
    descriptor.get.name // "get foo"
    descriptor.set.name // "set foo"
    有两种特殊情况:bind方法创造的函数,name属性返回bound加上原函数的名字;Function构造函数创造的函数,name属性返回anonymous。
    
    (new Function()).name // "anonymous"
    
    var doSomething = function() {
      // ...
    };
    doSomething.bind().name // "bound doSomething"
    如果对象的方法是一个 Symbol 值,那么name属性返回的是这个 Symbol 值的描述。
    
    const key1 = Symbol('description');
    const key2 = Symbol();
    let obj = {
      [key1]() {},
      [key2]() {},
    };
    obj[key1].name // "[description]"
    obj[key2].name // ""
    上面代码中,key1对应的 Symbol 值有描述,key2没有。

object.is()

于== 和 === 类似但又不相同以下

    Object.is('foo', 'foo')
    // true
    Object.is({}, {})
    // false
    不同之处只有两个:一是+0不等于-0,二是NaN等于自身。
    
    +0 === -0 //true
    NaN === NaN // false
    
    Object.is(+0, -0) // false
    Object.is(NaN, NaN) // true
    ES5可以通过下面的代码,部署Object.is。
    
    Object.defineProperty(Object, 'is', {
      value: function(x, y) {
        if (x === y) {
          // 针对+0 不等于 -0的情况
          return x !== 0 || 1 / x === 1 / y;
        }
        // 针对NaN的情况
        return x !== x && y !== y;
      },
      configurable: true,
      enumerable: false,
      writable: true
    });

Object.assign 合并对象

即 : 将源对象(source)的所有可枚举属性,复制到目标对象(target)。

    var target = { a: 1 };
    
    var source1 = { b: 2 };
    var source2 = { c: 3 };
    
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}
    Object.assign方法的第一个参数是目标对象,后面的参数都是源对象。
    
    注意,如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
    
    var target = { a: 1, b: 1 };
    
    var source1 = { b: 2, c: 2 };
    var source2 = { c: 3 };
    
    Object.assign(target, source1, source2);
    target // {a:1, b:2, c:3}
    如果只有一个参数,Object.assign会直接返回该参数。

Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

属性的五种便利方法

(1)for...in

for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)

Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)。

(3)Object.getOwnPropertyNames(obj)

Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)。

(4)Object.getOwnPropertySymbols(obj)

Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性。

(5)Reflect.ownKeys(obj)

Reflect.ownKeys返回一个数组,包含对象自身的所有属性,不管属性名是 Symbol 或字符串,也不管是否可枚举。

上一篇 下一篇

猜你喜欢

热点阅读