ES Object

作者: 碧玉疾风丶 | 来源:发表于2017-03-02 11:29 被阅读0次

    属性简单表达

    
    //属性名
    var name = "LiuYashion"
    var people = {name}  // people { name:"LiuYashion" }
    
    function f(name, locate){
        return {name, locate}
    }
    f("LiuYashion","Shenzhen") 
    // { name:"LiuYashion", locate:"ShenZhen" }
    
    //方法
    var birth = '2000/01/01';
    var Person = {
      name: 'LiuYashion',
      birth,                //等同于birth: birth
      hello() { console.log('my name is :', this.name); }// 等同于hello: function ()...
    };
    

    属性名表达式

    let propKey = 'age';
    let person = {
      [propKey]: 18,
      ['is' + 'Male']: true,
      ['say'+'something'](){ console.log( this.age ) }
    };//{ age:18, isMale:true }
    
    person.saysomething() // 18
    

    对象做属性名时

    //keyA和keyB都转成[object object],需要注意
    const keyA = {a: 1};
    const keyB = {b: 2};
    
    const myObject = {
      [keyA]: 'valueA',
      [keyB]: 'valueB'
    };
    
    myObject // Object {[object Object]: "valueB"}
    

    对象比较

    Object.is('foo', 'foo')
    // true
    Object.is({}, {})
    // false
    +0 === -0 //true
    NaN === NaN // false
    
    Object.is(+0, -0) // false
    Object.is(NaN, NaN) // true
    

    Object.assign()

    Object.assign拷贝的属性是有限制的:

    • 只拷贝源对象的自身属性(不拷贝继承属性)
    • 也不拷贝不可枚举的属性(enumerable: false)
    var people  = { name:'Liu' }
    var age     = { age:20 }
    var locate  = { 
        domicile:'ShenZhen',
        home:{
            province:'Hubei',
            city:'YiChang'
        }
    }
    
    var people = Object.assign(people, age, locate) 
    Object.defineProperty(people, 'invisible', {
        enumerable: false,
        value: 'hello'
    })
    
    console.log( Object.keys(people) ) 
    //[ 'name', 'age', 'domicile', 'home' ],keys只会遍历可枚举属性
    
    console.log( Object.getOwnPropertyNames(people) ) 
    //[ 'name', 'age', 'domicile', 'home', 'invisible' ],getOwnPropertyNames可遍历到不可枚举属性
    
    

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

    //locate.home.city改变,people里的键值也改变
    locate.home.city = 'XiaoXiTa'
    console.log(people)
    
    /*
        {   
            name: 'Liu',
            age: 20,
            domicile: 'ShenZhen',
            home: { 
                province: 'Hubei', 
                city: 'YiChang' 
            } 
        }
     */
    

    tips

    var v1 = 'abc';
    var v2 = true;
    var v3 = 10;
    
    //文档
    var obj = Object.assign({}, v1, v2, v3);
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }
    
    var strObj2 = Object('abc')
    console.log( strObj2 )  // { "0": "a", "1": "b", "2": "c" }
    
    //实测
    var strObj1 = Object("LiuYaXiong")
    console.log( strObj1 )  //[String: 'LiuYaXiong']
    
    
    //Object.assign可以用来处理数组,但是会把数组视为对象。
    var strObj3 = Object.assign([1, 2, 3], [4, 5])
    console.log( strObj3 )
    // [4, 5, 3]
    
    

    对象的可枚举属性

    let objtest = { foo: 123 }
    var dis = Object.getOwnPropertyDescriptor(objtest, 'foo')
    {
        value: 123,
        writable: true,
        enumerable: true,
        configurable: true
    }
    

    Object.keys(),Object.values(),Object.entries(),同名方法类似数组

    let {keys, values, entries} = Object;
    let obj5 = { a: 1, b: 2, c: 3 };
    
    for (let key of keys(obj5)) {
      console.log(key); // 'a', 'b', 'c'
    }
    
    for (let value of values(obj5)) {
      console.log(value); // 1, 2, 3
    }
    
    for (let [key, value] of entries(obj5)) {
      console.log([key, value]); // ['a', 1], ['b', 2], ['c', 3]
    }
    

    对象的扩展运算符类似数组的

    Null 传导运算符

    var student = {
        name:'Nick',
        age:18,
        hometown:{
            province:'GuangDong',
            city:'ShenZhen'
        }
    }
    
    const result = student?.name
    console.log(result)
    

    相关文章

      网友评论

        本文标题:ES Object

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