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

JavaScript019

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

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

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

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

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

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

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

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

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

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

•高级浏览器支持forEach方法

语法:forEach和map都支持2个参数:一个是回调函数(item,index,list)和上下文;

•forEach:用来遍历数组中的每一项;这个方法执行是没有返回值的,对原来数组也没有影响;

•数组中有几项,那么传递进去的匿名回调函数就需要执行几次;

•每一次执行匿名函数的时候,还给其传递了三个参数值:数组中的当前项item,当前项的索引index,原始数组input;

•理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是我们可以自己通过数组的索引来修改原来的数组;

•forEach方法中的this是ary,匿名回调函数中的this默认是window;

?

1

2

3

4

5

6

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

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

input[index] = item*10

JS 的 forEach 和 map 方法都是 ES5 为处理数组而新增的迭代方法,区别在于 map 方法返回一个新数组,而 forEach 方法没有返回值。举个例子:

var arr = [1, 2, 4, 7, 8]

// 目标:上述数组里的每一项偶数都+1,使整个数组里都是奇数。

// map 方法

var result = arr.map(function(item) {

    return item % 2 === 0 ? item + 1 : item

})

console.log(result)  // [1, 3, 5, 7, 9]

// forEach 方法

var result = []

arr.forEach(function(item) {

    if (item % 2 === 0) {

        item += 1

    }

    result.push(item)

})

console.log(result)  // [1, 3, 5, 7, 9]

从上述例子可以看出,使用 map 方法要方便的多,代码也更优雅。这里需要注意的是这两个方法不支持 IE9 以下的 IE 浏览器,要兼容的话一般用 for 循环来实现:

// for 循环方法

var result = []

for (var i = 0 i < arr.length i++) {

    if (arr[i] % 2 === 0) {

        arr[i] += 1

    }

    result.push(arr[i])

}

console.log(result)  // [1, 3, 5, 7, 9]