前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >es6 对象的扩展

es6 对象的扩展

作者头像
用户1197315
发布2018-01-19 15:23:15
8130
发布2018-01-19 15:23:15
举报
文章被收录于专栏:柠檬先生柠檬先生

1.属性的简洁表示法

代码语言:js
复制
    function f(x,y) {
      return {x,y};
    }
    // 等同于
    function f(x,y){
      return {x:x,y:y};
    }
    f(1,2)   // Object {x:1,y:2}

    例如:

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

    例如:用于函数的返回值

代码语言:js
复制
    function getPoint() {
        const x = 1;
        const y = 10;
        return {x,y};
    }
    console.log(getPoint());
      // {x:1,y:10}

  2.属性名表达式

代码语言:js
复制
    表达式作为对象的属性名
      let obj = {
        [propKey]: true,
        ['a' + 'bc']:123
      };
      console.log(obj[propKey]); // true
      console.log(obj['abc']); // 123

    例如:

代码语言:js
复制
      let lastWord = 'last word';
      const a = {
        ‘first word’: 'hello',
        [lastWord]: 'world'
      }
      console.log(a['first word']); // "hello"
      console.log(a[lastWord]); // "world"
      console.log(a['last word']); // "world"

    例如: 表达式可以用于定义方法名

代码语言:js
复制
      let obj = {
        ['h'+'ello']() {
          return 'hi';
        }
      };
      console.log(obj.hello()); // 'hi'

  3.方法的 name 属性

    例如:函数的name 属性,返回函数名。

代码语言:js
复制
      const person = {
        sayName() {
        console.log('hello');
        }
      }
      console.log(person.sayName.name); // "sayName"

4.Object.is()

    ES 比较两个值是否相等,只有两个运算符,相等运算符,相等运算符(==)

    和严格相等运算符(===)

代码语言:js
复制
      +0 === -0 // true
      NaN === NaN // false
      Object.is(+0,-0); // false
      Object.is(NaN,NaN) // true

5.Object.assign()

    Object.assign 方法用于对象的合并,将源对象的所有的可枚举属性,赋值到目标对象

    例如;

代码语言:js
复制
      const target = {a:1};
      const source1 = {b:2};
      const source2 = {c:2};
      Object.assign(target,source1,source2);
      console.log(target); // {a:1,b:2,c:3}

    例如:同名属性的替换,当遇到同名属性的时候,处理方法是替换。

代码语言:js
复制
      const target = {a:{b:'c',d:'e'}}
      const source = {a: {b:'hello'}}
      console.log(Object.assign(target,source))
        // {a: {b:'hello'}}

    例如: 数组的处理

      Object.assign 可以用来出来数组,把数组作为对象看

代码语言:js
复制
      Object.assign([1,2,3],[4,5])
        // [4,5,3]

    常见用途(1) 为对象添加属性

代码语言:js
复制
        class Point {
          constructor(x,y){
            Object.assign(this,{x,y});
          }
        }

    常见用途(2) 为对象添加方法

代码语言:js
复制
      Object.assign(SomeClass.prototype,{
        someMethod(arg1,arg2){
          .....
        }
      anotherMethod(){
        ...
        }
      })

    常见用途(3) 克隆对象

代码语言:js
复制
      function clone (origin) {
        return Object.assign({},origin);
      }

6.属性的可枚举行和遍历

    可枚举性

代码语言:js
复制
      Object.getOwnProperDescriptor 方法可以获取该属性的描述对象
        let obj = {foo:123};
      Object.getOwnPropertyDescriptor(obj,'foo')
        // {
          value: 123,
          writable: true,
          enumerable: true,
          configurable:true
        }

    描述对象的enumerable 属性,称为“可枚举属性” 如果该属性的值为false,

      就表示会忽略当前属性。

    目前有四个操作会忽略 enumerable 为false 属性。

      for...in , Object.keys(), JSON.stringify(), Object.assign();

      ES6一共有5种方法可以遍历对象的属性

        (1) for ... in

            循环遍历对象自身的和继承的可枚举属性

        (2) Object.keys(obj)

            Object.keys 返回一个数组,包括对象自身的所有可枚举属性

        (3) Object.getOwnPropertyNames(obj)

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

        (4) Object.getOwnPropetrySymbols(obj)

            Object.getOwnPropetrySymbols 返回一个数组,包含对象自身的所有

            Symbol属性的键名。

        (5) Reflect.ownKeys(Obj)

          Reflect.ownKeys 返回一个数组,包含对象自身的所有键名。

8._proto_ 属性。

    _proto_ 属性,用来读取和设置当前对象的protoype对象。

代码语言:js
复制
      const obj = {
        method: function(){
          console.log(111)
        }
      }
    obj._proto_= someOtherrObj;
    Object.setPrototypeOf()
    Object.setPrototypeOf 方法的作用与 _proto_ 相同,用来设置一个对象的prototype对象
      返回参数对象本身,。
        // 格式
      Object.setPrototypeOf(object,prototype)
        // 用法
      const o = Object.setPrototypeOf({},null);
        Object.getPrototypeOf()

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

            Object.getPrototypeOf(obj);

9.super 关键字

    this 关键字总是指向函数所在的当前对象,super 指向当前对象的原型对象。

代码语言:js
复制
      const proto = {
        foo: 'hello'
      };
      const obj = {
        find(){
        return super.foo;
        }
      }
      Object.setPrototypeOf(obj,proto);
      obj.find();
代码语言:js
复制
10.Object.keys() ,Object.values(),Object.entries()
    let {keys,values,entries} = Object;
    let object = {a:1,b:2,c:3};
    for (let key of keys(obj)){
      console.log(key); // 'a','b','c'
    }
    for(let key of keys(obj)){
      console.log(key);// 'a','b','c'
    }
    for(let value of values(obj)){
      console.log(key); // 1,2,3
      }
    for (let [key,value] of entries(obj)){
      console.log([key,value]); // ['a',1],['b',2],['c',3]
    }

11.对象的扩展运算

    对象的结构赋值用于从一个对象取值,相当于将所有可遍历的,但尚未对齐的属性,

    分配到指定的对象上面,所有的键和值他们的值,都会拷贝到新对象上面。

代码语言:js
复制
    let {x,y,...z} = {x:1,y:2,a:3,b:4};
      x // 1
      y // 2
      z // {a:3,b:4}

    扩展运算

      扩展运算符(...) 用于取出参数对象的多有可遍历属性,拷贝到当前对象之中。

代码语言:js
复制
        let z = {a:3,b:4};
        let n = {...z};
        n // {a:3,b:4}

    合并两个对象

代码语言:js
复制
      let ab = {...a,...b};
        // 等同于
      let ab = Object.assign({},a,b)
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-12-16 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档