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解析XML的方法
Sep 05 Javascript
JavaScript实现更改网页背景与字体颜色的方法
Feb 02 Javascript
Javascript中的call()方法介绍
Mar 15 Javascript
js实现文字滚动效果
Mar 03 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue加载完成后的回调函数方法
Sep 07 Javascript
Vue使用Proxy监听所有接口状态的方法实现
Jun 07 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
javascript实现贪吃蛇小游戏
Jul 28 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 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
德劲1103二次变频版的打磨
2021/03/02 无线电
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Laravel框架模板加载,分配变量及简单路由功能示例
2018/06/11 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
js鼠标左右键 键盘值小结
2010/06/11 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
2012/02/23 Javascript
jQuery学习笔记之toArray()
2014/06/09 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
2014/10/17 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
浅谈使用MVC模式进行JavaScript程序开发
2015/11/10 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
Javascript的表单验证-揭开正则表达式的面纱
2016/03/18 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python数据结构之单链表详解
2017/09/12 Python
pyQt4实现俄罗斯方块游戏
2018/06/26 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
深入了解python列表(LIST)
2020/06/08 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
财务与信息服务专业推荐信
2013/11/28 职场文书
入党自我评价优缺点
2014/01/25 职场文书
《花瓣飘香》教学反思
2014/04/15 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
2015年计划生育责任书
2015/05/08 职场文书
演讲开场白和结束语
2015/05/29 职场文书
父母教会我观后感
2015/06/17 职场文书
go mod 安装依赖 unkown revision问题的解决方案
2021/05/06 Golang