JavaScript優(yōu)雅處理對象的6種方法
前言
和其他編程語言一樣，JavaScript 有自己的數(shù)據(jù)類型，如數(shù)字、字符串、數(shù)組、對象等。而對象在JavaScript中是一種非常重要的數(shù)據(jù)類型，它們有很多有用的方法，在平常項(xiàng)目開發(fā)中可以使用這些方法容易地處理對象。
本文介紹6個(gè)在項(xiàng)目中用得上的方法，趁此機(jī)會(huì)加深其使用方法。
1、Object.freeze()
Object.freeze() 方法可以防止對象中的數(shù)據(jù)被修改，即凍結(jié)一個(gè)對象，這樣不能向這個(gè)對象 添加、更新或刪除屬性。
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()方法有點(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ù)對象的所有鍵的名稱，數(shù)組中屬性名的排列順序和正常循環(huán)遍歷該對象時(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() 是獲取對象內(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)建一個(gè)新對象，先來看下面代碼：
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對象原型的新對象newAuthor。這樣在新對象newAuthor中可以像改變author對象所擁有的屬性值一樣改變相應(yīng)的屬性值，這個(gè)看起來是不有點(diǎn)像繼承，沒錯(cuò)， 使用 Object.create 可以實(shí)現(xiàn)類式繼承。
6、Object.entries()
Object.entries() 允許獲取對象的鍵和值，返回一個(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é)
本文對對象常見的6個(gè)方法做了簡單的介紹，并提供了相應(yīng)的示例代碼，在實(shí)際編碼處理對象的過程中，使用上面的方法可以讓代碼變得更加優(yōu)雅。
到此這篇關(guān)于JavaScript優(yōu)雅處理對象的6種方法的文章就介紹到這了,更多相關(guān)JavaScript處理對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了JavaScript數(shù)據(jù)扁平化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)導(dǎo)航欄選項(xiàng)卡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-02-02
javascript中的數(shù)據(jù)類型檢測方法詳解
這篇文章主要介紹了javascript中的數(shù)據(jù)類型檢測方法,結(jié)合實(shí)例形式分析了javascript數(shù)據(jù)類型并總結(jié)分析了常見的數(shù)據(jù)類型檢測操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要為大家詳細(xì)介紹了JS、CSS和HTML實(shí)現(xiàn)注冊頁面，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
嘗試了好多種css屬性，總是無法達(dá)成目標(biāo)。主要就是height這個(gè)屬性，100%，對于ff似乎并不起什么作用，既然我將其父容器的高度也設(shè)置為100%，依然沒有效果。這樣的話，就無法顯示出平鋪的背景，想法也得不到實(shí)現(xiàn)。2008-11-11
JavaScript設(shè)置名字輸入不合法的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript設(shè)置名字輸入不合法的方法,需要的朋友可以參考下2017-05-05
javascript 動(dòng)態(tài)table添加colspan\rowspan 參數(shù)的方法
動(dòng)態(tài)的給某個(gè)表對象添加列屬性和行屬性，采用obj.setAttribute("rowspan",n)(即rowspan=n)不能生效。2009-07-07
封裝運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)
下面小編就為大家?guī)硪黄庋b運(yùn)動(dòng)框架實(shí)戰(zhàn)左右與上下滑動(dòng)的焦點(diǎn)輪播圖(實(shí)例)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
JS 中forEach，for in、for of用法實(shí)例總結(jié)
這篇文章主要介紹了JS 中forEach，for in、for of用法,結(jié)合實(shí)例形式總結(jié)分析了JS 中forEach，for in、for of的基本功能、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-05-05
JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03