数组和对象常用遍历方式

数组遍历方式：

• for循环

• for...of

• forEach

• map

• filter

• reduce

• some / every

• find / findIndex

• for...in（不推荐，但可以说避免使用）

对象遍历方式：

• for...in

• Object.keys()

• Object.values()

• Object.entries()

• Object.getOwnPropertyNames()

• Reflect.ownKeys()

• for...of + Object.entries()

每个场景都要简短说明为什么选这个方法。

注意代码格式，保持清晰。

由于回答可能较长，我将组织成有标题的形式，但避免markdown过多层级。

以下是常用数组和对象遍历 API 的实际使用场景，每个都给出了典型示例和选择理由。

一、数组遍历

1.for循环

场景：需要在遍历过程中动态修改数组长度、提前跳出（break），或者对性能要求极高的场合。

javascript

// 场景：删除数组中所有值为 null 的元素（从后往前删除，避免索引错位） let arr = [1, null, 2, null, 3]; for (let i = arr.length - 1; i >= 0; i--) { if (arr[i] === null) { arr.splice(i, 1); } } // arr -> [1, 2, 3]

2.for...of

场景：只需要元素值，并可能提前退出（break/continue），代码简洁。

javascript

// 场景：检查数组中是否包含某个值，一旦找到就停止 const ids = [101, 205, 307, 409]; let targetId = 307; let found = false; for (const id of ids) { if (id === targetId) { found = true; break; } }

3.forEach

场景：单纯执行副作用（如打印、更新外部状态），不需要中断循环。

javascript

// 场景：批量更新页面上的元素内容 const elements = document.querySelectorAll('.item'); elements.forEach((el, index) => { el.textContent = `第 ${index + 1} 项`; });

4.map

场景：从原数组生成一个新数组，且新数组长度相同。

javascript

// 场景：将用户对象数组转换为只包含用户名的数组 const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; const names = users.map(user => user.name); // names -> ['Alice', 'Bob']

5.filter

场景：根据条件筛选出子集。

javascript

// 场景：获取所有已完成的任务 const tasks = [ { title: '学习JS', done: true }, { title: '写报告', done: false } ]; const completed = tasks.filter(task => task.done);

6.reduce

场景：将数组归约为单个值（累加、合并对象、分组等）。

javascript

// 场景：统计商品总价 const cart = [ { name: '苹果', price: 5, count: 2 }, { name: '香蕉', price: 3, count: 3 } ]; const total = cart.reduce((sum, item) => sum + item.price * item.count, 0); // total -> 19

7.some/every

场景：快速判断数组是否满足某些条件。

javascript

// some: 检查数组中是否存在未支付订单 const orders = [ { id: 1, paid: true }, { id: 2, paid: false } ]; const hasUnpaid = orders.some(order => !order.paid); // true // every: 检查所有学生是否都及格 const scores = [85, 92, 78, 88]; const allPass = scores.every(score => score >= 60); // true

8.find/findIndex

场景：查找第一个符合条件的元素或其索引。

javascript

// 场景：根据 id 查找用户对象 const users = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' } ]; const user = users.find(u => u.id === 2); // user -> { id: 2, name: 'Bob' }

9.for...in（避免用于数组）

不推荐，因为它会遍历数组对象上所有可枚举属性（包括原型链），且不保证顺序。
如果误用可能造成问题，例如：

javascript

Array.prototype.custom = 'foo'; const arr = [1, 2]; for (let i in arr) { console.log(i); // 输出 "0", "1", "custom" }

二、对象遍历

1.for...in

场景：需要遍历对象自身及原型链上的可枚举属性（通常配合hasOwnProperty过滤）。

javascript

// 场景：复制对象自身属性（不包括原型） const source = { a: 1, b: 2 }; const target = {}; for (let key in source) { if (source.hasOwnProperty(key)) { target[key] = source[key]; } }

2.Object.keys()

场景：获取对象自身可枚举属性名，然后结合数组方法处理。

javascript

// 场景：遍历对象并执行操作 const config = { host: 'localhost', port: 8080, ssl: false }; Object.keys(config).forEach(key => { console.log(`${key}: ${config[key]}`); });

3.Object.values()

场景：只需要对象的值。

javascript

// 场景：计算所有学生成绩的总分 const scores = { math: 95, english: 88, science: 92 }; const total = Object.values(scores).reduce((sum, score) => sum + score, 0); // total -> 275

4.Object.entries()

场景：同时需要键和值，是最常用的对象遍历方式。

javascript

// 场景：将对象转换为查询字符串 const params = { search: 'js', page: 1, limit: 10 }; const queryString = Object.entries(params) .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`) .join('&'); // queryString -> "search=js&page=1&limit=10"

5.Object.getOwnPropertyNames()

场景：需要遍历对象的不可枚举属性（如某些内置属性）。

javascript

// 场景：获取对象所有自身属性（包括不可枚举的） const obj = {}; Object.defineProperty(obj, 'hidden', { value: 42, enumerable: false }); console.log(Object.getOwnPropertyNames(obj)); // ['hidden']

6.Reflect.ownKeys()

场景：需要完整获取对象所有自身属性键，包括 Symbol 类型。

javascript

// 场景：深拷贝对象时保留 Symbol 属性 const sym = Symbol('id'); const obj = { name: 'foo', [sym]: 123 }; const clone = {}; Reflect.ownKeys(obj).forEach(key => { clone[key] = obj[key]; }); console.log(clone); // { name: 'foo', [sym]: 123 }

7.for...of+Object.entries()

场景：需要遍历对象的同时可以随时中断（break）。

javascript

// 场景：查找对象中第一个值大于 100 的键值对 const data = { a: 50, b: 120, c: 80 }; let foundKey = null; for (const [key, value] of Object.entries(data)) { if (value > 100) { foundKey = key; break; } } // foundKey -> 'b'

选择总结