js中数组方法及分类

数组的方法有很多，这里简单整理下常用的21种方法，并且根据它们的作用分了类,便于记忆和理解.

根据是否改变原数组,可以分为两大类,两大类又根据不同功能分为几个小类

一.操作使原数组改变

 

1.数组的增

　　unshift(data1,data2...) 

　　向数组的首位增加若干个元素,返回新的长度

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

 　　push(data1,data2...)

　　向数组的末位增加若干个元素,返回新的长度

var arr = [1,2,3];
var str = arr.push(6,6,6);      
console.log(str);　　　　　　　 //6(length)
console.log(arr); 　　　　　　　//[1, 2, 3, 6, 6, 6] 原数组改变

 2.数组的删

　　shift()

　　删除并返回数组最前一个元素

var arr = [1,2,3];
console.log(arr.pop());     //1(元素)
console.log(arr);           //[2,3] 原数组改变

　　pop()

　　删除并返回数组最后一个元素

var arr = [1,2,3];
console.log(arr.pop());     //3(元素)
console.log(arr);           //[1,2] 原数组改变

 3.数组的改

　　splice(start,n,data1,data2...)参数可选

　　删除数组中的元素,并添加新的元素

 var arr = ["A","B","C","D","E"];    
console.log(arr.splice(2,0,"a","b"));  //[]
console.log(arr);    　　　　　　　　　　　//["A", "B", "a", "b", "C", "D", "E"] 原数组改变

 4.其他

　　sort()

　　对数组中元素排序(字符方法),默认是升序

var arr = [4,2,3,5,1];
console.log(arr.sort());    //[1, 2, 3, 4, 5]
console.log(arr);           //[1, 2, 3, 4, 5]  原数组改变

　　reserve()

　　反转数组中元素的顺序

var arr = [1,2,3];
console.log(arr.reverse());     //[3,2,1]
console.log(arr);               //[3,2,1]   原数组改变

二.原数组不改变

1.数组转字符

　　toString()

　　将数组转化为字符,相当于不传参的join

var arr=["夜","的","第","七","章"] ;
var str=arr.toString();
console.log(str);　　//夜,的,第,七,章　　原数组不改变

　　join()

　　用指定分隔符将数组转化为字符,若不传参,默认为逗号

 var arr = [1,2,3];
    console.log(arr.join());         //1,2,3
    console.log(arr.join("-"));      //1-2-3
    console.log(arr);                //[1,2,3] 原数组未改变

 

2.数组的遍历

　　forEach()

　　遍历数组;内部接收callback,callback有三个参数,分别为元素,索引,自身,没有返回值

 var arr = ["A","B","C","D","E"];
    var a = arr.forEach(function(value,index,self){
        console.log(value + "--" + index + "--" + (arr === self));
    })
    // 打印结果：
    // A--0--true
    // B--1--true
    // C--2--true
    // D--3--true
    // E--4--true
    console.log(a);     //undefined(没有返回值) 

　　map()

　　遍历并修改,基本等同于forEach,不过可以有返回值

var arr = ["A","B","LC","D","E"];
    var a = arr.map(function(value,index,self){
        return "hi:"+value;
    })
    console.log(a);     //["hi:A", "hi:B", "hi:C", "hi:D", "hi:E"]

 　　filter()

　　遍历并筛选,回调函数内写判断条件,返回符合条件的值组成的数组

 var arr = ["AAA","BBB","CCC","DDD","EEEE"];
    var a = arr.filter(function(value,index,self){
        return value.length > 3;
    })
    console.log(a);   //["EEEE"]

　　 every()

　　遍历并判断,每一项都符合条件返回true,有一项为false时停止,返回false

　　some()

　　遍历并判断(与every相反),只要一项条件符合就返回true,每一项都不符合返回false

var arr =["AAA","BBB","CCCC","DDD","EEEE"];
var a = arr.every(function(value,index,self){
console.log(value + "--" + index + "--" + (arr == self)) 
return value.length < 4; })　
//AAA--0--true BBB--1--true　

