9個必須掌握的Javascript處理陣列的方法

風靈使發表於2018-10-25

一 迭代方法

ES5為陣列定義了5個迭代方法,這些方法大大方便了處理陣列的任務,支援這些方法的瀏覽器有 IE9+,Firefox2+,Safari3+,Opera9.5+和Chrome。

1 every

對陣列中每一項進行給定函式,如果每一項都返回true,則返回true

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item,index,array){
    return item>2;
});

alert(everyResult);   //false

2 some

對陣列中每一項進行給定函式,如果任意一項都返回true,則返回true

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.some(function(item,index,array){
    return item>2;
});

alert(everyResult);   //true

3 filter

對陣列中每一項進行給定函式,返回該函式會返回true的項組成的陣列

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.filter(function(item,index,array){
    return item>2;
});

alert(everyResult);   //  [3,4,5,4,3]

4 map

對陣列中每一項進行給定函式,返回每次函式呼叫的結果組成的陣列

var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.map(function(item,index,array){
    return item*2;
});

alert(everyResult);   //  [2, 4, 6, 8, 10, 8, 6, 4, 2]

5 forEach

對陣列中每一項進行給定函式,沒有返回值,和for迴圈類似

var numbers = [1,2,3,4,5,4,3,2,1];

numbers.forEach(function(item,index,array){
    if(item!=2){
        numbers.splice(index,1,2);
    }
});

alert(numbers);   //  [2, 2, 2, 2, 2, 2, 2, 2, 2]

二 歸併方法

ES5新增了兩個歸併陣列的方法:reduce()reduceRight()。這兩個方法迭代陣列所有項,然後構建一個最終返回的值。reduce從左到右,reduceRight從右到左。

var values = [1,2,3,4,5];

var sum = values.reduce(function(prev,cur,index,array){
    return prev + cur;
});
alert(sum); //15

reduce()函式接受四個引數;前一個值、當前值、index和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在第二項上,因此第一個引數是陣列的第一項,第二個引數是陣列的第二項。

三 檢測陣列

ES3的方法:instanceof

var values = [1,2,3];
if(values instanceof Array){
    //對陣列進行某些操作
}

ES5的方法:Array.isArray

var values = [1,2,3];
if(Array.isArray(values)){
    //對陣列進行某些操作
}

四 轉換方法

1 toLocaleString() toString() valueOf()

2 join() 將陣列轉換為字串,且用分隔符分割

var colors = [1,2,3];
alert(colors.join("|"));  // 1|2|3

五 棧方法

棧方法是指Last-In-First-Out後進先出

push() 從陣列末尾新增
pop() 從陣列末尾移除

六 佇列方法

佇列方法是First-In-First-Out先進先出

shift() 從陣列前端移除
unshift() 從陣列前端新增

七 重排序方法

reverse() 反轉陣列
sort() 排序

var values = [0,1,5,10,15];
values.sort(function(a,b){
    return b-a;
});
console.log(values);  //[15, 10, 5, 1, 0]

八 操作方法

1 concat() 用於複製或者從尾部新增–>建立新陣列

先建立一個當前陣列的副本,然後jiang將接到的陣列新增到末尾,返回新的陣列。如果沒有傳引數,直接複製返回新構建的陣列。

var values = [1,2,3];
var v1 = values.concat();
var v2 = values.concat(4);

console.log(values);  //[1,2,3]
console.log(v1);      //[1,2,3]
console.log(v2);      //[1,2,3,4]

2 slice() 用於複製或擷取陣列–>建立新陣列

擷取當前陣列的一部分建立一個新陣列。可以接受一個或者兩個引數,只有一個引數時返回指定位置到尾部的陣列。兩個引數時,返回指定位置到結束位置之前但不包括結束位置的陣列。

var values = [1,2,3];
var v1 = values.slice();
var v2 = values.slice(1);
var v3 = values.slice(1,3);

console.log(values);  //[1,2,3]
console.log(v1);      //[1,2,3]
console.log(v2);      //[2,3]
console.log(v3);      //[2,3]

3 splice() 用於刪除、插入、替換,號稱最強大的陣列方法

3.1 刪除:可以刪除任意數量的項,需要兩個引數,要刪除的第一項的位置和要刪除的項數。

var values = [1,2,3,4,5,6];
var v = values.splice(0,2);

console.log(values);  //[3,4,5,6]
console.log(v);       //[1,2]

3.2 插入和替換:至少三個引數,第一個是起始位置,第二個是要刪除的項,第三個及以後shi yao是要插入或替換的值。

插入demo:

var values = [1,2,3,4,5,6];
var v1 = values.splice(1,0,1,1,1);

console.log(values);  //[1,1,1,1,2,3,4,5,6]
console.log(v1);      //[]

替換demo:

var values = [1,2,3,4,5,6];
var v1 = values.splice(1,2,1,1,1);

console.log(values);  //[1,1,1,1,4,5,6]
console.log(v1);       //[2,3]

九 位置方法

var values = [1,2,3,4,5];

indexOf() 從頭找指定項的位置

var v1 = values.indexOf(3);

lastIndexOf() 從後往前查位置

var v2 = values.lastIndexOf(3);

兩者如果沒查到都返回-1

相關文章