for、map、forEach、filter 之间的区别

for、map、forEach、filter等方法都是对数组进行操作的，他们之间的区别有哪些？下面来盘点一下。

一、for 循环

for 循环是一种基本的控制结构，用于迭代数组中的元素。通过使用 for 循环，您可以自定义迭代逻辑以及要执行的操作。例如：

for 循环语法如下：

for (初始值; 循环条件; 递增表达式) {
  // 循环体代码
}


let arr = ["1","2","3","4","5"];

for(var i=0; i<arr.length; i++){
	console.log(arr[i])
}

// 输出 [1, 2, 3, 4, 5]

还可以使用for循环嵌套，来实现更复杂的循环逻辑，例如打印乘法口诀表

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(i + " * " + j + " = " + (i * j));
  }
}

// 输出乘法口诀表

// 使用 break 语句可以调出循环
for(let i=1;i<=10;i++) {
	if(i==4){
		break; // 跳出循环，执行循环后面的语句(整个循环便终止了)
	}
	console.log(i)
}

// 输出 1, 2, 3


// 使用 continue 语句可以跳过循环
for(let i=1;i<=10;i++) {
	if(i==4 || i==7 || i==9){
		continue; // 中断循环中的迭代，然后继续循环中的下一个迭代
	}
	console.log(i)
}

// 输出 1, 2, 3, 5, 6, 8, 10

提示：for 可以使用 break 语句中断循环或使用 continue 跳过循环;

二、map循环

map()方法用于对数组中的每个元素进行遍历，并将每个元素传递给回调函数进行处理。返回一个新的数组，其中包含了回调函数对每个元素处理后的结果。

map() 语法如下：

array.map(callback(element, index, array), thisValue)


参数说明：

callback: 必须，标识对数组中的每个元素进行处理的回调函数，它可以接收三个参数：
          element: 表示当前处理的元素
          index: 可选，表示当前处理元素的索引
          array: 可选，表示正在处理的数组

thisValue：可选，表示在执行回调函数时使用的this值, 如果省略了 thisArg，或者传入 null、undefined，那么回调函数的 this 为全局对象。

使用 map() 方法对数组中的每个元素乘以2

let arr1 = [1, 2, 3, 4, 5]

let arr2 = arr1.map((n) => n * 2)

console.log(arr1) // 输出 [1, 2, 3, 4, 5]

console.log(arr2) // 输出 [2, 4, 6, 8, 10]

提示：
1.map()方法不会对空数组进行检测;
2.map()函数不会改变原始数组，它形成的是一个新的数组;
3.不能抹除条件不成立的元素，下标对应位置会变成undefined;

三、forEach循环

forEach()方法用于遍历数组的每个元素，接受一个回调函数作为参数，并对数组中的每个元素执行该回调函数。

forEach() 语法如下：

array.forEach(callback(currentValue, index, array))


参数说明：

callback是在每个元素上执行的回调函数。回调函数接受三个参数：

currentValue：当前正在处理的元素。
index（可选）：当前元素在数组中的索引。
array（可选）：正在被遍历的数组。


let arr = [1, 2, 3, 4, 5];

// 使用forEach遍历数组并打印每个元素
arr.forEach(function(n) {
  console.log(n)      // 输出 [1, 2, 3, 4, 5]
  console.log(n + 5)  // 输出 [6, 7, 8, 9, 10]
  console.log(n * 2)  // 输出 [2, 4, 6, 8, 10]
})


// 跳过
arr.forEach((val)=> {
    if(val == 3) return  // 跳过3的元素
    console.log(val)    // [1,2,4,5]
})

// 不支持return语句
let arr1 = arr.forEach((val) => {
	return val * 2
})

console.log(arr1)   // undefined  没有返回值, 返回结果为undefined

提示：
1.forEach 不支持return、break、continue等语句，break和continue会直接报错，return 会返回 undefined;
2.不能中断循环;

四、filter 筛选

filter()方法会筛选出数组中符合条件的元素，返回一个新数组。

filter() 语法如下：

array.filter(callback(currentValue,index,arr), thisValue)


参数说明：

array：要进行过滤的数组。

callback：一个用于测试每个元素的函数。它可以接受三个参数：
          element：当前正在处理的元素。
          index（可选）：当前正在处理的元素的索引。
          array（可选）：调用filter()的数组本身。

thisValue（可选）：在执行回调函数时使用的this值。


let arr1 = [1, 8, 10, 22, 30, 60]


let arr2 = arr1.filter((item) => item > 20)


console.log(arr2) // 输出 [22, 30, 60]


let info = [
   { name:'张三', city: '黄冈市'},
   { name:'李四', city: '武汉市'},
   { name:'王五', city: '广州市'},
   { name:'赵六', city: '黄冈市'},
   { name:'田七', city: '深圳市'},
]

// 筛选出城市为黄冈市的用户
let arr3 = info.filter((item) => item.city === '黄冈')

console.log(arr3) // 输出 [{name: '张三', city: '黄冈'}, {name: '赵六', city: '黄冈'} ]


// filter 求交集和并集

let a = [1,2,3]   let b = [2,3,5]

// 求交集  
let intersection = a.filter(v => b.includes(v))   // [2,3]

// 求并集
let union = a.concat(b.filter((v) => { return !(a.indexOf(v) > -1)}));  // [1,2,3,5]

提示：
1.filter()方法不会对空数组进行检测;
2.filter()函数不会改变原始数组，它形成的是一个新的数组;

王新焱