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

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

赞 (0)

相关推荐

  • JavaScript遍历DOM元素的常见方式示例

    JavaScript遍历DOM元素的常见方式示例

    本文实例讲述了JavaScript遍历DOM元素的常见方式.分享给大家供大家参考,具体如下: 对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致. DOM中为元素新增了下面几个属性: childElementCount:返回子元素(不包括文本节点和注释)的数量: firstElementChild:firstChild的元素版: lastElementChild:lastChild的元素

  • JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】

    JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】

    本文实例讲述了JavaScript数据结构与算法之二叉树遍历算法.分享给大家供大家参考,具体如下: javascript数据结构与算法--二叉树遍历(先序) 先序遍历先访问根节点, 然后以同样方式访问左子树和右子树 代码如下: /* *二叉树中,相对较小的值保存在左节点上,较大的值保存在右节点中 * * * */ /*用来生成一个节点*/ function Node(data, left, right) { this.data = data;//节点存储的数据 this.left = left;

  • js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

    本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是可以自己通过数组的索引来修改原来的数组: va

  • 原生JS forEach()和map()遍历的区别、兼容写法及jQuery $.each、$.map遍历操作

    本文实例讲述了原生JS forEach()和map()遍历的区别.兼容写法及jQuery $.each.$.map遍历操作.分享给大家供大家参考,具体如下: 一.原生JS forEach()和map()遍历 共同点: ①.都是循环遍历数组中的每一项. ②.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input. ③.匿名函数中的this都是指Window. ④.只能遍历数组. 1.forEach() 没有返回值

  • 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 classNa

  • Vue.js用法详解

    Vue.js用法详解

    vue.js 教程 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue 学习起来非常简单,本教程基于 Vue 2.1.8 版本测试. 前  言 前段时间为了一个数据查询的项目自学了Vue,感觉这款框架还是很不错的,今天就整理整理这个框架如何使用,希望对正在学这个框架的小伙伴有所帮助~ 首先,我们先来了解一下Vue: V

  • Node.js API详解之 querystring用法实例分析

    本文实例讲述了Node.js API详解之 querystring用法.分享给大家供大家参考,具体如下: Node.js API详解之 querystring querystring模块提供了一些实用函数,用于解析与格式换URL查询字符串 通过 const querystring = require('querystring'); 的方式引用querystrings模块 目录: querystring.escape(str) querystring.unescape(str) querystri

  • Node.js API详解之 vm模块用法实例分析

    本文实例讲述了Node.js API详解之 vm模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 vm vm 模块提供了一系列 API 用于在 V8 虚拟机环境中编译和运行代码. JavaScript 代码可以被编译并立即运行,或编译.保存然后再运行. 常见的用法是在沙盒中运行代码.沙盒代码使用不同的V8上下文. const vm = require('vm'); const x = 1; const sandbox = { x: 2 }; vm.createContex

  • Node.js API详解之 assert模块用法实例分析

    本文实例讲述了Node.js API详解之 assert模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 assert assert 模块提供了断言测试的函数,用于测试不变式. 断言是编程术语,表示为一些布尔表达式,程序员相信在程序中的某个特定点该表达式值为真, 可以在任何时候启用和禁用断言验证,因此可以在测试时启用断言而在部署时禁用断言. 同样,程序投入运行后,最终用户在遇到问题时可以重新启用断言. 使用断言可以创建更稳定.品质更好且不易于出错的代码. 当需要在一个值为

  • Node.js API详解之 repl模块用法实例分析

    本文实例讲述了Node.js API详解之 repl模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 repl repl(交互式解释器) 模块提供了一种"读取-求值-输出"循环(REPL)的实现,它可作为一个独立的程序或嵌入到其他应用中. 可以通过以下方式使用它: const repl = require('repl'); Node.js 自身也使用 repl 模块为执行 JavaScript 代码提供交互接口. 可以通过不带任何参数(或使用 -i 参数)地执行

  • Node.js API详解之 dns模块用法实例分析

    本文实例讲述了Node.js API详解之 dns模块用法.分享给大家供大家参考,具体如下: Node.js API详解之 dns dns (域名服务器)模块包含两类函数: 第一类函数,使用底层操作系统工具进行域名解析,且无需进行网络通信. 这类函数只有一个:dns.lookup(). 例子,查找 baidu.com: const dns = require('dns'); dns.lookup('www.baidu.com', (err, address, family) => { conso

  • 详解Golang Map中的key为什么是无序的

    详解Golang Map中的key为什么是无序的

    目录 一.为什么是无序的? 二.GO 为什么要这么做? 三.遍历是否真的无序的 1.第一次遍历 2.第二次遍历 四.如何才能得到有序的键值对 总结 一.为什么是无序的? 开门见山,先上源码 func mapiterinit(t *maptype, h *hmap, it *hiter) { // decide where to start r := uintptr(fastrand()) if h.B > 31-bucketCntBits { r += uintptr(fastrand()) <

  • Jquery揭秘系列:ajax原生js实现详解(推荐)

    讲到ajax这个东西,我们要知道两个对象XMLHTTPRequest和ActiveXObject ,提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力.可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容.XMLHTTPRequest基本上算是标准化了,兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西,所以是为了兼容IE版本,我们用的只是它的xmlHTTP功能. 为了功能的明确和清晰,我们

  • 详解Python map函数及Python map()函数的用法

    详解Python map函数及Python map()函数的用法

    python map函数 map()函数 map()是 Python 内置的高阶函数,它接收一个函数 f 和一个 list,并通过把函数 f 依次作用在 list 的每个元素上,得到一个新的 list 并返回. 例如,对于list [1, 2, 3, 4, 5, 6, 7, 8, 9] 如果希望把list的每个元素都作平方,就可以用map()函数: 因此,我们只需要传入函数f(x)=x*x,就可以利用map()函数完成这个计算: def f(x): return x*x print map(f,

随机推荐