数组遍历

map

const newArr = map((item, index, array) => { /* … */ })

定义：

map方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成

map是否会改变原数组？

简单数据类型的数组（不会）

var arr = [1,2,3,4]
var res = arr.map(i => {i = i *2; return i;})
console.log(arr, res)
//  [1, 2, 3, 4]  [2, 4, 6, 8]

引用数据类型的数组（会）

var arr2 = [{a: 1, b: 'qqq'},{a: 2, b: 'www'},{a: 3, b: 'eee'},{a: 4, b: 'rrr'}];
var res2 = arr2.map(i => {i.a = i.a *2; return i;})

// [{a: 2, b: 'qqq'},{a: 4, b: 'www'},{a: 6, b: 'eee'},{a: 8, b: 'rrr'}]
// [{a: 2, b: 'qqq'},{a: 4, b: 'www'},{a: 6, b: 'eee'},{a: 8, b: 'rrr'}]

最终，使用map，修改值时，不要直接修改item，而是返回一个新的item

var arr3 = [{a: 1, b: 'qqq'},{a: 2, b: 'www'},{a: 3, b: 'eee'},{a: 4, b: 'rrr'}];
var res3 = arr3.map(i => {return {...i, a: i.a * 2};})

// [{a: 1, b: 'qqq'},{a: 2, b: 'www'},{a: 3, b: 'eee'},{a: 4, b: 'rrr'}]
// [{a: 2, b: 'qqq'},{a: 4, b: 'www'},{a: 6, b: 'eee'},{a: 8, b: 'rrr'}]

forEach

MDN

forEach((item, index, array) => { /* … */ })

返回值： undefined

定义：

map方法方法对数组的每个元素执行一次给定的函数

类似map

for forEach map 性能比较

for > forEach > map

原因分析：

for: for循环没有额外的函数调用栈和上下文，所以它的实现最为简单。

forEach：函数回调中包含了参数和上下文，所以性能会低于 for 循环

map: 函数回调中包含了参数和上下文，而且会返回一个新数组，所以性能低于forEach

reduce

MDN

reduce((previousResult, currentValue, currentIndex, array) => { /* … */ }, initialValue)

定义：

会将数组上一次遍历的返回值做为下一次遍历的第一个参数，并最终返回最后一次遍历的返回值

//极限情况

[].reduce((i, v, index) => {console.log("qq", i); return index})
// Uncaught TypeError: Reduce of empty array with no initial value

[].reduce((i, v, index) => {console.log("qq", i); return index}, 0)
// 0

[1].reduce((i, v, index) => {console.log("qq", i); return index})
// 1

[1].reduce((i, v, index) => {console.log("qq", i); return index}, 0)
// qq 0
// 0

极限1：

如果数组为空且没有提供initialValue，会抛出错误TypeError: reduce of empty array with no initial value

极限2：

如果数组项只有一个且无initialValue或数组项为空但有initialValue，则回调不会执行，直接返回唯一数组项或initialValue

极限3：

如果数组项 + initialValue 项数 >= 2 ，则会执行回调，最终返回最后一次回调的return值

对象遍历

Object.keys() 和 Object.values()

MDN Object.keys

MDN Object.values

定义：

Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致。

Object.values() 方法返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用 for...in循环的顺序相同

const obj = {a: 1, b: 2, c:3}
Object.keys(obj)
// ['a', 'b', 'c']
Object.values(obj)
// [1, 2, 3]

js数组遍历、对象遍历（map、forEach、reduce）