forEach和map的区别 forEach到底可以改变原数组吗？

forEach和map的区别

、相同点

1） 都是循环遍历数组中的每一项。

2） 每次执行匿名函数都支持三个参数，参数分别为item(当前每一项)，index(索引值)，arr(原数组)。

3） 匿名函数中的this都是指向window。

4）只能遍历数组。

2、不同点

1） map()会分配内存空间存储新数组并返回 （会返回一个新数组），forEach()不会返回数据。

2） forEach()允许callback更改原始数组的元素（原始数组为对象数组时才成立），map()返回新的数组，map() 不会对空数组进行检测。

二、forEach和map有相同值的区别
相同处：forEach 和 map都相当于封装好的单层for循环，三个值都相同。

不同处：

1、forEach()方法没有返回值，而map()方法有返回值。

2、forEach遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也会发生变化。

3、map遍历的后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化。

4、总的来说 map 的速度大于forEach。

三、使用场景

1. forEach适合于你并不打算改变数据的时候。

2. map()适用于你要改变数据值的时候。不仅仅在于它更快，而且返回一个新的数组。这样的优点在于你可以使用复合(composition)(map(), filter(), reduce()等组合使用)。

性能上来说for>forEach>map

forEach到底可以改变原数组吗？

1、基本数据类型 -> 死都改不动原数组！

const array = [1, 2, 3, 4];
array.forEach(ele => {
ele = ele * 3
})
console.log(array); // [1,2,3,4]
复制代码

2、引用类型 -> 类似对象数组可以爽快改变偶~

const objArr = [{
    name: 'wxw',
    age: 22
}, {
    name: 'wxw2',
    age: 33
}]
objArr.forEach(ele => {
    if (ele.name === 'wxw2') {
        ele.age = 88
    }
})
console.log(objArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 88}]

3、那引用类型 -> 改变整个单次循环的item那？ -> NO！不行

const changeItemArr = [{
    name: 'wxw',
    age: 22
}, {
    name: 'wxw2',
    age: 33
}]
changeItemArr.forEach(ele => {
    if (ele.name === 'wxw2') {
        ele = {
            name: 'change',
            age: 77
        }
    }
})
console.log(changeItemArr); // [{name: "wxw", age: 22},{name: "wxw2", age: 33}]

4、终极无敌屡试不爽的方法！

// 基本类型可以欧~
const numArr = [33,4,55];
numArr.forEach((ele, index, arr) => {
    if (ele === 33) {
        arr[index] = 999
    }
})
console.log(numArr);  // [999, 4, 55]

// 引用类型也可以欧~
const allChangeArr = [{    name: 'wxw',    age: 22}, {    name: 'wxw2',    age: 33}]
allChangeArr.forEach((ele, index, arr) => {
    if (ele.name === 'wxw2') {
        arr[index] = {
            name: 'change',
            age: 77
        }
    }
})
console.log(allChangeArr); // // [{name: "wxw", age: 22},{name: "change", age: 77}]

总结一下

• 基本类型我们当次循环拿到的ele，只是forEach给我们在另一个地方复制创建新元素，是和原数组这个元素没有半毛钱联系的！所以，我们使命给循环拿到的ele赋值都是无用功！
• 专业的概念说就是：JavaScript是有基本数据类型与引用数据类型之分的。对于基本数据类型：number,string,Boolean,null,undefined它们在栈内存中直接存储变量与值。而Object对象的真正的数据是保存在堆内存，栈内只保存了对象的变量以及对应的堆的地址，所以操作Object其实就是直接操作了原数组对象本身。

（foreach可以改变原数组 但是的用使用arr[index]的形式赋值改变 无论原数组时基本数据类型还是引用类型 因为 使用arr[index]的形式赋值改变 是把变化后的元素赋值给原数组了）

• forEach 的基本原理也是for循环，使用arr[index]的形式赋值改变，无论什么就都可以改变了。