美文网首页
es6对象的扩展,简单的学习

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

作者: 语目 | 来源:发表于2017-07-18 00:46 被阅读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 或字符串,也不管是否可枚举。

相关文章

  • es6之扩展运算符 三个点(...)

    es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点(…)对象的扩展...

  • 2018-08-24

    ES6对象的扩展

  • es6之扩展运算符 三个点(...)

    es6之扩展运算符 三个点(…) 对象的扩展运算符理解对象的扩展运算符其实很简单,只要记住一句话就可以:对象中的扩...

  • ES6扩展归纳

    ES6扩展归纳 介绍ES6相比与ES5在原有对象上的扩展,包括字符串、正则、数值、函数、数组、对象等扩展,本文是阮...

  • es6的数值,函数,字符串扩展

    一、es6的数值扩展 二、es6的函数扩展 代码效果:对象解构在函数中的应用 三、es6字符串扩展 常用方法 代码...

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

    鉴于es6的出现对象以及数组出现了一些新的写法所以在此总结以防忘记重点在对象上 简洁的书写 如果某个方法的值是一个...

  • ES6新增特性(二)

    ES6 的内置对象扩展 Array 的扩展方法 一、Array 的扩展方法 1. 扩展运算符(展开语法) 扩展运算...

  • ES6中对象的扩展

    ES6不仅为字符串、数值和数组带来了扩展,也为对象带来了很多新特性。这一节,我们来一起学习一下对象的扩展。 对象的...

  • es6笔记

    es6 对象扩展方法is() 全等比较Object.is(NaN,NaN) // trueassign() 对象合...

  • 对象

    对象的深拷贝 对象合并 assign() hasOwnProperty 遍历赋值 Es6,扩展运算符 Object...

网友评论

      本文标题:es6对象的扩展,简单的学习

      本文链接:https://www.haomeiwen.com/subject/lxkckxtx.html