1. 程式人生 > >javaScript中陣列的常用方法

javaScript中陣列的常用方法

一、建立陣列的兩種方法:

(1) var arr1 = [1,2];
(2) var arr2 = new Array(1,2);

建立空陣列方法:

    var arr3 = [];
    var arr4= new Array();

注:方法(2)建立陣列時,當引數為一個時候會建立長度為該值的陣列,引數均為undefined;其中空陣列[]為假值。

var arr5 = new Array(3);//[undefined,undefined,undefined];
[] == false;//true

ES6中提供的新方法Array.of()可以將一組值,轉換為陣列,若想建立一個單元素陣列,如下:

Array.of(3);// [3]

二、Array物件為JavaScript內建物件,具有以下屬性:

屬性 描述
constructor 返回對建立此物件的陣列函式的引用。
length 返回陣列中元素的個數
prototype 向物件新增屬性和方法。
arr1.construtor;//function Array(){...}

三、Array物件是JavaScript中內建物件,實際上為建構函式,因此通過建立的新陣列會繼承Array中的屬性和方法,下面說下Array中的方法。

方法 描述
push 向陣列的末尾新增元素,並返回陣列長度
pop 刪除陣列最後一元素,並返回該元素
unshift 向陣列開頭插入元素,並返回陣列新長度
shift 刪除陣列的第一個元素,並返回該元素
concat 用於連線兩個或多個數組,引數可以是具體數值,也可是陣列
join 將陣列轉化為字串,引數即為字串間分隔符
reverse 將陣列元素顛倒
slice 選取陣列中一個連續片段,不改變原陣列,arr.slice(start,end)包含從 start 到 end(不包括該元素)的 arr中的元素,end為可選引數,預設到陣列末尾
splice 刪除或向陣列中新增元素,改變原陣列,並返回刪除元素,若並未刪除元素,則返回空陣列,共三個引數,第一個引數為要刪除/新增元素的起始位置,第二個引數為要刪除元素的個數,第三個為要新增的元素(可選引數)
sort 對陣列進行排序,預設按字元編碼進行排序,引數為函式(該方法在後續陣列排序處會進行詳細說明)

補充ES6中新增方法:Array.of()、Array.from(),陣列例項的copyWithin、find、findIndex、fill、entires、keys、values、includes
詳見大神寫的http://es6.ruanyifeng.com/#docs/array

四、 還有一類物件具有length屬性但並沒有陣列的方法,這類物件就是類陣列物件,常見的類陣列物件有arguments,因此我們可以將類陣列物件轉換為陣列物件,實現方法如下:

var arr5 = Array.prototype.slice.call(arguments);(ES5)
var arr6 = Array.from(arguments);(ES6)

五、對陣列物件的常見操作
1.判斷一個變數是否為陣列物件,有以下常見方法

    1.Object.getPrototypeOf('arr') === Array.prototype;
    2.Object.prototype.toString.apply(value) === '[object Array]'
    3.arr instanceof Array === true;
    4.Array.isArray('arr') === true;
    5.Array.prototype.isPrototypeOf(arr) === true;
    6.obj.constructor==Array||[]

2.遍歷陣列

1.for迴圈
var len = arr.length;
for(var i;i < len;i ++){
    arr[i]
}
2.forEach
var newarr1 = arr.forEach(function(item,index,input){
    //item為陣列中元素,index為陣列arr下表,input為當前陣列
})
3.map
var newarr2 = arr.forEach (function(item,index,input){
    //item為陣列中元素,index為陣列arr下表,input為當前陣列
    return ...//相比於forEach多了一個返回,但同樣不改變原陣列狀態,且在回撥函式中this指向window
})
4.ES6中for...of對鍵、值得遍歷
for (var index of ['a', 'b'].keys()) {
  console.log(index);
}
for (var elem of ['a', 'b'].values()) {
  console.log(elem);
}
for (var [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}

3.陣列排序

3.1氣泡排序

function bubble(arr){
    if(arr == null || arr.length <= 1){return}
    for (var i = 0,len = arr.length;i < len; i++){
        for (var j = len - 1; j > i; j--){
            if(arr[j]<arr[j-1]){
                arr[j] += arr[j-1];
                arr[j-1] = arr[j] - arr[j-1];
                arr[j] =arr[j] - arr[j-1];
            }
        }
    }
    return arr;
}

Array物件內建方法sort的原理即為氣泡排序,也可傳入引數,引數為比較函式,例如:function (a,b){return a-b}

3.2選擇排序

function selectSort(arr){
    if(arr == null || arr.length <= 1){return}
    for (var i = 0, len = arr.length; i < len; i++){
        var minIndex = i;
        for (var j = i + 1; j < len; j++){
            if (arr[j] < arr[minIndex]){
                minIndex = j;
            }
        }
        if (minIndex != i){
            arr[i] += arr[minIndex ];
            arr[minIndex ] = arr[i] - arr[minIndex ];
            arr[i] = arr[i] - arr[minIndex ];
        }
    }
    return arr;
}

3.3插入排序

function insertSort(arr){
    if (arr == null||arr.length <= 1){return}
    for (var i = 0,len = arr.length;i < len;i++){
        var j =i ,target = arr[i];
        while (j > 0 && target <arr[j-1]){
            arr[j] = arr[j-1];
            j--;
        }
        arr[j] = target;
    }
    return arr;
}

3.4快速排序(去重)

function quickSort(arr){
    if(arr == null ||arr.length <= 1){return arr;}
    var left = [],right = [],pivot = arr[0];
    for (var i = 1,len = arr.length;i < len;i++){
        if (arr[i] < pivot){
            left.push(arr[i]);
        }
        if (arr[i] > pivot){
            right.push(arr[i]);
        }
    }  
    return quickSort(left).concat(pivot,quickSort(right))
}
注:若不去重,可將if (arr[i] > pivot)改成else

3.5計數排序

function countSort(arr){
    if (arr == null || arr.length <=1){return}
    var len = arr.length, Result = [], Count = [],
        min = max =arr[0];
    for (var i =0; i < len; i++){
        Count[arr[i]] = Count[arr[i]] ? Count[arr[i]]+1 : 1;
        min = min < arr[i] ? min : arr[i];
        max = max > arr[i] ? max : arr[i];
    }
    for (var j = min; j < max; j++){
        Count[j+1] = (Count[j+1] || 0) + (Count[j] || 0)
    }
    for (var k = len - 1; k >= 0; k--){
        Result[Count[arr[k]]-1] = arr[k];
        Count[arr[k]]--;
    }
    return Result;
}

4.陣列中迭代方法
forEach()、 map()、every()、filter()、some(),前兩種方法在遍歷陣列中介紹過,下面我們討論下後3種方法。
4.1 every():對陣列中的每一項執行給定函式。如果函式對每一項都返回true,則返回true。

var arr7 = [2,4,6,8,10];
var arr8 = arr7.every(function(item,index,input){
    return item%2 == 0
});
arr8;//true

4.2 filter():對陣列中的每一項執行給定函式。返回該函式會返回true的項組成的陣列。

var arr9 = [1,2,3,4,6,8,10];
var arr10 = arr8.filter(function(item,index,input){
    return item%2 == 0
});
arr10;//[2,4,6,8,10]

4.3 some():對陣列中每一項執行給定函式。如果函式對任一項返回true,則返回true

var arr11 = [1,2,3,3];
var arr12 = arr11.some(function(item,index,input){
    return item == 3
});
arr12;//true

以上總結了常用的陣列的方法,感謝閱讀。。。