JavaScript 中優(yōu)雅處理對象的6個方法

JavaScript 中優(yōu)雅處理對象的6個方法

和其他編程語言一樣，JavaScript 有自己的數(shù)據(jù)類型，如數(shù)字、字符串、數(shù)組、對象等。而對象在JavaScript中是一種非常重要的數(shù)據(jù)類型，它們有很多有用的方法，在平常項目開發(fā)中可以使用這些方法容易地處理對象，之前《ECMAScript 6的Map映射》簡單介紹了對象。本文介紹6個在項目中用得上的方法，趁此機會加深其使用方法。

1、Object.freeze()

Object.freeze() 方法可以防止對象中的數(shù)據(jù)被修改，即凍結(jié)一個對象，這樣不能向這個對象 添加、更新或刪除屬性。

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

Object.freeze(author);

author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'Quintion', city: 'Shenzhen', age: 18, validation: true }

如上面的代碼，更新屬性name、新增屬性province、刪除屬性age，最終對象都沒有任何改變。

2、Object.seal()

Object.seal()方法有點類似于 Object.freeze() 。阻止向?qū)ο筇砑有碌膶傩院蛣h除屬性，但允許更改和更新現(xiàn)有屬性。

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

Object.seal(author);

author.name = "QuintionTang";
author.province = "Guangdong";
delete author.age;
console.log(author); // { name: 'QuintionTang', city: 'Shenzhen', age: 18, validation: true }

從上面代碼可以看到，新增屬性和刪除屬性都無效，只有更新屬性name生效了。

3、Object.keys()

Object.keys() 方法會返回一個數(shù)組，該數(shù)組包含參數(shù)對象的所有鍵的名稱，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對象時返回的順序一致 。

看看下面的代碼：

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

console.log(Object.keys(author)); // [ 'name', 'city', 'age', 'validation' ]

可以看到上面的代碼中打印的結(jié)果是一個包含鍵作為輸出的數(shù)組。輸出的結(jié)果可以使用數(shù)組的方法進行處理或者迭代。

console.log(Object.keys(author).length); // 4

4、Object.values()

Object.values() 和 Object.keys() 類似，不過Object.values() 是獲取對象內(nèi)素有屬性的值，返回值組成的數(shù)組。

const author = {
    name: "Quintion",
    city: "Shenzhen",
    age: 18,
    validation: true,
};

console.log(Object.values(author)); // [ 'Quintion', 'Shenzhen', 18, true ]

5、Object.create()

Object.create() 基于現(xiàn)有對象的原型__proto__創(chuàng)建一個新對象，先來看下面代碼：

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

const newAuthor = Object.create(author);
console.log(newAuthor); // {}
newAuthor.firstName = "Ronb";
newAuthor.lastName = "Joy";
console.log(newAuthor.fullName()); // Ronb Joy

在上面的代碼中，使用object. create()創(chuàng)建一個具有author對象原型的新對象newAuthor。這樣在新對象newAuthor中可以像改變author對象所擁有的屬性值一樣改變相應的屬性值，這個看起來是不有點像繼承，沒錯， 使用 Object.create可以實現(xiàn)類式繼承。

6、Object.entries()

Object.entries() 允許獲取對象的鍵和值，返回一個多維數(shù)組，其中每一維包含每個鍵和值，如[鍵 , 值]

const author = {
    firstName: "Quintion",
    lastName: "Tang",
    fullName() {
        return `${this.firstName} ${this.lastName}`;
    },
};

console.log(Object.entries(author));

輸出的結(jié)果如下：

[
  [ 'firstName', 'Quintion' ],
  [ 'lastName', 'Tang' ],
  [ 'fullName', [Function: fullName] ]
]

總結(jié)

本文對對象常見的6個方法做了簡單的介紹，并提供了相應的示例代碼，在實際編碼處理對象的過程中，使用上面的方法可以讓代碼變得更加優(yōu)雅。

object