JS数组及对象遍历方法代码汇总


Posted in Javascript onJune 16, 2020

文中的范例基于以下数组和对象。

var arrTmp = ["value1","value2","value3"];
var objTmp = {
  aa:"value1",
  bb:"value2",
  cc:function(){
    console.log("value3")
  }
}

一、JS原生方法

1. javascript遍历的常用的遍历方法是for循环和for-in,ES5的时候加上了forEach方法(IE9以下不支持)。

/****js原生遍历****/
//for循环遍历数组
for(var i=0;i<arrTmp.length;i++){
  console.log(i+": "+arrTmp[i])
}
 
//for-in遍历对象属性,i指代属性名
for(var i in objTmp){
  console.log(i+": "+objTmp[i])
}
 
//forEach遍历数组,三个参数依次是数组元素、索引、数组本身
arrTmp.forEach(function(value,index,array){
  console.log(value+","+index+","+array[index])
})

2. for-in循环是为了遍历对象而设计的,事实上for-in也能用来遍历数组,但定义的索引i是字符串类型的。如果数组具有一个可枚举的方法,也会被for-in遍历到,例如:

//for-in遍历数组
for(var i in arrTmp){
  console.log(i+": "+arrTmp[i])
}
//for-in会遍历到数组的属性
arrTmp.name="myTest";
for(var i in arrTmp){
  console.log(i+":"+arrTmp[i])
}
//输出 0:value1 1:value2 2:value3 name:myTest

3. for循环和for-in能正确响应break、continue和return语句,但forEach不行。

//只会输出value1 value2
for(var i=0;i<arrTmp.length;i++){
  console.log(i+": "+arrTmp[i]);
  if(i==1){
    break;
  }
}
//会输出value1 value2 value3
arrTmp.forEach(function(value){
  console.log(value+);
  if(value==1){
    return;
  }
})

4. ES6中,新增了for-of遍历方法。它被设计用来遍历各种类数组集合,例如DOM NodeList对象、Map和Set对象,甚至字符串也行。官方的说法是:

for...of语句在可迭代对象(包括 Array, Map, Set, String, TypedArray,arguments 对象等等)上创建一个迭代循环,对每个不同属性的属性值,调用一个自定义的有执行语句的迭代挂钩

// for-of遍历数组,不带索引,i即为数组元素
for(let i of arrTmp){
  console.log(i)
}
//输出 "value1" "value2" "value3"
 
// for-of遍历Map对象
let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);
for (let [key, value] of iterable) {
 console.log(value);
}
//输出 1 2 3
 
// for-of遍历字符串
let iterable = "china中国";
for (let value of iterable) {
 console.log(value);
}
//输出 "c" "h" "i" "n" "a" "中" "国"

5. 上面的方法,注重点都是数组的元素或者对象的属性值。如果单纯的想获取对象的属性名,js有原生的Object.keys()方法(低版本IE不兼容),返回一个由对象的可枚举属性名组成的数组:

/****Object.keys()返回键名数组****/
//数组类型
let arr = ["a", "b", "c"];
console.log(Object.keys(arr));
// (3) ['0', '1', '2']
 
// 类数组对象
let anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.keys(anObj));
// (3) ['2', '7', '100']
 
//一般对象
let xyz = {z: "zzz", x: "xxx", y: "yyy"};
console.log(Object.keys(xyz));
// (3) ["z", "x", "y"]

javascript原生遍历方法的建议用法:

  • 用for循环遍历数组
  • 用for-in遍历对象
  • 用for-of遍历类数组对象(ES6)
  • 用Object.keys()获取对象属性名的集合

二、jQuery的$.each

jQuery的遍历方法通常被用来遍历DOM元素,用于数组和对象的是$.each()方法,它接受两个参数,分别指代属性名/数组索引和属性值/数组元素:

/****$.each()遍历对象和数组****/
$.each(arrTmp,function(index,value){
  console.log(index+": "+value)
});
 
$.each(objTmp,function(key,value){
  console.log(key+": "+value)
});

三、underscore的_.each()遍历

underscore.js是一个较流行的插件库,它封住了一些对数组和对象的处理方法。_.each()就用来遍历:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="../lib/underscore.js"></script>
</head>
<body>
<script type="text/javascript">
 
var arrTmp = ["value1", "value2", "value3"];
var objTmp = {
  aa: "value1",
  bb: "value2",
  cc: function () {
    console.log("value3")
  }
};
 
//_.each()接受三个参数,分别指代键值、键名和被遍历的对象本身
_.each(arrTmp,function(value,index,array){
  console.log(index +","+ value +","+ array[index])
})
_.each(objTmp,function(value,key,obj){
  console.log(key +","+ value +","+ obj[key])
})
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于逻辑运算的简单权限系统(实现) JS 版
Mar 24 Javascript
JS IE和FF兼容性问题汇总
Feb 09 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
May 23 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
vue cli 全面解析
Feb 28 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
javascript实现弹出层效果
Dec 10 Javascript
node实现mock-plugin中间件的方法
Dec 25 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 #Javascript
原生JS实现天气预报
Jun 16 #Javascript
vue实现公告栏文字上下滚动效果的示例代码
Jun 16 #Javascript
原生JS实现无缝轮播图片
Jun 24 #Javascript
如何利用Node.js与JSON搭建简单的动态服务器
Jun 16 #Javascript
js+css实现全屏侧边栏
Jun 16 #Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
Jun 15 #Javascript
You might like
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
thinkPHP5.0框架自动加载机制分析
2017/03/18 PHP
javascript 屏蔽鼠标键盘的几段代码
2008/01/02 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript与css3动画结合使用小结
2015/03/11 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
2016/12/17 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
基于Vuejs的搜索匹配功能实现方法
2018/03/03 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
Python出现segfault错误解决方法
2016/04/16 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
Django自带日志 settings.py文件配置方法
2019/08/30 Python
python自动点赞功能的实现思路
2020/02/26 Python
基于python图像处理API的使用示例
2020/04/03 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
英语系本科生个人求职信
2013/09/21 职场文书
烹调加工管理制度
2014/02/04 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
2014年最新党员对照检查材料汇总
2014/09/15 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
天堂的孩子观后感
2015/06/11 职场文书
HTML基础详解(上)
2021/10/16 HTML / CSS