数组操作方法（包括es6数组的操作方法）[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。

//(1)push()
        //向数组最里面推一个或多个数据
        var arr=[“色”,”等”,”烟”,”雨”];
        arr.push(“而”,’我’,”在”);
        console.log(arr);

    //(2)unshift()
     // 在数组的开头添加一个或多个数据
     var arr=[“色”,”等”,”烟”,”雨”];
     arr.unshift(“天”,”青”);
     console.log(arr);

    
    
    //(3)pop()
       //在数据的尾部删除一个数据
        var arr=[“色”,”等”,”烟”,”雨”];
     arr.pop();
     console.log(arr);

//(4)shift()
     // 在数组的开头删除一个数据

var arr=[“色”,”等”,”烟”,”雨”];
     arr.shift();
     console.log(arr);
    
    
    
    //(5)splice()
    /* arr.splice(参数1,参数2,参数3,参数4,参数5,….参数n);
       参数1表示要删除的开始位置,
       参数2表示删除的个数,
       参数3,参数4,参数5,….参数n,表示在删除位置添加的字符 */

      var arr=[“色”,”等”,”烟”,”雨”];
     arr.splice(1,2,”周”,”杰”,”伦”);
    console.log(arr);

     
    
    
    //(6)concat()
     // 把两个或多个数组连接成一个数组
    var  a=[“八”,”百”,”标”,”兵”,”奔”,”北”,”坡”];
    var  b=[“炮”,”兵”,”并”,”排”,”北”,”边”,”跑”];
    var  c=[“炮”,”兵”,”怕”,”把”,”标”,”兵”,”碰”];
    var  d=[“标”,”兵”,”怕”,”碰”,”炮”,”兵”,”炮”];

    console.log(a.concat(b));  //连接两个数组

 console.log(a.concat(b,c,d)); //连接多个数组
    

 //(7)sort()
         //数组排序方法,默认是按照字符编码逐个字符进行排序
    var  num=[52,51,6,8,42,25];
    console.log(num.sort());
    
   num=num.sort(function(a,b){

        return a-b; //升序排列
    })
     console.log(num);
    num=num.sort(function(a,b){

        return b-a; //降序排列
    })
     console.log(num);

结果分别为：

//(8)join()
     // 按照我们特定的方式（指定字符）把数组转化成字符串
       var arr=[“色”,”等”,”烟”,”雨”];
    console.log(typeof  arr.join(“”));
    console.log(arr.join(“”));
    console.log(arr.join(“*”));

    结果分别为：

    //(9)split()
    //把字符串转化成数组(按照指定的字符进行分割)
    
    var str=”天晴这-等烟-雨”;
        console.log(str.split(”))
        console.log(str.split(‘-‘))    

结果分别为：

/(11)Array.isArray()    判断数据是否是数组

    console.log(Array.isArray([2,3]));
    console.log(Array.isArray((1)));
    
    
/*     (12)forEach() 
     用于遍历我们的数组,对数组中的每一个元素进行操作,没有返回值
     数组.forEach（function(value,index,arr){

         
     }）
     value就是指数组的元素，index指下标。
     arr指当前的数组，这个不常用
      
      */
     
     var score=[26,35,85,45,90,100];
     
    // 打印每个人的序号和分数
     
     score.forEach(function(el,index){

          console.log(index+”—–“+(el+10));
     })
     结果为：

/* (13)Map()

 作用: 对数组进行遍历,进行某个操作,然后返回一个新的数组,
    格式:
    数组.map(function(value,index,arr){

              操作
    })
    
    注意:
     (1)在回调函数中,一定要有返回值
     (2)map方法调用之后,会返回一个全新的数组,原来的数组不变 */
      var score=[26,35,85,45,90,100];
     var score2=score.map(function(val,index){

          return val+30;
     })
     
     console.log(score2);
     
     
    /* (14) filter()  
      作用: 用于进行过滤,筛选出符合条件的元素,组成一个新的数组返回,
      
      格式:
      数组.filter(function(value,index,arr){

          
      })
     
    基本上和map是差不多的 */
    
     var score=[26,35,85,45,90,100];
    var arr=score.filter(function(value,index){

          return value>60;
    })
    
    console.log(arr);
        
            
    /* (15)reduce()
        本意:缩减,减少的意思,
    作用: 将前一项和后一项的值进行运算,返回累积的结果. 
    
    格式:
            数组.reduce(function(prev,next){

                ……
            })
            
    prev 表示前一项,next表示后一项
    
    运算规则:
            默认情况下,会把数组的第一个元素作为prev的初始值. 
            每循环一次,把累积的结果赋值给prev,next就变为下一个
            数组元素 */
    
    var  arr=[1,2,3,4,5];
    
    var sum=arr.reduce(function(prev,next){

         return  prev+next;
    })
            
    console.log(sum);    //结果是：15
        
        var sum=arr.reduce(function(prev,next){

            console.log(prev +”—-“+next);
            return  prev+next;
        })    
        
        console.log(sum);
            
            
        
  

 /* (16)some()
        作用: 只要数组中的某一个元素符合指定的条件,就返回真,
                 否则返回假,可以和逻辑运算符或(||)类比
    
    格式:
            数组.some(function(value,index,arr){….}) */
            
    var pass=score.some(function(value,index){

        return value<60;
    })            
    
    console.log(pass); //结果为:true
    
    /* (17)every()
         作用:如果数组中所有的元素都符合指定的条件,才返回true,否则返回false ,
              可以个逻辑运算符与(&)类比
      格式:
              数组.every(function(value,index,arr){….}) */
            
            
        var pass=score.every(function(value,index){

            return value<60;
        })            
        
        console.log(pass);    //结果为false
      //(18)类数组
     //Array.from() 把类数组转化为数组
    var obj={

          0:”a”,
          1:”b”,
          2:’c’,
          3:’d’,
          length:4
    }        
    console.log(Array.isArray(obj));  //结果为false
        obj=Array.from(obj);
        console.log(obj);                       //结果为[“a”,”b”,”c”,”d”]
    console.log(Array.isArray(obj));    //结果为true          

//(19)
    //new Array()这种方式声明的数组表现不统一,有缺点
     var a1=new Array();
    var a2=new Array(3);  
    var a3=new Array(‘3’);  
    var a4=new Array(3,4);  
    console.log(a1)
    console.log(a2)
    console.log(a3)
    console.log(a4)
    
  

 //使用Array.of之后,表现就统一了,都是定义数组的元素
    var a1=Array.of(); //0
    var a2=Array.of(3); //1
    var a3=Array.of(‘3’);//1
    var a4=Array.of(3,4);

    console.log(a1)
    console.log(a2)
    console.log(a3)
    console.log(a4)

/* (20)find:用于查找某个元素,如果找不到undefined;
       findIndex:用于查找某个元素的索引,如果找不到就返回-1
       其用法和map,foreach差不多 */
       
      

 var  goods=[
                {
                    id:100,
                    name:'奥迪A8',
                    price:88.8
                },
                {
                    id:101,
                    name:'宝马x6',
                    price:98
                },
                {
                    id:102,
                    name:'奔驰s600',
                    price:130
                },
       ]
    
      //find
    var car=goods.find(function(item,index){
        return item.name=='宝马x6'
    })
    
    console.log(car);    // 结果为:    {id: 101, name: "宝马x6", price: 98}
    //findIndex
            var idx=goods.findIndex(function(item,index){
                return item.id==103;
            })
        
        console.log(idx); //结果为-1

    /* (21)fill
        作用:给数据填充指定的值,
        格式:数组.fill(值)
        一般是在实例化一个数组之后进行填充的 */
        
    var a1=new Array(5);
        a1.fill(‘es6’);
        
        console.log(a1); //结果为:[“es6”, “es6”, “es6”, “es6”, “es6”]
        
        //如果数组本身有内容,会被覆盖
    var a2=[2,3,4,5];
        a2.fill(100);
        console.log(a2); // [100, 100, 100, 100]
        
    //在我们填充的时候,可以通过第二个参数和第三个参数来指定填充的起止位置,包括开始位置不包括结束位置
    var a2=[2,3,4,5];
      a2.fill(100,1,2);
      console.log(a2);//结果为：[2, 100, 4, 5]
    
    
    //(5)数组的扩展运算符(延展运算符，展开运算符)…
    
       var obj2={

             0:”a”,
             1:”b”,
             2:’c’,
             3:’d’,
             length:4
       }        
          var a3=[…obj2];  // 把类数组转化数组
       console.log(a3);   //结果为
      
      var  a3=[1,2,3];
      var  a4=[4,5,6];
      //相当于concat方法
      console.log([…a3,…a4]);  // 结果为：[“a”, “b”, “c”, “d”]
      

//(22)set
         //新的格式   自动去除重复的项
       var setobj=new Set([1,2,1,3,4,3,56]);
       console.log(setobj);                   //结果为:{1, 2, 3, 4, 56}
      console.log(Array.from(setobj)); //结果为:[1, 2, 3, 4, 56]
      
    /* (23)indexof ===
         查看数组中是否包含某一项,是就返回下标,否则返回-1 */

    var  colors=[‘orange’,’pink’,’purple’,’aqua’,’black’,”pink”];
          
          console.log(colors.indexOf(‘pink’));  //1
           console.log(colors.indexOf(‘pi’));   //-1
    
    //(24)includes
       // 返回的是一个布尔值:true or  false           
      console.log(colors.includes(“aqu”)); //false

    /* 小结:请列举出js中常用的数组方法:
     push pop unshift sort slice splice reverse join concat 
     forEach Map filter reduce some every find findIndex
     fill Array.isArray  Array.from  Array.of */