JavaScript循环遍历你会用哪些之小结篇


Posted in Javascript onSeptember 28, 2018

总结JavaScript中的循环遍历

定义一个数组和对象

const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

for()

经常用来遍历数组元素

遍历值为数组元素索引

for (let i = 0; len = arr.length, i < len; i++) {
  console.log(i);      // 0 1 2 3 4 5
  console.log(arr[i]);   // a b c d e f
}

forEach()

用来遍历数组元素

第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身(可选)

没有返回值

arr.forEach((item, index) => {
  console.log(item);   // a b c d e f 
  console.log(index);  // 0 1 2 3 4 5
})

map()

用来遍历数组元素

第一个参数为数组元素,第二个参数为数组元素索引,第三个参数为数组本身(可选)

有返回值,返回一个新数组

every(),some(),filter(),reduce(),reduceRight()不再一一介绍,详细请看Js中Array方法有哪些?
let arrData = arr.map((item, index) => {
  console.log(item);   // a b c d e f 
  console.log(index);  // 0 1 2 3 4 5
  return item;
})
console.log(arrData);  // ["a", "b", "c", "d", "e", "f"]

for...in

可循环对象和数组,推荐用于循环对象

用于循环对象时

循环值为对象属性

for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key);      // a b c d 属性
    console.log(obj[key]);  // 1 2 3 4 属性值
  }
}

用于遍历数组时

值为数组索引

for (let index in arr) {
  console.log(index);     // 0 1 2 3 4 5 数组索引
  console.log(arr[index]);  // a b c d e f 数组值
}

当我们给数组添加一个属性name

arr.name = '我是自定义的属性'

for (let index in arr) {
  console.log(index);      // 0 1 2 3 4 5 name (会遍历出我们自定义的属性)
  console.log(arr[index]);  // a b c d e f 我是自定义属性name
}

for...of

可循环对象和数组,推荐用于遍历数组

用于遍历数组时

遍历值为数组元素

for (let value of arr) {
  console.log(value);    // a b c d e f 数组值
}

用于循环对象时

须配合Object.keys()一起使用,直接用于循环对象会报错,不推荐使用for...of循环对象

循环值为对象属性

for (let value of Object.keys(obj)) {
  console.log(value);  // a b c d 对象属性
}

总结

用于遍历数组元素使用:for(),forEach(),map(),for...of
用于循环对象属性使用:for...in

以上所述是小编给大家介绍的JavaScript循环遍历你会用哪些小结篇,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
一段效率很高的for循环语句使用方法
Aug 13 Javascript
jquery 新浪网易的评论块制作
Jul 01 Javascript
jQuery 源码分析笔记(6) jQuery.data
Jun 08 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
May 14 Javascript
jqGrid日期格式的判断示例代码(开始日期与结束日期)
Nov 08 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
JavaScript实现创建自定义对象的常用方式总结
Jul 09 Javascript
jQuery加PHP实现图片上传并提交的示例代码
Jul 16 jQuery
浅谈vue引用静态资源需要注意的事项
Sep 28 #Javascript
学习jQuery中的noConflict()用法
Sep 28 #jQuery
代码分析vue中如何配置less
Sep 28 #Javascript
使用JavaScript破解web
Sep 28 #Javascript
详解node字体压缩插件font-spider的用法
Sep 28 #Javascript
JS canvas绘制五子棋的棋盘
May 28 #Javascript
在vue中解决提示警告 for循环报错的方法
Sep 28 #Javascript
You might like
如何使用PHP中的字符串函数
2006/10/09 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
js ajaxfileupload.js上传报错的解决方法
2016/05/05 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
2016/07/04 Javascript
a标签跳转到指定div,jquery添加和移除class属性的实现方法
2016/10/10 Javascript
详解Node项目部署到云服务器上
2017/07/12 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
微信小程序用户登录和登录态维护的实现
2020/12/10 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python 数据结构之队列的实现
2017/01/22 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python-Tkinter Text输入内容在界面显示的实例
2019/07/12 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python加载自定义词典实例
2019/12/06 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
keras实现多种分类网络的方式
2020/06/11 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
澳大利亚厨房和家用电器购物网站:Bing Lee
2021/01/11 全球购物
应届生程序员求职信
2013/11/05 职场文书
毕业生的自我评价分享
2013/12/18 职场文书
房地产营销策划方案
2014/02/08 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
辅导员评语
2014/05/04 职场文书
代领毕业证委托书
2014/08/02 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
销售员岗位职责
2015/02/10 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
使用Redis实现秒杀功能的简单方法
2021/05/08 Redis
JavaScript圣杯布局与双飞翼布局实现案例详解
2022/08/05 Javascript