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


Posted in Javascript onAugust 28, 2019

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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
javascript实现完美拖拽效果
May 06 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vue如何通过id从列表页跳转到对应的详情页
May 01 Javascript
AngularJS实现的自定义过滤器简单示例
Feb 02 Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
JavaScript Dom实现轮播图原理和实例
Feb 19 Javascript
Angular6使用forRoot() 注册单一实例服务问题
Aug 27 #Javascript
jQuery - AJAX load() 实例用法详解
Aug 27 #jQuery
JS实现提示框跟随鼠标移动
Aug 27 #Javascript
js对象数组和对象的使用实例详解
Aug 27 #Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 #Javascript
vue项目中引入Sass实例方法
Aug 27 #Javascript
package.json配置文件构成详解
Aug 27 #Javascript
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
JS中confirm,alert,prompt函数使用区别分析
2010/04/01 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
详解js树形控件—zTree使用总结
2016/12/28 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
ES5学习教程之Array对象
2017/04/01 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
微信小程序实现tab页面切换功能
2018/07/13 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
实现python版本的按任意键继续/退出
2016/09/26 Python
python 日期操作类代码
2018/05/05 Python
Python可视化工具如何实现动态图表
2020/10/23 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
Python 多进程原理及实现
2020/12/21 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
印度在线购物网站:Paytmmall
2019/07/24 全球购物
中间件分为哪几类
2012/03/14 面试题
骨干教师培训感言
2014/01/16 职场文书
学校党风廉政建设调研报告
2015/01/01 职场文书
索赔员岗位职责
2015/02/15 职场文书
golang 比较浮点数的大小方式
2021/05/02 Golang
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android
vue使用element-ui按需引入
2022/05/20 Vue.js