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 相关文章推荐
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
Mar 18 Javascript
IE6 hack for js 集锦
Sep 23 Javascript
javascript实现行拖动的方法
May 27 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
详解VueJs前后端分离跨域问题
May 24 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
webpack-dev-server自动更新页面方法
Feb 22 Javascript
利用jqgrid实现上移下移单元格功能
Nov 07 Javascript
JS实现的对象去重功能示例
Jun 04 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 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
解决中英文字符串长度问题函数
2007/01/16 PHP
PHP操作文件方法问答
2007/03/16 PHP
php实现爬取和分析知乎用户数据
2016/01/26 PHP
php处理复杂xml数据示例
2016/07/11 PHP
PHP正则验证字符串是否为数字的两种方法并附常用正则
2019/02/27 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
删除重复数据的算法
2006/11/23 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
jQuery实现区域打印功能代码详解
2016/06/17 Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
2016/11/18 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
2017/02/27 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
js canvas实现简单的图像扩散效果
2020/06/28 Javascript
webpack4 处理CSS的方法示例
2018/09/03 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
Django框架多表查询实例分析
2018/07/04 Python
python找出完数的方法
2018/11/12 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
SEPHORA新西兰官方网站:购买化妆品和护肤品
2016/12/02 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Arti-shopping中文官网:大型海外商品一站式直邮平台
2020/03/23 全球购物
项目专员岗位职责
2013/12/04 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
开会迟到检讨书
2014/01/08 职场文书
产品发布会策划方案
2014/05/12 职场文书
法人委托书范本
2014/09/15 职场文书
教师个人事迹材料
2014/12/17 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
体育委员竞选稿
2015/11/21 职场文书