时间戳

首页 > 技术文章 > Object Api

Object Api

caijinghong 2020-12-01 12:06 原文

object.create().keys().assign().values().hasOwnProperty().entries()

 总结

hasOwnProperty(val)  判断 val 是否是自身属性，而非原型链上的属性

 

... 与 object.assign() 类似。扩展运算符（Object spread）不复制继承的属性或类的属性，但是它会复制ES6的 symbols 属性
object.assign() [fn(target,…sorce)]

const log = console.log,
    target = { a: 1, b: 2 },
    source = { b: 4, c: 5 },
    s = { name: { zs: 'liyang' }, a: 0 }

var obj = Object.assign({}, source) //复制对象
var obj1 = source
log(obj === obj1) //false

 

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

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };

const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget);
// expected output: Object { a: 1, b: 4, c: 5 }

复制一个对象

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

深拷贝问题

针对深拷贝，需要使用其他办法，因为 Object.assign()拷贝的是（可枚举）属性值。

假如源值是一个对象的引用，它仅仅会复制其引用值。

Object.assign() 一层深拷贝，二层以上浅拷贝。

 

        const log = console.log;
        //Object.assign() 一级深拷贝，二级浅拷贝
        function test() {
            //使用严谨模式
            'use strict';
            let obj1 = { a: 0, b: { c: 0 } };
            let obj2 = Object.assign({}, obj1);
            log(JSON.stringify(obj2))

            obj1.a = 1;
            log(JSON.stringify(obj1));
            // { a: 1, b: { c: 0}} 
            log(JSON.stringify(obj2));
            // { a: 0, b: { c: 0}} 

            obj2.a = 2;
            log(JSON.stringify(obj1));
            // { a: 1, b: { c: 0}} 
            log(JSON.stringify(obj2));
            // { a: 2, b: { c: 0}}

            obj2.b.c = 3;
            log(JSON.stringify(obj1));
            // { a: 1, b: { c: 3}} 
            log(JSON.stringify(obj2));
            // { a: 2, b: { c: 3}} 

            // Deep Clone 
            obj1 = { a: 0 , b: { c: 0}}; 
            let obj3 = JSON.parse(JSON.stringify(obj1)); //深拷贝
            obj1.a = 4; 
            obj1.b.c = 4; 
            log(JSON.stringify(obj3));
            // { a: 0, b: { c: 0}}
        }
        test()

合并对象

const o1 = { a: 1 };
const o2 = { b: 2 };
const o3 = { c: 3 };

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

合并具有相同属性的对象

const o1 = { a: 1, b: 1, c: 1 };
const o2 = { b: 2, c: 2 };
const o3 = { c: 3 };

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

属性被后续参数中具有相同属性的其他对象覆盖。

 

Object.create()方法创建一个新对象，使用现有的对象来提供新创建的对象的__proto__。

const person = {
  isHuman: false,
  printIntroduction: function() {
    console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`);
  }
};

const me = Object.create(person);

me.name = 'Matthew'; // "name" is a property set on "me", but not on "person"
me.isHuman = true; // inherited properties can be overwritten

me.printIntroduction();
// expected output: "My name is Matthew. Am I human? true"

 

Object.values()方法返回一个给定对象自身的所有可枚举属性值的数组

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

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

// 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']

 

Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组

const obj = { foo: 'bar', baz: 42 };
console.log(Object.entries(obj)); // [ ['foo', 'bar'], ['baz', 42] ]

// array like object
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.entries(obj)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// array like object with random key ordering
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.entries(anObj)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

 

Object.hasOwnproperty() 方法返回一个布尔值，判断对象是否包含特定的自身（非继承）属性。

判断自身属性是否存在

var o = new Object();
o.prop = 'exists';

function changeO() {
  o.newprop = o.prop;
  delete o.prop;
}

o.hasOwnProperty('prop');  // true
changeO();
o.hasOwnProperty('prop');  // false

判断自身属性与继承属性

function foo() {
  this.name = 'foo'
  this.sayHi = function () {
    console.log('Say Hi')
  }
}

foo.prototype.sayGoodBy = function () {
  console.log('Say Good By')
}

let myPro = new foo()

console.log(myPro.name) // foo
console.log(myPro.hasOwnProperty('name')) // true
console.log(myPro.hasOwnProperty('toString')) // false
console.log(myPro.hasOwnProperty('hasOwnProperty')) // fasle
console.log(myPro.hasOwnProperty('sayHi')) // true
console.log(myPro.hasOwnProperty('sayGoodBy')) // false
console.log('sayGoodBy' in myPro) // true

遍历一个对象的所有自身属性

在看开源项目的过程中，经常会看到类似如下的源码。for...in循环对象的所有枚举属性，然后再使用hasOwnProperty()方法来忽略继承属性。

var buz = {
    fog: 'stack'
};

for (var name in buz) {
    if (buz.hasOwnProperty(name)) {
        alert("this is fog (" + name + ") for sure. Value: " + buz[name]);
    }
    else {
        alert(name); // toString or something else
    }
}

注意 hasOwnProperty 作为属性名

JavaScript 并没有保护 hasOwnProperty 属性名，因此，可能存在于一个包含此属性名的对象，有必要使用一个可扩展的hasOwnProperty方法来获取正确的结果：

var foo = {
    hasOwnProperty: function() {
        return false;
    },
    bar: 'Here be dragons'
};

foo.hasOwnProperty('bar'); // 始终返回 false

// 如果担心这种情况，可以直接使用原型链上真正的 hasOwnProperty 方法
// 使用另一个对象的`hasOwnProperty` 并且call
({}).hasOwnProperty.call(foo, 'bar'); // true

// 也可以使用 Object 原型上的 hasOwnProperty 属性
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true

 

推荐阅读