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 相关文章推荐
js constructor的实际作用分析
Nov 15 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
使用jQuery插件创建常规模态窗口登陆效果
Aug 23 Javascript
jscript读写二进制文件的方法
Apr 22 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
AngularJS中下拉框的基本用法示例
Oct 11 Javascript
vue实现图片上传功能
May 28 Javascript
js实现有趣的倒计时效果
Jan 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
解析file_get_contents模仿浏览器头(user_agent)获取数据
2013/06/27 PHP
改写函数实现PHP二维/三维数组转字符串
2013/09/13 PHP
PHP基于SimpleXML生成和解析xml的方法示例
2017/07/17 PHP
PHP获取真实IP及IP模拟方法解析
2020/11/24 PHP
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
Package.js  现代化的JavaScript项目make工具
2012/05/23 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
在jQuery中 常用的选择器介绍
2013/04/16 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
深入学习JavaScript中的原型prototype
2015/08/13 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
AngularJS基础 ng-focus 指令简单示例
2016/08/01 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
使用Python开发个京东上抢口罩的小实例(仅作技术研究学习使用)
2020/03/10 Python
Python基础类继承重写实现原理解析
2020/04/03 Python
Django使用Profile扩展User模块方式
2020/05/14 Python
如何用Python绘制3D柱形图
2020/09/16 Python
python 如何上传包到pypi
2020/12/24 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
详解CSS中iconfont的使用
2015/08/04 HTML / CSS
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
旅游管理专业生自荐信范文
2014/01/02 职场文书
公司前台辞职报告
2014/01/19 职场文书
2014镇党委班子对照检查材料思想汇报
2014/09/23 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
在校学生证明格式
2015/06/24 职场文书
运动会主持人开幕词
2016/03/04 职场文书