JavaScript 數組基本操做

時間 2019-11-17

原文原文鏈接

簡介

數組操做不管是在JavaScript中仍是在其餘語言中都是很常見、常常會用到的，如今我把JavaScript 數組基本操做整理一下，供你們參考學習。裏邊包含我本身的看法以及案例，但願可以幫助你們，使用的是ECMAScript 5。php

字符串與數組轉換

有時候咱們須要把字符串進行轉換爲數組，則須要split方法，把數組轉換爲字符串則須要join方法前端

var star="js,php,java,c++";
star=star.split(",");
console.log(star);//["js", "php", "java", "c++"]

split() 方法用於把一個字符串分割成字符串數組，接收兩個參數具體使用說明看下圖java

join() 方法用於把數組中的全部元素放入一個字符串。c++

元素是經過指定的分隔符進行分隔的。面試

var star=["js","php","java","c++"];
star=star.join("");//直接轉換爲字符串不加分隔符號
console.log(star);//jsphpjavac++

ECMAScript 5的內置方法

push、pop與concat
shift與unshift
reverse與sort
slice與splice
indexOf與lastIndexOf
every與filter
forEach、map與some
reduce與reduceRight

1、push() 方法可向數組的末尾添加一個或多個元素，並返回新的長度。編程

var star=["js","php","java","c++"];
var stars=star.push("go");//把參數從追加到最後
console.log(star);//["js", "php", "java", "c++", "go"]

小技巧：使用push實現兩個數組合並：數組

var arry=["js","php"],arry1=["java","c++"];
    //[].push.apply(arry,arry1);//用push實現兩個數組合並
    //arry.push.apply(arry,arry1);//或者這樣
    Array.prototype.push.apply(arry,arry1);//用push實現兩個數組合並
    console.log(arry);//["js", "php", "java", "c++"]

緣由是：由於apply函數接收兩個參數，第一個是當前的this 指向，第二個是[數組參數]。執行apply時候會遍歷第二個參數依次複製第二個參數內的值。app

pop刪除數組元素最後一位元素jsp

var star=["js","php","java","c++"];
var del=star.pop();//把最後一位刪除，返回是刪除的元素
console.log(del);//c++
console.log(star);//["js", "php", "java"]
//小技巧：或者使用star.length-=1;

在工做中也能夠這樣用，例：函數

    /**
     * 例子
     * @n {Object} 參數列表
     * @callback {Function} 回掉函數
     * */
    function demo(n,callback){
        var arg=[].slice.apply(arguments);//轉換爲數組
        var callfn=arg.pop();//刪除最後一個元素callfn接收刪除的元素。
        callfn();//callback
    };
    
    demo({a:1},function(){
        console.log("callback");
    });

concat方法用於鏈接兩個或多個數組。該方法不會改變現有的數組，而僅僅會返回被鏈接數組的一個副本。

var arry=["js","php"],arry1=["java","c++"];
var arry2=arry.concat(arry1);//實現兩個數組或者多個數組合並
    console.log(arry);//["js", "php"]
    console.log(arry1);//["java", "c++"]
    console.log(arry2);//["js", "php", "java", "c++"]

2、shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。

var arry=["js","php","java","c++"];
var arry2=arry.shift();//刪除數組第一個元素
    console.log(arry);//["php", "java", "c++"]
    console.log(arry2);//js

在工做中用到的時候，例子：

    /**
     * @n {Object} 參數列表
     * @callback {Function} 回掉函數
     * */
    function demo(n,callback){
        var arg=[].slice.apply(arguments);//轉換爲數組
        var new_n=arg.shift();//刪除第一個元素。
        console.log(new_n);//{a:1}
    }
    demo({a:1},function(){
        console.log("callback");
    });

unshift() 方法可向數組的開頭添加一個或更多元素，並返回新的長度。例：

var arry=["js","php","java","c++"];
var arry2=arry.unshift("go");//zai第一個元素前插入一個元素,返回數組的長度。
    console.log(arry);//原始數組更改 ["go", "js", "php", "java", "c++"]
    console.log(arry2);//數組長度 5

3、reverse() 方法用於顛倒數組中元素的順序。註釋：該方法會改變原來的數組，而不會建立新的數組。

var arry=["js","php","java","c++"];
var arry2=arry.reverse();//顛倒數組中元素的順序。
    console.log(arry);//在原始數組，顛倒數組 ["c++", "java", "php", "js"]
    console.log(arry2);//返回顛倒的數組 ["c++", "java", "php", "js"]

好比有時候面試官考察你書寫一個顛倒數組的函數，不用reverse。我是這樣寫的：

Array.prototype.myreverse=function(){
    var _length=this.length;//獲取數組的長度
    //若是長度大於1則進行顛倒順序
    if(_length>1){
        //循環一半數據；
        for(var i=0,tmp;i<Math.floor(_length/2);i++){
            //利用第三方變量交換位置
            tmp=this[i];
            this[i]=this[_length-1-i];
            this[_length-1-i]=tmp;
        }
        return this;
    }else{
        return this;
    }
}

