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

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

相关文章

  • form.submit()不能提交表单的原因分析

    form.submit()不能提交表单的原因分析

    这篇文章主要分析了form.submit()不能提交表单的原因,需要的朋友可以参考下
    2014-10-10
  • 学习JavaScript设计模式之中介者模式

    学习JavaScript设计模式之中介者模式

    这篇文章主要为大家介绍了JavaScript设计模式中的中介者模式,对JavaScript设计模式感兴趣的小伙伴们可以参考一下
    2016-01-01
  • javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    javascript事件捕获机制【深入分析IE和DOM中的事件模型】

    这篇文章主要介绍了javascript事件捕获机制,结合实例形式分析了冒泡的原理、事件捕获、各浏览器事件处理机制与IE和DOM中的事件模型等,需要的朋友可以参考下
    2016-12-12
  • iframe调用父页面函数示例详解

    iframe调用父页面函数示例详解

    这篇文章主要介绍了iframe如何调用父页面函数,下面有个不错的示例,大家可以参考下
    2014-07-07
  • js实现同一个页面多个渐变效果的方法

    js实现同一个页面多个渐变效果的方法

    这篇文章主要介绍了js实现同一个页面多个渐变效果的方法,涉及javascript操作渐变效果的实现技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 学习JSON.stringify的9大特性和转换规则

    学习JSON.stringify的9大特性和转换规则

    本文介绍JSON.stringify9大特性和转换规则,JSON.stringify()方法将一个JavaScript对象或值转换为 JSON 字符串,如果指定了一个replacer 函数,则可以选择性地替换值,或者指定的replacer是数组,则可选择性地仅包含数组指定的属性,更多内容需要的小火煸可以参考下面温行内容
    2022-02-02
  • 跨域资源共享 CORS 详解

    跨域资源共享 CORS 详解

    所有浏览器都支持该功能IE浏览器不能低于IE10.整个CORS通信过程都是浏览器自动完成不需要用户参与。对于开发者来说CORS通信与同源的AJAX通信没有差别代码完全一样浏览器一旦发现AJAX请求跨源就会自动添加一些附加的头信息有时还会多出一次附加的请求,但用户不会有感觉。
    2016-04-04
  • 一文详解JavaScript中生成器函数的妙用

    一文详解JavaScript中生成器函数的妙用

    生成器函数在JavaScript中是一种可以自定义迭代器行为的强大特性,它允许暂停函数的执行,保持函数内部状态,以便在必要时候可以恢复执行,下面我们就来看看它有什么妙用吧
    2023-12-12
  • webpack配置之后端渲染详解

    webpack配置之后端渲染详解

    本篇文章主要介绍了webpack配置之后端渲染详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • JS命令模式例子之菜单程序

    JS命令模式例子之菜单程序

    这篇文章主要为大家详细介绍了JS命令模式例子之菜单程序,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-10-10

最新评论