在JavaScript开发中，处理对象数据时经常会用到Object.values方法，它会返回一个由对象自身可枚举属性值组成的数组，后续对这个数组进行遍历并提取对应元素是常见操作，不同的遍历方式适配不同的业务场景。
Object.values基础用法回顾
Object.values是ES2017引入的静态方法，接收一个对象作为参数，返回该对象所有可枚举属性值组成的数组，顺序和for...in循环遍历的顺序一致，区别是不会遍历原型链上的属性。
示例代码如下：
const user = {
name: '张三',
age: 25,
job: '前端开发',
salary: 15000
};
// 获取对象所有值组成的数组
const values = Object.values(user);
console.log(values); // 输出: ['张三', 25, '前端开发', 15000]
遍历数组并提取元素的常见方法
1. for循环遍历提取
for循环是最基础的遍历方式，适合需要控制遍历流程、提前终止循环的场景，我们可以通过索引获取每个元素，再根据条件提取目标元素。
示例：提取数组中所有数字类型的元素
const user = {
name: '张三',
age: 25,
job: '前端开发',
salary: 15000,
hobbies: ['篮球', '阅读']
};
const values = Object.values(user);
const numberValues = [];
for (let i = 0; i < values.length; i++) {
if (typeof values[i] === 'number') {
numberValues.push(values[i]);
}
}
console.log(numberValues); // 输出: [25, 15000]
2. forEach方法遍历提取
forEach是数组原型上的方法，会为每个数组元素执行一次回调函数，适合不需要中断遍历的场景，我们可以在回调中判断条件并提取元素。
示例：提取数组中所有字符串类型的元素
const user = {
name: '张三',
age: 25,
job: '前端开发',
salary: 15000
};
const values = Object.values(user);
const stringValues = [];
values.forEach(item => {
if (typeof item === 'string') {
stringValues.push(item);
}
});
console.log(stringValues); // 输出: ['张三', '前端开发']
3. filter方法直接提取符合条件的元素
filter方法会返回一个新数组，包含所有通过回调函数测试的元素，适合直接筛选提取符合特定条件的元素，代码更简洁。
示例：提取数组中所有大于100的值
const config = {
maxRetry: 3,
timeout: 5000,
bufferSize: 1024,
retryDelay: 100
};
const values = Object.values(config);
const greaterThan100 = values.filter(item => typeof item === 'number' && item > 100);
console.log(greaterThan100); // 输出: [5000, 1024]
4. map方法转换后提取
map方法会返回一个新数组，数组元素是回调函数的返回值，适合需要对每个元素做处理后提取结果的场景。
示例：提取所有字符串元素的长度
const info = {
title: 'JavaScript教程',
author: '李四',
category: '编程'
};
const values = Object.values(info);
const strLengths = values.map(item => {
if (typeof item === 'string') {
return item.length;
}
return null;
}).filter(item => item !== null); // 过滤掉非字符串转换的null值
console.log(strLengths); // 输出: [8, 2, 2]
不同方法的适用场景对比
我们可以通过下表快速选择合适的方法：
| 方法 | 是否可中断遍历 | 返回值 | 适用场景 |
|---|---|---|---|
| for循环 | 是，可用break中断 | 无默认返回值 | 需要控制遍历流程、提前终止的场景 |
| forEach | 否，无法中断 | undefined | 不需要中断遍历，简单执行操作的场景 |
| filter | 否，无法中断 | 符合条件的新数组 | 直接筛选提取符合条件的元素的场景 |
| map | 否，无法中断 | 转换后的新数组 | 需要对元素做统一转换后提取的场景 |
注意事项
- Object.values返回的是新数组，修改这个数组不会影响原对象。
- 如果对象的属性值是引用类型，提取到的是引用地址，修改提取后的元素会影响原对象中的对应值。
- 遍历数组时如果需要修改原数组，优先选择for循环，forEach和map等方法不推荐用来修改原数组，容易造成逻辑混乱。
实际开发中可以根据需求灵活组合这些方法，比如先用filter筛选符合条件的元素，再用map做统一处理，提升代码的可读性和开发效率。
JavaScriptObject_values数组遍历元素提取前端开发修改时间：2026-06-21 04:00:30