循环的差异性记录

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

map：

map方法返回一个新的数组，数组中的元素为原始数组调用函数处理后的值

也就是map（）进行处理之后返回一个新的数组

⚠️注意：map（）方法不会对空数组进行检测

map方法不会改变原始数组

forEach

forEach方法用于调用数组的每个元素，将元素传给回调函数

⚠️注意： forEach对于空数组是不会调用回调函数的 ，

没有返回一个新数组&没有返回值

应用场景：为一些相同的元素，绑定事件处理器！

不可链式调用

reduce

reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（上一次回调的返回值），当前元素值，当前索引，原数组 

语法：arr.reduce(callback,[initialValue])

callback:函数中包含四个参数

• previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
• currentValue （数组中当前被处理的元素）

• index （当前元素在数组中的索引)
• array （调用的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
    return pre + item
}, 0)
console.log(sum) // 15

filter

用于数组的过滤

for...in...和 for...of...

因此另外有for-in循环和for-of循环两种增强型循环。其中，for-in是ES5标准，遍历的是key（可遍历对象、数组或字符串的key）；for-of是ES6标准，遍历的是value（可遍历对象、数组或字符串的value）。

for...in 遍历的是对象，for...of遍历的是数组

直接看简单的代码示例了解用法。

// for...in...  是无序列表
const arr = {
  name: '小何',
  age: '19',
  type: '帅',
  content: '前端'
}
for(key in arr) {
  console.log(key)		// name, age, type, content
  console.log(arr[key])  // 小何, 19, 帅, 前端
}


// for...in...   是有序列表
const m = ['第一', '第二', '第三']
for(let item of m) {
  console.log(item)  // 第一， 第二， 第三
}