js遍历详解(forEach, map, for, for...in, for...of)

 更新时间:2019年08月28日 08:21:31   作者:寻易之客  
在本篇文章里小编给大家整理的是关于js中的各种遍历(forEach, map, for, for...in, for...of)相关知识点用法总结,需要的朋友们参考下。

forEach

es5出来的方法,这是我在react中用的最多的遍历方法之一,用法如下:

models.forEach(model => app.model(model));

dva里面经常这么写。

写法很简单,经常用于通过这个数组内的数据创造新的结构,但是forEach的问题在于它不能跳出循环。

map

也是用的最多的方法之一,用法如下

{data.map(d => (
     <div className="balance-row">
      <div className="balance-col currency">{d.currency.toUpperCase()}</div>
      <div className="balance-col balance">
       <div>
        <FormattedNumber value={d.balance} />
       </div>
       <div className="light-text lock">
        <i className="icon anticon icon-lock" /><FormattedNumber value={d.locked} />
       </div>
      </div>
     </div>
    ))}

react 里面经常这么写。

const value = [1, 22, 4, 5].map(d => d + 1);
value; // [2, 23, 5, 6]

用于改变一个数组内容,相当于改变了原数组

for ... in

for (let prop in obj) {
 if (obj.hasOwnProperty(prop)) {
  // 继续操作prop和obj
 }
}

for ... in也可以用于遍历数组,但是不推荐

for ... of

ES6中加了一个新的遍历方式,主要是用来弥补forEach 和 for...in的短板,它还可以遍历字符串、map对象、set对象、generator对象。

注意:它只能遍历带有iterable属性的对象,所以不能遍历对象,除非刻意给object加上一个iterable属性。
这个老厉害了!

Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
 
for (let [key, value] of iterable) {
 console.log(value);
}
// 1
// 2
// 3
 
for (let key of iterable) {
 console.log(key);
}
// [a, 1]
// [b, 2]
// [c, 3]

Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);
 
for (let value of iterable) {
 console.log(value);
}
// 1
// 2
// 3

Generator

function * fibonacci() { // a generator function
 let [prev, curr] = [0, 1];
 while (true) {
  [prev, curr] = [curr, prev + curr];
  yield curr;
 }
}
 
for (let n of fibonacci()) {
 console.log(n);
 // truncate the sequence at 1000
 if (n >= 1000) {
  break;
 }
}

以上就是本次介绍的全部知识点内容,感谢大家对脚本之家的支持。

相关文章

  • JavaScript在浏览器中的执行机制

    JavaScript在浏览器中的执行机制

    既然说到了JavaScript,那么就会绕不过去执行上下文,只有理解了执行上下文才能更好的理解JavaScript本身,不过本部分不是专门讲解 JavaScript的,主要从JavaScript的执行顺序开始介绍一下JavaScript是怎样运行的
    2023-09-09
  • p5.js绘制创意自画像

    p5.js绘制创意自画像

    这篇文章主要为大家详细介绍了p5.js绘制创意自画像,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • JS利用Intl解决前端日期和时间的格式化详解

    JS利用Intl解决前端日期和时间的格式化详解

    Intl 是一个全局对象,它的主要用途就是展示国际化信息,可以将字符串,数字和日期和时间转换为指定地区的格式。这篇文章就来和大家聊聊如何利用Intl解决前端日期和时间的格式化吧
    2023-03-03
  • 微信{

    微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_

    这篇文章主要介绍了微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"},非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • javascript常用代码段搜集

    javascript常用代码段搜集

    这篇文章主要记录了本人搜集的几段javascript常用代码段,都是平时项目中需要用到的,需要的朋友可以参考下
    2014-12-12
  • bootstrap轮播图示例代码分享

    bootstrap轮播图示例代码分享

    这篇文章主要为大家详细介绍了bootstrap轮播图示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 基于JavaScript开发一个有趣的分组抽签小程序

    基于JavaScript开发一个有趣的分组抽签小程序

    在团队合作开发中,经常需要将团队成员分组,来完成各自的任务,而抽签的方式自然是最公平、最简单的方法之一,所以本文就来开发一个有趣的分组抽签小程序吧
    2023-05-05
  • JS实现获取GIF总帧数的方法详解

    JS实现获取GIF总帧数的方法详解

    如何通过js在上传前就拿到它的总帧数来判断呢?本文就跟大家分享一种解决方案,并将其封装成插件发布至npm仓库,快跟随小编一起学习一下吧
    2022-05-05
  • uniapp微信小程序多环境配置以及使用教程

    uniapp微信小程序多环境配置以及使用教程

    前后端分离开发模式中,无论前后端都有可能区分不同的环境配置,下面这篇文章主要给大家介绍了关于uniapp微信小程序多环境配置以及使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Javascript 详解封装from表单数据为json串进行ajax提交

    Javascript 详解封装from表单数据为json串进行ajax提交

    这篇文章主要介绍了Javascript 详解封装from表单数据为json串进行ajax提交的相关资料,需要的朋友可以参考下
    2017-03-03

最新评论