如何使用JavaScript的Object.values()方法獲取對象的所有屬性值？

一、Object.values() 方法的基本概念

Object.values() 方法是ES2017引入的一個非常實用的方法，它用於獲取一個對象的所有屬性值，並返回一個包含所有值的數組。

const obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj));  // [1, 2, 3]

Object.values() 方法不僅僅適用於普通的對象，也可以用來獲取數組和類數組對象的所有屬性值。

const arr = [1, 2, 3];
console.log(Object.values(arr));  // [1, 2, 3]

const str = 'abc';
console.log(Object.values(str));  // ['a', 'b', 'c']

二、獲取對象屬性值的各種方法

1. 使用Object.values() 方法

const obj = {a: 1, b: 2, c: 3};
console.log(Object.values(obj));  // [1, 2, 3]

2. 使用for-in 循環

使用for-in 循環可以遍歷對象的所有屬性名，進而獲取所有屬性值。

const obj = {a: 1, b: 2, c: 3};
const values = [];
for(let key in obj) {
  values.push(obj[key]);
}
console.log(values);  // [1, 2, 3]

需要注意的是，使用for-in 循環遍歷對象屬性時，由於對象原型鏈上可能存在屬性，因此需要通過hasOwnProperty()方法判斷該屬性是否為對象自身屬性，才能避免重複獲取。

const obj = {a: 1, b: 2, c: 3};
const values = [];
for(let key in obj) {
  if(obj.hasOwnProperty(key)) {
    values.push(obj[key]);
  }
}
console.log(values);  // [1, 2, 3]

3. 使用Object.keys() 方法結合map() 方法

Object.keys() 方法可以獲取對象的所有屬性名，並返回一個包含所有屬性名的數組。進而可以結合map() 方法遍曆數組元素，獲取屬性值。

const obj = {a: 1, b: 2, c: 3};
const values = Object.keys(obj).map(key => obj[key]);
console.log(values);  // [1, 2, 3]

三、Object.values() 方法的一些擴展應用

1. 獲取對象屬性名和屬性值的數組

我們可以使用Object.entries() 方法獲取一個包含所有對象屬性名和屬性值的數組。

const obj = {a: 1, b: 2, c: 3};
const entries = Object.entries(obj);
console.log(entries);  // [['a', 1], ['b', 2], ['c', 3]]

2. 與Array.prototype.reduce() 方法結合使用

結合Array.prototype.reduce() 方法，我們可以使用Object.values() 方法來實現數組求和、字符串拼接等功能。

const arr = [1, 2, 3];
const sum = Object.values(arr).reduce((a, b) => a + b);
console.log(sum);  // 6

const str = 'abc';
const result = Object.values(str).reduce((a, b) => a + b);
console.log(result);  // 'abc'

3. 將對象屬性值響應式綁定到Vue組件

在Vue組件的data中定義一個對象，並將對象屬性值與組件中的一個文本框的值綁定。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/258079.html