JavaScript基础系列（一）数组的方法总结

提到js中的数组，大家一定不陌生，这篇文章就来总结一下数组常用的方法介绍以及使用技巧

1.push()方法

push方法的意思呢是向原数组的末尾增加一个或多个新元素，这里面有几点细节需要注意。第一，push可以增加一个或几个，并且如果添加多个的时候是按照顺序追加在末尾，第二，只能追加在最后面。第三，这个方法改变了原数组，而不是新建一个数组，用法示例如下：

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

2.unshift()方法

这个方法与push正好相反，unshift是向数组开头添加一个或多个元素，需要注意的点呢和push一样，unshift本质上也是修改原数组而不是新建数组。

var arr=[1,2,3,4];
arr.unshift(0,5,6);
console.log(arr);//[0, 5, 6, 1,2, 3, 4]

3.pop()方法

pop()方法的意思是删除数组的最后一项，pop在英文中意为“弹出”就是指把最后的元素弹出原数组。注意这个方法只能是弹出数组最末尾的一个元素，不能是多个，也不能不是末尾。而且这个方法不需要传参，传参也无效。另外，pop()方法会返回你弹出的那个元素的值。用法示例如下

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

4.slice()方法

slice()方法的意思是，从数组中选取一部分元素，组成一个新数组返回，这点需要特别注意，它相当于复制了原数组中的一部分，并不会修改原数组。这个方法在使用的时候要提供两个参数，slice(开始索引，结束索引)。即你想要选取的数组元素对应的下标的起始范围。用法如下：

var arr=[1,2,3,4];
var newarr=arr.slice(0,2)
console.log(newarr);//[1,2]
console.log(arr);//[1,2,3,4]，可以看到这个方法并没有改变原数组

5.splice()方法

这个方法的意思是切掉（删除掉）数组中的一个或几个元素。用法是splice(元素/索引，从这个元素开始你要删除几个)。很简单，就是选择你要从什么地方开始删，从这个地方往后你要删几个。

注意这个方法也是能够改变原数组的。它是从原数组里面“切掉”一部分元素，组成一个新的数组返回。原数组同时也发生了变化。用法如下：

var arr=[1,2,3,4];
var newarr=arr.splice(0,2)
console.log(newarr);//[1,2]
console.log(arr);//[3,4]

6.join()方法

这个方法可以将数组内的所有元素拼接成一个字符串，这个方法可以传一个参数，就是你想用什么将数组内的元素连接起来例如join('——')，意思是用——把他们都连接起来。这个方法返回的是一个字符串（string类型）而不是一个新数组，并且他也不会改变原数组。用法如下：

var arr=[1,2,3,4];
var newarr=arr.join('——')
console.log(newarr);//1-2-3-4
console.log(arr);//[1，2，3,4]

7.shift()方法

shift()方法的意思是删除数组的第一个元素，返回删除的第一个元素。同样也能够改变原始数组。用法如下：

var arr=[1,2,3,4];
var newarr=arr.shift()
console.log( newarr);//1
console.log(arr);//[2，3,4]

8.concat()方法

这个方法的用处在于他能够将两个数组合并成一个新数组，结果呢可想而知肯定是返回一个新数组，而且原数组应该也不会发生改变。用法及结果如下：

var arr=[1,2,3,4];
var str=['avb','ccv','wer']
var newarr=arr.concat(str);
console.log( newarr);//[1,2,3,4,'avb', 'ccv', 'wer']
console.log(arr);//[1,2,3,4]
console.log(str);//[ 'avb', 'ccv', 'wer' ]

9.includes()方法

这个方法用来检索数组中包含那个特定元素它的参数可以有两个，第一个参数是想要检索的内容，第二个参数是索引，意思是从哪个位置开始检索，比如给定一个数组array[1,2,3,1,3]我想查找1，但我不想从最开头查，我想从第2个元素开始往后查，那就可以写array.includes(1,1)，当然你也可以不传第二个参数，只写要查找谁也可以，注意这个方法返回的并不是你要查找的那个元素，而是一个布尔值，如果你要检索的元素存在，就返回true，否则返回false。具体用法如下：

 let array=[1,2,3,4,5,1,2];
 console.log(array.includes(1,2));

10.forEach()方法

这个方法是用来遍历操作数组中的元素，方法的参数可以是个函数，那么当数组调用foreach的时候会向函数中传递三个值，第一个参数是当前的值，第二个参数是当前索引，第三个参数是整个数组元素，利用foreach呢就能够完成类似于累加求和，批量修改等操作。我们来看一下具体的用法：

var arr=[1,2,3,4,5,3,2,6];
arr.forEach(function fun(currentValue,currentIndex,item){
console.log(currentValue);//12345326注意这里是一次一次打印出来的，一次只打印一个元素
console.log(currentIndex);//01234567
console.log(item);

/*打印七次这个数组对象
  [
    1, 2, 3, 4,
    5, 3, 2, 6
  ]   x 7
  */
});

接下来我们看一下利用foreach来进行求和操作

var arr=[1,2,3,4,5,3,2,6];
var sum=0;
arr.forEach(function fun(currentValue,currentIndex,item){
         sum+=currentValue;
        
});
console.log(sum) ;

11.map()方法

这个方法和forEach()方法很像，map()方法返回一个新数组，也就是说不会操作原数组。另外map()方法的参数是map(function(currentval,currentindex,item){ },thisvalue),和foeeach相比增加了一个回调函数所使用的参数thisvalue,它可以用作回调函数的this指向。还要注意的是map方法执行完成之后是产生了一个新数组而不是在原来的数组上改变。具体我们来看一下怎么使用：例如现在要对数组里的每个元素都扩大5倍：

