• JavaScript:对Object对象的一些常用操作总结


    JavaScript对Object对象的一些常用操作总结。

    一、Object.assign()

    1.可以用作对象的复制

    var obj = { a: 1 };
    var copy = Object.assign({}, obj);
    console.log(copy); // { a: 1 }
    

    2.可以用作对象的合并

    var o1 = { a: 1 };
    var o2 = { b: 2 };
    var o3 = { c: 3 };
    
    var obj = Object.assign(o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1, b: 2, c: 3 } 注意目标对象自身也会改变。
    

    3.目标对象o1自身也发生了改变,假如不想让o1改变,可以把三个对象合并到一个空的对象中,操作如下:

     var obj = Object.assign({},o1, o2, o3);
    console.log(obj); // { a: 1, b: 2, c: 3 }
    console.log(o1);  // { a: 1 }
    

    注意:以下几个地方
    1.继承属性和不可枚举属性是不能拷贝的

    var obj = Object.create({foo: 1}, { // foo 是个继承属性
        bar: {
            value: 2  // bar 是个不可枚举属性。
        },
        baz: {
            value: 3,
            enumerable: true  // baz 是个自身可枚举属性
        }
    });
    
    var copy = Object.assign({}, obj);
    console.log(copy); // { baz: 3 }
    

    2.原始类型会被包装为 object

    var v1 = "abc";
    var v2 = true;
    var v3 = 10;
    var v4 = Symbol("foo")
    
    var obj = Object.assign({}, v1, null, v2, undefined, v3, v4); 
    // 原始类型会被包装,null 和 undefined 会被忽略
    // 注意,只有字符串的包装对象才可能有自身可枚举属性
    console.log(obj); // { "0": "a", "1": "b", "2": "c" }
    
    

    二、Object.create()

    Object.create()的不止是有一个参数,其实还有第二个参数!
    Object.create(proto, [ propertiesObject ])第二个参数是可选的,主要用于指定我们创建的对象的一些属性,(例如:是否可读、是否可写,是否可以枚举等等)可以通过下面案例来了解第二个参数!

    var o;
    o = Object.create(Object.prototype, {
      // foo会成为所创建对象的数据属性
      foo: { writable:true, configurable:true, value: "hello" },
      // bar会成为所创建对象的访问器属性
      bar: {
        configurable: false,
        get: function() { return 10 },
        set: function(value) { console.log("Setting `o.bar` to", value) }
    }})
    
    // 创建一个以另一个空对象为原型,且拥有一个属性p的对象
    o = Object.create({}, { p: { value: 42 } })
    
    // 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的
    o.p = 24
    o.p
    //42
    
    o.q = 12
    for (var prop in o) {
       console.log(prop)
    }
    //"q"
    
    delete o.p
    //false
    
    //创建一个可写的,可枚举的,可配置的属性p
    o2 = Object.create({}, { p: { value: 42, writable: true, enumerable: true, configurable: true } });
    

    三、Object.is()

    用来判断两个值是否是同一个值。

    下面是一些例子,面试中可能会提及

    Object.is('haorooms', 'haorooms');     // true
    Object.is(window, window);   // true
    
    Object.is('foo', 'bar');     // false
    Object.is([], []);           // false
    
    var test = { a: 1 };
    Object.is(test, test);       // true
    
    Object.is(null, null);       // true
    
    // 特例
    Object.is(0, -0);            // false
    Object.is(-0, -0);           // true
    Object.is(NaN, 0/0);         // true
    Object.keys(obj)
    
    

    返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和使用 for...in 循环遍历该对象时返回的顺序一致 (两者的主要区别是 一个 for-in 循环还会枚举其原型链上的属性)。

    let arr = ["a", "b", "c"];
    console.log(Object.keys(arr));
    // ['0', '1', '2']
     
    /* Object 对象 */
    let obj = { foo: "bar", baz: 42 },
    keys = Object.keys(obj);
    console.log(keys);
    // ["foo","baz"]  
    
    

    四、Object.keys()

    Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

    // simple array
    var arr = ['a', 'b', 'c'];
    console.log(Object.keys(arr)); // console: ['0', '1', '2']
    
    // array like object
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.keys(obj)); // console: ['0', '1', '2']
    
    // array like object with random key ordering
    var anObj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.keys(anObj)); // console: ['2', '7', '100']
    
    // getFoo is a property which isn't enumerable
    var myObj = Object.create({}, {
      getFoo: {
        value: function () { return this.foo; }
      } 
    });
    myObj.foo = 1;
    console.log(Object.keys(myObj)); // console: ['foo']
    

    方法返回一个给定对象自己的所有可枚举属性值的数组,值的顺序与使用for...in循环的顺序相同 ( 区别在于 for-in 循环枚举原型链中的属性 )。 Object.values会过滤属性名为 Symbol 值的属性。

    
    var an_obj = { 100: 'a', 2: 'b', 7: 'c' };
    console.log(Object.values(an_obj)); // ['b', 'c', 'a']
     
    var obj = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.values(obj)); // ['a', 'b', 'c']
    
    
    

    五、Object.entries()

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

    const obj = { foo: 'bar', baz: 42 };
    console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]     
    const simuArray = { 0: 'a', 1: 'b', 2: 'c' };
    console.log(Object.entries(simuArray)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]
    
    

    六、常用其他操作

    1.删除对象中的某个值,前面案例中也谢了可以直接用delete

    var obj = {b:123};
    delete o.p // 或delete  obj[b];
    
    

    2.遍历对象
    2.1for-in遍历

    var obj = {a: 'ss', b: 'bb', c: 'cc'};
    for (var i in obj){
        console.log(i+':'+obj[i]);
    }
    

    2.2forEach遍历,先通过Object.keys()返回一个数组

    Object.keys(obj).forEach((value, index)=>{
        console.log(value, index,obj[value]);
    });
    //等同于
    Object.keys(obj).forEach(function (value, index,c) {
        console.log(value, index,obj[value]);
    });
    

    2.3jQuery的$.each()方法:它接受两个参数,分别指代属性名和属性值

    $.each(obj,function(key,value){
        console.log(key+": "+value)
    
    
    

    其它一些不常用的对象操作属性:

    1.Object.freeze() 方法可以冻结一个对象,冻结指的是不能向这个对象添加新的属性,不能修改其已有属性的值,不能删除已有属性,以及不能修改该对象已有属性的可枚举性、可配置性、可写性。也就是说,这个对象永远是不可变的。该方法返回被冻结的对象。

    2.Object.isFrozen() 方法判断一个对象是否被冻结(frozen)。

    3.Object.isExtensible() 方法判断一个对象是否是可扩展的(是否可以在它上面添加新的属性)。

    4.Object.isSealed() 方法判断一个对象是否是密封的(sealed)。

    5.Object.seal() 方法可以让一个对象密封,并返回被密封后的对象。密封对象是指那些不能添加新的属性,不能删除已有属性,以及不能修改已有属性的可枚举性、可配置性、可写性,但可能可以修改已有属性的值的对象。

    6.Object.getOwnPropertyNames(obj)返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

    7.Object.getOwnPropertySymbols(obj)返回一个数组,包含对象自身的所有 Symbol 属性的键名。

    8.Reflect.ownKeys(obj)返回一个数组,包含对象自身的所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。

    9.hasOwnProperty()判断对象自身属性中是否具有指定的属性。

    JavaScript字符串操作方法大全,包含ES6方法

    JavaScript常用数组操作方法,包含ES6方法

    原文地址:https://segmentfault.com/a/1190000016901888

  • 相关阅读:
    Django Rest framework基础使用之Request/Response
    Django Rest framework基础使用之 serializer
    python基础(一)
    python实现本地图片上传到服务区
    开发中遇到的问题记录
    九、xadmin菜单分组管理
    leetcode-7-整数翻转
    leetcode-6-Z 字形变换
    leetcode-5-最长回文子串
    leetcode-3-无重复字符的最长子串
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9907626.html
Copyright © 2020-2023  润新知