ES6中常用的對象方法：Object.keys()、Object.values() ...

 

1. Object.assign()

Object.assign() 用於將所有可枚舉屬性的值從一個或多個源對象，復制到目標對象。

語法：Object.assign(obj, ...sources) 

• • obj：目標對象

  • sources：源對象，可以是多個

  • 返回目標對象

復制一個對象

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

合並對象

const obj1 = { a: 1, b: 2 }
const obj2 = { b: 3, c: 4 }
const obj3 = { c: 5, d: 6 }
​
const obj = Object.assign(obj1, obj2, obj3)
console.log(obj)  // {a: 1, b: 3, c: 5, d: 6}

注：如果目標對象與源對象有同名屬性，則后面的屬性會覆蓋前面的屬性；如果多個源對象有同名的屬性，則后面的源對象會覆蓋前面的。

對象的深拷貝

通過 Object.assign() 我們可以很快的實現對象的復制，然而這只是一個淺拷貝，因為 Object.assign() 方法拷貝的是可枚舉屬性值，如果源對象的屬性值是一個對象的引用，那么該方法也只會復制其引用。

// 淺拷貝
let o1 = {
    a: 0,
    b: { c: 0 }
}
const o2 = Object.assign({}, o1)
o1.b.c = 1
console.log(o2.c) // 1

那么，我們怎么實現一個對象的深拷貝呢？

如果不考慮保留內置類型，最快速的方法是通過JSON.stringify() 將該對象轉換為 json 字符串表現形式，然后再將其解析回對象。

// 深拷貝：方法一
let obj1 = { a: 0 , b: { c: 0}}
let obj2 = JSON.parse(JSON.stringify(obj1))
obj1.a = 4
obj1.b.c = 4
console.log(obj1) // { a: 4, b: { c: 4}} 
console.log(obj2) // { a: 0, b: { c: 0}}

還可以通過遞歸的方法實現深拷貝

// 深拷貝：方法二
const obj = {
    name: 'andy',
    age: 18,
    info: {
        gender: 'male',
        schoole: 'NEWS'
    },
    color: ['pink', 'yellow']
}
function deepCopy(obj){
    let o = {}
    for(let k in obj) {  //  此處的for...in方法可以使用Object.keys(obj).map(k =>{....}) 替換
        // 1.獲取屬性值
        var item = obj[k];
        // 2.判斷屬性值屬於哪種數據類型
        if(item instanceof Array) { // 是否是數組
            o[k] = []
            deepCopy(o[k], item)
        } else if(item instanceof Object) { // 是否是對象
            o[k] = {}
            deepCopy(o[k], item)
        } else { // 簡單數據類型
            o[k] = item
        }
    }
    return o
}
const newObj = deepCopy(obj)
console.log(newObj)

此外，還可以通過structured clone結構化克隆算法，有興趣的自行查閱。

 

2. Object.create() 

Object.create() 創建一個新對象

語法：Object.create(proto)

• proto：新創建對象的原型對象

• 返回一個新對象

使用：

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

const me = Object.create(person)
console.log(me) // {}
me.name = 'Matthew' // "name" is a property set on "me", but not on "person"
me.isHuman = true // inherited properties can be overwritten
me.printIntroduction() // My name is Matthew. Am I human? true
console.log(me.__proto__ === person) //true
​

// 通過new Object()方式創建對象
const me = new Object(person)
console.log(me) // {isHuman: false, printIntroduction: ƒ}
me.name = 'Matthew'
me.isHuman = true
console.log(me) // {isHuman: true, name: "Matthew", printIntroduction: ƒ}

Object.create() 可以實現對象的繼承，可以通過對象實例的 __proto__ 屬性訪問原型鏈上的屬性。

new Object() 方法創建的對象，給對象原型添加屬性和方法則需要通過構造函數或者類。

function Person(name, age){
    this.name=name
    this.age=age
}
Person.prototype.sayHi = function(){
    console.log(this.name)
}

let p = new Person('jack', 20)
console.log(p.sayHi()) // jack
console.log(p.__proto__ === Person.prototype) // true

 

3. Object.defineProperty()

Object.defineProperty() 添加或修改現有屬性，並返回該對象。

語法：Object.defineProperty(obj, prop, description)

• • obj：必需。目標對象

  • prop：必需。需定義或修改的屬性的名字

  • descriptor：必需。目標屬性所擁有的特性，以對象形式｛｝書寫。

  1. 1. value：設置屬性的值，默認為 undefined

     2. writable：值是否可以重寫，true | false，默認為 false

     3. enumerable：目標屬性是否可以被枚舉，true | false，默認為 false

     4. configurable：目標屬性是否可以被刪除或是否可以再次修改特性，true | false，默認為 false

const obj = {
    id: 1,
    name: 'phone',
    price: '$599'
}
Object.defineProperty(obj, 'num', {
    value: 100,
    enumerable: false
})

console.log(obj) // {id: 1, name: "phone", price: "$599", num: 100}
console.log(Object.keys(obj)) // ["id", "name", "price"]

 

4. Object.entires()

Object.entires() 遍歷並返回該對象可枚舉屬性的鍵值對數組

語法：Object.entires(obj)

• • 返回對象可枚舉屬性的鍵值對數組

const obj = {
    a: 'apple',
    b: 'bar'
}
console.log(Object.entries(obj)) // [ ['a', 'apple'], ['b', 'bar'] ]

for (const [key, value] of Object.entries(obj)) {
    console.log(`${key}: ${value}`) //"a: somestring"  "b: 42"
}

Object.entries(obj).forEach(([key, value]) => {
    console.log(`${key}: ${value}`) // "a: somestring", "b: 42"
})

 

5. Object.keys() 

Object.keys() 用於獲取對象自身所有可枚舉的屬性

語法：Object.keys(obj)

• • 效果類似於 for...in

  • 返回一個由屬性名組成的數組

const obj = {
    id: 1,
    name: 'phone',
    price: '$599',
    num: 100
}
const objKeys = Object.keys(obj);
console.log(objKeys); //['id', 'name', 'price', 'num']
​
const arr = ['a', 'b', 'c']
const arrKeys = Object.keys(arr)
console.log(arrKeys) //['0', '1', '2']

補充：如果只要獲取對象的可枚舉屬性，可用Object.keys或用for...in循環（for...in循環會得到對象自身的和繼承的可枚舉屬性，可以使用 hasOwnProperty()方法過濾掉）

 

6. Object.values() 

Object.values() 獲取對象自身所有可枚舉的屬性值

語法：Object.values(obj)

• • 返回一個由屬性值組成的數組

const obj = {
    id: 1,
    name: 'phone',
    price: '$599',
    num: 100
}
const objValues = Object.values(obj);
console.log(objValues); //[1, 'phone', '$599', '100']

 

 

附：對象的所有屬性和方法