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 prototype原型操作笔记
Dec 07 Javascript
Jquery异步请求数据实例代码
Dec 28 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
JavaScript实现数字数组按照倒序排列的方法
Apr 06 Javascript
JS实现的自定义网页拖动类
Nov 06 Javascript
AngularJS 面试题集锦
Sep 06 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
.netcore+vue 实现压缩文件下载功能
Sep 24 Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
zend framework框架中url大小写问题解决方法
2014/08/19 PHP
PHP网站开发中常用的8个小技巧
2015/02/13 PHP
PHP 的比较运算与逻辑运算详解
2016/05/12 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
jQuery中after的两种用法实例
2013/07/03 Javascript
jQuery中last()方法用法实例
2015/01/06 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
Vue实现简易计算器
2020/02/25 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
python实现按行分割文件
2019/07/22 Python
python中p-value的实现方式
2019/12/16 Python
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
Parfumdreams芬兰:购买香水和化妆品
2021/02/13 全球购物
Java基础知识面试题
2014/03/25 面试题
社会治安综合治理管理责任书
2014/04/16 职场文书
庆祝教师节演讲稿
2014/09/03 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
聘任证明怎么写
2015/03/02 职场文书
学术会议领导致辞
2015/07/29 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
详解flex:1什么意思
2022/07/23 HTML / CSS