前言

和其他編程語言一樣，JavaScript 有自己的數(shù)據(jù)類型，如數(shù)字、字符串、數(shù)組、對(duì)象等。而對(duì)象在JavaScript中是一種非常重要的數(shù)據(jù)類型，它們有很多有用的方法，在平常項(xiàng)目開發(fā)中可以使用這些方法容易地處理對(duì)象。

本文介紹6個(gè)在項(xiàng)目中用得上的方法，趁此機(jī)會(huì)加深其使用方法。

1、Object.freeze()

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

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，最終對(duì)象都沒有任何改變。

2、Object.seal()

Object.seal()方法有點(diǎn)類似于 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() 方法會(huì)返回一個(gè)數(shù)組，該數(shù)組包含參數(shù)對(duì)象的所有鍵的名稱，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。

看看下面的代碼：

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

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

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

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

4、Object.values()

Object.values() 和 Object.keys() 類似，不過Object.values() 是獲取對(duì)象內(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)有對(duì)象的原型__proto__創(chuàng)建一個(gè)新對(duì)象，先來看下面代碼：

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)建一個(gè)具有author對(duì)象原型的新對(duì)象newAuthor。這樣在新對(duì)象newAuthor中可以像改變author對(duì)象所擁有的屬性值一樣改變相應(yīng)的屬性值，這個(gè)看起來是不有點(diǎn)像繼承，沒錯(cuò)， 使用 Object.create 可以實(shí)現(xiàn)類式繼承。

6、Object.entries()

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

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é)

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

到此這篇關(guān)于JavaScript優(yōu)雅處理對(duì)象的6種方法的文章就介紹到這了,更多相關(guān)JavaScript處理對(duì)象內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論