var arr=[1,2,3,4,5,3,2,6];
var newarray=arr.map((currentValue,currentIndex,item)=>{
        
    return currentValue * 3;     
        
});
console.log(newarray);//[3,6,9,12,15,9,6,18]

12.filter()方法

这个方法和map，foreach都很像，参数基本上一致。但是在使用效果上有很大的区别就比如我现在要找出数组里大于某一个元素的一些值，并把这些值组成一个新数组返回，就可以用filter方法：

var arr=[1,2,3,4,5,3,2,6];
var newarray=arr.filter((currentValue,currentIndex,item)=>{
       
 return currentValue > 3;
        
});
console.log(newarray);//[4,5,6]

filter正如他的名字一样，偏重于过滤，能够将数组中满足需求的要素过滤出来。map方法偏重于适配，就比如上面的代码把filter换成map就会返回每个元素的比对结果的bool值，例如1<3他就会返回false，5>3他就会返回true，然后就是一堆true和false组成的新数组。

13.find()方法

还是和上面类似，find方法的参数和上面三个方法参数一致，但是find返回的是满足条件的第一个结果，就比如：

var arr=[1,2,3,4,5,3,2,6];
var newarray=arr.find((currentValue,currentIndex,item)=>{
        
    return currentValue > 4;     
        
});
console.log(newarray);//5

14.fill()方法

这个方法很简单，一句话总结就是批量的给数组初始化一些元素，这个是es6对数组新增的方法，听起来好像和push没有什么区别，但是实际区别大了，fill的意思是填充，如果原数组是空数组，就批量把元素填充进去，如果原数组有内容，就覆盖掉原来的内容，写个例子让大家看一下他俩的区别：

var student=[{"name":"张三"},{"name":"李四"},{"name":"王五"}];
student.fill({"name":"赵六"});//[ { name: '张三' }, { name: '李四' }, { name: '王五' }, { name: '赵六' } ]
console.log(student);//[ { name: '赵六' }, { name: '赵六' }, { name: '赵六' } ]

因此以后可以声明一个空数组，在需要的时候用fill方法将一些内容填充进去。

15.reduce()方法

这个方法很强大，用好了能够完成很多任务。和之前的四个方法不同，reduce方法新增了一些参数，例如在参数中新增了prevalue，这个怎么理解呢，就是上一次函数执行时的返回值，这个方法的参数表列如下：

reduce(function(prevalue,curvalue,curindex,item){},initvalue)相信大家也能够理解，参数分别是上一次返回值，当前值，当前索引，当前数组全体成员，initvalue是一个初始值，可以自己设定可以是一个计数器，每次执行累加，也可以是一个空数组用来接收新的内容。

先来看一个简单的例子，统计数组中元素出现的次数

//写一个方法来统计，它的两个参数分别是需要统计的数组，和你需要统计的元素
function countArray(arr,element){

    return arr.reduce((count,cur)=>{
//利用preValue的循环便利特性，这里让preValue的初始值是0，每次执行函数时，若满足条件就让它加1
             if(cur==element)
             {
                 count+=1;
                
             }
             return count;//函数的返回结果
    },0)
}
  
  let numbers = [1, 2, 3, 1, 5];
  console.log(countArray(numbers, 1)); //2

在看一个例子，利用reduce去除数组中的重复元素：

//传入一个数组
function countArray(arr){
//准备一个空数组作为每次函数执行的返回值
    return arr.reduce((newarry,cur)=>{
//判断这个空数组里是否包含被传入数组的当前元素，如果不包含的话，就把当前元素追加进新数组里
        if(newarry.includes(cur)==false)
        {
              newarry.push(cur);
        }   
        return newarry;  
    },[])//空数组作为初始值
}
  
  let numbers = [1, 2, 3, 1, 5];
  console.log(countArray(numbers)); //[1,2,3,4,5]

再如利用reduce查找数组中的最大值

//传进来一个数组
function findMax(arr){
    return arr.reduce((pre,cur)=>{
    
      return  pre>cur?pre:cur;
/*
注意从数组的第0个元素开始，这点很关键，
依次往后遍历，条件很简单，比较上一次的返回
结果和这一次的当前值，看谁大就返回谁
*/
  
    },arr[0])
}
  
  let numbers = [1, 2, 3, 1, 5];
  console.log(findMax(numbers)); //5

再如查找数组中符合某一条件的元素，例如：返回数组中所有大于3的元素

function findSomething(arr,condition){
    return arr.reduce((newarry,cur)=>{
    if(cur>condition)
    {
        newarry.push(cur);
    }

   return newarry;

    },[])
}
  
  let numbers = [1, 2, 3, 1, 5,6];
  console.log(findSomething(numbers,3)); //[5,6]

16.flat()方法

这个方法是es6新增的方法，用来处理数组扁平化的问题，例如把一个二维数组转化成一维数组，也就是数组的降维操作，具体用法如下：

  let numbers = [1, 2, 3, 1, 5,6,[7,8,9]];
  console.log(numbers.flat()); //[1,2,3,4,5,6,7,8,9]

17.reverse()方法

正如它的名字那样非常简单就是将数组内容反转，注意数字和字符串类型的数组都可以进行反转

具体使用如下：

let strings=['aaa','bbb','ccc','ddd']
  console.log(strings.reverse()); //[ 'ddd', 'ccc', 'bbb', 'aaa' ]

18.sort()方法

 let numbers = [1, 2, 3, 1, 5,6];
  function rule(a,b){
      return a-b;

  }
  function rule2(a,b){
      return b-a;

  }
  console.log(numbers.sort(rule));//[ 1, 1, 2, 3, 5, 6 ]
console.log(numbers.sort(rule2)); //[ 6, 5, 3, 2, 1, 1 ]