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方法和技巧大全
Dec 27 Javascript
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
使用JavaScript根据图片获取条形码的方法
Jul 04 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
如何解决React官方脚手架不支持Less的问题(小结)
Sep 12 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
基于vuex实现购物车功能
Jan 10 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
php的header和asp中的redirect比较
2006/10/09 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
PHP实现的交通银行网银在线支付接口ECSHOP插件和使用例子
2014/05/10 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
科讯商业版中用到的ajax空间与分页函数
2007/09/02 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
nodejs+express实现文件上传下载管理网站
2017/03/15 NodeJs
AngularJS页面传参的5种方式
2017/04/01 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
D3.js的基础部分之数组的处理数组的排序和求值(v3版本)
2019/05/09 Javascript
JavaScript实现留言板案例
2020/03/17 Javascript
JS快速实现简单计算器
2020/04/08 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
django框架自定义用户表操作示例
2018/08/07 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python 过滤错误log并导出的实例
2019/12/26 Python
python yield和Generator函数用法详解
2020/02/10 Python
使用python-Jenkins批量创建及修改jobs操作
2020/05/12 Python
python程序需要编译吗
2020/06/19 Python
利用css3 translate完美实现表头固定效果
2017/02/28 HTML / CSS
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
通信工程专业女生个人求职信
2013/09/21 职场文书
增员口号大全
2014/06/18 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
如何让2019年上半年的工作总结更出色!
2019/07/01 职场文书