for map forEach的区别

三者都是对数据进行循环处理

for循环可以通过break return false来终止循环，map forEach不可以；
map有返回值，forEach没有返回值，除此之外两者

for

• for in循环出key
• for of 循环出value

let arr = [1, 2, 3]
for (let item in arr) {
  console.log(item)
}
// 0 1 2

let arr = [{a: 1}, {a: 2}, {a: 3}]
for (let item in arr) {
  console.log(item)
}
// 0 1 2

let obj = {a: 1, b: 2, c: 3}
for (let item in obj) {
  console.log(item)
}
// a b c

let arr = [1, 2, 3]
for (let item of arr) {
  console.log(item)
}
// 1 2 3

let arr = [{a: 1}, {a: 2}, {a: 3}]
for (let item of arr) {
  console.log(item)
}
// {a: 1} {a: 2} {a: 3}

let obj = {a: 1, b: 2, c: 3}
for (let item of obj) {
  console.log(item)
}
// 这种情况不可以

map

• 有返回值，是一个数组
• 不能通过break或renturn false终止循环

直接为arr的item重新赋值
不改变原数组，返回一个新数组

let arr = [1, 2, 3];

let newArr = arr.map((item) => {
  item = item * 10;
  return item
});
或
let newArr = arr.map((item) => item * 10);

console.log("arr: ", arr); // [1, 2, 3]
console.log("newArr: ", newArr); // [10, 20, 30]

let arr = [{a: 1}, {a: 2}, {a: 3}];

let newArr = arr.map((item) => {
  item = "hhh";
  return item
});
或
let newArr = arr.map((item) => "hhh");

console.log("arr: ", arr); // [{a: 1}, {a: 2}, {a: 3}]
console.log("newArr: ", newArr); // ['hhh', 'hhh', 'hhh']

arr的item为引用类型，修改item的属性值
改变原数组，同时返回一个新数组
map操作之后修改newArr的item的属性值，arr的item的属性值随之改变

let arr = [{a: 1}, {a: 2}, {a: 3}];
let newArr = arr.map((item) => {
  item.a = item.a * 10;
  return item
});
console.log("arr: ", arr); // [{a: 10}, {a: 20}, {a: 30}]
console.log("newArr: ", newArr); // [{a: 10}, {a: 20}, {a: 30}]

newArr[0].a = 111
console.log("arr: ", arr); // [{a: 111}, {a: 20}, {a: 30}]
console.log("newArr: ", newArr); // [{a: 111}, {a: 20}, {a: 30}]

forEach

• 没有返回值
• 不能通过break或renturn false终止循环

直接为arr的item重新赋值
不改变原数组

let arr = [1, 2, 3];
arr.forEach((item) => {
  item = item * 10;
});
console.log("arr: ", arr); // [1, 2, 3]

arr的item为引用类型，修改item的属性值
改变原数组

let arr = [{a: 1}, {a: 2}, {a: 3}];
arr.forEach((item) => {
  item.a = item.a * 10;
});
console.log("arr: ", arr); // [{a: 10}, {a: 20}, {a: 30}]

关于为什么map和forEach循环中重新为item赋值，都不能改变数组？

首先说明：
值类型，如String、Boolean、Number、Undefined等数据，是在栈内存中存储变量名和对应的值；
引用类型，如Array、Object等数据，是在堆内存中存储变量名和引用位置

map和forEach循环的回调函数体内的item，并不是对应原数组中的值，而是一个新的变量。
当item是值类型时，item与原数组中的值都存在于栈内存，通过为item重新赋值 并不会改变原数组中的值；
当item是引用类型时，item与原数组中的值统一指向堆内存中的同一内存地址，通过修改item中的属性值 可以改变原数组中的值，但是为item重新赋值 依然不会改变原数组中的值