一、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/n/258079.html
微信扫一扫 
支付宝扫一扫 