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模拟弹出效果代码修正版
Aug 07 Javascript
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 Javascript
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
React.Js添加与删除onScroll事件的方法详解
Nov 03 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 Javascript
puppeteer库入门初探
Jan 09 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
Apr 04 Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 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下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
基于jQuery选择器的整理集合
2013/04/26 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
JS使用正则表达式实现关键字替换加粗功能示例
2016/08/03 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
2016/11/20 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
详解Nuxt.js Vue服务端渲染摸索
2018/02/08 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[43:35]TI4 循环赛第二日Liquid vs Fnatic
2014/07/11 DOTA
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
分析在Python中何种情况下需要使用断言
2015/04/01 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
对Python中数组的几种使用方法总结
2018/06/28 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
美国隐形眼镜零售商:LensPure
2019/03/10 全球购物
管事部库房保管员岗位职责
2014/02/21 职场文书
财产公证书样本
2014/04/04 职场文书
我的梦想演讲稿
2014/04/30 职场文书
小班评语大全
2014/05/04 职场文书
电视节目策划方案
2014/05/16 职场文书
保险专业求职信
2014/07/07 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
2016年情人节问候语
2015/11/11 职场文书
2019请假条的基本格式及范文!
2019/07/05 职场文书