• Object的多种方法


    Object.entries()

    Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

    通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来,结果和 for...in 一致,但不会遍历原型属性。

    const obj = { foo: 'bar', baz: 'abc' }; 
    console.log(Object.entries(obj));  // [['foo', 'bar'], ['baz', 'abc']]
    
    const arr = [1, 2, 3]; 
    console.log(Object.entries(arr));  // [['0', 1], ['1', '2'], ['2', '3']]
    
    const arr1 = [{ a: 1 }, 2, 3]; 
    console.log(Object.entries(arr1));  // [['0', { a: 1 }], ['1', '2'], ['2', '3']]
    
    const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }]; 
    console.log(Object.entries(arr2));  // [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]]
    
    const str = '123'; 
    console.log(Object.entries(str));  // [['0', '1'], ['1', '2'], ['2', '3']]
    
    const num = 123; 
    console.log(Object.entries(num));  // []
    
    const float1 = 12.3; 
    console.log(Object.entries(float1));  // []
    
    const obj2 = { foo: 'bar', baz: 'abc' }; 
    console.log(Object.entries(obj2));  // [['foo', 'bar'], ['baz', 'abc']]
    const map = new Map(Object.entries(obj2)); 
    console.log(map); // Map {'foo' => 'bar', 'baz' => 'abc'}

    JavaScript Demo: Object.assgin()

    Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

    const object1 = {
      a: 1,
      b: 2,
      c: 3
    };
    const object2 = Object.assign({c: 4, d: 5}, object1);
    console.log(object2.c, object2.d);
    // expected output: 3 5
    

      

    Object.assign(target, ...sources);

    target: 目标对象
    sources: 源对象

    如果目标对象中的属性具有相同的键,则属性将被源中的属性覆盖。后来的源的属性将类似地覆盖早先的属性。
    Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()Object.defineProperty()
    String类型和Symbol类型的属性都会被拷贝。
    在出现错误的情况下,例如,如果属性不可写,会引发TypeError,如果在引发错误之前添加了任何属性,则可以更改target对象。
    注意Object.assign 不会跳过那些值为 [null] 或 [undefined]的源对象。
     

    Object.defineProperty()

    对象是由多个名/值对组成的无序的集合。对象中每个属性对应任意类型的值。
    定义对象可以使用构造函数或字面量的形式:

    var obj = new Object;  //obj = {}
    obj.name = "张三";  //添加描述
    obj.say = function(){};  //添加行为

    除了以上添加属性的方式,还可以使用Object.defineProperty定义新属性或修改原有的属性。

    Object.defineProperty(obj, prop, descriptor)
    obj:必需。目标对象 
    prop:必需。需定义或修改的属性的名字
    descriptor:必需。目标属性所拥有的特性
    var obj = {
        test:"hello"
    }
    //对象已有的属性添加特性描述
    Object.defineProperty(obj,"test",{
        configurable:true | false,
        enumerable:true | false,
        value:任意类型的值,
        writable:true | false
    });
    //对象新添加的属性的特性描述
    Object.defineProperty(obj,"newKey",{
        configurable:true | false,
        enumerable:true | false,
        value:任意类型的值,
        writable:true | false
    });
    

      

    数据描述
    当修改或定义对象的某个属性的时候,给这个属性添加一些特性:
    
    var obj = {
        test:"hello"
    }
    //对象已有的属性添加特性描述
    Object.defineProperty(obj,"test",{
        configurable:true | false,
        enumerable:true | false,
        value:任意类型的值,
        writable:true | false
    });
    //对象新添加的属性的特性描述
    Object.defineProperty(obj,"newKey",{
        configurable:true | false,
        enumerable:true | false,
        value:任意类型的值,
        writable:true | false
    });
    数据描述中的属性都是可选的,来看一下设置每一个属性的作用。
    
    value
    属性对应的值,可以使任意类型的值,默认为undefined
    
    var obj = {}
    //第一种情况:不设置value属性
    Object.defineProperty(obj,"newKey",{
    
    });
    console.log( obj.newKey );  //undefined
    ------------------------------
    //第二种情况:设置value属性
    Object.defineProperty(obj,"newKey",{
        value:"hello"
    });
    console.log( obj.newKey );  //hello
    writable
    属性的值是否可以被重写。设置为true可以被重写;设置为false,不能被重写。默认为false。
    
    var obj = {}
    //第一种情况:writable设置为false,不能重写。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false
    });
    //更改newKey的值
    obj.newKey = "change value";
    console.log( obj.newKey );  //hello
    
    //第二种情况:writable设置为true,可以重写
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:true
    });
    //更改newKey的值
    obj.newKey = "change value";
    console.log( obj.newKey );  //change value
    enumerable
    此属性是否可以被枚举(使用for...in或Object.keys())。设置为true可以被枚举;设置为false,不能被枚举。默认为false。
    
    var obj = {}
    //第一种情况:enumerable设置为false,不能被枚举。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:false
    });
    
    //枚举对象的属性
    for( var attr in obj ){
        console.log( attr );  
    }
    //第二种情况:enumerable设置为true,可以被枚举。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:true
    });
    
    //枚举对象的属性
    for( var attr in obj ){
        console.log( attr );  //newKey
    }
    configurable
    是否可以删除目标属性或是否可以再次修改属性的特性(writable, configurable, enumerable)。设置为true可以被删除或可以重新设置特性;设置为false,不能被可以被删除或不可以重新设置特性。默认为false。
    
    这个属性起到两个作用:
    
    目标属性是否可以使用delete删除
    
    目标属性是否可以再次设置特性
    
    //-----------------测试目标属性是否能被删除------------------------
    var obj = {}
    //第一种情况:configurable设置为false,不能被删除。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:false,
        configurable:false
    });
    //删除属性
    delete obj.newKey;
    console.log( obj.newKey ); //hello
    
    //第二种情况:configurable设置为true,可以被删除。
    Object.defineProperty(obj,"newKey",{
        value:"hello",
        writable:false,
        enumerable:false,
        configurable:true
    });
    //删除属性
    delete obj.newKey;
    console.log( obj.newKey ); //undefined
    

      

  • 相关阅读:
    关于xcode 9.0数组问题的遇到的坑
    PHP将emoji表情进行过滤
    iOS 11更新后以及iPhone X推出后工程中遇到的问题及适配
    在IOS11中position:fixed弹出框中的input出现光标错位的问题
    采用腾讯云直播断流续播相关问题
    论坛灌水机与注册机问题
    以下内容对于灵活修改textField中文本以及占位文本属性进行了完整的封装,加入项目中可以节约开发时间。
    JS基础语法---总结
    JS基础语法---创建对象---三种方式创建对象:调用系统的构造函数;自定义构造函数;字面量的方式
    JS基础语法---编程思想和对象
  • 原文地址:https://www.cnblogs.com/mary-123/p/10875291.html
Copyright © 2020-2023  润新知