sort() 方法用於對數組的元素進行排序。

沒有參數的時候。

var arry3=["12","3","2","11","6","5","0"];
arry3.sort();
console.log(arry3);//["0", "11", "12", "2", "3", "5", "6"]

var arry3=["12","3","2","11","6","5","0"];
arry3.sort(function(a,b){
    if(a*1<b*1){
        return -1;
    }else if(a*1>b*1){
        return 1;
    }else{
        return 0;
    }
});
console.log(arry3);//["0", "2", "3", "5", "6", "11", "12"]

數組中存儲的是字符串，若是不*1則不會按照數字大寫排序。例以下邊

var arry3=["12","3","2","11","6","5","0"];
arry3.sort(function(a,b){
    if(a<b){ //由於是字符串比較大小按照字符編碼的順序進行排序
        return -1;
    }else if(a>b){
        return 1;
    }else{
        return 0;
    }
});
console.log(arry3);//["0", "11", "12", "2", "3", "5", "6"]

4、slice() 方法可從已有的數組中返回選定的元素。

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.slice(2,4);
console.log(arry3);//["12", "3", "2", "11", "6", "5", "0"]
console.log(arr4);//["2", "11"]

若是第一個參數是負數的話須要注意，第二個參數是無效的。

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.slice(-4);
console.log(arry3);//["12", "3", "2", "11", "6", "5", "0"]
console.log(arr4);//["11", "6", "5", "0"]

splice() 方法向/從數組中添加/刪除項目，而後返回被刪除的項目。

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.splice(2,3);
console.log(arry3);//["12", "3", "2", "0"]
console.log(arr4);//["11", "6", "5"]

刪除替換

var arry3=["12","3","2","11","6","5","0"];
var arr4=arry3.splice(2,3,"22","44");//刪了三個用兩個替換
console.log(arry3);//["12", "3", "2", "0"]
console.log(arr4);//["11", "6", "5"]

5、indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

檢查數組或者字符串中是否包含【檢索的值】，若是存在返回其索引位置。

lastIndexOf則正好與indexOf相反，它是從數組或者字符串末尾開始檢索。

6、every() 方法用於檢測數組全部元素是否都符合指定條件（經過函數提供）。

var arry3=[12,34,4,56,23,9];
var s=arry3.every(function(n){
    return n>10;//用於檢索數組中全部元素都知足大於10時返回true
});
console.log(s);

filter函數對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組。簡單理解就是遍歷數組中的每一項，若是知足條件則返回該項。例：

var arry3=[12,34,4,56,23,9];
var s=arry3.filter(function(n){
    return n>10;//用於檢索數組中全部元素有知足大於10時返回該項。
});
console.log(s);//[12, 34, 56, 23]

注：filter方法不會更改原始數組。

7、forEach對 Array 對象的每一個元素調用指定函數。此函數是靜態的，可在不建立對象實例的狀況下調用。

參數：

method：要對數組中每一個元素調用的函數。

var arry3=[12,34,4,56,23,9];
arry3.forEach(function(v,i,t){//v表明值，i索引，t當前this
    console.log(v);
    console.log(i);
    console.log(t);
});

曾聽前端技術專家說，forEach的效率低，如今我重寫了forEach進行對比發現確實低一點兒。

var arry3=[12,34,4,56,23,9];
for(var i=0;i<1000000;i++){
    arry3.push(i+100);//當數組的長度達到1000000forEach的效率會低
}

var statime=new Date();
Array.prototype.forEachs=function(callback){
    var _length=this.length;
    for(var i=0;i<_length;i++){
        callback(this[i],i,this);
    }
}
arry3.forEachs(function(v,i,t){//v表明值，i索引，t當前this
    //console.log(v);
    //console.log(i);
    //console.log(t);
});
console.log(new Date()-statime,"forEachs---timers");//4 "forEachs---timers"


var statime1=new Date();
arry3.forEach(function(v,i,t){//v表明值，i索引，t當前this
    //console.log(v);
    //console.log(i);
    //console.log(t);
});
console.log(new Date()-statime1,"forEach---timers");//67 "forEach---timers"

效率低了將近17倍。

map相似於filter，只不過map會更改返回數組。例：

var arry3=[12,34,4,56,23,9];
var arry4=arry3.map(function(v,i,t){//v表明值，i索引，t當前this
   return v*v;
});
console.log(arry3);//[12, 34, 4, 56, 23, 9]
console.log(arry4);//[144, 1156, 16, 3136, 529, 81]

some函數與every函數相似，區別在於some對數組的每一項運行給定函數，只要一項知足條件就返回true。而every則是全部項都知足纔會返回true；

var arry3=[12,34,4,56,23,9];
var arry4=arry3.some(function(v,i,t){//v表明值，i索引，t當前this
   return v>50;
});
console.log(arry3);//[12, 34, 4, 56, 23, 9]
console.log(arry4);//true

