举例说明数组和对象的迭代方法分别有哪些?
在前端开发中,数组和对象都有多种迭代方法,各有优缺点,适用于不同的场景。以下是一些常见的例子:
数组迭代:
for
循环: 最基本的迭代方式,可以完全控制迭代过程,包括索引访问和提前终止。
const arr = [1, 2, 3, 4, 5];
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]); // 访问元素和索引
if (arr[i] > 3) break; // 可以根据条件终止循环
}
for...in
循环: 迭代数组的索引(键名)。虽然可以用于数组,但不推荐,因为它迭代的是字符串类型的索引,并且会遍历原型链上的属性。
const arr = [1, 2, 3];
for (const index in arr) {
console.log(index); // "0", "1", "2" (字符串类型)
console.log(arr[index]); // 1, 2, 3
}
for...of
循环: ES6 引入,迭代数组的元素值。简洁易读,推荐使用。
const arr = [1, 2, 3];
for (const value of arr) {
console.log(value); // 1, 2, 3
}
forEach()
方法: 对数组的每个元素执行提供的回调函数。
const arr = [1, 2, 3];
arr.forEach((value, index) => {
console.log(index, value); // 可以访问索引和值
});
map()
方法: 创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。
const arr = [1, 2, 3];
const doubled = arr.map(value => value * 2);
console.log(doubled); // [2, 4, 6]
filter()
方法: 创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。
const arr = [1, 2, 3, 4, 5];
const even = arr.filter(value => value % 2 === 0);
console.log(even); // [2, 4]
对象迭代:
for...in
循环: 迭代对象的键名(属性名)。
const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
console.log(key); // "a", "b", "c"
console.log(obj[key]); // 1, 2, 3
}
Object.keys()
: 返回一个包含对象自身可枚举属性名的数组。可以结合for...of
或其他数组迭代方法使用。
const obj = { a: 1, b: 2, c: 3 };
const keys = Object.keys(obj); // ["a", "b", "c"]
for (const key of keys) {
console.log(key, obj[key]);
}
Object.values()
: 返回一个包含对象自身可枚举属性值的数组。
const obj = { a: 1, b: 2, c: 3 };
const values = Object.values(obj); // [1, 2, 3]
for (const value of values) {
console.log(value);
}
Object.entries()
: 返回一个包含对象自身可枚举属性的键值对数组。
const obj = { a: 1, b: 2, c: 3 };
const entries = Object.entries(obj); // [["a", 1], ["b", 2], ["c", 3]]
for (const [key, value] of entries) {
console.log(key, value);
}
选择哪种迭代方法取决于你的具体需求。例如,需要访问索引时使用 for
循环或 forEach()
;需要创建新数组时使用 map()
或 filter()
;迭代对象属性时使用 for...in
、Object.keys()
、Object.values()
或 Object.entries()
。 `for
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现