JS each遍历详细解释（全）

1】jquery的each()详细介绍
each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等，在javaScript开发过程中使用$each可以大大的减轻我们的工作量。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
each处理一维数组：

var arr1 = [ "aaa", "bbb", "ccc" ];
$.each(arr1, function(i,val){
alert(i);
alert(val);
});

alert(i)将输出0，1，2
alert(val)将输出aaa，bbb，ccc
----------------------------------------------------------------------------------------------------------------------------------------------
each处理二维数组
　　var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
　　$.each(arr2, function(i, item){
alert(i);
alert(item);
　　});
arr2为一个二维数组，item相当于取这二维数组中的每一个数组。
item[0]相对于取每一个一维数组里的第一个值
alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素
alert(item)将输出为 ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']
------------------------------------------------------------------------------------------------------------------------------------------------
对此二位数组的处理稍作变更之后
var arr = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']]
　　$.each(arr, function(i, item){
　　$.each(item,function(j,val){
　　　　 alert(j);
　　　　alert(val);
　});
});
alert(j)将输出为0，1，2，0，1，2，0，1，2
alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc
-------------------------------------------------------------------------------------------------------------------------------------------------
each处理json数据，这个each就有更厉害了，能循环每一个属性
　　var obj = { one:1, two:2, three:3};
　　$.each(obj, function(key, val) {
　　alert(key);
　　alert(val);
　　});
这里alert(key)将输出one two three
alert(val)将输出one，1，two，2，three,3
这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。
而这个val等同于obj[key]
--------------------------------------------------------------------------------------------------------------------------------------------------
ecah处理dom元素，此处以一个input表单元素作为例子。
如果你dom中有一段这样的代码
<input name="aaa" type="hidden" value="111" />
<input name="bbb" type="hidden" value="222" />
<input name="ccc" type="hidden" value="333" />
<input name="ddd" type="hidden" value="444"/>
然后你使用each如下
$.each($("input:hidden"), function(i,val){
alert(val);
alert(i);
alert(val.name);
alert(val.value);
});
那么，alert(val)将输出[object HTMLInputElement]，因为它是一个表单元素。
alert(i)将输出为0，1，2，3
alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果
alert(val.value); 将输出111,222,333,444，如果使用this.value将输出同样的结果

如果将以上面一段代码改变成如下的形式
$("input:hidden").each(function(i,val){
alert(i);
alert(val.name);
alert(val.value);
});
可以看到，输出的结果是一样的，至于两种写法究竟区别在哪，我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。

JS each遍历详细解释（全）相关推荐

JS原型与原型链详细解释
文章目录一.JS原型链简要解释二.JS原型链详细解释 1.构造函数 2.原型对象 3.`__proto__` 4.原型链总结一.JS原型链简要解释原型是function对象上的一个属性, 它 ...
js map遍历修改对象里面的值_求职季之你必须要懂的原生JS(上)
点击上方"IT平头哥联盟",选择"置顶或者星标" 一起进步- 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了"裁员"措施,在这样的大环境 ...
吴恩达机器学习逻辑回归作业3(手写数字分类) Python实现代码详细解释
整个项目的github:https://github.com/RobinLuoNanjing/MachineLearning_Ng_Python 里面可以下载进行代码实现的数据集题目介绍: In t ...
区块如何防篡改_区块链数据不可篡改的详细解释
区块链数据不可篡改的详细解释背景介绍本人新人一枚,学习区块链的过程中,在网上看到了很多讨论区块链区块数据不可篡改的文章,以比特币为例哈,主要存在2种解释: 解释1:由于哈希指针的存在,假设存在某节 ...
js 数组遍历方法详解（map、filter、find、findIndex、reduce）
目录前言 map map是什么 map方法的结构及入参语法糖 map一般不改变原数组 filter 说明例子 find 和 findIndex 说明例子 reduce 说明例子尾言前言 ...
PointNet代码详细解释(Pytorch版本)
pointnet.pytorch的代码详细解释 1. PointNet的Pytorch版本代码解析链接 2. 代码解释 2.1 代码结构思维导图 2.2 代码注释 2.2.1 build.sh 2.2 ...
js中遍历对象的几种方法
一.前言我们知道,在js的对象中,有下面几种属性: 可枚举属性不可枚举属性从原型链上继承的属性以Symbol作为key值今天,我们就来谈一谈如何遍历这些属性. 二.遍历可枚举属性首先, ...
区块链数据不可篡改的详细解释
区块链数据不可篡改的详细解释背景介绍本人新人一枚,学习区块链的过程中,在网上看到了很多讨论区块链区块数据不可篡改的文章,以比特币为例哈,主要存在2种解释: 解释1:由于哈希指针的存在,假设存在某节 ...
Python精讲Numpy基础，大牛笔记详细解释
https://www.toutiao.com/a6664936105076326920/ 总认为Numpy是渣渣,直到深入接触以后才知道功能这么强大.堪比Matlab啊.果然是人生苦短,我用Pyth ...

JS each遍历详细解释（全）

JS each遍历详细解释（全）相关推荐

最新文章

热门文章