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 相关文章推荐
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
js中方法重载如何实现?以及函数的参数问题
Aug 01 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
详解JSON Web Token 入门教程
Jul 30 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
Centos7 安装Node.js10以上版本的方法步骤
Oct 15 Javascript
原生js+ajax分页组件
Jan 30 Javascript
js实现QQ邮箱邮件拖拽删除功能
Aug 27 Javascript
浅谈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 字符串函数收集
2010/03/29 PHP
PHP高自定义性安全验证码代码
2011/11/27 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP中include/require/include_once/require_once使用心得
2016/08/28 PHP
PHP中的密码加密的解决方案总结
2016/10/26 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
ExtJS4给Combobox设置列表中的默认值示例
2014/05/02 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
jQuery Validation Plugin验证插件手动验证
2016/01/26 Javascript
javascript每日必学之循环
2016/02/19 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
2016/11/12 Javascript
详解js中==与===的区别
2017/01/08 Javascript
jQuery.cookie.js实现记录最近浏览过的商品功能示例
2017/01/23 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
微信小程序网络请求的封装与填坑之路
2017/04/01 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
Python备份Mysql脚本
2008/08/11 Python
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
详解django中自定义标签和过滤器
2017/07/03 Python
python并发编程之线程实例解析
2017/12/27 Python
python2 与python3的print区别小结
2018/01/16 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
python编程的核心知识点总结
2021/02/08 Python
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
State Cashmere官网:半零售价可持续蒙古羊绒
2020/02/26 全球购物
是什么让J2EE适合用来开发多层的分布式的应用
2015/01/16 面试题
秋季校运动会广播稿
2014/02/23 职场文书