es6 循环往数组对象中的 每一项对象中 添加 自定义字段 map ；Map 和ForEach 的区别

Map 和ForEach 的区别

Map：

 <script>
        const {
            log
        } = console;

    

        const oldArray=[{zhang:1},{yu:2}]

         oldArray.map((item)=>{
             let key='yes'
             let value='你不要这么刚！'
             item[key]=value
         })


        log('oldArray', oldArray)
        
map 不return        修改原数组

    </script>

1 map 不return 修改原数组

 <script>
        const {
            log
        } = console;

    

        const oldArray=[{zhang:1},{yu:2}]

        const newArray=oldArray.map((item)=>{
                let key='yes'
                let value='你不要这么刚！'
              return  item[key]=value
            })


        log('oldArray', oldArray)
        log('newArray', newArray)

    </script>

2 map ，return了； 修改原数组 并且返回一个新数组；

//总结： map 可以return 也可以不return ， 都会修改原数组；
map return 的时候，会返回 一个新数组；
3 map性能比forEach好70% ；

ForEach ：

情况1

<script>
        const {
            log
        } = console;

    

        const oldArray=[{zhang:1},{yu:2}]

        const newArray=oldArray.forEach((item)=>{
                let key='yes'
                let value='你不要这么刚！'
              return  item[key]=value
            })


        log('oldArray', oldArray)
        log('newArray', newArray)

    </script>

情况2：

再总结：

1都return了！！！
2forEach是不会返回有意义的值的。

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

// ForEach

// 注意，forEach是不会返回有意义的值的。
// 我们在回调函数中直接修改arr的值。

arr.forEach((num, index) => {//在原数组中 直接操作num， index， return了！！！
 return arr[index] = num * 2;
});
// 执行结果如下：
// arr = [2, 4, 6, 8, 10]

// Map

let doubled = arr.map(num => { //直接声明了新数组 直接操作 原数组中的item  return了！！！
 return num * 2;
});
// 执行结果如下：

// doubled = [2, 4, 6, 8, 10]


log('newArray', arr)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

map 不会修改原数组，返回一个新数组；正解！！！

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

let doubled = arr.map(num => { //直接声明了新数组 直接操作 原数组中的item
 return num * 2;
});

log('doubled', doubled)
log('arr', arr)

// forEach 修改原数组  正解！！！

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

arr.forEach((num, index) => {//在原数组中 直接操作num， index， 记得要return！！！
 return arr[index] = num * 2;
});
// 执行结果如下：
// arr = [2, 4, 6, 8, 10]

// log('doubled', doubled)
log('arr', arr)

经过实测证明， foeEach 和Map 都return forEach直接操作num,index map声明了一个新数组，直接操作的num；forEach确实会修改原数组的值，map 不会修改原数组的值，操作num后 的值 都返回到了新声明的那个数组；

最后，什么时候使用forEach 什么时候使用map：

forEach适合于你并不打算改变数据的时候，而只是想用数据做一些事情 – 比如存入数据库或则打印出来。

let arr = ['a', 'b', 'c', 'd'];
arr.forEach((letter) => {
 console.log(letter);
});
// a
// b
// c
// d

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

let arr = [1, 2, 3, 4, 5];
let arr2 = arr.map(num => num * 2).filter(num => num > 5);
// arr2 = [6, 8, 10]

我们首先使用map将每一个元素乘以2，然后紧接着筛选出那些大于5的元素。最终结果赋值给arr2。

核心要点

能用forEach()做到的，map()同样可以。反过来也是如此。

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

forEach() 允许callback 更改 原始数组 的元素。

map() 返回 新的数组。