JavaScript数组方法汇总

  数组的方法经常在项目中用到，但有的方法及注意事项可能会有所遗忘，所以，在这里简单的汇总记录下

• arr.push() 从后面添加元素，返回值为添加完后的数组的长度

    let arr = [1, 2, 3, 4]
    console.log(arr.push(5)) // 5
    console.log(arr) // [1, 2, 3, 4, 5]
  

• arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素

    let arr = [1, 2, 3, 4]
    console.log(arr.pop()) // 4
    console.log(arr) // [1, 2, 3]
  

• arr.unshift() 从前面添加元素, 返回值是添加完后的数组的长度

    let arr = [1, 2, 3, 4]
    console.log(arr.unshift(5)) // 5
    console.log(arr) // [5, 1, 2, 3, 4]
  

• arr.shift() 从前面删除元素，只能删除一个 返回值是删除的元素

    let arr = [1, 2, 3, 4]
    console.log(arr.shift()) // 1
    console.log(arr) // [2, 3, 4]
  

• arr.splice(i,n) 删除从i(索引值)开始之后的n个元素。返回值是删除的元素

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.splice(2,2)) // [3, 4] 
    console.log(arr) // [1, 2, 5]
  

• arr.concat() 连接两个数组 返回值为连接后的新数组，并且不会改变原数组

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.concat([6, 7])) // [1, 2, 3, 4, 5, 6, 7]
    console.log(arr) // [1, 2, 3, 4, 5]
  

• arr.sort() 将数组进行排序,返回值是排好的数组，默认是将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的，不是按照数字大小排序的

    let arr = [2, 10, 6, 1, 4, 22, 3]
    console.log(arr.sort()); // [1, 10, 2, 22, 3, 4, 6]
    console.log(arr.sort((a, b) => a - b)); // [1, 2, 3, 4, 6, 10, 22]
    console.log(arr.sort((a, b) => b - a)); // [22, 10, 6, 4, 3, 2, 1]
  

• arr.reverse() 将数组反转,返回值是反转后的数组

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.reverse())
    console.log(arr)
  

• arr.slice(start,end) 切去索引值start到索引值end的数组，不包含end索引的值，返回值是切出来的数组

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.slice(1, 3)) // [2, 3]
    console.log(arr) // [1, 2, 3, 4, 5]
  

• arr.forEach((value, index, array) => {}) 遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组

    let arr = [1, 2, 3, 4, 5]
    arr.forEach((value, index, array) => {
      console.log(`value：${value}, index：${index}, array：${array}`)
    })
    /*
      value：1, index：0, array：1,2,3,4,5
      value：2, index：1, array：1,2,3,4,5
      value：3, index：2, array：1,2,3,4,5
      value：4, index：3, array：1,2,3,4,5
      value：5, index：4, array：1,2,3,4,5
    */
  

    let arr = [1, 2, 3, 4, 5]
    arr.forEach((value, index, array) => {
      value = value * 2
      console.log(`value：${value}, index：${index}, array：${array}`)
    })
    console.log(arr)
    /*
      value：2, index：0, array：1,2,3,4,5
      value：4 index：1, array：1,2,3,4,5
      value：6, index：2, array：1,2,3,4,5
      value：8, index：3, array：1,2,3,4,5
      value：10, index：4, array：1,2,3,4,5
  
      [1, 2, 3, 4, 5]
    */
  

    let arr = [1, 2, 3, 4, 5]
    let res = arr.forEach((value, index, array) => {
      arr[index] = value * 2
      return arr
    })
    console.log(arr) // [2, 4, 6, 8, 10]
    console.log(res) // undefined
  

• arr.map((value, index, array) => {}) 映射数组(遍历数组),有 return 返回一个新数组。

    let arr = [1, 2, 3, 4, 5]
    let res = arr.map((value, index, array) => {
      value = value * 2
      console.log(`value：${value} index：${index} array：${array}`)
      return value
    })
    console.log(arr);
    console.log(res);
    /*
      value：2, index：0, array：1,2,3,4,5
      value：4 index：1, array：1,2,3,4,5
      value：6, index：2, array：1,2,3,4,5
      value：8, index：3, array：1,2,3,4,5
      value：10, index：4, array：1,2,3,4,5
  
      [1, 2, 3, 4, 5]
      [2, 4, 6, 8, 10]
    */
  

• arr.filter((value, index) => {}) 过滤数组，返回一个满足要求的数组

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.filter((value, index) => value < 4 )) // [1, 2, 3]
  

• arr.every((value, index) => {}) 依据判断条件，数组的元素是否全满足，若满足则返回 ture

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.every((value, index) => value < 3)) // false
    console.log(arr.every((value, index) => value < 6)) // true
  

• arr.some((value, index) => {}) 依据判断条件，数组的元素是否有一个满足，若有一个满足则返回 ture

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.some((value, index) => value < 3))
    console.log(arr.some((value, index) => value > 6))
  

• arr.reduce((previousValue, currentValue, index, array) => {} , initialValue) 迭代数组的所有项，累加器，数组中的每个值（从左到右）合并，最终计算为一个值

    let arr = [1, 2, 3, 4, 5]
    let res = arr.reduce((preValue, curValue) => preValue += curValue)
    console.log(res) // 15
  

  reduce的高级用法

