9個必須掌握的Javascript處理陣列的方法
一 迭代方法
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
相關文章
- 10個必須掌握的PHP關聯陣列使用技巧PHP陣列
- 6. 你必須掌握Dart中的陣列Dart陣列
- JavaScript大師必須掌握的12個知識點JavaScript
- 必須掌握的10個Linux命令!Linux
- JavaScript必須要掌握的知識-作用域JavaScript
- Java中處理異常的9個最佳實踐,你必須要知道!Java
- Javascript - 陣列和陣列的方法JavaScript陣列
- Javascript中陣列方法reduce的妙用之處JavaScript陣列
- 列舉幾個Java程式設計師通用的、必須掌握的框架Java程式設計師框架
- 5個產品經理必須掌握的,小程式裂變案例
- JavaScript陣列 幾個常用方法JavaScript陣列
- 在 2021 年你需要掌握的 7 種關於 JavaScript 的陣列方法JavaScript陣列
- JavaScript必須要掌握的知識-作用域編寫提升JavaScript
- Git中~你必須掌握的!Git
- sed、awk——運維必須掌握的兩個工具運維
- 【9】進大廠必須掌握的面試題-DevOps面試面試題dev
- 28個Javascript陣列方法,開發者的小抄JavaScript陣列
- JavaScript陣列方法JavaScript陣列
- 中高階前端必須瞭解的--陣列亂序前端陣列
- 必須要掌握的重要目錄
- 前端必須掌握的知識點前端
- CSS中那些必須掌握的概念CSS
- 學習Linux必須掌握的命令!Linux
- JavaScript 的新陣列分組方法JavaScript陣列
- JavaScript常用的字串處理方法JavaScript字串
- JavaScript陣列小方法JavaScript陣列
- JavaScript陣列方法(splice)JavaScript陣列
- javascript陣列常用方法JavaScript陣列
- JavaScript陣列方法大全JavaScript陣列
- Java程式設計師必須掌握的5個註解!Java程式設計師
- K8s必須掌握的7個除錯技巧K8S除錯
- 24個必須掌握的資料庫面試問題~資料庫面試
- java開發必須要掌握的20個核心技術Java
- JavaScript中十個一步拷貝陣列的方法JavaScript陣列
- 如何高效的處理陣列對映陣列
- 必須掌握的Linux使用者組Linux
- Java必須掌握的Spring常用註解JavaSpring
- javascript--陣列的方法(新手指導)JavaScript陣列