遍历数组和里面的对象

 以下是常用的几种

for循环遍历
//可以使用临时变量,将长度缓存起来,避免重复获取数组长度,当数组较大时优化效果才会比较明显。
const array = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
for (let i = 0; i < array.length; i++) {
  console.log(array[i].name, array[i].age);
}
————————————————
forEach()遍历
//这种方法只是使处理需要循环的数组变得更加容易
//因为你不必像通常那样写出笨重而长的for循环语句
//forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数
//没有返回值,原数组不变。forEach() 对于空数组是不会执行回调函数的。
//注意和map方法区分。
const array = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
array.forEach(item => {
  console.log(item.name, item.age);
});
—————————————————
for of 遍历
const array = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
for (const item of array) {
  console.log(item.name, item.age);
}
—————————————————
map()遍历
//map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值,并没有改变原来的数组。
//map() 方法按照原始数组元素顺序依次处理元素。
//注意:map() 不会对空数组进行检测。
const array = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 25 },
  { name: 'Charlie', age: 30 }
];
array.map(item => {
  console.log(item.name, item.age);
});

for、map、forEach的使用选择

  • 在固定长度或者长度不需要计算的时候for循环效率高于foreach和map,for循环中可以通过break终止。
  • 在不确定长度或者计算长度有损性能的时候用foreach和map比较方便

forEach、map的区别
相同点

  • 都是循环遍历数组中的每一项
  • forEach和map方法里每次执行匿名函数都支持3个参数,参数分别是item(当前每一项),index(索引值),arr(原数组)
  • 匿名函数中的this都是指向window
  • 只能遍历数组
  • 都不会改变原数组

不同点:

  • map方法返回一个新的数组,数组中的元素为原始数组调用函数处理后的值
  • forEach方法不会返回新数组

 

性能:

  •   for > forEach > map
  •   for 循环当然是最简单的,因为它没有任何额外的函数调用栈和上下文
  •   forEach 其次,因为它其实比我们想象得要复杂一些。它不是普通的 for 循环的语法糖,还有诸多参数和上下文需要在执行的时候考虑进来,这里可能拖慢性能;
  •   map 最慢,因为它的返回值是一个等长的全新的数组,数组创建和赋值产生的性能开销很大。

相关推荐

  1. 里面对象

    2023-12-18 09:40:02       41 阅读
  2. uniapp对象常见方法

    2023-12-18 09:40:02       13 阅读
  3. 2023-12-18 09:40:02       36 阅读
  4. js中,map方法reduce方法有什么区别?

    2023-12-18 09:40:02       17 阅读
  5. Linux Shell,或文件几种不同写法

    2023-12-18 09:40:02       13 阅读
  6. Flutter循环获取索引值

    2023-12-18 09:40:02       43 阅读
  7. vue v-for 同时两个

    2023-12-18 09:40:02       17 阅读

最近更新

  1. TCP协议是安全的吗?

    2023-12-18 09:40:02       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2023-12-18 09:40:02       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2023-12-18 09:40:02       18 阅读
  4. 通过文章id递归查询所有评论(xml)

    2023-12-18 09:40:02       20 阅读

热门阅读

  1. POJ 1769 Minimizing maximizer 动态规划 + 线段树

    2023-12-18 09:40:02       39 阅读
  2. 鸿蒙开发之用户隐私权限申请

    2023-12-18 09:40:02       36 阅读
  3. AcWing802. 区间和思路

    2023-12-18 09:40:02       41 阅读
  4. ES6之对象新增的方法

    2023-12-18 09:40:02       39 阅读
  5. IDEA中如何使用Vue

    2023-12-18 09:40:02       39 阅读
  6. 全志V3s之NFS连接ubuntu22.04

    2023-12-18 09:40:02       42 阅读