8、reduce與reduceRight都是歸併數組的方法，都會迭代數組中的每一項，而後構建一個最終返回值。reduce是從第一個開始，reduceRight則是從最後一個開始的。它們一樣接收兩個參數，第一個是每項調用的函數，第二個是做爲歸併的基礎的初始值。（選填）

var arry3=[1,3,4,6,5,2];
var arry4=arry3.reduce(function(prev,v,i,t){//prev前一個值v表明值，i索引，t當前this
   return v+prev;
});
console.log(arry3);//[1, 3, 4, 6, 5, 2]
console.log(arry4);//21

例如：reduceRight

var arry3=[1,3,4,6,5,2];
var arry4=arry3.reduceRight(function(prev,v,i,t){//prev前一個值v表明值，i索引，t當前this
   return v+prev;
},30);
console.log(arry3);//[1, 3, 4, 6, 5, 2]
console.log(arry4);//51

數組排序、去重

簡單數組排序與複合數組排序：代碼以下

/**
     * 功能：數組排序
     * 說明：
     *     1.若是是[1,2,5,4,9,10]這種簡單數組，必須arry，可選bigtosmall
     *     2.若是是複合數組[{a:3},{a:10}] 必須arry，必須bigtosmall，必須key
     * 
     * @arry {Arry} 數組 
     * @bigtosmall {Boolean || false}  從大到小排序
     * @key {String} 數組中值的鍵。例：數組是[{a:3},{a:10}]，按照"a"的值進行排序
     * 
     * return {olddata:data,newdata:data}返回新數組與原始數組
     * */
    function lksort(arry,bigtosmall,key){
        arry=Object.prototype.toString.call(arry)=="[object Array]"?arry:[];//若是傳遞的不是數組給定默認值
        //console.log(arry);
        var i=0,//外出循環
        _length=arry.length-1,//數組長度
        j,//內層循環
        temp,//中間變量
        olddata=[].concat(arry);//原始數組
        //判斷是否複合數組
        if(arry[i] && Object.prototype.toString.call(arry[i])=="[object Object]"){
            if(!key){
                throw("請輸入鍵！");
                return false;
            }
        }        
        for(;i<_length;i++){
            for(j=0;j<_length-i;j++){
                if(key){
                     if(arry[j][key]>arry[j+1][key]){
                        temp=arry[j];
                        arry[j]=arry[j+1];
                        arry[j+1]=temp;
                    }
                }else{
                     if(arry[j]>arry[j+1]){
                        temp=arry[j];
                        arry[j]=arry[j+1];
                        arry[j+1]=temp;
                    }
                }
            }
        }
        
        //若是從大到小排序，則順序顛倒
        if(bigtosmall){
            arry.reverse();
        };
        //返回原始數組，與新數組
        return {
            olddata:olddata,
            newdata:arry
        }
    }

一個循環實現排序，代碼以下，效率不是很高。主要學習的是思想。

    /**
     * 數組排序
     * @arry {Arry}
     * 
     * */
    function lksort1(arry){
        var oldarry=[].concat(arry),//存儲原始數組
        newarry=[],//新數組
        max,//最大值
        index;//索引值
        
        while(arry.length){//判斷數組的長度
            
            max=Math.max.apply(Math,arry);//檢索出來最大數
            index=arry.indexOf(max);//檢索出最大數的位置
            arry.splice(index,1);//刪除最大數
            newarry.push(max);//把最大數添加到新數組
        }
        return {
            oldarry:oldarry,
            newarry:newarry
        }
    };

簡單數組去重與複合數組去重：代碼以下

/**
     * 功能：數組去重
     * 說明：
     *      1.若是是[1,2,5,4,9,10]這種簡單數組，必須arry
     *      2.若是是[{id:3},{id:10}]這種複合數組，必須arry，必須key
     * 
     * @arry {Arry} 數組 
     * @key {String} 數組中值的鍵。例：數組是[{id:3},{id:10}]，按照"a"的值進行去重
     * 
     * return 返回去重的結果
     * */
    function lkremoval(arry,key){
        var newarry=[],//新數組
        i=0,//外層循環使用的i
        length=arry.length,//數組的長度
        j,//內層循環的j
        istrue;//是否存有
        if(key){
            //
            for(;i<length;i++){
                istrue=0;//每一次循環時候設置爲0
                //遍歷新數組中是否包含本條數據
                for(j=0;j<newarry.length;j++){
                    if(arry[i][key]==newarry[j][key]){
                        istrue=1;//若是有istrue賦值爲1
                    }
                };
                istrue?"":newarry.push(arry[i]);//若是沒有，則push進去
            };
        }else{
            //簡單數組去重
            for(;i<length;i++){
                //若是沒有，則push進去
                if(!(newarry.indexOf(arry[i])>-1)){
                    newarry.push(arry[i]);
                }
            };
        }
        
        return newarry;
    }