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 相关文章推荐
jquery实现人性化的有选择性禁用鼠标右键
Jun 30 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
jQuery实现简单的间隔向上滚动效果
Mar 09 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
Jul 21 Javascript
BootStrap整体框架之基础布局组件
Dec 15 Javascript
Vue-Router进阶之滚动行为详解
Sep 13 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
May 08 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
vue请求本地自己编写的json文件的方法
Apr 25 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 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
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
基于PHP选项与信息函数的使用详解
2013/05/10 PHP
必须收藏的php实用代码片段
2016/02/02 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
图片自动更新(说明)
2006/10/02 Javascript
用jquery方法操作radio使其默认选项是否
2013/09/10 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
js实现精美的图片跟随鼠标效果实例
2015/05/16 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
Node.js五大应用性能技巧小结(必须收藏)
2017/08/09 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
Python itertools模块详解
2015/05/09 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python随机生成库faker库api实例详解
2019/11/28 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
python中adb有什么功能
2020/06/07 Python
python 利用zmail库发送邮件
2020/09/11 Python
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
高中物理教学反思
2014/02/08 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
2014年大学生就业规划书
2014/04/04 职场文书
中职生自荐信范文
2014/06/15 职场文书
文明社区申报材料
2014/08/21 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
领导批评与自我批评范文
2014/10/16 职场文书
集结号观后感
2015/06/08 职场文书
恋恋笔记本观后感
2015/06/16 职场文书