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

JavaScript09

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

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]

可以使用jquery中的each()函数。

$.each(obj, function(i) {

alert(obj[i])

})

function 也可以写为function(key,value){

}

key，value 就是map的key, value