彻底搞懂这 5 种 for 循环

更新日期: 2022-04-12阅读: 1.2k标签: 循环

for 循环在平时开发中使用频率最高的,前后端数据交互时,常见的数据类型就是数组和对象,处理对象和数组时经常使用到 for 遍历,因此下班前花费几分钟彻底搞懂这 5 种 for 循环。它们分别为:

  • for
  • for ... in
  • for ... of
  • for await .. of
  • forEach
  • map

一、各个 for 介绍

1、for

for 循环是出现最早,也是应用最普遍的一个遍历,能够满足绝大多数的遍历。可以遍历 数组、对象、字符串,示例:

// 遍历数组
var arr = [1, 2, 3]
for (var i = 0; i < arr.length; i++){
  console.log(arr[i]);
}
//遍历对象
var obj = {
  job: 'web worker',
  name:'前端代码女神'
}
for (var i = 0,keys = Object.keys(obj); i< keys.length; i++){
  console.log(obj[keys[i]])
}

//遍历字符串
let str = 'abc'
for (var i = 0; i < str.length; i++){
  console.log(str[i])
}

2、for ... in

for ... in 是在 ES5 中新增的,以任意顺序迭代一个对象的除Symbol以外的可枚举属性,包括继承的可枚举属性。

// 遍历数组
var arr = [1, 2, 3]
for (var i in arr ){
  console.log(i);//0 1 2
  console.log(arr[i]);//1 2 3
}
//遍历对象
var obj = {
  job: 'web worker',
  name:'前端代码女神'
}
for (var key in obj){
  console.log(key)// job name
  console.log(obj[key])// web worker  前端代码女神
}
//遍历字符串
let str = 'abc'
for (var i in str){
  console.log(i) // 0 1 2
  console.log(str[i]) // a b c
}

3、for ... of

for ... of 语句在可迭代对象(包括 Array、Map、Set、String、TypedArray、arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。

// 迭代 Array
var arr = [1, 2, 3]
for (var val of arr ){
  console.log(val);// 1 2 3
}
//迭代 String
let str = 'abc'
for (var val of str){
  console.log(val) // a b c
}
// 迭代 TypedArray - 一个类型化数组,描述了一个底层的二进制数据缓冲区!
let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);//0 255
}
// 迭代 Map - 对象保存键值对,能够记住键的原始插入顺序
let map = new Map([['a',1],['b',2]])
for (let key of map) {
  console.log('key',key)//['a',1] ['b',2] 
}
for (let [key,value] of map) {
  console.log(key) // a b
  console.log(value) // 1 2
}
// 迭代 Set
let set = new Set([1,2,3,2,1])
for (let val of set) {
  console.log(val)// 1 2 3
}

4、for await...of

创建一个循环,该循环遍历异步可迭代对象以及同步可迭代对象,包括内置的 String、Array,类数组对象(arguments 或 nodeList),TypedArray, Map, Set 和用户定义的异步/同步迭代器。它使用对象的每个不同属性的值调用要执行的语句来调用自定义迭代钩子。

类似于 await 运算符一样,该语句只能在一个async function 内部使用。

async function* asyncGenerator() {
  var i = 0;
  while (i < 3) {
    yield i++;
  }
}
(async function () {
  for await (num of asyncGenerator()) {
    console.log(num);// 0 1 2
  }
})();

5、forEach

forEach 是ES5版本发布的,按升序为数组中含有效值的每一项执行一次回调函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上),一般认为是 普通for循环 的加强版。

// 遍历数组
var arr = [1, 2, 3]
arr.forEach((item, index) => {
  console.log(index);//0 1 2
  console.log(item);// 1 2 3
})
//遍历对象
var obj = {
  job: 'web worker',
  name:'前端代码女神'
}
var keys = Object.keys(obj)
keys.forEach((key) => {
  console.log(key)// job name
  console.log(obj[key])// web worker  前端代码女神
})

6、map

遍历时可以返回一个新数组,新数组的结果是原数组中每个元素都调用一次提供的函数后返回的值。

// 遍历数组
var arr = [1, 2, 3]
let newArr = arr.map((item) => item * 2)
console.log(newArr);//[2,4,6]

二、多个 for 之间区别

1、使用场景差异

for循环是最早最原始的循环遍历语句,for 内部定义一个变量,按照条件进行循环遍历,通常是数组的长度,当超过长度时就停止循环,一般遍历的都是数组或类数组。遍历对象时,由于对象没有长度,所以使用 Object.keys() 获取对象的所有属性,以数组形式返回。