var arr =["AAA","BBB","CCCC","DDD","EEEE"]; 
var a = arr.some(function(value,index,self){ 
console.log(value + "--" + index + "--" + (arr == self)) 
return value.length < 4; })　//AAA--0--true

　　 reduce()

　　归并.从数组的第一项开始，逐个遍历到最后，迭代数组的所有项，然后构建一个最终返回的值。

　　reduce(callback,initial) 有两个参数,callback和initial,回调函数内四个值分别是前一项,当前项,索引,自身;initial为初始值,可选

　　reduceRight() : 反向归并,用法和reduce一样,顺序相反

var arr = [10,20,30,40,50];

    var sum = arr.reduce(function(prev,now,index,self){

        return prev + now;

    })

    console.log(sum);    　　//150

var arr = [10,20,30,40,50];
    var sum = arr.reduce(function(prev,now,index,self){
        return prev + now;
    }, 6)　　　　　　　　　　　//初始值6
    console.log(sum);      //156

 

3.其他

　　slice(m,n)

　　从m位开始截取n位元素,当n省略或n=0时,选取元素直到最后一位;

　　m<0或n<0时,表示从最后一位开始算起 

var arr = ["A","B","C","D","E"];
console.log(arr.slice(1,3));         //["B","C"]
console.log(arr.slice(1));           //["B","C","D","E"]
console.log(arr.slice(-4,-1));       //["B","C","D"]
console.log(arr.slice(-2));          //["D","E"]
console.log(arr.slice(1,-2));        //["B","C"]
console.log(arr);                    //["A","B","C","D","E"]

 　　indexOf()

　　从左向右查询值在数组中的位置,返回索引,若没有查到返回-1

　　有两个参数value和start,start表示从第几位开始找

 var arr = ["h","e","l","l","o"];
    console.log(arr.indexOf("l"));        //2
    console.log(arr.indexOf("l",3));      //3
    console.log(arr.indexOf("l",4));      //-1

　　lastIndexOf()

　　从右向左查询值在数组中的位置(与indexOf顺序相反),返回索引,若没有查到返回-1

　　有两个参数value和start,start表示从第几位开始找

    var arr = ["h","e","l","l","o"];
    console.log(arr.lastIndexOf("l"));        //3
    console.log(arr.lastIndexOf("l",3));      //3
    console.log(arr.lastIndexOf("l",1));      //-1

下方是一张整理的表格:

方法名	对应版本	功能	原数组是否改变
pop()	ES5-	删除最后一位，并返回删除的数据	y
shift()	ES5-	删除第一位，并返回删除的数据	y
unshift()	ES5-	在第一位新增一或多个数据，返回长度	y
push()	ES5-	在最后一位新增一或多个数据，返回长度	y
reverse()	ES5-	反转数组，返回结果	y
sort()	ES5-	排序（字符规则），返回结果	y
splice()	ES5-	删除指定位置，并替换，返回删除的数据	y
valueOf()	ES5-	返回数组对象的原始值	n
indexOf()	ES5	查询并返回数据的索引	n
lastIndexOf()	ES5	反向查询并返回数据的索引	n
forEach()	ES5	参数为回调函数，会遍历数组所有的项，回调函数接受三个参数,分别为value，index，self；没有返回值	n
map()	ES5	同forEach，同时回调函数返回数据，组成新数组由map返回	n
filter()	ES5	同forEach，同时回调函数返回布尔值，为true的数据组成新数组由filter返回	n
every()	ES5	同forEach，同时回调函数返回布尔值，全部为true，由every返回true	n
some()	ES5	同forEach，同时回调函数返回布尔值，只要由一个为true，由some返回true	n
reduce()	ES5	归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduce返回	n
reduceRight()	ES5	反向归并，同forEach，迭代数组的所有项，并构建一个最终值，由reduceRight返回	n
concat()	ES5-	合并数组，并返回合并之后的数据	n
join()	ES5-	使用分隔符，将数组转为字符串并返回	n
slice()	ES5-	截取指定位置的数组，并返回	n
toString()	ES5-	直接转为字符串，并返回	n