javaScript獲取對(duì)象中非空的屬性實(shí)現(xiàn)方法詳解
javaScript獲取對(duì)象中非空的屬性
要獲取JavaScript對(duì)象中所有具有值的屬性,您可以使用 Object.entries() 方法結(jié)合 Array.prototype.filter() 方法。
以下是一個(gè)示例代碼:
const obj = {
name: 'John',
age: 30,
city: '',
country: 'USA'
};
const propertiesWithValues = Object.entries(obj).filter(([key, value]) => value !== '');
const propertyNames = propertiesWithValues.map(([key, value]) => key);
console.log(propertyNames);在上述示例中,我們定義了一個(gè)帶有多個(gè)屬性的對(duì)象obj。其中,city屬性的值為空字符串。
使用Object.entries(obj)可以將一個(gè)對(duì)象轉(zhuǎn)換為包含 鍵值對(duì) 的數(shù)組。每個(gè)鍵值對(duì)都是由鍵和值組成的數(shù)組,如[key, value]。
接下來(lái),我們使用.filter()方法對(duì)鍵值對(duì)數(shù)組進(jìn)行過(guò)濾。我們檢查每個(gè)鍵值對(duì)中的值value是否為空字符串(value !== ''),從而篩選出具有值的屬性。
最后,我們使用.map()方法將篩選后的鍵值對(duì)數(shù)組轉(zhuǎn)換為只包含屬性名的數(shù)組。
最終,我們將具有值的屬性名數(shù)組打印到控制臺(tái),以展示對(duì)象中具有值的屬性。
輸出結(jié)果將是:["name", "age", "country"],表示name、age和country這幾個(gè)屬性在對(duì)象中都具有值。
您可以根據(jù)需要修改obj對(duì)象的屬性及其值,并使用類(lèi)似的方法獲取具有值的屬性列表。
延伸
javaScript獲取對(duì)象中有值的屬性,重新組成一個(gè)對(duì)象
要獲取JavaScript對(duì)象中具有值的屬性,并將其重新組成一個(gè)新的對(duì)象,您可以使用Object.entries()方法結(jié)合Array.prototype.reduce()方法。
以下是一個(gè)示例代碼:
const obj = {
name: 'John',
age: 30,
city: '',
country: 'USA'
};
const newObj = Object.entries(obj).reduce((acc, [key, value]) => {
if (value !== '') {
acc[key] = value;
}
return acc;
}, {});
console.log(newObj);在上述示例中,我們定義了一個(gè)帶有多個(gè)屬性的對(duì)象obj。其中,city屬性的值為空字符串。
使用Object.entries(obj)將對(duì)象轉(zhuǎn)換為鍵值對(duì)數(shù)組。
然后,我們使用.reduce()方法對(duì)鍵值對(duì)數(shù)組進(jìn)行歸約。我們遍歷每個(gè)鍵值對(duì),如果值value不為空字符串(value !== ''),則將這個(gè)鍵值對(duì)添加到初始為空對(duì)象的acc累加器中。
最后,我們將得到的新對(duì)象newObj打印到控制臺(tái),展示了只包含具有值的屬性的新對(duì)象。
輸出結(jié)果將是:{ name: "John", age: 30, country: "USA" },表示新對(duì)象只包含具有值的屬性。
您可以根據(jù)需要修改obj對(duì)象的屬性及其值,并使用類(lèi)似的方法獲取具有值的屬性,并將其重新組成一個(gè)新的對(duì)象。
javaScript 獲取對(duì)象
在 JavaScript 中,可以通過(guò)以下幾種方式獲取對(duì)象:
對(duì)象字面量:
可以使用花括號(hào) {} 來(lái)定義一個(gè)對(duì)象,并直接獲取其中的屬性。例如:
const obj = { name: 'Alice', age: 20 };
console.log(obj.name); // 輸出:Alice
console.log(obj.age); // 輸出:20點(diǎn)表示法:
可以使用點(diǎn) . 符號(hào)來(lái)獲取對(duì)象的屬性。例如:
const obj = { name: 'Bob', age: 25 };
console.log(obj.name); // 輸出:Bob
console.log(obj.age); // 輸出:25方括號(hào)表示法:
可以使用方括號(hào) [] 來(lái)獲取對(duì)象的屬性,屬性名作為字符串傳入。這種方式適用于屬性名包含特殊字符或動(dòng)態(tài)生成的情況。例如:
const obj = { 'user-name': 'Charlie', age: 30 };
console.log(obj['user-name']); // 輸出:Charlie
console.log(obj['age']); // 輸出:30或者也可以使用變量來(lái)表示屬性名:
const propName = 'name';
const obj = { name: 'Dave', age: 35 };
console.log(obj[propName]); // 輸出:Dave使用 Object 的方法:
JavaScript 提供了一些 Object 的方法來(lái)操作對(duì)象,例如 Object.keys()、Object.values()、Object.entries() 等。這些方法可以用來(lái)獲取對(duì)象的鍵、值或鍵值對(duì)數(shù)組。例如:
const obj = { name: 'Eve', age: 40 };
const keys = Object.keys(obj);
console.log(keys); // 輸出:['name', 'age']
const values = Object.values(obj);
console.log(values); // 輸出:['Eve', 40]
const entries = Object.entries(obj);
console.log(entries); // 輸出:[['name', 'Eve'], ['age', 40]]以上是常用的獲取對(duì)象的方式,根據(jù)具體的需求選擇適合的方法。
javaScript 復(fù)制對(duì)象
在 JavaScript 中,拷貝對(duì)象有多種方法,包括淺拷貝和深拷貝。
1. 淺拷貝(Shallow Copy):
淺拷貝創(chuàng)建一個(gè)新對(duì)象,并復(fù)制原始對(duì)象的屬性到新對(duì)象中。新對(duì)象的屬性值是原始對(duì)象屬性值的引用。實(shí)現(xiàn)淺拷貝的方法有:
- 使用擴(kuò)展運(yùn)算符(Spread Operator):使用
{...}將原始對(duì)象的屬性展開(kāi)到新對(duì)象中。 - 使用
Object.assign()方法:將原始對(duì)象復(fù)制到一個(gè)空對(duì)象中。 - 使用數(shù)組的
slice()方法:僅適用于數(shù)組對(duì)象。
// 使用擴(kuò)展運(yùn)算符
const originalObj = { name: 'Alice', age: 20 };
const newObj = { ...originalObj };
// 使用 Object.assign()
const originalObj = { name: 'Alice', age: 20 };
const newObj = Object.assign({}, originalObj);
// 使用 slice() 方法(僅適用于數(shù)組)
const originalArr = [1, 2, 3];
const newArr = originalArr.slice();這些方法都是淺拷貝,意味著只有第一層的屬性會(huì)被復(fù)制,對(duì)于嵌套對(duì)象或數(shù)組,仍然是引用。
2. 深拷貝(Deep Copy):
深拷貝創(chuàng)建一個(gè)新對(duì)象,并遞歸地復(fù)制原始對(duì)象及其所有嵌套對(duì)象的屬性。深拷貝生成的對(duì)象完全獨(dú)立于原始對(duì)象,修改一個(gè)對(duì)象不會(huì)影響另一個(gè)對(duì)象。實(shí)現(xiàn)深拷貝的方法有:
- 使用遞歸:遍歷原始對(duì)象的所有屬性,如果是對(duì)象則遞歸調(diào)用深拷貝函數(shù)。
- 使用
JSON.parse()和JSON.stringify():將對(duì)象序列化為 JSON 字符串,然后再解析為新的對(duì)象。這種方法對(duì)于大多數(shù)情況都有效,但不適用于不能被 JSON 序列化的部分(如函數(shù)、循環(huán)引用)。
// 使用遞歸
function deepCopy(obj) {
if (typeof obj !== 'object' || obj === null) {
return obj;
}
const copy = Array.isArray(obj) ? [] : {};
for (let key in obj) {
copy[key] = deepCopy(obj[key]);
}
return copy;
}
const originalObj = { name: 'Alice', age: 20 };
const newObj = deepCopy(originalObj);
// 使用 JSON.parse() 和 JSON.stringify()
const originalObj = { name: 'Alice', age: 20 };
const newObj = JSON.parse(JSON.stringify(originalObj));使用遞歸方法可以處理循環(huán)引用的情況,但要注意它可能導(dǎo)致性能問(wèn)題。而使用JSON.parse()和JSON.stringify()的方法簡(jiǎn)單且適用于大多數(shù)情況,但不能處理特殊類(lèi)型的屬性。
根據(jù)你的需求選擇適合的拷貝方法,淺拷貝適用于簡(jiǎn)單對(duì)象的復(fù)制,而深拷貝適用于需要完全獨(dú)立的對(duì)象的復(fù)制。
以上就是javaScript獲取對(duì)象中非空的屬性實(shí)現(xiàn)詳解的詳細(xì)內(nèi)容,更多關(guān)于javaScript獲取對(duì)象非空屬性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JS嚴(yán)格模式知識(shí)點(diǎn)總結(jié)
本篇文章給大家整理了JS嚴(yán)格模式下的相關(guān)知識(shí)點(diǎn)以及代碼實(shí)例分享,感興趣的跟著小編一起學(xué)習(xí)下吧。2018-02-02
簡(jiǎn)略說(shuō)明Javascript中的= =(等于)與= = =(全等于)區(qū)別
本篇文章簡(jiǎn)略說(shuō)明了Javascript中的= =(等于)與= = =(全等于)區(qū)別,有需要的朋友可以參考一下2013-04-04
窗口沒(méi)有提示自動(dòng)關(guān)閉的js代碼
窗口沒(méi)有提示自動(dòng)關(guān)閉的js代碼...2007-03-03
有關(guān)于JS輔助函數(shù)inherit()的問(wèn)題
本篇為大家介紹有關(guān)于JS輔助函數(shù)inherit()的一些問(wèn)題。2013-04-04
關(guān)于IE BUG與字符串截取substr的解決辦法
本篇文章小編為大家介紹一下,關(guān)于IE BUG與字符串截取substr的解決辦法,有需要的朋友可以參考一下2013-04-04
Websocket協(xié)議詳解及簡(jiǎn)單實(shí)例代碼
這篇文章主要介紹了Websocket協(xié)議詳解及簡(jiǎn)單實(shí)例代碼的相關(guān)資料,這里對(duì)websocket 協(xié)議進(jìn)行詳細(xì)介紹,并附簡(jiǎn)單實(shí)例代碼,需要的朋友可以參考下2016-12-12
JavaScript對(duì)象的property屬性詳解
這篇文章主要介紹了JavaScript對(duì)象的property屬性,詳細(xì)講解了property的各種屬性,需要的朋友可以參考下2014-04-04
分享5個(gè)頂級(jí)的JavaScript Ajax組件庫(kù)
AJAX是用來(lái)對(duì)服務(wù)器進(jìn)行異步HTTP調(diào)用的一系列web開(kāi)發(fā)技術(shù)客戶(hù)端框架,本文為大家分享了5個(gè)頂級(jí)的JavaScript Ajax組件庫(kù)2018-09-09

