JavaScript、jQuery、fish的遍历方法(each、forEach)总结

时间:2023-03-08 16:47:46

起因

在工作中,需要在遍历的dom中找到第一个并做下操作然后退出遍历,我首先想到了用each方法,但由于无论是公用的jQuery组件还是公司的fish组件。我都忘记了怎么去退出遍历,所以就有了这篇帖子。

目的

本文的目的是总结一下无论是数组还是dom,关于他们的遍历方法。

数组方法(ES5)

Array.prototype.forEach()

语法

array.forEach(callback[, thisArg])

callback函数参数

第一个参数:当前项
第二个参数:当前项的索引
第三个参数:数组本身

thisArg参数

这个参数是可选参数。
主要用于绑定函数内this的作用域,否则你在函数内调用this,this指代全局对象Window(ES3)或者undefined(ES5严格模式下)

关于中断(MDN原话)

没有办法中止或者跳出 forEach 循环,除了抛出一个异常。如果你需要这样,使用forEach()方法是错误的,你可以用一个简单的循环作为替代。如果您正在测试一个数组里的元素是否符合某条件,且需要返回一个布尔值,那么可使用 Array.everyArray.some


jQuery方法

语法

.each()

作用

用来遍历dom

用法

$(dom).each( function(index, Element) ) { do Something... }

参数

第一个参数:当前索引,从0开始
第二个参数:指被当前迭代的元素,与在函数体内的this等价

关于中断

可以通过返回false以便在函数体内终止循环


fish方法

语法

.each()

作用

用来遍历dom

用法

fish.all(dom).each(function(Parameter) {do Something...})

参数(确实和数组方法的forEach很像)

第一个参数:当前项
第二个参数:当前项的索引
第三个参数:数组本身 (等价于函数中的this)

关于中断

可以通过返回false以便在函数体内终止循环


for方法

语法

for(var i = 0; i < someArray.length; i++) { doSomething... }

作用

循环

关于中断

break; 语法可以完成中断
return; 语法直接报错(未捕获的语法错误: 非法返回声明)