要獲取JavaScript對象中所有具有值的屬性,您可以使用 Object.entries()方法結合Array.prototype.filter()方法。以下是一個示例代碼:
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);
在上述示例中,我們定義了一個帶有多個屬性的對象obj
。其中,city
屬性的值為空字符串。
使用Object.entries(obj)
可以將一個對象轉換為包含?鍵值對?的數(shù)組。每個鍵值對都是由鍵和值組成的數(shù)組,如[key, value]
。
接下來,我們使用.filter()
方法對鍵值對數(shù)組進行過濾。我們檢查每個鍵值對中的值value
是否為空字符串(value !== ''
),從而篩選出具有值的屬性。
最后,我們使用.map()
方法將篩選后的鍵值對數(shù)組轉換為只包含屬性名的數(shù)組。
最終,我們將具有值的屬性名數(shù)組打印到控制臺,以展示對象中具有值的屬性。
輸出結果將是:["name", "age", "country"]
,表示name
、age
和country
這幾個屬性在對象中都具有值。
您可以根據需要修改obj
對象的屬性及其值,并使用類似的方法獲取具有值的屬性列表。
javaScript獲取對象中有值的屬性,重新組成一個對象
要獲取JavaScript對象中具有值的屬性,并將其重新組成一個新的對象,您可以使用Object.entries()
方法結合Array.prototype.reduce()
方法。
以下是一個示例代碼:
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);
在上述示例中,我們定義了一個帶有多個屬性的對象obj
。其中,city
屬性的值為空字符串。
使用Object.entries(obj)
將對象轉換為鍵值對數(shù)組。
然后,我們使用.reduce()
方法對鍵值對數(shù)組進行歸約。我們遍歷每個鍵值對,如果值value
不為空字符串(value !== ''
),則將這個鍵值對添加到初始為空對象的acc
累加器中。
最后,我們將得到的新對象newObj
打印到控制臺,展示了只包含具有值的屬性的新對象。
輸出結果將是:{ name: "John", age: 30, country: "USA" }
,表示新對象只包含具有值的屬性。
您可以根據需要修改obj
對象的屬性及其值,并使用類似的方法獲取具有值的屬性,并將其重新組成一個新的對象。
javaScript 獲取對象
在 JavaScript 中,可以通過以下幾種方式獲取對象:
-
對象字面量: 可以使用花括號?
{}
?來定義一個對象,并直接獲取其中的屬性。例如:const?obj?=?{?name:?'Alice',?age:?20?}; console.log(obj.name);?//?輸出:Alice console.log(obj.age);?//?輸出:20
-
點表示法: 可以使用點?
.
?符號來獲取對象的屬性。例如:const?obj?=?{?name:?'Bob',?age:?25?}; console.log(obj.name);?//?輸出:Bob console.log(obj.age);?//?輸出:25
-
方括號表示法: 可以使用方括號?
[]
?來獲取對象的屬性,屬性名作為字符串傳入。這種方式適用于屬性名包含特殊字符或動態(tài)生成的情況。例如:const?obj?=?{?'user-name':?'Charlie',?age:?30?}; console.log(obj['user-name']);?//?輸出:Charlie console.log(obj['age']);?//?輸出:30
或者也可以使用變量來表示屬性名:
const?propName?=?'name'; const?obj?=?{?name:?'Dave',?age:?35?}; console.log(obj[propName]);?//?輸出:Dave
-
使用 Object 的方法: JavaScript 提供了一些 Object 的方法來操作對象,例如?
Object.keys()
、Object.values()
、Object.entries()
?等。這些方法可以用來獲取對象的鍵、值或鍵值對數(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]]
以上是常用的獲取對象的方式,根據具體的需求選擇適合的方法。
javaScript 復制對象
在 JavaScript 中,拷貝對象有多種方法,包括淺拷貝和深拷貝。
1. 淺拷貝(Shallow Copy): 淺拷貝創(chuàng)建一個新對象,并復制原始對象的屬性到新對象中。新對象的屬性值是原始對象屬性值的引用。實現(xiàn)淺拷貝的方法有:
-
使用擴展運算符(Spread Operator):使用
{...}
將原始對象的屬性展開到新對象中。 -
使用
Object.assign()
方法:將原始對象復制到一個空對象中。 -
使用數(shù)組的
slice()
方法:僅適用于數(shù)組對象。
//?使用擴展運算符
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();
這些方法都是淺拷貝,意味著只有第一層的屬性會被復制,對于嵌套對象或數(shù)組,仍然是引用。
2. 深拷貝(Deep Copy): 深拷貝創(chuàng)建一個新對象,并遞歸地復制原始對象及其所有嵌套對象的屬性。深拷貝生成的對象完全獨立于原始對象,修改一個對象不會影響另一個對象。實現(xiàn)深拷貝的方法有:
-
使用遞歸:遍歷原始對象的所有屬性,如果是對象則遞歸調用深拷貝函數(shù)。
-
使用
JSON.parse()
和JSON.stringify()
:將對象序列化為 JSON 字符串,然后再解析為新的對象。這種方法對于大多數(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)引用的情況,但要注意它可能導致性能問題。而使用JSON.parse()
和JSON.stringify()
的方法簡單且適用于大多數(shù)情況,但不能處理特殊類型的屬性。文章來源:http://www.zghlxwxcb.cn/news/detail-618441.html
根據你的需求選擇適合的拷貝方法,淺拷貝適用于簡單對象的復制,而深拷貝適用于需要完全獨立的對象的復制。文章來源地址http://www.zghlxwxcb.cn/news/detail-618441.html
到了這里,關于javaScript 如何獲取對象中非空的屬性的文章就介紹完了。如果您還想了解更多內容,請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章,希望大家以后多多支持TOY模板網!