es6 数组遍历 foreach、map、filter 多层数组深浅拷贝 vue

#foreach
对数组的每一项进行操作，不会产生新数组

	  let arr = [1, 2, 3]
      arr.forEach((item, index, value) => {
        console.log(item) //  每一项的值1,2,3
        console.log(index)  //  每一项的下标0,1,2
        console.log(value)  //  整个数组[1,2,3],[1,2,3],[1,2,3]
      })

#map
会产生一个新的数组需要容器来接收,必须带return

	  let arr = [1, 2, 3]
      let arrs = arr.map((item, index, value) => {
        console.log(item) //  每一项的值1,2,3
        console.log(index)  //  每一项的下标0,1,2
        console.log(value)  //  整个数组[1,2,3],[1,2,3],[1,2,3]
        return item * item
      })
      console.log(arrs) //  [1,4,9]

#filter
也会产生一个新的数组需要容器来接收，只不过return满足条件的值

	  let arr = [1, 2, 3]
      let arrs = arr.filter((item, index, value) => {
        console.log(item) //  每一项的值1,2,3
        console.log(index)  //  每一项的下标0,1,2
        console.log(value)  //  整个数组[1,2,3],[1,2,3],[1,2,3]
        return item >= 3 ? false : true	//	当条件满足则为true才会把这一项即item返回
      })
      console.log(arrs) //  [1,2]

#小麻烦
map和filter在处理多层结构的数组时，其方式是浅拷贝使用时就不太方便，在vue中

data () {
    return {
      arr: [
        {
          id: 1,
          menu: [1,2,3]
        },
        {
          id: 2,
          menu: [1,2]
        },
        {
          id: 3,
          menu: [1,2,3,4]
        }
      ]
    }
  },
mounted () {
	this.test()
},
method: {
	test () {
		let arrs = this.arr.filter(item => {
        console.log(item.id) //	5,2,3并不是1，2，3
        return item.id >= 3 ? false : true
      })
      console.log('before', arrs[0].id)	// 5
      this.arr[0].id = 5	// 这里改变arr中的值会影响到数组的遍历
      console.log(arrs[0].id)	//	5,这里符合浅拷贝，但是上面的原因应该是双向绑定造成的，待考究
	}
}

解决方式可参考这个最后的多层数组深拷贝部分

https://blog.csdn.net/HockJerry/article/details/113561772