原生JS forEach和map遍历的区别以及兼容写法

JavaScript09

原生JS forEach和map遍历的区别以及兼容写法,第1张

一、原生JS forEach()和map()遍历

共同点:

1.都是循环遍历数组中的每一项。

2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。

3.匿名函数中的this都是指Window。

4.只能遍历数组。

1.forEach()

没有返回值。

[javascript] view plain copy

var ary = [12,23,24,42,1]

var res = ary.forEach(function (item,index,input) {

input[index] = item*10

})

console.log(res)//-->undefined

console.log(ary)//-->会对原来的数组产生改变;

2.map()

有返回值,可以return 出来。

[javascript] view plain copy

var ary = [12,23,24,42,1]

var res = ary.map(function (item,index,input) {

return item*10

})

console.log(res)//-->[120,230,240,420,10]

console.log(ary)//-->[12,23,24,42,1];

兼容写法:

不管是forEach还是map在IE6-8下都不兼容(不兼容的情况下在Array.prototype上没有这两个方法),那么需要我们自己封装一个都兼容的方法,代码如下:

[javascript] view plain copy

/**

* forEach遍历数组

* @param callback [function] 回调函数;

* @param context [object] 上下文;

*/

Array.prototype.myForEach = function myForEach(callback,context){

context = context || window

if('forEach' in Array.prototye) {

this.forEach(callback,context)

return

}

//IE6-8下自己编写回调函数执行的逻辑

for(var i = 0,len = this.lengthi <leni++) {

callback &&callback.call(context,this[i],i,this)

}

}

[javascript] view plain copy

/**

* map遍历数组

* @param callback [function] 回调函数;

* @param context [object] 上下文;

*/

Array.prototype.myMap = function myMap(callback,context){

context = context || window

if('map' in Array.prototye) {

return this.map(callback,context)

}

//IE6-8下自己编写回调函数执行的逻辑

var newAry = []

for(var i = 0,len = this.lengthi <leni++) {

if(typeof callback === 'function') {

var val = callback.call(context,this[i],i,this)

newAry[newAry.length] = val

}

}

return newAry

}

使用for...in可以遍历js对象的属性,用法如下: for...in 语句用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)。 for ... in 循环中的代码每执行一次,就会对数组的元素或者对象的属性进行一次操作。

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

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

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

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

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

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

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

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

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