javaScript獲取對象中非空的屬性

要獲取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)可以將一個對象轉換為包含 鍵值對 的數組。每個鍵值對都是由鍵和值組成的數組，如[key, value]。

接下來，我們使用.filter()方法對鍵值對數組進行過濾。我們檢查每個鍵值對中的值value是否為空字符串（value !== ''），從而篩選出具有值的屬性。

最后，我們使用.map()方法將篩選后的鍵值對數組轉換為只包含屬性名的數組。

最終，我們將具有值的屬性名數組打印到控制臺，以展示對象中具有值的屬性。

輸出結果將是：["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)將對象轉換為鍵值對數組。

然后，我們使用.reduce()方法對鍵值對數組進行歸約。我們遍歷每個鍵值對，如果值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() 等。這些方法可以用來獲取對象的鍵、值或鍵值對數組。例如：

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)建一個新對象，并復制原始對象的屬性到新對象中。新對象的屬性值是原始對象屬性值的引用。實現淺拷貝的方法有：

• 使用擴展運算符（Spread Operator）：使用{...}將原始對象的屬性展開到新對象中。
• 使用Object.assign()方法：將原始對象復制到一個空對象中。
• 使用數組的slice()方法：僅適用于數組對象。

// 使用擴展運算符
const originalObj = { name: 'Alice', age: 20 };
const newObj = { ...originalObj };
// 使用 Object.assign()
const originalObj = { name: 'Alice', age: 20 };
const newObj = Object.assign({}, originalObj);
// 使用 slice() 方法（僅適用于數組）
const originalArr = [1, 2, 3];
const newArr = originalArr.slice();

這些方法都是淺拷貝，意味著只有第一層的屬性會被復制，對于嵌套對象或數組，仍然是引用。

2. 深拷貝（Deep Copy）：

深拷貝創(chuàng)建一個新對象，并遞歸地復制原始對象及其所有嵌套對象的屬性。深拷貝生成的對象完全獨立于原始對象，修改一個對象不會影響另一個對象。實現深拷貝的方法有：

• 使用遞歸：遍歷原始對象的所有屬性，如果是對象則遞歸調用深拷貝函數。
• 使用JSON.parse()和JSON.stringify()：將對象序列化為 JSON 字符串，然后再解析為新的對象。這種方法對于大多數情況都有效，但不適用于不能被 JSON 序列化的部分（如函數、循環(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()的方法簡單且適用于大多數情況，但不能處理特殊類型的屬性。

根據你的需求選擇適合的拷貝方法，淺拷貝適用于簡單對象的復制，而深拷貝適用于需要完全獨立的對象的復制。

以上就是javaScript獲取對象中非空的屬性實現詳解的詳細內容，更多關于javaScript獲取對象非空屬性的資料請關注腳本之家其它相關文章！

最新評論