脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js中的各种遍历(forEach, map, for, for...in, for...of)

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;
 }
}

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

您可能感兴趣的文章:

相关文章

  • 第六篇Bootstrap表格样式介绍

    第六篇Bootstrap表格样式介绍

    这篇文章主要介绍了第六篇Bootstrap表格样式介绍的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • 纯js实现仿QQ邮箱弹出确认框

    纯js实现仿QQ邮箱弹出确认框

    仿QQ邮箱的弹出层，弹出确认框，主要是用火狐的firebug把html和css扣了下来，没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗，嘿嘿！
    2015-04-04
  • 一些技巧性实用js代码小结

    一些技巧性实用js代码小结

    实现页面最大化 默认img图片 屏蔽鼠标右键 取消选取防止复制等实现代码。
    2009-10-10
  • Javascript 遍历对象中的子对象

    Javascript 遍历对象中的子对象

    昨天同事问我一个问题：“有一个JSON对象，其中有若干个子对象，如何遍历这个对象中的子对象？”
    2009-07-07
  • JS从数组中随机取出几个数组元素的方法

    JS从数组中随机取出几个数组元素的方法

    JS如何从一个数组中随机取出一个元素或者几个元素呢？其实方法很简单，下面小编给大家分享了JS随机取出几个数组元素的方法，非常不错，需要的朋友参考下
    2016-08-08
  • JS解析url查询参数的简单代码

    JS解析url查询参数的简单代码

    本文通过简单代码给大家介绍了js解析url查询参数的方法，然后在文章下面给大家介绍了js获取url参数值的两种方式 ，非常不错，具有参考借鉴价值，需要的朋友参考下吧
    2017-08-08
  • JS原型与继承操作示例

    JS原型与继承操作示例

    这篇文章主要介绍了JS原型与继承操作,涉及javascript面向对象程序设计中原形与继承的相关定义、实例化操作技巧,需要的朋友可以参考下
    2019-05-05
  • 事件模型在各浏览器中存在差异

    事件模型在各浏览器中存在差异

    根据 W3C DOM 2 Events 描述，EventTarget 接口被所有支持 DOM 事件模型的节点（Node）实现。 该接口提供addEventListener 和removeEventListener方法，用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。
    2010-10-10
  • JS实现滑动条案例

    JS实现滑动条案例

    这篇文章主要为大家详细介绍了JS实现滑动条案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JavaScript制作简易计算器（不用eval）

    JavaScript制作简易计算器（不用eval）

    这篇文章主要为大家详细介绍了JavaScript制作简易计算器的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02

最新评论