for / in主要是用来遍历对象上的可枚举属性,包括原型对象上的属性,按任意顺序进行遍历,遍历对象时获取到的是属性的键值,遍历的是数组,数组的下标当做键值。

for / of用于遍历可迭代对象的数据,包括 Array、Map、Set、String、TypedArray、arguments 对象等等。

for await...of用于遍历异步可迭代对象,该语句只能在一个async function 内部使用。

orEach 是 for 的加升级版,使用更简单,携带参数更多,但本质还是数组的循环,每个元素都执行一次回调,不会改变原数组。

map是给原数组每个元素都执行一次回调,返回一个新数组,不会改变原数组。

2、功能差异

forEach、map 不支持跳出循环,其他不支持。

for await ... of 能够支持异步操作,其他的不支持。

对于纯对象的遍历, for ... in 枚举更方便。

对于数组遍历,如果不需要索引,可以直接使用 for...of 获取值,还可支持 break 或 return ;如果还需要索引,使用 forEach 更适合,但不支持 return。

如果是一个数组映射成另一个数组,使用 map 最合适。

3、性能差异

在测试环境、测试数据条件一致的情况下,性能排序为:

for > for of > forEach > map > for in。

for 因为没有额外的函数调用和上下文,所以性能是最快的。

for ... of 具有 iterator 接口的数据结构,可以使用它来迭代成员,直接读取键值。

forEach 是 for 的语法糖,还有许多的参数和上下文,因此会慢一些。

map 因为它返回的是一个等长的全新数组,数组创建和赋值产生的性能开销较大。

for...in 性能最差,因为需要列举对象的所有属性,有转化过程,开销比较大。

三、for 的使用

在项目开发中,我们应该根据实际需求,去选择一个合适的 for 遍历。以下是一些使用建议:

  1. 如果需要把数据映射成另外一个数组,如变成对应布尔值,推荐使用 map ,不会修改原数组,使用语法简单。
  2. 数组遍历时,可以使用 for 、forEach 或 for...of。
  3. 遍历的是纯对象时,推荐使用 for ... in 。
  4. 如果是需要对迭代器遍历,推荐使用 for ... of。
  5. 如果是在数组中筛选符合条件的数组,使用 fillter 。
原文来自:https://www.toutiao.com/article/7084114231976657408/

链接: https://fly63.com/article/detial/11333

跳出 forEach

使用for...in遍历对象时,会遍历原型链上的可枚举属性,这可能会导致一些意想不到的问题。所以你一定收到过这样的建议,使用数组的forEach来代替for...in循环。本文给大家总结了5种在forEach中跳出循环的变通之法

JavaScript循环下的async/await

在进行业务开发的过程中,使用了数组的高级函数map,同时使用了ES6语法async/await,发现在map循环下任务是异步执行的,并不符合预期。Array的循环方法map、forEach、filter、reduce、some、every等是并行迭代,可以理解为async/await的效果是无效的

如何中断forEach循环

在使用for循环的时候可以使用break 或者return语句来结束for循环(return直接结束函数),但是如果使用forEach循环如何跳出循环呢?首先尝试一使用return语句----木有效果

用于JavaScript中的循环和同时循环

如果您需要重复大量的代码数百次,这会变得非常笨拙。而且,它也不是很有用。例如,如果希望它重复X次呢?这就是循环的用武之地。次数通常由变量决定,但也可以由实际数字决定。

Js中循环执行

循环:就是一遍又一遍执行相同或者相似的代码,循环的两个要素:循环体:重复执行的代码;循环条件:控制循环的次数

为啥要放弃for循环?

创建一个新的数组,新的数组中的元素是通过检查指定数组中符合条件的元素;注意:1. filter()不会对空数组进行检测;2. filter()不会改变源是数组;

解决使用Vue-Router出现无限循环问题

我在项目里面用到了的是全局守卫,beforeEach,方便管理 不过遇到了一个问题,就是在beforeEach()中设置好判断条件后出现了无限循环的问题 当时的代码如下:

Node.js事件循环

对于本文中一些知识点任然有些模糊,懵懵懂懂,一直都在学习中,通过学习事件循环也看了一些文献,在其中看到了这一句话:除了你的代码,一切都是同步的,我觉得很有道理,对于理解事件循环很有帮助。

关于for循环中使用setTimeout的四种解决方案

我们先来简单了解一下setTimeout延时器的运行机制。setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数。本质上是作用域的问题

Js循环的几种方法

for 常用于循环数组 ,for in 常用来循环对象,不建议循环数组,因为i是字符串 可能会有隐患问题,for in 循环会找到 prototype 上去,所以最好在循环体内加一个判断

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!