javascript 遍历数组，js for each遍历数组详解
这篇文章给大家聊聊关于javascript 遍历数组，以及js for each遍历数组详解对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
怎样快速而优雅地遍历 JavaScript 数组
我们一般用循环来遍历数组，而循环一直是 JavaScript
性能问题的常见来源，有时循环用得不好会严重降低代码的运行速度。例如，遍历数组时，我们会很自然地写出下面这种代码：
//未优化的代码1
var array= [0,1,2,3,4,5,6,7,8,9];
// for-in循环
for(var val in array){
fn(val);
}
还有这一种常见写法：
//未优化的代码2
var array= [0,1,2,3,4,5,6,7,8,9];
// for循环
for(var i=0; i< array.length; i++){
fn(array[i]);
}
这两个方法看上去似乎不错，而且语义上也很容易理解。但是这两个方法都有性能问题：
“未优化的代码1”中，for-in需要分析出 array的每个属性，这个操作的性能开销很大，用在 key
已知的数组上是非常不划算的。所以尽量不要用 for-in，除非你不清楚要处理哪些属性，例如 JSON对象这样的情况。
“未优化的代码2”中，循环每执行一次，都要检查一次 array.length的值，读属性要比读局部变量慢，尤其是当 array
里存放的都是 DOM元素（像 array=
document.getElementByClassName("class");），因为每次读 array.length
都要扫描一遍页面上 class="class"的元素，速度更是慢得抓狂。
假如你的任务是从页面上 100个复选框中，找出选中的复选框的 value，并把它们放入一个数组的话，在 IE
上可能得花上半秒才能完成。结果就是，用户在列表里选择了自己要的项目，点击提交后起码要过半秒才会有反应，直观感觉就是很卡。
我们绝不能接受这样的结果，所以我们需要加快循环终止条件的计算速度。先把数组的长度先查出来，存进一个局部变量，那么循环的速度将会大大提高：
//快速的代码
var array= [0,1,2,3,4,5,6,7,8,9];
// for循环
var length= array.length;
for(var i=0; i<
length; i++){
fn(array[i]);
}
现在只需要读取一次 array.length的值，遍历数组的过程大大加快了。
不过我们还可以让它更快。如果循环终止条件不需要进行比较运算，那么循环的速度还可以更快：
//最快的代码
var array= [0,1,2,3,4,5,6,7,8,9];
// for循环
for(var i= array.length; i--;)
{
fn(array[i]);
}
把数组下标改成向 0递减，循环终止条件只需要判断 i是否为 0
就行了。因为循环增量和循环终止条件结合在一起，所以可以写成更简单的 while循环：
//最快且优雅的代码
var array= [0,1,2,3,4,5,6,7,8,9];
// while循环
var i= array.length;
while(i--){
fn(array[i]);
}
如何高效遍历 JavaScript 数组
在 JavaScript中高效遍历数组可根据需求选择不同方法，传统 for循环适合需要精细控制索引的场景，而 forEach()、map()、filter()等高阶方法则能简化代码逻辑。以下是具体方法及适用场景分析：
1.传统 for循环特点：最基础且灵活的遍历方式，可手动控制索引、中断循环（break/continue），适合需要精确操作索引或提前终止的场景。示例：const list= ['one','two','three'];for(let i= 0; i< list.length; i++){ console.log(list[i]);//输出每个元素}优化：使用 let替代 var避免变量提升问题。
缓存数组长度（如 const len= list.length）可提升性能（尤其在大型数组中）。
2. forEach()方法特点：简洁的迭代方式，自动处理索引，但无法中断循环或返回结果，适合对每个元素执行相同操作且无需返回值的场景。示例：const list= ['one','two','three'];list.forEach((item, index)=>{ console.log(`Index${index}:${item}`);//输出索引和元素});注意：无法使用 break/continue，需通过抛出异常或 some()/every()模拟中断（不推荐）。
性能略低于传统 for循环（但差异通常可忽略）。
3. map()方法特点：创建新数组，每个元素是原数组元素经过回调函数处理后的结果，适合需要转换数据的场景。示例：const list= [1, 2, 3];const doubled= list.map(item=> item* 2);// [2, 4, 6]适用场景：数据格式转换（如对象数组提取特定属性）。
生成新数组而不修改原数组（符合函数式编程原则）。
4. filter()方法特点：根据回调函数的返回值（true/false）过滤数组，返回新数组，适合数据筛选场景。示例：const list= [1, 2, 3, 4];const evenNumbers= list.filter(item=> item% 2=== 0);// [2, 4]优势：代码可读性高，直接表达“过滤”意图。
不修改原数组，避免副作用。
5.其他高阶方法for...of循环：直接迭代数组元素（无需索引），语法简洁，但无法直接获取索引。
示例：const list= ['one','two','three'];for(const item of list){ console.log(item);//输出每个元素}
reduce()方法：累加器模式，将数组元素通过回调函数逐步合并为单个值（如求和、扁平化数组）。
示例：const sum= [1, 2, 3].reduce((acc, curr)=> acc+ curr, 0);// 6
方法选择建议需要索引或中断循环→传统 for循环或 for...of（结合 entries()获取索引）。简单迭代无返回值→ forEach()。转换数据生成新数组→ map()。过滤数据→ filter()。累加或复杂聚合→ reduce()。现代 JavaScript环境：优先使用高阶方法（如 map()/filter()），代码更简洁且易于维护。性能敏感场景：传统 for循环通常最快，但需权衡可读性。示例对比//传统 for循环（灵活但冗长）for(let i= 0; i< list.length; i++){ if(list[i]==='two') break;//可中断 console.log(list[i]);}// forEach（简洁但无法中断）list.forEach(item=>{ if(item==='two') return;//无法真正中断，仅跳过当前迭代 console.log(item);});// map（生成新数组）const upperCased= list.map(item=> item.toUpperCase());// ['ONE','TWO','THREE']// filter（筛选数据）const longWords= list.filter(item=> item.length> 3);// ['three']总结：根据具体需求（如是否需要索引、返回值、中断循环等）选择合适方法，平衡代码简洁性与性能。
如何用JavaScript循环提取数组对象中的值
在JavaScript中，循环提取数组对象中的值可以通过多种方式实现，具体方法取决于数据结构及需求。以下是几种常见场景的解决方案：
一、基础循环方法1. for...in循环适用于遍历对象属性，但需注意其会遍历原型链上的可枚举属性，建议配合hasOwnProperty使用。
const data= [{ id: 1, name:'A'},{ id: 2, name:'B'}];const ids= [];for(const key in data){ if(data.hasOwnProperty(key)){ ids.push(data[key].id);}}console.log(ids);// [1, 2]2. for...of循环直接遍历数组元素，语法更简洁，适合处理数组对象。
const data= [{ id: 1, name:'A'},{ id: 2, name:'B'}];const names= [];for(const item of data){ names.push(item.name);}console.log(names);// ['A','B']二、高阶函数方法1. map()方法通过回调函数提取每个元素的指定属性，返回新数组。
const data= [{ id: 1, name:'A'},{ id: 2, name:'B'}];const ids= data.map(item=> item.id);console.log(ids);// [1, 2]2. forEach()方法遍历数组并执行回调函数，适合需要副作用的场景（如修改外部变量）。
const data= [{ id: 1, name:'A'},{ id: 2, name:'B'}];const names= [];data.forEach(item=>{ names.push(item.name);});console.log(names);// ['A','B']三、嵌套结构处理若数组对象包含嵌套结构（如lists数组），需结合多层循环或高阶函数：示例数据结构
const arr= [{ lists: [{ count:'0', year:'2020'},{ count:'3', year:'2021'} ]},{ lists: [{ count:'2', year:'2022'},{ count:'1', year:'2023'} ]}];1.使用 for...in+嵌套循环
const allCounts= [];const allYears= [];for(const key in arr){ for(const subkey in arr[key].lists){ allCounts.push(arr[key].lists[subkey].count); allYears.push(arr[key].lists[subkey].year);}}console.log(allCounts);// ['0','3','2','1']console.log(allYears);// ['2020','2021','2022','2023']2.使用 flatMap()+ map()更简洁的实现方式：
const allCounts= arr.flatMap(item=> item.lists.map(subItem=> subItem.count));const allYears= arr.flatMap(item=> item.lists.map(subItem=> subItem.year));console.log(allCounts);// ['0','3','2','1']console.log(allYears);// ['2020','2021','2022','2023']四、方法选择建议简单遍历：优先使用 for...of或 forEach()，代码可读性高。需要返回新数组：使用 map()，功能明确且简洁。嵌套结构：结合 flatMap()和 map()可减少代码层级。性能敏感场景：传统 for循环通常性能最佳，但需手动管理索引。五、注意事项避免修改原数组：高阶函数（如 map()）通常返回新数组，若需修改原数组，需显式赋值。空值处理：遍历前检查数组是否存在（如 if(Array.isArray(data))），避免报错。稀疏数组：for...in可能跳过空位，而 for...of会正常处理。通过合理选择循环方法，可以高效提取数组对象中的值并适应不同数据结构需求。
好了，文章到此结束，希望可以帮助到大家。