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的public、private和privileged模式
Dec 28 Javascript
jquery图片上下tab切换效果
Mar 18 Javascript
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
javascript操作excel生成报表示例
May 08 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
Javascript removeChild()删除节点及删除子节点的方法
Dec 27 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
Mar 21 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
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
AM/FM收音机的安装与调试
2021/03/02 无线电
PHP中spl_autoload_register函数的用法总结
2013/11/07 PHP
php时间戳转换的示例
2014/03/31 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
Laravel重写用户登录简单示例
2016/10/08 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
JavaScript 在线压缩和格式化收藏
2009/01/16 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
js取得html iframe中的元素和变量值
2014/06/30 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
2017/01/18 Javascript
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
python 编码规范整理
2018/05/05 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
Python3爬虫中Selenium的用法详解
2020/07/10 Python
通过实例解析python and和or使用方法
2020/11/14 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
css3模拟jq点击事件的实例代码
2017/07/06 HTML / CSS
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
PHP面试题及答案二
2015/05/23 面试题
介绍一下grep命令的使用
2012/06/28 面试题
酒店保安领班职务说明书
2014/03/04 职场文书
竞聘书怎么写,如何写?
2014/03/31 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
2020年元旦祝福语录,总有适合你的
2019/12/31 职场文书