javascript中数组基础---方法的使用及分类

在javascript中,数组的使用很重要。数组中的方法有很多,返回的值也不尽相同,我这里做了些

简单的分类及其应用。

按照原数组的变化,我分了两大类:

一.原数组变化的

1.push  尾部添加元素 

可以添加一个或多个元素,添加数组后,不以元素添加        

var arr=[1,2,3];
var arr1=arr.push(4,5,6);
var arr2=arr.push([7,8]) console.log(arr,arr1) // [1,2,3,4,5,6] 6
console.log(arr,arr2) // [1,2,3,[7,8]] 4
//返回数组的新长度

2.unshift   头部添加元素

可以添加一个或多个元素,添加数组后,不以元素添加   (和push的应用一样)

3.pop      尾部删除元素

删除尾部一个元素

var arr=[1,2,3];
var arr1=arr.pop();
console.log(arr,arr1)   //  [1,2]   3 
//返回删除的元素

4.shift  头部删除元素

删除头部一个元素    (和pop的应用一样)

5.splice  添加,删除,替换,清空

可以添加,删除一个或者多个元素,如果添加的是数组,和push一样,都是以数组形式存入,而不是元素。

var arr=[1,2,3];
var arr1=arr.splice(0,2,4,5);   //头部添加
var arr2=arr.splice(-1,0,4,5)      //尾部添加
var arr3=arr.splice(1,2)     //删除
var arr4=arr.splice(0)       //清空    一直向后删除
var arr5=arr.splice(1,1,5)   //替换
// 返回被删除元素组成的新数组,不删除就返回空数组

6.reverse   变换元素顺序

前后顺序变换

var arr=[1,2,3];
var arr1=arr.reverse();
console.log(arr,arr1)   //[3,2,1]   [3,2,1]
//返回新数组(排序后)

7.sort  排序

 从小到大: a-b>0  ->arr[i]-arr[i+1]>0-->arr[i]>arr[i+1]; 

从大到小:b-a>0  ->arr[i+1]-arr[i]>0--->arr[i]<arr[i+1];

 var arr = [1, 5, 3, 2, 7, 4, 7, 15, 6, , 2, 8, 10, 9];

var arr1=arr.sort(function(a,b){
       return a-b;
        });
var arr2=arr.sort(function(a,b){
        return b-a;
        })
//返回新数组(排序后)

二.原数组不变化的

1.concat  拼接,复制

将当前数组与多个元素或者多个数组连接形成新的数组
var  arr=[1,2,3,4];
var arr1=arr.concat(5,6,7);
var arr2=arr.concat([5,6,7]);
var arr3=arr.concat([5,6,7],[8,9,10]);
var arr4=arr.concat(5,6,7.[8,9,10]);
console.log(arr,arr1,arr2,arr3,arr4)   //[1,2,3,4,5,6,7,8,9,10]
//返回新数组
var arr5=arr.concat(); //复制原数组

2.join   连接数组元素

以某个符号连接数组的元素,形成字符串
var arr=[1,2,3,4,5];
var str=arr.join("#");//以#符号连接数组的元素,形成字符串     1#2#3#4#5
var str=arr.join();//默认使用逗号连接数组元素,形成字符串      1,2,3,4,5
var str=arr.join("");//使用空字符连接将会形成元素紧密连接的字符串    12345
//返回元素连接成的字符串

3.indexOf   查询元素

查找某个元素的下标

var arr=[1,2,3,4,5,6];
var index=arr.indexOf(4);
var index=arr.indexOf(7);
console.log(index);          //如果是-1就是没有找到,正数就是下标
//返回的是下标
  if(arr.indexOf(3)>-1){    //大于-1就是找到了,=-1和<-1都是没找到
    console.log("找到了")
      }

4.forEach  遍历数组(不返回)

1)遍历数组,回调函数中有三个参数,每个元素,下标,原数组 ,forEach本身就是函数
2)遍历一个元素,就执行该函数一次
3)forEach只能遍历数组,不能返回
 var arr=[1,2,3];
 arr.forEach(function(item,index,array){
         console.log(item,index,array)
     })
//什么也不返回 非要打印返回,会打印undefined出来

5.map  遍历数组(必须返回)

1)遍历数组,并且使用return返回新元素到新数组中
2)新数组的长度与原数组的长度相同,如果没有使用return,就会返回默认的undefined
var arr=[2,3,,4,5,6];
 var arr1=arr.map(function(item,index,array){
     console.log(item,index,array);        //  [3,4,5,6,7]
      return item+1;
    });
//返回新数组(不管return什么,都是以数组的形式返回)

6.some  遍历和筛选

判断元素中是否有满足回调函数中的条件,如果有就返回true,否则返回false
 var arr=[1,2,3,4,5,6];
 var arr1=arr.some(function(item,index,array){
       console.log(index,item)      //遍历
            return item>4;
        })
  console.log(arr,arr1)     //返回了boolean
//如果满足条件,返回true,不满足false

7.filter   筛选

 var arr=[1,2,3,4,5,6];
 var arr1=arr.filter(function(item,index,array){
         return item%2===0;
     })
 console.log(arr,arr1)     //[1,2,3,4,5,6]    [2,4,6]
//返回满足条件的元素组成的数组

8.reduce 归并

1)arr.reduce(回调函数(归并值,数组元素,索引值,数组),归并初始值)
2)如果没有给归并初始值,value归并值就是数组的第0项,然后从第一项开始遍历
3)如果给了归并初始值,value就是这个归并初始值,然后从第0项开始遍历
var arr=[1,2,3,4,5,6];
var s=arr.reduce(function(value,item,index,array){
    console.log(value,item)
     return value+item;           //可以理解为   value=value+item  
   })                    //value没有给初始值,所以数组第0项是value,item从第一项开始 
console.log(s) // 21
//返回return出去的数值

9.slice   截取

     var arr=[1,2,3,4,5,6];
     var arr1=arr.slice(1,3); //截取下标1和2, 包括开头,但不包括结尾 var arr1=arr.slice();//如果没有任何参数就会从头截取到尾部 var arr1=arr.slice(1);//如果第二个参数没有,就会从开始截取到尾部 var arr1=arr.slice(-3,-1);//如果是负数就会从后向前数,然后再截取 将参数转换为正向数值时,前面的必须小于后面 var arr1=arr.slice(-3,5); console.log(arr1,arr);
    //返回新数组

这篇随笔只是写了些简单的应用,后面会分享这些方法的封装,以及遍历和去重。

原文地址:https://www.cnblogs.com/94-Lucky/p/13264062.html