在做项目处理数据时，对数组的几个常用方法搞不清楚，这里做一个总结：

  1. 同样是遍历数组，map 和 forEach 有什么区别？-- map 会返回一个新数组，可用于数据处理
  2. 同样是生成新数组，map 和 push 又有什么区别？-- map 不会改变原数组，能返回新数组；而 push 会直接改变原数组。

目录

总结：

map()

forEach()

filter()

push()

splice()

slice()

总结：

数组常用方法

是否改变原数组

返回值

map()

否

新数组

forEach()

否

undefined

filter()

否

新数组

push()

是

新数组的长度

splice()

是

被删除的元素组成的数组

slice()

否

被提取的元素组成的数组

map()

MDN教程对此的解释是：打点调用map方法的这个数组中每一个元素，都会调用一个函数，最终返回一个新数组。

const arr1 = [1, 2, 3]
    const arr2 = arr1.map(i => i * 2)
    // 注意：箭头函数的写法
    const arr3 = arr1.map(i => {
      i * 2
    })
    console.log(arr1)
    console.log(arr2)
    console.log(arr3) //undefined

forEach()

它和forEach()方法的区别是：forEach()虽然也是遍历数组，但不会返回新数组，返回的是 undefined。

var arr = [1, 2, 3]
    var arr1 = arr.forEach(i => i * 2)
    console.log(arr1) // 返回值是 undefined
    console.log(arr)

    var arr2 = arr.forEach(i => console.log(i * 2)) // 打印 2, 4, 6
    console.log(arr2) // 返回值是 undefined
    console.log(arr)

    var arr3 = arr.forEach(i => console.log(i)) // 打印 1, 2, 3
    console.log(arr3) // 返回值是 undefined
    console.log(arr)

注意：forEach() 不会提前提前终止或跳出循环，除非使用抛出异常。

// 抛出异常跳出forEach循环
    try {
      if (true) {
        
      } else {
        throw new Error('这是异常')
      }
    } catch (error) {
      console.log(error)
      return false
    }

filter()

也可以用filter() 过滤出需要处理的数据，再用 forEach() 遍历。

var arr = [1, 2, 3]
    var arr1 = arr.filter(i => i >=2)
    console.log(arr1) // [2, 3]
    console.log(arr)

push()

和 array.push() 的区别是：上述操作数组的方法都不会改变原数组，但 push() 会把一个或多个元素添加到数组的末尾，会改变原数组，并且返回值是新数组的长度。

var arr = [1, 2, 3]
    var out = arr.push(9)
    console.log(out) // 4
    console.log(arr)  // [1, 2, 3, 9]

    var out2 = arr.push('this', 'is', 'an', 'animal')
    console.log(out2) // 8
    console.log(arr) // [1, 2, 3, 9, 'this', 'is', 'an', 'animal']

splice()

array.splice() 也会改变原数组，返回值是被删除的元素构成的新数组。该方法有三个参数：

  • 参数一：start（必选）
  • 从左到右从 0 开始计数（也就是相当于数组的 index 值）；
  • 如果超过了数组的长度，则从数组末尾开始添加元素；
  • 如果为负数，则代表从数组末尾起算的倒数第几位（比如 -1 代表数组的最末位元素）；
  • 如果负数的绝对值大于数组的长度，则开始位置为 0。
  • 参数二：要删除的元素个数
  • 如果为 0 或 负数，则不删除元素；
  • 如果省略，则参数三也不生效。（但MDN说的如下图所示，start后的所有元素都会被删除，实际上没有删掉，还是保持的原数组。这里有些不理解，标记一下）

push方法java push方法和map方法_数组

 

  • 参数三：要添加的一个或多个元素
var arr = ['how', 'are', 'you']
    var arr1 = arr.splice(1, 0, 'dog')
    console.log(arr1) // []
    console.log(arr) // ['how', 'dog', 'are', 'you']

    var arr2 = arr.splice(0, 2, 'hi')
    console.log(arr2) //  ['how', 'dog']
    console.log(arr) // ['hi', 'are', 'you']

    var arr3 = arr.splice(1, 8, 'money', 'cat')
    console.log(arr3) // ['are', 'you']
    console.log(arr) //  ['hi', 'money', 'cat']

    var arr4 = arr.splice(0, 'baby')
    console.log(arr4) // []
    console.log(arr) //  ['hi', 'money', 'cat']

    var arr5 = arr.splice(0, -1, 'baby')
    console.log(arr5) // []
    console.log(arr) //  ['baby', 'hi', 'money', 'cat']

    var arr6 = arr.splice(-1, 1, 'sun')
    console.log(arr6) // ['cat']
    console.log(arr) // ['baby', 'hi', 'money', 'sun']

    var arr7 = arr.splice(-1, 0, 'moon') // 注意：moon 没有在 -1 的位置
    console.log(arr7) // []
    console.log(arr) // ['baby', 'hi', 'money', 'moon', 'sun']

    var arr8 = arr.splice(-5, 0, 'hello')
    console.log(arr8) // []
    console.log(arr)  // ['hello', 'baby', 'hi', 'money', 'moon', 'sun']

    var arr9 = arr.splice(-8, 0, 'show')
    console.log(arr9) // []
    console.log(arr)  // ['show', 'hello', 'baby', 'hi', 'money', 'moon', 'sun']

slice()

slice() 和splice()的区别是：

  1. 是否改变原数组：slice() 不改变原数组；
  2. 参数含义不同：

        slice() 有两个参数：若参数为负数，则表示数组倒数第几位（同splice）

  • 参数一：begin
  • 参数二： end 终止处的索引。提取的片段从begin开始，end终止，包含begin但不包含end。
  • 如果省略或大于数组的长度，则会一直提取到原数组末尾。
// slice() 切割：不改变原数组
    var arr = ['how', 'are', 'you', '?']
    var arr1 = arr.slice(0, 2)
    console.log(arr1) //['how', 'are']
    console.log(arr) //  ['how', 'are', 'you', '?']

    // splice() 接合：会改变原数组
    var arr2 = arr.splice(0, 2)
    console.log(arr2) // ['how', 'are']
    console.log(arr)  // ['you', '?']


    // slice() 用法：
    var arr = ['how', 'are', 'you', '?']
    var arr3 = arr.slice(1, 2)
    console.log(arr3) //['are']
    console.log(arr) //  ['how', 'are', 'you', '?']

    var arr4 = arr.slice(2) // 默认省略的是 end
    console.log(arr4) //['you', '?']
    console.log(arr) //  ['how', 'are', 'you', '?']

    var arr5 = arr.slice(0, 8) 
    console.log(arr5) // ['how', 'are', 'you', '?']
    console.log(arr) //  ['how', 'are', 'you', '?']

    var arr6 = arr.slice(-1) 
    console.log(arr6) // ['?']
    console.log(arr) //  ['how', 'are', 'you', '?']

    var arr7 = arr.slice(-1, 1) 
    console.log(arr7) // ['?']
    console.log(arr) //  ['how', 'are', 'you', '?']

    var arr8 = arr.slice(-1, -3) // 注意：提取只能从左往右，不能反方向
    console.log(arr8) // []
    console.log(arr) //  ['how', 'are', 'you', '?']

    var arr9 = arr.slice(-3, -1) 
    console.log(arr9) // ['are', 'you']
    console.log(arr) //  ['how', 'are', 'you', '?']