一、用法介绍
在ES2017 (ECMA8)中,引入了新的方法Object.values()
,该方法可以将一个对象的所有属性的值以数组的形式返回。这个方法非常方便,因为在JavaScript中访问对象的属性时,我们通常是需要遍历对象所有的属性,并单独取出值这就需要我们写循环遍历的代码,非常繁琐。而使用Object.values()
则可以避免这种不必要的麻烦。
const object1 = { a: 'value1', b: 'value2', c: 'value3' };
console.log(Object.values(object1)); // ['value1', 'value2', 'value3']
二、使用场景
Object.values()
方法的最常见用途就是获取对象的值,它方便、快捷,可以用来迭代和过滤对象的值。
1、迭代对象的属性值
在很多情况下,我们需要迭代对象的属性值,比如说打印一个对象的所有值,或者检查对象的所有值是否符合某个条件。在这种情况下,使用 Object.values()
函数可以让代码显得更直观方便。
const person = {
name: 'Jack',
age: 25,
job: 'programmer',
address: {
city: 'Shanghai',
street: 'Nanjing Road'
}
};
Object.values(person).forEach(value => console.log(value));
// prints "Jack", 25, "programmer", {city: "Shanghai", street: "Nanjing Road"}
上面这个例子中,我们使用Object.values()
和 forEach()
迭代了person
对象所有值。
2、获取对象的属性值并过滤
在某些情况下,我们可能需要筛选对象值数组上符合某些条件的值。事先,我们可以使用 Array.filter()
方法过滤数据的值数组:
const person = {
name: 'Jack',
age: 25,
job: 'programmer',
address: {
city: 'Shanghai',
street: 'Nanjing Road'
}
};
const jobIsProgrammer = value => value === 'programmer';
const programmerValues = Object.values(person).filter(jobIsProgrammer);
console.log(programmerValues); // ["programmer"]
在这个例子中,我们使用Object.values()
来获取person
对象的每一个属性的值,之后再通过 Array.filter()
方法筛选出了符合判断条件的值:占据职业为程序员的值。
三、结合其他方法的用法
Object.values()
方法可以和同样方便快捷的方法Object.keys()
结合使用,一起来获取对象中属性的值和对应的键。
const object1 = { a: 'value1', b: 'value2', c: 'value3' };
const keys = Object.keys(object1);
const values = Object.values(object1);
const entries = Object.entries(object1);
console.log(keys); // ['a', 'b', 'c']
console.log(values); // ['value1', 'value2', 'value3']
console.log(entries); // [['a', 'value1'], ['b', 'value2'], ['c', 'value3']]
在这个例子中,我们将对象object1
通过Object.keys()
和Object.values()
以及Object.entries()
分别转化为键数组、值数组以及[键,值]对数组。这实际上是一种比较常见的操作,可以在Ajax请求中对多次读取对象的值。
四、使用Object.values()
迭代对象时,请记得使用for-of
循环
虽然我们在上面的很多例子中都使用了forEach()
循环,但是实际上使用for-of
循环更为安全:因为在迭代对象时,我们不能保证每个对象都支持 forEach()
这个方法,而使用ES6新增的for-of
循环可以保证使用的是合法的迭代方法。在代码中使用for-of
来迭代对象,可以保证代码的兼容性和稳定性。
var obj = {a: 1, b: 2, c: 3 };
// for...of循环读取对象的值
for(var val of Object.values(obj)){
console.log(val);
} // 1 2 3
五、总结
Object.values()
方法是一个非常实用的方法,极大地简化了访问对象的属性值的过程,并且兼容性较好。我们可以使用它来迭代对象的属性值,或者过滤对象的值数组,并且可以结合Object.keys()
方法来同时获取对象的属性和属性值。