js数组遍历方法总结与对比

本文详细讲解了JavaScript中for、while的传统遍历方式,以及ES6引入的for...of和for...in,重点介绍了forEach、map、filter、some和every等数组实例方法,以及在实际项目中的应用场景和优劣分析。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

目录

总结

一、常规方法

for的4种写法

while

二、ES6方法

for...of,得到每项元素

for...in,得到的是数组索引

三、数组实例上的遍历方法

forEach(),得到每一项元素

map()

filter(),筛选一个数组

some(),数组某项满足条件

every (),数组每项都满足条件


总结

  • 不需要保留原数组,不需要中断循环,使用forEach代替常规for
  • 需要保留原数组并使用逻辑处理后的新数组时用map
  • 遍历对象时,使用for..of+Object.keys(),尽量不使用for..in
  • 根据业务场景选择使用filter、some、every等

一、常规方法

for的4种写法

let tmp_array = [1,2,3,4,5,6,7]
// 方法一 数组长度是会动态变化,每次循环会重新计算length长度,可能会出现死循环
for (let i = 0; i < tmp_array.length; i++) {
  console.log(tmp_array[i])
}
// 方法二 缓存length 值,无需重新计算length
for (let i = 0, len = tmp_array.length; i < len; i++) {
  console.log(tmp_array[i])
}
// 方法三 倒序
for (let i = tmp_array.length-1; i >= 0; i--){
  console.log(tmp_array[i])
}
//倒序简洁版本
//两个分号之间的表达式为 true 会一直执行,直到判断为 false (i = 0)
for (let i = tmp_array.length-1; i--;){
     arr1.push(arr[i])
}
// 方法四
for (let i = 0, tmp; tmp = tmp_array[i]; i++) {
  console.log(tmp)
}

4种写法在时间和内存消耗是上无大差别,常用方法一、二。

while

时间和内存消耗与常规for无区别,数组遍历较少使用。

二、ES6方法

for...of,得到每项元素

let array = [1,2,3,4,5,6,7];
for(let ele of array) {
  console.log(ele);
};

//字符串也可以使用for...of遍历
let str = "helloabc";
for(let ele of str) {
  console.log(ele);
}

//对象不可以使用
let table = {
  a : 10,
  b : true,
  c : "jadeshu"
};

for(let item of table) {
  console.log(item); //table is not iterable
}
  • 可以遍历任何可迭代对象,如数组、字符串、Map、Set、DOM collection等,
  • 可以使用 break,continue和return 终止循环 ,
  • 内存占用少。

对象使用for...of

//通过Object.keys遍历
for (let key of Object.keys(table)) {
  console.log(key + ": " + table[key]);
}

for...in,得到的是数组索引

var array = [1,2,3,4,5,6,7];
for(let index in array) {
  console.log(index,array[index]);
};

//也可以对enumerable对象操作!得到的是每项的索引key
var table = {
  a : 10,
  b : true,
  c : "jadeshu"
};
for(let index in table) {
  console.log(index, table[index]);
}

一般用于遍历对象,会将本身属性和原型链上的属性(除系统内置属性)全部遍历出来即便是不可枚举属性(enumerable:false), 可以通过 items.hasOwnProperty来遍历本身属性,由于查询到自己的原型链上,所以性能方面比较差 ,占用内存高。

三、数组实例上的遍历方法

forEach(),得到每一项元素

不会返回新的数组,常用于遍历数组,不能中断循环(使用break或return语句)。

我在工作中需要遍历对象数组并在某条件满足时改变每项值时使用,写法更优雅。

var array = [1,2,3,4,5,6,7];

array.forEach(item => {
  console.log(item);
});

map()

返回一个新数组,不能中断循环

由于有返回值,无需额外调用新数组的push方法,所以在执行浅拷贝任务上,内存占用很低

常用于需要对原数组进行逻辑处理并根据处理逻辑获取一个新数组。

let array = [1,2,3,4,5,6,7]
let copyArr = array.map(function(value){
   return value+10
})
console.log(copyArr)

filter(),筛选一个数组

返回一个新数组,不改变原数组,不对空数组检测

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); 
});
r; // ['A', 'B', 'C']

some(),数组某项满足条件

返回true/false,不改变原数组,不对空数组检测

var arr = ['', 'pear', 'orange'];
let tmp = arr.some(function (s) {
    return s.length > 0;
})
console.log(tmp); // true, 因为有个元素满足s.length>0

every (),数组每项都满足条件

返回true/false,不改变原数组,不对空数组检测

var arr = ['Apple', 'pear', 'orange'];
let tmp = arr.every(function (s) {
    return s.length > 0;
})
console.log(tmp); // true, 因为每个元素都满足s.length>0

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值