Object.keys()、Object.values()、Object.entries()怎么使用

Object.keys()、Object.values()、Object.entries()怎么使用

在JavaScript中，對象是一種非常常見的數據結構，用于存儲鍵值對。為了更方便地操作對象，ES6引入了三個非常有用的方法：Object.keys()、Object.values()和Object.entries()。這些方法可以幫助我們更高效地遍歷和操作對象的屬性。本文將詳細介紹這三個方法的用法，并通過示例代碼幫助讀者更好地理解它們。

1. Object.keys()

Object.keys() 方法返回一個由給定對象自身的可枚舉屬性組成的數組，數組中屬性名的排列順序與使用 for...in 循環遍歷該對象時返回的順序一致。

1.1 基本用法

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const keys = Object.keys(obj);
console.log(keys); // 輸出: ['name', 'age', 'job']

在上面的例子中，Object.keys(obj) 返回了一個包含 obj 對象所有可枚舉屬性的數組 ['name', 'age', 'job']。

1.2 遍歷對象屬性

Object.keys() 通常用于遍歷對象的屬性。例如：

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

Object.keys(obj).forEach(key => {
  console.log(`${key}: ${obj[key]}`);
});
// 輸出:
// name: Alice
// age: 25
// job: Developer

在這個例子中，我們使用 Object.keys() 獲取對象的屬性名數組，然后使用 forEach 方法遍歷數組并輸出每個屬性的鍵值對。

1.3 處理非對象類型

如果傳遞給 Object.keys() 的參數不是對象，JavaScript 會將其轉換為對象。例如：

const str = 'hello';
const keys = Object.keys(str);
console.log(keys); // 輸出: ['0', '1', '2', '3', '4']

在這個例子中，字符串 'hello' 被轉換為一個類數組對象，Object.keys() 返回了字符串的索引數組。

2. Object.values()

Object.values() 方法返回一個由給定對象自身的可枚舉屬性值組成的數組，數組中屬性值的排列順序與使用 for...in 循環遍歷該對象時返回的順序一致。

2.1 基本用法

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const values = Object.values(obj);
console.log(values); // 輸出: ['Alice', 25, 'Developer']

在這個例子中，Object.values(obj) 返回了一個包含 obj 對象所有可枚舉屬性值的數組 ['Alice', 25, 'Developer']。

2.2 遍歷對象屬性值

Object.values() 通常用于遍歷對象的屬性值。例如：

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

Object.values(obj).forEach(value => {
  console.log(value);
});
// 輸出:
// Alice
// 25
// Developer

在這個例子中，我們使用 Object.values() 獲取對象的屬性值數組，然后使用 forEach 方法遍歷數組并輸出每個屬性值。

2.3 處理非對象類型

與 Object.keys() 類似，如果傳遞給 Object.values() 的參數不是對象，JavaScript 會將其轉換為對象。例如：

const str = 'hello';
const values = Object.values(str);
console.log(values); // 輸出: ['h', 'e', 'l', 'l', 'o']

在這個例子中，字符串 'hello' 被轉換為一個類數組對象，Object.values() 返回了字符串的字符數組。

3. Object.entries()

Object.entries() 方法返回一個由給定對象自身的可枚舉屬性的鍵值對組成的數組，數組中每個元素都是一個包含鍵和值的數組，排列順序與使用 for...in 循環遍歷該對象時返回的順序一致。

3.1 基本用法

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const entries = Object.entries(obj);
console.log(entries);
// 輸出: [['name', 'Alice'], ['age', 25], ['job', 'Developer']]

在這個例子中，Object.entries(obj) 返回了一個包含 obj 對象所有可枚舉屬性的鍵值對數組 [['name', 'Alice'], ['age', 25], ['job', 'Developer']]。

3.2 遍歷對象屬性鍵值對

Object.entries() 通常用于遍歷對象的屬性鍵值對。例如：

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

Object.entries(obj).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// 輸出:
// name: Alice
// age: 25
// job: Developer

在這個例子中，我們使用 Object.entries() 獲取對象的鍵值對數組，然后使用 forEach 方法遍歷數組并輸出每個屬性的鍵值對。

3.3 處理非對象類型

與 Object.keys() 和 Object.values() 類似，如果傳遞給 Object.entries() 的參數不是對象，JavaScript 會將其轉換為對象。例如：

const str = 'hello';
const entries = Object.entries(str);
console.log(entries);
// 輸出: [['0', 'h'], ['1', 'e'], ['2', 'l'], ['3', 'l'], ['4', 'o']]

在這個例子中，字符串 'hello' 被轉換為一個類數組對象，Object.entries() 返回了字符串的索引和字符組成的鍵值對數組。

4. 實際應用場景

4.1 對象屬性的批量操作

Object.keys()、Object.values() 和 Object.entries() 可以用于批量操作對象的屬性。例如，我們可以使用 Object.entries() 將對象的屬性轉換為另一種格式：

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const newObj = Object.entries(obj).reduce((acc, [key, value]) => {
  acc[key.toUpperCase()] = value;
  return acc;
}, {});

console.log(newObj);
// 輸出: { NAME: 'Alice', AGE: 25, JOB: 'Developer' }

在這個例子中，我們使用 Object.entries() 獲取對象的鍵值對數組，然后使用 reduce 方法將對象的屬性名轉換為大寫，并生成一個新的對象。

4.2 對象屬性的過濾

我們可以使用 Object.entries() 結合 filter 方法來過濾對象的屬性。例如：

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const filteredObj = Object.entries(obj).filter(([key, value]) => value !== 25);

console.log(Object.fromEntries(filteredObj));
// 輸出: { name: 'Alice', job: 'Developer' }

在這個例子中，我們使用 Object.entries() 獲取對象的鍵值對數組，然后使用 filter 方法過濾掉值為 25 的屬性，最后使用 Object.fromEntries() 將過濾后的鍵值對數組轉換回對象。

4.3 對象屬性的排序

我們可以使用 Object.entries() 結合 sort 方法來對對象的屬性進行排序。例如：

const obj = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

const sortedObj = Object.entries(obj).sort(([key1], [key2]) => key1.localeCompare(key2));

console.log(Object.fromEntries(sortedObj));
// 輸出: { age: 25, job: 'Developer', name: 'Alice' }

在這個例子中，我們使用 Object.entries() 獲取對象的鍵值對數組，然后使用 sort 方法對屬性名進行排序，最后使用 Object.fromEntries() 將排序后的鍵值對數組轉換回對象。

5. 總結

Object.keys()、Object.values() 和 Object.entries() 是 JavaScript 中非常有用的方法，它們可以幫助我們更方便地操作對象的屬性。通過本文的介紹和示例代碼，相信讀者已經掌握了這三個方法的基本用法和實際應用場景。在實際開發中，靈活運用這些方法可以大大提高代碼的效率和可讀性。