JavaScript Object常用方法整理

最新推荐文章于 2022-12-10 20:13:20 发布

纯_粹

最新推荐文章于 2022-12-10 20:13:20 发布

阅读量393

点赞数 2

分类专栏： JavaScript 文章标签： javascript

原文链接：https://blog.csdn.net/JackieDYH/article/details/119005806

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Object.create 创建一个对象

1.第一个参数为对象，对象为函数调用之后返回新对象的原型对象，第二个参数为对象本身的实例方法（默认不能修改,不能枚举）
    let obj = Object.create({a:'Object'},{b:{value:'create'}})
    obj.__proto__.a === 'Object'  // true
    obj.b = 'Object';    
    console.log(obj.b);    // create


2.创建一个可写、可枚举、可配置的属性
    const obj2 = Object.create({}, {
        key: {
            value: 2,
            writable: true,  // 是否可以重写值
            enumerable: true, // 是否可以枚举
            configurable: true, // 是否可以修改以上几项配置
        }
    })
    注意：enumerable 会影响方法如下
    for...in：  遍历包含对象原型上属性    
    Object.keys()：  只能遍历自身属性
    JSON.stringify： 只能序列化自身属性

Object.defineProperty(object, prop, descriptor) 定义对象属性

 1.创建一个对象
    var drillDefineProperty = {};

 2.添加一个数据属性
    Object.defineProperty(drillDefineProperty, 'foundDefineProperty', {
        value: "learnDefineProperty",
        writable: true,
        enumerable: true,
        configurable: true
    })
    console.info(drillDefineProperty.foundDefineProperty); // learnDefineProperty

 3.修改数据属性
    Object.defineProperty(drillDefineProperty, 'foundDefineProperty', {
        writable: false
    })
    // writable为false ，你想重写foundDefineProperty 
    drillDefineProperty.foundDefineProperty = 'rewrite_learnDefineProperty';
    // 哈哈哈哈， 没修改成功叭、我就问你气不气~
    console.log(drillDefineProperty.foundDefineProperty) // learnDefineProperty

 4.添加访问属性
    Object.defineProperty(drillDefineProperty, 'newAccessorProperty', {
        set: function (value) {
            this.otherProperty = value
        },
        get: () => {
            return this.otherProperty;
        },
        enumerable: true,
        configurable: true
    })

 注意：  
      1: 第一个参数必须为对象
      2：descriptor 不能同时具有（value 或者 writable 特性）（get 或者 set特性）
      3：configurable 为false 时，不能重新修改装饰器

