美文网首页
ES6--对象扩展

ES6--对象扩展

作者: bjhu电net | 来源:发表于2017-09-21 12:50 被阅读0次

    简洁表示法

    {
        //简洁表示法
        let o=1;
        let k=2;
        let es5={
            o:o,
            k:k
        }
        let es6={
            o,k
        }
        console.log(es5,es6)
        //{o: 1, k: 2} {o: 1, k: 2}
    
        let es5_m={
            hello:function(){
                console.log("hello")
            }
        }
        let es6_m={
            hello(){
                console.log('world')
            }
        }
        console.log(es5_m.hello(),es6_m.hello())
        //hello world
    
    }
    

    在对象中如果有函数,es6中采用简洁表示,a(c){},如果在es6中定义一个函数,那么采用箭头函数let a=(c)=>{}

    属性表达式

    {
        //属性表达式
        let a='b';
        let es5_o={
            a:'c'
        }
        let es6_o={
            [a]:'c'//[a]的值是b
        }
        console.log(es5_o,es6_o[a])
        //{a: "c"} {b: "c"}
    }
    

    在属性表达式中,es6可以采用变量的方式去定义key值,es5中的key值只能是固定的,在对象调用key值的时候,es6如果想采用key值,那么采取中括号的方式[],.的方式不能得到变量。

    方法的name属性

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

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

    新增api

    Object.is()
    用来判断两个对象是否相等,在es5中NaN和NaN不相等,用这个方法相等。

    {
        //新增api
        console.log(Object.is('abc','abc'))
        //true
        console.log(Object.is([1],[1]))
        //false数组是引用类型,地址不一样,is()的功能和三个等号功能差不多
    }
    

    Object.assign()
    方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
    简单的来说就是,在有指针的情况下,浅拷贝只是增加了一个指针指向已经存在的内存,而深拷贝就是增加一个指针并且申请一个新的内存,使这个增加的指针指向这个新的内存,采用深拷贝的情况下,释放内存的时候就不会出现在浅拷贝时重复释放同一内存的错误!

    Object.assign(target, ...sources)

    {
        console.log(Object.assign({a:"a"},{b:"b"}))
        //{a: "a", b: "b"}只能是浅拷贝,即引用地址不会改变。
    }
    function test() {
      let a = { b: {c:4} , d: { e: {f:1}} }
      let g = Object.assign({},a)
      let h = JSON.parse(JSON.stringify(a));
      console.log(g.d) // { e: { f: 1 } }
      g.d.e = 32
      console.log('g.d.e set to 32.') // g.d.e set to 32.
      console.log(g) // { b: { c: 4 }, d: { e: 32 } }
      console.log(a) // { b: { c: 4 }, d: { e: 32 } }
      console.log(h) // { b: { c: 4 }, d: { e: { f: 1 } } }
      h.d.e = 54
      console.log('h.d.e set to 54.') // h.d.e set to 54.
      console.log(g) // { b: { c: 4 }, d: { e: 32 } }
      console.log(a) // { b: { c: 4 }, d: { e: 32 } }
      console.log(h) // { b: { c: 4 }, d: { e: 54 } }
    }
    test();
    

    Object.entries()

    {
        let test={k:123,o:456};
        for(let [key,value] of Object.entries(test)){
            console.log(key,value)
        }
    }
    

    proto属性,Object.setPrototypeOf(),Object.getPrototypeOf()

    Object.setPrototypeOf()相当于proto,用来设置当前对象的prototype对象,相当于一个实例的proto等于构造函数的prototype属性。
    proto属性没有写入 ES6 的正文,而是写入了附录,原因是proto前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6。标准明确规定,只有浏览器必须部署这个属性,其他运行环境不一定需要部署,而且新的代码最好认为这个属性是不存在的。因此,无论从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)、Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替。

    // 格式
    Object.setPrototypeOf(object, prototype)
    
    // 用法
    const o = Object.setPrototypeOf({}, null);
    

    super关键字

    this关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super,指向当前对象的原型对象

    const proto = {
      foo: 'hello'
    };
    
    const obj = {
      find() {
        return super.foo;
      }
    };
    
    Object.setPrototypeOf(obj, proto);
    obj.find() // "hello"
    

    上面代码中,对象obj的find方法之中,通过super.foo引用了原型对象proto的foo属性。

    注意,super关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。

    扩展运算符,支持不好

    {
        //扩展运算符
        let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:"ccc"};
        c={
            c:"ddd",
            d:"ccc"
        }
    }
    

    相关文章

      网友评论

          本文标题:ES6--对象扩展

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