JS中数组与对象的遍历方法实例小结


Posted in Javascript onAugust 14, 2018

本文实例讲述了JS中数组与对象的遍历方法。分享给大家供大家参考,具体如下:

一、数组的遍历:

首先定义一个数组

arr=['snow','bran','king','nightking'];

1、for循环,需要知道数组的长度;

2、foreach,没有返回值,可以不知道数组长度;

arr.forEach(function(ele,index){
console.log(index);
console.log(ele)
})

3、map函数,遍历数组每个元素,并回调操作,需要返回值,返回值组成新数组,原数组不变;

var newarr=arr.map(function(i){
  return "hello "+i
});
console.log(newarr)

4、filter函数:过滤通过条件的元素组成一个新数组,原数组不变;

var newarr=arr.filter(function(i){
  return i == "bran"
});
console.log(newarr)

5、some函数,遍历数组中是否有符合条件的函数,返回布尔值;

var yy=arr.some(function(i){
  return i.length>4
});
console.log(yy)       //true

6、every函数,遍历数组是否每个元素都符合条件,返回布尔值;

var xx=arr.every(function(i){
  return i.length>4
});
console.log(xx)       //false

7、reduce函数,为数组中的每一个元素依次执行回调函数

语法:

arr.reduce(callback, initialValue)
[0,1,2,3,4].reduce(function(previousValue, currentValue, index, array){
 return previousValue + currentValue;
});

callback:执行数组中每个值的函数,包括四个参数;

  • previousValue:上一次调用回调返回的值,或者是提供的初始值(initialValue);
  • currentValue:当前被处理的值;
  • index:当前元素在数组中的索引;
  • array:调用reduce的数组;
  • initialValue:作为第一次调用callback的第一个参数;

例如:

var total = [0, 1, 2, 3].reduce(function(a, b) {
  return a + b;
});
// total == 6
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(function(a, b) {
  return a.concat(b);
});
// flattened is [0, 1, 2, 3, 4, 5]

要提供initialValue的话:

var total = [0, 1, 2, 3].reduce(function(a, b) {
   return a + b;
},4);
console.log(total); //10

二、对象的遍历

var obj={snow:1,bran:2,king:3,nightking:4};
for(let i in obj){
  console.log(i+','+obj[i])
}

in也可以用来遍历数组,不过i对应于数组的key值:

for(let i in arr){
  console.log(i+','+arr[i])
}
Javascript 相关文章推荐
javascript应用:Iframe自适应其加载的内容高度
Apr 10 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
详解React-Todos入门例子
Nov 08 Javascript
js生成随机数方法和实例
Jan 17 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
vuex学习之Actions的用法详解
Aug 29 Javascript
了解JavaScript中let语句
May 30 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
Dec 30 Vue.js
layui实现table加载的示例代码
Aug 14 #Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 #Javascript
JavaScript中toLocaleString()和toString()的区别实例分析
Aug 14 #Javascript
layer插件select选中默认值的方法
Aug 14 #Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 #Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 #Javascript
JS通过位运算实现权限加解密
Aug 14 #Javascript
You might like
PHP的几个常用数字判断函数代码
2012/04/24 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
php 删除cookie方法详解
2014/12/01 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP实现事件机制的方法
2015/07/10 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
JS URL传中文参数引发的乱码问题
2009/09/02 Javascript
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
javascript判断非数字的简单例子
2013/07/18 Javascript
详解JavaScript对W3C DOM模版的支持情况
2015/06/16 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
jQuery实现可兼容IE6的遮罩功能详解
2017/09/19 jQuery
jquery应用实例分享_实现手风琴特效
2018/02/01 jQuery
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
2018/11/27 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
微信小程序页面上下滚动效果
2020/11/18 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python脚本按照当前日期创建多级目录
2019/03/01 Python
Python3视频转字符动画的实例代码
2019/08/29 Python
python使用beautifulsoup4爬取酷狗音乐代码实例
2019/12/04 Python
Python加载数据的5种不同方式(收藏)
2020/11/13 Python
EGO Shoes美国/加拿大:英国时髦鞋类品牌
2018/08/04 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
高级工程师英文求职信
2014/03/19 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
群众对十八届四中全会的期盼
2014/10/17 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
面试通知邮件
2015/04/20 职场文书
如何拟写通知正文?
2019/04/02 职场文书
使用Selenium实现微博爬虫(预登录、展开全文、翻页)
2021/04/13 Python
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Redis命令处理过程源码解析
2022/02/12 Redis