javascript数组常用方法合集

1.map()方法

如果需要一个数据–map()方法

 <script>
      var obj = [
        {
          age: 11,
          name: 'aaa'
        },
        {
          age: 22,
          name: 'bbb'
        },
        {
          age: 33,
          name: 'ccc'
        }
      ]
      var newobj = obj.map(function (item, index, arr) {
        console.log(item) // 当前数组中的第几个成员 {age: 11, name: "aaa"}
        console.log(index) //当前项的索引值 0
        console.log(arr) // 返回调用map方法的数组本身 (3) [{…}, {…}, {…}]
        return item.name
      })
      console.log(newobj) // ["aaa", "bbb", "ccc"]
      
      varobj1 = obj.map((item) => item.name) // es6写法
      console.log(varobj1) //  ["aaa", "bbb", "ccc"]
    </script>

2.reduce()方法

如果需要一个数据–map()方法

语法
arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）=>相当与map里的第一个元素item
3、index （当前元素在数组中的索引）=>相当于map里的第二个元素index,返回索引值
4、array （调用 reduce 的数组）=>相当于map里的第三个元素arr,返回整个数组
initialValue （作为第一次调用 callback 的第一个参数。）

它之所以叫做累加器,就是因为他可以将上一次所循环到的值,给放到下一次循环的累加器当中,参与进行运算

例1如果reduce没有第二个参数
var arr = [0, 1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum); 
//0 1 1
//1 2 2
//3 3 3
//6 4 4      累加器6+最后一个元素4=10

prev(累加器)就是当前数组遍历的第一个元素也就是0,在第一次遍历调用的的时候,直接将0作为当前的初始值,遍历当前项的时候,也就是从1开始遍历
第二次循环的时候,累加器也就是第一次循环的结果.
所以这个函数做的事情通俗的讲就是,初次累加器的结果为0,然后在遍历每一个数组元素的时候,拿到当前的每一项,和上一次累加的结果相加.=>也就是0+1,累加器的结果为1,然后遍历2,2+2=3,累加器的值为3,然后遍历3,3+3=6,累加器的结果为6

例2如果reduce有第二个参数
var arr = [0, 1, 2, 3, 4]
      var sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index)
        return prev + cur
      },10)
      console.log(arr, sum)
//10 0 0
// 10 1 1
//11 2 2
// 13 3 3
//16 4 4   累加器16+最后一个元素4=20

初始值直接作为当前累加器的结果,把他放到累加器当中,然后从第0项(索引为0)开始遍历,运算的方式大致和没有第二个参数的运算方式一样

reduce简单用法:

求和,求乘积
var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

计算数组中每个元素出现的次数
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

数组去重
let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

将二维数组转化为一维
let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

将多维数组转化为一维
let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

如果数组arr为空且没有第二个值,则会报错,但是如果arr为空但有第二个值,就不会报错,所以初始化给值会更安全.

3.filter()方法

如果需要过滤结果–filter()方法

 // 遍历obj里面的所有值,找到符合的返回,不符合的被过滤
  var obj3 = obj.filter((item) => item.name === 'aaa')
      console.log(obj3)    //  {age: 11, name: "aaa"}

4.splice()方法

splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。
删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2)会删除数组中的前两项。

var arr = [1, 2, 3, 4, 5, 6]
      var arr1 = arr.splice(0, 3)
      console.log(arr) //[4, 5, 6] 原数组删除后剩余的元素
      console.log(arr1) //[1, 2, 3] 返回删除的元素

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。例如，splice(2,0,888)会从当前数组的位置 2 开始插入888。
splice()方法始终都会返回一个数组，该数组中包含从原始数组中删除的项，如果没有删除任何项，则返回一个空数组。

var arr = [1, 2, 3, 4, 5, 6]
      var arr2 = arr.splice(2, 0, 888)
      console.log(arr) // []
      console.log(arr2) // [1, 2, 888, 3, 4, 5, 6]

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,888)会删除当前数组位置 2 的项，然后再从位置 2 开始插入888

var arr = [1, 2, 3, 4, 5, 6]
      var arr2 = arr.splice(2, 1, 888)
      console.log(arr) // [3]
      console.log(arr2) // [1, 2, 888, 4, 5, 6]

5.indexOf()和 lastIndexOf() （ES5新增）

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。

var arr = [1, 2, 3, 4, 5, 6, 7]
      console.log(arr.indexOf(3)) //2 从索引为0开始找元素为3返回找到元素的索引
      console.log(arr.indexOf(3, 1)) //2 从索引为1开始找元素为3值 返回索引
      console.log(arr.indexOf(8, 1)) //-1 从索引为1开始找值为8的元素,找不到返回-1

lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。

var arr = [1, 2, 3, 4, 5, 6, 7]
      console.log(arr.lastIndexOf(5)) //4 从后往前找值为5的元素的索引并返回
      console.log(arr.lastIndexOf(3, 4)) //2 从倒数第四个开始往前找值为3的索引并返回
      console.log(arr.lastIndexOf(8, 1)) //-1 从倒数第一个开始找值为8的索引,找不到返回-1

这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

6.join()方法

join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用逗号为分隔符，该方法只接收一个参数：即分隔符。

  var arr = [1, 2, 3]
      console.log(arr.join()) // 1,2,3 不传值,默认以逗号分隔
      console.log(arr.join('-')) //1-2-3 传入- 以-为分隔符

7.push()和pop()方法

push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

  var arr = ['1', '2', '3', '4', '5']
      var arr1 = arr.push('6', '7')
      console.log(arr) // ["1", "2", "3", "4", "5", "6", "7"]在原数组在后面依次增加
      console.log(arr1) //7 返回增加后数组的长度 

pop()：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
注意：pop（）里面没有参数，及时有参数，也是删除最后一项。

var arr = ['1', '2', '3', '4', '5']
var arr1 = arr.pop()
      console.log(arr) //["1", "2", "3", "4"] 只删除最后一个值 
      console.log(arr1) //5 返回删除元素的值 

8.shift() 和 unshift()方法

shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。

var arr = ['c', 'd', 'e']
var arr2 = []
var arr1 = arr.shift()
var arr3 = arr2.shift()
      console.log(arr) //['d','e'] 删除元素组开头的属性
      console.log(arr1) // c 返回删除的值
      console.log(arr2) //[] 空值删除第一个还是空值
      console.log(arr3) //undefined 空值删除第一个返回undefined 

unshift():将参数添加到原数组开头，并返回数组的长度 。

var arr = ['c', 'd', 'e']
      var arr1 = arr.unshift('a', 'b')
      console.log(arr) // ["a", "b", "c", "d", "e"] 在原数组开头依次添加
      console.log(arr1) // 5 返回新数组的长度

9.sort()方法

sort()：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。

var arr1 = [11, 35, 4, 24, 51]
var arr2 = ['a', 'c', 'e', 'b', 'd']
var arr3 = arr1.sort()
var arr4 = arr2.sort()
      console.log(arr3) //[11, 24, 35, 4, 51] 
      console.log(arr4) //["a", "b", "c", "d", "e"] 从前往后排序

注意: 如果是数字,就没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数

var arr1 = [11, 35, 4, 24, 51]
function sortNumber(a, b) {
        return a - b
      }
   var arr3 = arr1.sort(sortNumber)
   console.log(arr3) //[4, 11, 24, 35, 51]   

10.reverse()方法

reverse()：反转数组项的顺序。

 var arr1 = [1, 22, 3, 5, 75, 3, 7]
      var arr3 = ['a', 'e', 'd', 'h', 'k']
      var arr2 = arr1.reverse()
      var arr4 = arr3.reverse()
      console.log(arr2) //[7, 3, 75, 5, 3, 22, 1]
      console.log(arr4) //["k", "h", "d", "e", "a"]

11.concat()方法

concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr1 = [1, 3, 15, 6, 8, 9]
      var arr2 = arr1.concat(11, [46, 14])
      console.log(arr1) // [1, 3, 15, 6, 8, 9] 元素组没有被修改
      console.log(arr2) //[1, 3, 15, 6, 8, 9, 11, 46, 14] 返回新数组

12.slice()方法

语法:arrayObject.slice(start , end)
start =>必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end =>可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

var arr1 = [1, 3, 5, 66, 34, 77, 4]
      var arr2 = arr1.slice(1) 
      var arr3 = arr1.slice(1, 4) 
      var arr4 = arr1.slice(2, -3) 
      var arr5 = arr1.slice(-5, -2) 
      console.log(arr1) //[1, 3, 5, 66, 34, 77, 4] 元素组不变
      console.log(arr2) //[3, 5, 66, 34, 77, 4] 一个参数,找出索引为1到最后
      console.log(arr3) //[3, 5, 66] 两个参数,找出索引1-4之间的元素,不包含4
      console.log(arr4) //[5, 66] 第二个值为负数,截止数就从后往前数 即:索引2-4之间不包含4
     console.log(arr5) //[5, 66, 34] 两个都为服,就开始和截止都从后往前数,即:索引2-5之间的,不包含6

13.forEach() （ES5新增）

14.every() （ES5新增）

15.some() （ES5新增）