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