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生成GUID的多种算法小结
Aug 18 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
jQuery each函数源码分析
May 25 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
Jun 03 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
axios基本入门用法教程
Mar 25 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 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
PHP cron中的批处理
2008/09/16 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
PHP面向对象程序设计之构造方法和析构方法详解
2019/06/13 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery中delegate和on的用法与区别详细解析
2014/01/26 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
2016/11/25 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
JQuery Ajax如何实现注册检测用户名
2020/09/25 jQuery
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python+django实现文件上传
2016/01/17 Python
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
Django数据库表反向生成实例解析
2018/02/06 Python
一个简单的python爬虫程序 爬取豆瓣热度Top100以内的电影信息
2018/04/17 Python
详解python中__name__的意义以及作用
2019/08/07 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
自荐信结尾
2013/10/27 职场文书
高中政治教学反思
2014/01/18 职场文书
社区优秀志愿者材料
2014/02/02 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Django 如何实现文件上传下载
2021/04/08 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python
MySQL GTID复制的具体使用
2022/05/20 MySQL