Object.defineProperties(object, {prop1 : descriptor1, prop2 : descriptor2, ...)

Object.defineProperties(drillDefineProperty,{
        'property1':{
            value:true,
            writable:true
        },
        'property2':{
            value:'Holle defineProperties',
            writable:false,
        }
    })

    console.log('Object.defineProperties:',drillDefineProperty.property1) // true
    console.log('Object.defineProperties:',drillDefineProperty.property2) // Holle defineProperties

注意：Object的defineProperty和defineProperties这两个方法在js中的重要性十分重要，主要功能就是用来定义或修改这些内部属性,
与之相对应的getOwnPropertyDescriptor和getOwnPropertyDescriptors就是获取这行内部属性的描述。

Object.keys 遍历可枚举的属性，只包含对象本身可枚举的属性，不包含原型链可枚举属性

    let array = ['a','b','c','d'];
    let object = {name:'keys',age:18};
    let arrLike = {0:'a',1:'b',2:'c'};

    console.log(Object.keys(array)) // ['0','1','2','3']
    console.log(Object.keys(object)) // ['name','age']
    console.log(Object.keys(arrLike)) //['0','1','2']

Object.values 遍历可枚举的属性值，只包含对象本身可枚举属性值，不包含原型链可枚举属性值

    let array = ['a','b','c','d'];
    let object = {name:'keys',age:18};
    let arrLike = {0:'a',1:'b',2:'c'};    

    console.log(Object.values(array)) //  ["a", "b", "c", "d"]
    console.log(Object.values(object)) // ["keys", 18]
    console.log(Object.values(arrLike)) // ["a", "b", "c"]

Object.assign( target, source, source1 )

简介：object.assign(target,source,source1) 方法用于对象合并，将对象（source）所有可枚举的属性，复制到目标对象（target）。
拷贝的属性是有限制的，只拷贝对象的自身属性（不拷贝可继承属性），也不拷贝不可枚举的属性（enumerable：false）
    const target = { a: 1, b: 1 };
    const source1 = { b: 2, c: 2 };
    const source2 = { c: 3 };
    console.log(Object.assign(target, source1, source2)) // {a: 1, b: 2, c: 3}

    // 特殊情况
    let object = { a: 1 };
    console.log(Object.assign(object, undefined) === object) // true
    console.log(Object.assign(object, null) === object) // true

    console.log(Object.assign([1, 2, 3], [3, 4])) // [3, 4, 3]
    // Object.assign();  方法实行的是浅拷贝，而不是深拷贝

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

    obj1.a.b = 2;
    console.log(obj2.a.b) // 2
    obj2.a.b = 3;
    console.log(obj1.a.b) // 3

Object.getPrototypeOf()获取指定对象的原型（内部[[Prototype]]属性的值）

    const prototype1 = {}
    const object = Object.create(prototype1);

    console.log(Object.getPrototypeOf(object) === prototype1); // true

    // 注意
    // Object.getPrototypeOf(Object) 不是 Object.prototype 
    console.log(Object.getPrototypeOf(Object) === Object.prototype ) // false
    console.log(Object.getPrototypeOf(Object) === Function.prototype) // true

Object.setPrototypeOf() 设置一个指定的对象的原型

    const object = { a: 1 }, proto = { b: 2 };

    console.log(Object.setPrototypeOf(object, proto)) //  {a: 1} {a: 1__proto__: b: 2__proto__: Object}

    console.log(object.__proto__ === proto) // true

Object.getOwnPropertyNames() 与Object.keys() 相似，但包含遍历包含不可枚举属性

    let creativeObject  = Object.create({},{
        getFoo:{
            value:function (){return this.foo},
            enumerable:false, // 不可枚举
        }
    })

    creativeObject.foo = 11;
    console.log(Object.getOwnPropertyNames(creativeObject).sort()) // ["foo", "getFoo"]

Object.getOwnPropertyDescriptor() 获取该属性的描述对象

    let obj = { foo: 123 };

    console.log(Object.getOwnPropertyDescriptor(obj,'foo')) 
//  {value: 123, writable: true, enumerable: true, configurable: true}

Object.getOwnPropertyDescriptors() 返回指定对象所有自身属性（非继承属性）的描述对象

const obj = {
        foo: 123,
        get bar() { return 'abs' }
    }
    console.dir(Object.getOwnPropertyDescriptors(obj));
    /* 结果
   { foo:{ value: 123,
      writable: true,
      enumerable: true,
      configurable: true },
       bar:{ get: [Function: bar],
      set: undefined,
      enumerable: true,
      configurable: true } 
     }
    */
    //使用的场景
    Object.assign() // 方法只能拷贝源对象可枚举的自身属性，同时拷贝时无法拷贝属性的特征，而且访问器属性会被转换成数据属性，也无法拷贝源对象的原型
    Object.create() // 方法可以实现以上所说的这些，配合getPrototypeOf ,以及getOwnPropertyDescriptors 实现全面浅拷贝
    console.log(Object.create(
        Object.getPrototypeOf(obj),
        Object.getOwnPropertyDescriptors(obj)
    ))

Object.entries() 分割对象

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

    console.log(Object.entries('abc')) //[['0', 'a'], ['1', 'b'], ['2', 'c']]

    console.log(Object.entries(100) ) // []

Object.is() 它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

    console.log(Object.is('foo','foo')) // true
    console.log(Object.is({},{})) // false
    console.log(Object.is(+12,-12)); // false
    console.log(Object.is(NaN === NaN)) // false

Object.preventExtensions() 让一个对象变的不可扩展，也就是永远不能再添加新的属性&isExtensible 判断一个对象是否可扩展

    let empty = {};
    console.log(Object.isExtensible(empty)) // true
    empty.a = 1;
    console.log(empty) // {a:1}
    // 将对象变为不可拓展
    Object.preventExtensions(empty);

    console.log(Object.isExtensible(empty)) // false

    empty.b = 2;  // 静默失败 ，不抛出错误（遇到这种问题就比较恼火了哇~）
    empty.a = 5;  // 修改成功
    delete empty.a; // {} 删除成功
    console.log(empty)

    总结：
        1. preventExtensions 可以让这个对象变的不可扩展，也就是不能再有新的属性
        2. 需要注意的是不可扩展的对象的属性通常仍然可以被删除
        3. 尝试给一个不可扩展对象添加新属性的操作将会失败，不过可能是静默失败，也可能会抛出 TypeError 异常（严格模式）。
        4.Object.preventExtensions 只能阻止一个对象不能再添加新的自身属性，仍然可以为该对象的原型添加属性。

Object.seal()将一个对象密封 isSealed 判断一个对象是否为密封的

    // 密封对象是指哪些不能添加新的属性，不能删除已有属性，以及不能删除已有属性的可枚举性、可配置性、可写性

    // 1、 seal 方法
    var sealObject1 = {b:1};
    sealObject1.d = 2; // 添加成功
    var sealObject2  = Object.seal(sealObject1);
    console.log(sealObject2 === sealObject1) // true  方法返回原对象，栈指指针指向同一块内存
    Object.isSealed(sealObject1)   // true

    sealObject1.b = 3;
    console.log(sealObject1) //   {b: 3, d: 2} 添加成功
    sealObject1.f = 222;  // 静默失败,属性f没有成功添加
    delete sealObject1.b  //静默失败,属性b没有成功删除

    // 2、 isSealed 方法
    let isSealed = {};
    console.log(Object.isSealed(isSealed)) // false

    // 之后通过 Object.preventExtensions 方法将空对象设置为不可扩展
    Object.preventExtensions(isSealed);
    console.log(Object.isSealed(isSealed)) // true

    // 如果为非空对象呢？
    let isNullSealed = {value:1};
    Object.preventExtensions(isNullSealed);
    console.log(Object.isSealed(isNullSealed)) // false

    // 因为属性 value 是可配置（configurable 为true） ，所以不是密封对象，修改方法如下：
    let allocation = {value:111}
    Object.preventExtensions(allocation);
    Object.defineProperty(allocation,'value',{configurable:false}) 
    console.log(Object.isSealed(allocation));// true

    //总结：
        1. 密封一个对象会让这个对象变的不能添加新属性，且所有已有属性会变的不可配置
        2. 属性不可配置的效果就是属性变的不可删除，以及一个属性不能被重新定义成为访问器属性
        3. 但属性的值仍然可以修改
        4. 尝试删除一个密封对象的属性或者将某个密封对象的属性从数据属性转换成访问器属性，结果会静默失败或者抛出TypeError异常(严格模式)

Object.freeze() 冻结一个对象&isFrozen 判断一个对象是否已经被冻结

    // freeze 冻结一个对象 & isFrozen 判断一个对象是否已经被冻结
    // 冻结对象是指那些不能添加新的属性，不能修改已有属性的值，不能删除已有属性，以及不能删除已有属性的可枚举性、可配置性、可写性的对象。也就是说。这个对象永远是不可变的

    // 1. freeze 方法
    let freeze = {a:1};
    freeze.b = 2; // 添加属性b成功
    console.log(Object.freeze(freeze)); //  {a: 1, b: 2}

    console.log(Object.isFrozen(freeze) ) // true 对象已被冻结

    freeze.a = 2  //修改属性a值失败
    freeze.c = 5; //添加属性c失败
    delete freeze.b  //删除属性b失败
    console.log(freeze) // //  {a: 1, b: 2}

    // 2. isfreeze 方法

    let isFrozen = {a:1};
    isFrozen.b = 2; // 添加成功
    Object.preventExtensions(isFrozen);
    Object.defineProperties(isFrozen,{
        a:{configurable:false,writable:false},
        b:{configurable:false,writable:false}
    })

    console.log(Object.isFrozen(isFrozen) ) // 已经被冻结

    总结：
        1. 冻结对象的所有自身属性都不可能以任何方式被修改
        2. 任何尝试修改对象的操作都会失败，可能是静态失败，也可能会抛出异常（严格模式中）
        3. 数据属性的值不可更改，访问器属性（有getter和setter） 也同样（但由于是函数调用，给人的错觉是还是可以修改这个属性）。
        4. 如果一个属性的值是一个对象，则这个对象中的属性是可以修改的，除非它也是个冻结对象。


    // 浅冻结与深冻结：
    (function () {
        let obj = {
            internal: {}
        };
        Object.freeze(obj); // 浅冻结
        obj.internal.a = 'aValue';

        // 想让一个对象变得完全冻结，冻结所有对象中的对象，可以使用下面的函数
        function deepFreeze(o) {
            var prop, propKey;
            Object.freeze(o);// 首先冻结第一层对象
            for (propKey in o) {
                prop = o[propKey];
                if (!o.hasOwnProperty(propKey) || !(typeof prop === 'object') || Object.isFrozen(prop)) {
                    continue;
                }
                deepFreeze(prop); // 递归

            }
        }
        deepFreeze(obj);
        obj.internal.b = 'bValue'; // 静默失败
        console.log(obj.internal.b) // undefined
    }())

Object.hasOwnProperty()

// Object.hasOwnProperty(); 方法会返回一个布尔值，指示自身属性中是否具有指定的属性
    let hop = { a: 1 };    
    console.log(hop.hasOwnProperty('a')) // true
    console.log(hop.hasOwnProperty('b')) // false
    console.log(hop.hasOwnProperty('toString')); // false 不能检查原型链上的属性

    // 如何遍历一个对象所有自身属性，例子：
    var buz = {
        foo: 'stack'
    }

    for (var name in buz) {
        if (buz.hasOwnProperty(name)) {
            console.table({ key: name, value: buz[name] }) 
        } else {
            console.log(name);
        }
    }

Object.isPrototypeOf()

    // Object.isPrototypeOf();  用于测试一个对象是否存在另一个对象原型链上

    function Foo(){};
    function Bar(){};
    function Baz(){};

    Bar.prototype = Object.create(Foo.prototype);
    Baz.prototype = Object.create(Bar.prototype);

    var baz = new Baz();

    console.log(Baz.prototype.isPrototypeOf(baz)); // true
    console.log(Bar.prototype.isPrototypeOf(baz)); // true
    console.log(Foo.prototype.isPrototypeOf(baz)); // true
    console.log(Object.prototype.isPrototypeOf(baz)); // true

Object.propertyIsEnumerable()指定的属性是否可枚举

// obj.propertyIsEnumerable(prop) prop为被测试的属性名

    // 1.一般情况
    var ordinary = {};
    var contrast = [];
    ordinary.porp = 'is enumerable';
    contrast[0] = 'is enumerable';

    console.log(ordinary.propertyIsEnumerable('porp'));
    console.log(contrast.propertyIsEnumerable(0));

    // 2. 浏览器内置对象
    var browser = ['is enumerable'];
    console.log(browser.propertyIsEnumerable(0)); // true
    console.log(Math.propertyIsEnumerable('random')); // false
    console.log(this.propertyIsEnumerable('Math')); // false

    //3. 自身属性和继承属性（原型链上propertyIsEnumberable不考虑）
    var fu = function () {
        this.prop = '123';
    }
    fu.prototype = { prototypeProp: true };

    var o = new fu();
    console.log(o.propertyIsEnumerable('prop')); // true
    console.log(o.propertyIsEnumerable('prototypeProp')) // false

Object.caller() 返回当前函数的调用者

// Object.caller() 返回当前函数调用者
    function test() {
        if (test.caller === null) {
            alert('Javascript 顶级作用域调用了 test（）函数')
        } else {
            alert(test.caller + '函数调用了test（）函数')
        }
    }
    test(); // Javasript 顶层作用域调用了test（）函数
    function callTest() {
        test();
    }
    callTest(); // function callTest(){ test(); }函数调用了test()函数

    function callTest2() {
        // setTimeout()或setInterval()中定时执行的函数也属于顶层作用域调用
        setTimeout(test, 500); // JavaScript顶层作用域调用了test()函数
    }
    callTest2();

Object.valueOf() 需要返回对象的原始值

// 备注：js对象中的valueOf() 与 toString() 方法非常显示，但是当需要返回对象的原始值非字符串的时候才调用它，尤其是转化为数字的时候；
// 如果需要使用原始值的上下文中的使用了对象，JavaScript会自动调用valueOf()方法

    const o = { a: 21, valueOf: function () { return '234234' } };
    console.log(Number(o)) // 234234

    // 练习题目
    const o2 = {
        x: 1,
        valueOf: function () {
            return this.x++;
        }
    }

    if (o2 == 1 && o2 == 2 && o2 == 3) {
        console.log('down');
        console.log(o2.x);
    } else {
        console.log('faild')
    }

    // Array : 返回数组对象本身
    var array = ['CodePlayer', true, 12, -5];
    console.log(array.valueOf() === array);

    // Date:当前时间间距1970年1月1日午夜的毫秒
    var date = new Date(2013, 7, 18, 23, 11, 59, 230);
    console.log(date.valueOf()) // 1376838719230

    // Number：返回数字值
    var num = 15.23423;
    console.log(num.valueOf()) // 15.23423

    // 布尔：返回布尔值true或false
    var bool = true;
    console.log(bool.valueOf() === bool) // true
    // new 一个boolean对象
    var newBool = new Boolean(true);
    // valueOf() 返回的值true ，两者的值相等
    console.log(newBool.valueOf() == newBool); // true
    // 但是不全等，两者类型不相等，前者是boolean类型，后者是object类型
    console.log(newBool.valueOf() === newBool);     // false

    // Function ：本身
    function foo() { }
    console.log(foo.valueOf() === foo) // true
    var foo2 = new Function("x", "y", 'return x + y');
    console.log(foo2.valueOf() === foo2) // true

    // Object :返回函数本身
    var obj = {name:'张三',age:18};
    console.log(obj.valueOf() === obj) // true

    // String 返回字符串值
    var str = 'www.zjwas.com';
    console.log(str.valueOf() === str) // true

    // new 一个字符串对象
    var str2 = new String('http://123.com');
    // 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
    console.log(str2.valueOf === str2) // false

Object.getOwnPropertySymbols()在给定对象自身上找到的所有 Symbol 属性的数组

// Object.getOwnPropertySymbols() 在给定义对象自身上找到的所有Symbol 属性的数组
    var obj = {};
    var a = Symbol('a');
    var b = Symbol.for('b');

    obj[a] = 'localSymbol';
    obj[b] = 'golablSymbol';
    var objectSymbol = Object.getOwnPropertySymbols(obj);

    console.log(objectSymbol.length) // 2
    console.log(objectSymbol) //  [Symbol(a), Symbol(b)]
    console.log(objectSymbol[0]) // Symbol(a)

Object.toString() 与 Object.toLocalString()

    //当被转化的值是个时间对象时，toLocaleString 会转化的结果以本地表示
    console.log((new Date).toString()) // Fri Jan 15 2021 15:13:06 GMT+0800 (中国标准时间)
    console.log((new Date).toLocaleDateString()); //  2021/1/15
    console.log((new Date).toLocaleString()) //   2021/1/15 下午3:17:19
    console.log((new Date).toLocaleTimeString()) //   下午3:17:50
    console.log((new Date).toTimeString()) //     GMT+0800 (中国标准时间)
    console.log((new Date).toUTCString()) //   Fri, 15 Jan 2021 07:18:35 GMT
    console.log((new Date).toISOString()) //  2021-01-15T07:19:03.860Z
    console.log((new Date).valueOf()) //   1610695165279

    // 当被转化的值是个时间戳时，toLocaleString 会把时间戳每三位添加一个逗号
    console.log((Date.parse(new Date())).toLocaleString())     // 1,610,695,344,000
    console.log((Date.parse(new Date())).toString() ) // 1610695371000

Object.length
```
Object.length    //1
```
Object.name
```
Object.name    //"Object"
```

Object.apply()与Object.call()和Object.bind()

  function add(x, y) {
            return x + y
        }
        function mul(x, y) { return x * y; }
        console.log(add.apply(mul, [5, 6])); // 11  mul调用add的方法来执行
        console.log(add.call(mul, 5, 6)); // 11  mul调用add的方法来执行
        // 注意：apply()和call()方法的作用很类似，只有一个区别，那就是call()方法接受的是若干个参数的列表，而apply()接受的是包含多个参数的数组。

        // bind() 方法创建一个新的函数，当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。
        // fun.bind(thisArg[, arg1[, arg2[, …]]])
        // 例子
        let del = { a: 3, get: function (x) { return x - this.a } };
        var del3 = del.get.bind(del); //产生一个新的函数
        console.log(del3(5)) // 2
        console.log(del3(8)) // 5
        let del6 = del.get.bind({ a: 6 }, 5); // 有预设参数的新的函数
        console.log(del6()) // -1

        var numbers = [2, 3, 4, 5, 6, 7, 8];


        var max = Math.max.call(this, 2, 3, 4, 5, 6, 7, 8);
        var min = Math.min.apply(this, numbers);

        console.log(`max=${max}`); // max=8
        console.log(`min=${min}`); // min=2

纯_粹

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Object常用方法整理

Object.create 创建一个对象 1.第一个参数为对象，对象为函数调用之后返回新对象的原型对象，第二个参数为对象本身的实例方法（默认不能修改,不能枚举） let obj = Object.create({a:'Object'},{b:{value:'create'}}) obj.__proto__.a === 'Object' // true obj.b = 'Object'; console.log(obj.b); // create..
复制链接

扫一扫