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创建对象的八种方法
Nov 03 Javascript
angular2使用简单介绍
Mar 01 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
原生js实现秒表计时器功能
Feb 16 Javascript
js 监控iframe URL的变化实例代码
Jul 12 Javascript
node.js中使用Export和Import的方法
Sep 18 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
Jan 31 Javascript
Vue表单之v-model绑定下拉列表功能
May 14 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
JavaScript canvas实现流星特效
May 20 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
PHP安全编程之加密功能
2006/10/09 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
javascript nextSibling 与 getNextElement(node) 使用介绍
2011/10/13 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
javascript实现window.print()去除页眉页脚
2014/12/30 Javascript
Javascript中拼接大量字符串的方法
2015/02/05 Javascript
全面解析Bootstrap中Carousel轮播的使用方法
2016/06/13 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
JS打开摄像头并截图上传示例
2017/02/18 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
JS使用正则表达式找出最长连续子串长度
2017/10/26 Javascript
angular4 共享服务在多个组件中数据通信的示例
2018/03/30 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
微信小程序实现打卡签到页面
2020/09/21 Javascript
从Python的源码浅要剖析Python的内存管理
2015/04/16 Python
python Crypto模块的安装与使用方法
2017/12/21 Python
Django框架模板介绍
2019/01/15 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python变量的存储原理详解
2019/07/10 Python
解决pycharm上的jupyter notebook端口被占用问题
2019/12/17 Python
Python如何获取文件指定行的内容
2020/05/27 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
法国珠宝店:CLEOR
2017/01/29 全球购物
俄罗斯在线大型超市:ТутПросто
2021/01/08 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
企业申诉管理制度
2014/01/30 职场文书
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
失恋33天观后感
2015/06/11 职场文书
交流会主持词
2015/07/02 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书