js的foreach和each(js for和foreach区别)

http://www.itjxue.com  2023-01-29 19:57  来源:未知  点击次数: 

JS的forEach和map方法的区别,还有一个$each

forEach()和map()两个方法都是ECMA5中Array引进的新方法,主要作用是对数组的每个元素执行一次提供的函数,但是它们之间还是有区别的。jQuery也有一个方法$.each(),长得和forEach()有点像,功能也类似。但是从本质上还是有很大的区别的,那么我们探探究竟。

一、forEach和map语法

语法:

//forEach

array.forEach(callback(currentValue, index, array){

//do something

}, this)

//或者

array.forEach(callback(currentValue, index, array){

//do something

})

//map:

var new_array = arr.map(callback[, thisArg]) 

//$.each()

$(selector).each(function(index,element)) //注意参数的顺序

callback: 为数组中每个元素执行的函数,该函数接收三个参数,

参数一:当前数组中元素;参数二:索引; 参数三:当前数组。

this:可选,执行会掉时候,this的指向。

二、区别

2.1、forEach()返回值是undefined,不可以链式调用。

2.2、map()返回一个新数组,原数组不会改变。

2.3、没有办法终止或者跳出forEach()循环,除非抛出异常,所以想执行一个数组是否满足什么条件,返回布尔值,可以用一般的for循环实现,或者用Array.every()或者Array.some();

2.4、$.each()方法规定为每个匹配元素规定运行的函数,可以返回 false 可用于及早停止循环。

三、经典例子

3.1 在使用forEach()时候,如果数组在迭代的视乎被修改,

则其他元素会被跳过。因为 forEach()不会在迭代之前创建数组的副本。

3.2反转字符串

var str = '12345';

Array.prototype.map.call(str, function(x) { //同时利用了call()方法

return x;

}).reverse().join('');

3.3一个笔试题。

1

["1", "2", "3"].map(parseInt); //结果 [1, NaN, NaN] 

如果想得到[1, 2,3]应该这么做

function returnInt(element){

return parseInt(element,10);

}

["1", "2", "3"].map(returnInt);

这主要是因为 parseInt()默认有两个参数,第二个参数是进制数。当parsrInt没有传入参数的时候,而map()中的回调函数时候,会给它传三个参数,第二个参数就是索引,明显不正确,所以返回NaN了。

3.4....

四、兼容性

forEach()和map()是ECMA5新引入的,可能在标准的其他实现中不存在,在使用前可以要Ployfill一下。

具体网上很多吧,更多的是在ie9以下,如果你的项目无视这些,那么你可以不care。

JS中的forEach,for in,for of和for的遍历优缺点及区别

优点: 遍历的时候更加简洁,效率和for循环相同,不用关心集合下标的问题,减少出错的效率

缺点: 不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据,方法不能使用break,continue语句跳出循环,或者使用return从函数体返回,对于空数组不会执行回调函数

forEach不可遍历对象,这也是和for in的区别

优点: 可以遍历数组的键名,遍历对象简洁方便

缺点: 某些情况下,会出现随机顺序的遍历,因为里面的值是string类型,所以增加了转换过程,因此开销比较大

优点: 避免了for in的所有缺点,可以使用break,continue和return,不仅支持数组的遍历,还可以遍历类似数组的对象,支持字符串的遍历,最直接的遍历数组的语法,支持map和set对象遍历

缺点: 不适用于处理原有的原生对象

优点: 程序简洁,结构清晰,循环初始化,循环变量化,循环体和循环条件位置突出

缺点: 结构比while循环复杂,容易出编码错误

each 和 foreach的区别

each和foreach的区别有:

1、foreach是js的原生方法;each是jq的方法;

例如:

var arr = ['mary','jack'];

arr.foreach(function(item,index){

console.log(item,index);//mary,0 ? jack 1

})

2、$.each() 与 $(select).each()之间的区别

2.1、$.each()?可用于遍历任何的集合(无论是数组或对象),如果是数组,回调函数每次传入数组的索引和对应的值,方法会返回被遍历对象的第一参数。

?$(select).each() 主要专用于jquery对象的遍历,?

?

$.each()

jquery foreach和each的区别

jquert没有foreach

foreach是原生js的方法,针对数组,[].foreach(value,index,arr){}

each是jq的方法,针对jq对象,$().each(index,value){}

注意两者第一二个参数是位置颠倒的

(责任编辑:IT教学网)

更多