zoukankan      html  css  js  c++  java
  • js object常见方法总结

    Object.keys方法

    Object.keys方法是JavaScript中用于遍历对象属性的一个方法 。它传入的参数是一个对象,返回的是一个数组,数组中包含的是该对象所有的属性名。
    如:

    var cat= { 
    name:’mini’, 
    age:2, 
    color:’yellow’, 
    desc:”cute” 
    }
    console.log(Object.keys(cat)); // ["name", "age", "color", "desc"]
    

    这里有一道关于Object.keys的题目

    输出对象中值大于2的key的数组

    var data = {a: 1, b: 2, c: 3, d: 4};
    Object.keys(data).filter(function(x) { return 1 ;})
    

    期待输出:[“c”,”d”]
    请问1处填什么?

    正确答案:1 :data[x]>2

    Object.keys是es5中新增的方法,用来获取对象自身所有的可枚举的属性名,但不包括原型中的属性,然后返回一个由属性名组成的数组。注意它同for..in一样不能保证属性按对象原来的顺序输出。
    Object.getOwnPropertyNames也是es5中新增的方法,返回对象的所有自身属性的属性名(包括不可枚举的属性)组成的数组,但不会获取原型链上的属性。

    Array.filter(function)对数组进行过滤返回符合条件的数组。

    Object.values()方法

    Object.values方法返回一个数组,成员是参数对象自身的(不含继承的)所有可遍历( enumerable )属性的键值。

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

    返回数组的成员顺序,属性名为数值的属性,是按照数值大小,从小到大遍历的,因此返回的顺序是b、c、a。Object.values只返回对象自身的可遍历属性。

    var obj = { 100: 'a', 2: 'b', 7: 'c' };  
    Object.values(obj)  
    // ["b", "c", "a"]  
    

    如果Object.values方法的参数是一个字符串,会返回各个字符组成的一个数组。

    Object.values('foo')  
    // ['f', 'o', 'o']  
    

    上面代码中,字符串会先转成一个类似数组的对象。字符串的每个字符,就是该对象的一个属性。因此,Object.values返回每个属性的键值,就是各个字符组成的一个数组。
    如果参数不是对象,Object.values会先将其转为对象。由于数值和布尔值的包装对象,都不会为实例添加非继承的属性。所以,Object.values会返回空数组。

    Object.create()

    Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。
    语法
    Object.create(proto, [propertiesObject])
    参数
    proto
    新创建对象的原型对象。
    propertiesObject
    可选。如果没有指定为 undefined,则是要添加到新创建对象的可枚举属性(即其自身定义的属性,而不是其原型链上的枚举属性)对象的属性描述符以及相应的属性名称。这些属性对应Object.defineProperties()的第二个参数。
    返回值
    一个新对象,带着指定的原型对象和属性。
    如:

    var parent = {
        x : 1,
        y : 1
    }
    var child = Object.create(parent,{
        z : {                           // z会成为创建对象的属性
            writable:true,
            configurable:true,
            value: "newAdd"
        }
    });
    console.log(child)//{z: "newAdd"}z: "newAdd"__proto__: x: 1y: 1__proto__: Object
    

    Object.create()创建继承

    function A(){
      this.a = 1;
      this.b = 2;
    }
    A.prototype.drive = function(){
      console.log('drivvvvvvvvvv');
    }
    //方式1
    function B(){}
    B.prototype = Object.create(new A()); //这里采用了new 一个实例
    //方式2
    function C(){
      A.call(this);
    }
    C.prototype = Object.create(A.prototype) //这里使用的是父类的原型
    

    以上两种方式有什么区别?
    1的缺点:
    执行了 new,相当于运行了一遍 A ,如果在 A 里做了一些其它事情(如改变全局变量)就会有副作用。
    用 A 创建的对象做原型,里面可能会有一些冗余的属性。
    2模拟了 new 的执行过程

    Object.hasOwnProperty()方法

    判断对象自身属性中是否具有指定的属性。
    obj.hasOwnProperty('name')
    在某个对象是否拥有某个属性,判断的方法有很多,常用的方法就是object.hasOwnProperty('×××'),这个方法是不包括对象原型链上的方法的

    var obj = {
        name:'fei'
    }
        console.log(obj.hasOwnProperty('name'))//true
        console.log(obj.hasOwnProperty('toString'))//false
    

    以上,obj对象存在的name属性的时候,调用这个方法才是返回true,我们知道其实每个对象实例的原型链上存在toString方法,在这里打印false,说明这个方法只是表明实例对象的属性,不包括原型链上的属性。

    Object.getOwnPropertyNames()方法

    Object.getOwnPropertyNames()方法返回对象的所有自身属性的属性名(包括不可枚举的属性)组成的数组,但不会获取原型链上的属性

    function A(a,aa) {
      this.a = a;
      this.aa = aa;
      this.getA = function() {
        return this.a;
      }
    }
    // 原型方法
    A.prototype.aaa = function () {};
    
    var B = new A('b', 'bb');
    B.myMethodA = function() {};
    // 不可枚举方法
    Object.defineProperty(B, 'myMethodB', {
      enumerable: false,
      value: function() {}
    });
    
    Object.getOwnPropertyNames(B); // ["a", "aa", "getA", "myMethodA", "myMethodB"]
    

    Object.getOwnPropertyNames和Object.keysq区别

    Object.getOwnPropertyNames和Object.keys的区别,即Object.keys只适用于可枚举的属性,而Object.getOwnPropertyNames返回对象自动的全部属性名称

    'use strict';
    (function(){
        if(!Object.getOwnPropertyNames){
            console.log('浏览器不支持getOwnPropertyNames');
            return;
        }
    
        //人类的构造函数
        var person = function(name, age, sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
            
            this.sing = function(){
                console.log('sing');
            }
        }
        //new 一个ladygaga
        var gaga = new person('ladygaga', 26, 'girl');
    
        //给嘎嘎发放一个不可枚举的身份证
        Object.defineProperty(gaga, 'id', {
            value : '1234567890',
            enumerable : false
        });
    
        //查看gaga的个人信息
        var arr = Object.getOwnPropertyNames(gaga);
        document.write(arr); //output: name,age,sex,sing,id
    
        document.write('</br>');
        
       //注意和getOwnPropertyNames的区别,不可枚举的id没有输出
        var arr1 = Object.keys(gaga);
        document.write(arr1); //output: name,age,sex,sing
    })();
    

    es6 javascript对象方法Object.assign()

    Object.assign方法用于对象的合并,将源对象( source )的所有可枚举属性,复制到目标对象( target )。

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

    1、如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性。
    2、如果只有一个参数,Object.assign会直接返回该参数。

    var obj = {a: 1};  
    Object.assign(obj) === obj // true  
    

    3、如果该参数不是对象,则会先转成对象,然后返回。
    4、由于undefined和null无法转成对象,所以如果它们作为参数,就会报错。
    5、Object.assign方法实行的是浅拷贝,而不是深拷贝。也就是说,如果源对象某个属性的值是对象,那么目标对象拷贝得到的是这个对象的引用。

    var obj1 = {a: {b: 1}};  
    var obj2 = Object.assign({}, obj1);  
    obj1.a.b = 2;  
    obj2.a.b // 2  
    

    上面代码中,源对象obj1的a属性的值是一个对象,Object.assign拷贝得到的是这个对象的引用。这个对象的任何变化,都会反映到目标对象上面。

    常见用途

    ( 1 )为对象添加属性

    class Point {  
        constructor(x, y) {  
            Object.assign(this, {x, y});  
        }  
    }  
    

    上面方法通过Object.assign方法,将x属性和y属性添加到Point类的对象实例。

    ( 2 )为对象添加方法

    Object.assign(SomeClass.prototype, {  
        someMethod(arg1, arg2) {  
        ···  
        },  
        anotherMethod() {  
        ···  
        }  
    });  
    //  等同于下面的写法  
    SomeClass.prototype.someMethod = function (arg1, arg2) {  
    ···  
    };  
    SomeClass.prototype.anotherMethod = function () {  
    ···  
    };  
    

    上面代码使用了对象属性的简洁表示法,直接将两个函数放在大括号中,再使用 assign 方法添加到 SomeClass.prototype 之中。
    ( 3 )克隆对象

    function clone(origin) {  
        return Object.assign({}, origin);  
    }  
    

    上面代码将原始对象拷贝到一个空对象,就得到了原始对象的克隆。
    不过,采用这种方法克隆,只能克隆原始对象自身的值,不能克隆它继承的值。
    ( 4 )合并多个对象
    将多个对象合并到某个对象。

    const merge =(target, ...sources) => Object.assign(target, ...sources);  
    

    如果希望合并后返回一个新对象,可以改写上面函数,对一个空对象合并。

    const merge =(...sources) => Object.assign({}, ...sources);  
    

    ( 5 )为属性指定默认值

    const DEFAULTS = {  
        logLevel: 0,  
        outputFormat: 'html'  
    };  
    function processContent(options) {  
        let options = Object.assign({}, DEFAULTS, options);  
    }  
    

    上面代码中,DEFAULTS对象是默认值,options对象是用户提供的参数。Object.assign方法将DEFAULTS和options合并成一个新对象,如果两者有同名属性,则option的属性值会覆盖DEFAULTS的属性值。
    注意,由于存在深拷贝的问题,DEFAULTS对象和options对象的所有属性的值,都只能是简单类型,而不能指向另一个对象。否则,将导致DEFAULTS对象的该属性不起作用。

    参考https://blog.csdn.net/qq_30100043/article/details/53422657

  • 相关阅读:
    同一电脑登录多个github账号
    如何用HAProxy+Nginx实现负载均衡
    Windows10下 tensorflow-gpu 配置
    机器学习数据处理时label错位对未来数据做预测
    机器学习经典模型简单使用及归一化(标准化)影响
    学机器学习,不会数据处理怎么行?—— 二、Pandas详解
    版本控制系统 git 之基础讲解
    学机器学习,不会数据处理怎么行?—— 一、NumPy详解
    Reinforcement Learning 的那点事——强化学习(一)
    读研 or 工作?对计算机类专业学习的看法
  • 原文地址:https://www.cnblogs.com/zhilu/p/13842177.html
Copyright © 2011-2022 走看看