Usage of map and foreach in JS

---

Preface

The coding process has been confused map and forEach The difference between , spare , Make a few examples to study .

---

One 、map

1. Simple array

    const a = [ 5, 7, 10, ]
    const mapA = a.map((item, index, arr) => {
    
      console.log(item, index, arr)
      return item * 2
    })
    console.log(mapA)

Output ：

2. An array of objects

    const c = [
      {
    
        key: 'key1',
        value: 'value1',
      },
      {
    
        key: 'key2',
        value: 'value2',
      },
    ]
    const mapC = c.map((item, index, arr) => {
    
      console.log(item, index, arr)
      let res = this.$deepCopy(item)
      res.value += index
      return res
    })
    console.log(c)
    console.log(mapC)

Output ：

So in fact map Not only can I traverse arrays , You can also return a new array .

3. Modify simple array contents

    const a = [ 5, 7, 10, ]
    const mapA = a.map((item, index, arr) => {
    
      console.log(item, index, arr)
      arr[index] = item * 2
      return item * 2
    })
    console.log(a)
    console.log(mapA)

Output ：

4. Modify the contents of the object array

    const c = [
      {
    
        key: 'key1',
        value: 'value1',
      },
      {
    
        key: 'key2',
        value: 'value2',
      },
    ]
    const mapC = c.map((item, index, arr) => {
    
      console.log(item, index, arr)
      let res = item
      res.value += index
      return res
    })
    console.log(c)
    console.log(mapC)

Output ：

so , Object array in the process of traversal , Modifying the value of the attribute can affect the original array

map For other uses of, see file

Two 、forEach

1. Simple array

    const a = [ 5, 7, 10, ]
    a.forEach((item, index, arr) => {
    
      arr[index] = item * 2
      console.log(item, index, arr)
    })
    console.log(a)

Output ：

2. An array of objects

    const c = [
      {
    
        key: 'key1',
        value: 'value1',
      },
      {
    
        key: 'key2',
        value: 'value2',
      },
    ]
    c.forEach((item, index, arr) => {
    
      console.log(item, index, arr)
      item.value += index
    })
    console.log(c)

Output ：

so , Object array in the process of traversal , Modifying the value of the attribute can affect the original array

3.forEach() Of continue And break

See documentation

---