JS - map和forEach函数的区别

map函数和forEach函数的区别

这两个函数都是数组的遍历方法，但是会有一些细节上的差异：

• map有返回值会返回新数组，不会去改变原数组；
• forEach没有返回值，会改变原数组；如果使用return会返回undefined；
• map和forEach都不会对空数组进行遍历；
  forEach使用如下：

let tags = [
    { val: '未开始', isActive: true, childern: { salay: 111 } },
    { val: '进行中', isActive: false, childern: { salay: 222 } },
    { val: '已参与', isActive: false, childern: { salay: 333 } },
    { val: '已关闭', isActive: false, childern: { salay: 444 } },
]

tags.forEach((item) => {
    item.val = '未开始'  //改变val
    item.childern.salay = item.childern.salay * 2  //改变salary
})

console.log('tags', tags)
结果如下：
tags [
  { val: '未开始', isActive: true, childern: { salay: 222 } },
  { val: '未开始', isActive: false, childern: { salay: 444 } },
  { val: '未开始', isActive: false, childern: { salay: 666 } },
  { val: '未开始', isActive: false, childern: { salay: 888 } }
]

map使用如下：

第一种普通的用法：
const list = [1, 2, 3, 4, 5]
const newList = list.map((item, index) => {
    // 每一项都乘以2
   return item = item * 2
})
console.log("newList", newList);
结果如下：
newList [ 2, 4, 6, 8, 10 ]

//------------------------------------------------------------------

第二种比较常见的用法：
let tags = [
    { val: '未开始', childern: { salay: 111 } },
    { val: '进行中', childern: { salay: 222 } },
    { val: '已参与', childern: { salay: 333 } },
    { val: '已关闭', childern: { salay: 444 } },
]

const newTags = tags.map((item, index) => {
    // 给每一项都添加一个属性isActive默认值为false   工作中比较常见
    return {
        ...item,
        isActive: false,
    }
})
console.log('newTags', newTags)
结果如下：
每一项都成功的添加了属性isActive
newTags [
  { val: '未开始', childern: { salay: 111 }, isActive: false },
  { val: '进行中', childern: { salay: 222 }, isActive: false },
  { val: '已参与', childern: { salay: 333 }, isActive: false },
  { val: '已关闭', childern: { salay: 444 }, isActive: false }
]

如果错误，清多指正。