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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
javascript实现数字倒计时特效
Mar 30 Javascript
js仿QQ中对联系人向左滑动、滑出删除按钮的操作
Apr 07 Javascript
响应式表格之固定表头的简单实现
Aug 26 Javascript
PHP抓取HTTPS内容和错误处理的方法
Sep 30 Javascript
jsp 自动编译机制详细介绍
Dec 01 Javascript
javascript 正则表达式分组、断言详解
Apr 20 Javascript
vue如何判断dom的class
Apr 26 Javascript
微信小程序 image组件遇到的问题
May 28 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中的正则表达式
2014/08/17 PHP
深入理解PHP变量的值类型和引用类型
2015/10/21 PHP
PHP图像处理 imagestring添加图片水印与文字水印操作示例
2020/02/06 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
JSON.parse 解析字符串出错的解决方法
2010/07/08 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
JavaScript中的原型链prototype介绍
2014/12/30 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
jQuery中的100个技巧汇总
2016/12/15 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
浅谈小程序 setData学问多
2019/02/20 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python列表生成式与生成器操作示例
2018/08/01 Python
pycharm安装和首次使用教程
2018/08/27 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
将python依赖包打包成window下可执行文件bat方式
2019/12/26 Python
Django中modelform组件实例用法总结
2020/02/10 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
prAna官网:瑜伽、旅行和冒险服装
2019/03/10 全球购物
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
如何撰写岗位职责
2014/02/01 职场文书
班子查摆四风个人对照检查材料思想汇报
2014/10/04 职场文书
铁路安全反思材料
2014/12/24 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书