• arr.reduceRight((previousValue, currentValue, index, array) => {}, initialValue) 与arr.reduce()功能一样，不同的是，reduceRight()从数组的末尾向前将数组中的数组项做累加。

    let arr = [1, 2, 3, 4, 5]
    let res = arr.reduceRight((preValue, curValue) => preValue += curValue)
    console.log(res) // 15
  

  参考： reduceRight和reduce

• arr.indexOf() 查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1

    let arr = [1, 2, 3, 4, 5, 6, 6]
    console.log(arr.indexOf(2)) // 1
    console.log(arr.indexOf(6)) // 5
    console.log(arr.indexOf(7)) // -1
  

• arr.lastIndexOf() 和arr.indexOf()的功能一样，不同的是从后往前查找

    let arr = [1, 2, 3, 4, 5, 6, 6]
    console.log(arr.lastIndexOf(2)) // 1
    console.log(arr.lastIndexOf(6)) // 6
    console.log(arr.lastIndexOf(7)) // -1
  

• Array.from() 将伪数组变成数组，就是只要有length的就可以转成数组。 ---es6

    let str = '123456'
    console.log(Array.from(str)) // ['1', '2', '3', '4', '5', '6']
    let obj = {0:'a', 1:'b', length:2}
    console.log(Array.from(obj)) // ['a', 'b']
    let obj = {0:'a', 1:'b'}
    console.log(Array.from(obj)) // []
  

• Array.of() 将一组值转换成数组，类似于声明数组 ---es6

    let str = '123456'
    console.log(Array.of(str)) // ['123456']
  

• arr.find(((value, index, array) => {})) 找到第一个符合条件的数组成员

    let arr = [1, 2, 3, 4, 5, 6, 6]
    console.log(arr.find((value, index) => value === 3)) // 3
  

• arr.findIndex((value, index, array) => {}) 找到第一个符合条件的数组成员的索引值

    let arr = [1, 2, 3, 4, 5, 6, 6]
    console.log(arr.findIndex((value, index) => value === 6)) // 5
  

• arr.fill(target, start, end) 使用给定的值，填充一个数组, 填充完后会改变原数组
  参数： target -- 待填充的元素
  　　　 start -- 开始填充的位置-索引
  　　　 end -- 终止填充的位置-索引（不包括该位置)

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.fil(5, 1, 3)) // [1, 5, 5, 4, 5]
    console.log(arr.fill(5, 2)) // [1, 2, 5, 5, 5]
    console.log(arr.fill(5)) // [5, 5, 5, 5, 5]
    console.log(arr) // [5, 5, 5, 5, 5]
  

• arr.includes() 判断数中是否包含给定的值 该方法校验类型

    const arr = ['1', '2', '3', 4, 5, '6', 6]
    console.log(arr.includes('1')) // true
    console.log(arr.includes('2')) // true
    console.log(arr.includes('4')) // false
    console.log(arr.includes(5))   // true
    console.log(arr.includes('6')) // true
    console.log(arr.includes(6))   // true
  

  • indexOf()的区别：
    1. indexOf()返回的是数值，而includes()返回的是布尔值
    2. indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断

• arr.keys() 遍历数组的键名

    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.keys();
    for (const iterator of arr1) {
      console.log(iterator)
    }
    // 0 1 2 3 4
  

• arr.values() 遍历数组键值

    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.values();
    for (const iterator of arr1) {
      console.log(iterator)
    }
    // 1 2 3 4 5
  

• arr.entries() 遍历数组的键名和键值, 返回迭代数组, 迭代数组中每个值 前一个是索引值作为 key， 数组后一个值作为 value。

    let arr = [1, 2, 3, 4, 5]
    let arr1 = arr.entries();
    for (const iterator of arr1) {
      console.log(iterator)
    }
    // [0,1] [1,2] [2,3] [3,4]
  

• arr.copyWithin() 在当前数组内部，将指定位置的数组复制到其他位置，会覆盖原数组项，返回当前数组
  参数: target --必选 索引从该位置开始替换数组项
  　 　 start --可选 索引从该位置开始读取数组项，默认为0.如果为负值，则从右往左读。
  　　 end --可选 索引到该位置停止读取的数组项，默认是Array.length,如果是负值，表示倒数

    let arr = [1, 2, 3, 4, 5]
    console.log(arr.copyWithin(1)) // [1, 1, 2, 3, 4]
    console.log(arr.copyWithin(1, 2)) // [1, 3, 4, 5, 5]
    console.log(arr.copyWithin(1, -2)) // [1, 4, 5, 4, 5]
    console.log(arr.copyWithin(1, 2, 3)) // [1, 3, 3, 4, 5]
    console.log(arr.copyWithin(1, 2, -3)) // [1, 3, 3, 4, 5]
    console.log(arr.copyWithin(1, 2, -3)) // [1, 2, 3, 4, 5]
    console.log(arr.copyWithin(1, 2, -2)) // [1, 3, 3, 4, 5]