美文网首页
ES6对象扩展

ES6对象扩展

作者: 二璇妹妹 | 来源:发表于2017-07-04 12:51 被阅读0次

    声明对象时,可以只写属性名,不写属性值

    /*ES5中*/
    var obj = {
        foo: "aaaa"
    }
    console.log(obj.foo);  //aaaa
    /*ES6中*/
    var foo = 'aaaa';
    var obj = {
        foo
    }
    console.log(obj.foo);  //aaaa
    
    var obj1 = {
        foo() {
            return 'hello!';
        }
    }
    var obj2 = {
        foo: function () {
            return 'hello!'
        }
    }
    console.log(obj1.foo()); //hello
    console.log(obj2.foo()); //hello
    

    增加对象属性的方法

    var prop = 'age';
    var obj = {};
    obj.name = 'name1';
    obj[prop] = 18; //用方括号作为对象的属性名,然后里面写一个变量或者表达式:
    obj["prop"+"prop"] = "pppp";
    console.log(obj);  //Object {name: "name1", age: 18, propprop: "pppp"}
    

    Object.is()属性

    用于比较两个值是否相等

    在ES5中,我们常用到 == 和 ===,但 == 会存在隐式类型转换,===的NaN不等于自身,+0等于-0

    ES6的Object.is()属性解决了这个问题。

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

    Object.assign()属性

    对象合并,该方法第一个参数是目标对象,后面的参数都是源对象。
    相当于浅拷贝(如果大家不知道什么是浅拷贝,可以参考我前面的写的)

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

    一旦遇到同名属性,后面对象的属性会覆盖前面对象的属性。

    var target = { a: 1 };
    var source1 = { b: 2 };
    var source2 = { b: 3 };
    Object.assign(target, source1, source2);
    console.log(target); //Object {a: 1, b: 3}
    

    Object.keys()属性

    输出属性名

    var obj = { foo: "bar", baz: 42 };
    console.log(Object.keys(obj));   //["foo", "baz"]
    

    Object.values()属性

    输出属性值

    var obj = { foo: "bar", baz: 42 };
    console.log(Object.values(obj));//["bar", 42]
    

    Object.entries()属性

    将对象的所有信息包装成为二维数组


    读写操作

    _proto_前后的双下划线,说明它本质上是一个内部属性,而不是一个正式的对外的 API,只是由于浏览器广泛支持,才被加入了 ES6.

    从语义的角度,还是从兼容性的角度,都不要使用这个属性,而是使用下面的Object.setPrototypeOf()(写操作)Object.getPrototypeOf()(读操作)、Object.create()(生成操作)代替.

    var obj1 = {
        a:1
    }
    var obj2 = {
        b:2
    }
    Object.setPrototypeOf(obj1,obj2);//obj1.__proto__ = obj2;
    console.log(obj1.b); //2
    

    扩展运算符 “ ... ”

    var arr1 = [1,2,3];
    var arr2 = [4,5,6];
    var arr = [...arr1,...arr2];
    console.log(arr); //[1,2,3,4,5,6]
    

    rest运算符 “ ... ”

    var [a,...b] = [1,2,3];
    console.log(a);//1
    console.log(b);//[2,3]
    

    相关文章

      网友评论

          本文标题:ES6对象扩展

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