JavaScript 陣列常用方法
阿新 • • 發佈:2018-11-03
有一天被問到了一個題,感覺很有意思,如下:
new Array(6)
new Array(6, 6)
//上訴兩行程式碼,分別建立了什麼?
- 檢測陣列
var arr = [];
arr instanceof Array
Array.isArray(arr)
- 轉換方法
- toString() 返回以逗號分隔的陣列中的值組成的字串
- valueOf() 返回陣列物件的原始值
- join(‘a’) 返回一個將陣列以 a 這個分隔符連線起來的字串
ar colors = ["red", "blue", "green"];
alert(colors.toString());// red,blue,green
alert(colors.valueOf());// red,blue,green
alert(colors);// 由於 alert 要接收字串,所以會先呼叫toString()
alert(colors.join("||")); //red||green||blue
- 棧方法(後進先出)
- push() 接收任意數量的引數,新增到陣列末尾,返回陣列長度
- pop() 從陣列末尾移除最後一項,返回被刪除的項
var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
var item = colors.pop();
alert(item); //"black"
- 佇列方法(先進先出)
- shift() 從陣列前端移除一項,返回被移除的項
- unshift() 從陣列前端新增任意個項,返回陣列長度
var colors = new Array();
var count = colors.unshift("red", "green");
alert(count); //2
var item = colors.shift();
alert(item); //"red"
- 排序方法
- reverse() 反轉陣列順序
- sort() 預設情況下按字元編碼排序,也可傳入一個比較函式
var values = [0, 1, 5, 10, 15];
values.reverse();
alert(values); //0,1,5,10,15
values.sort();
alert(values); //0,1,10,15,5
arr.sort(function(a, b){
return a - b;//a-b從小到大;b-a從大到小
});//0,1,5,10,15
- 操作方法
- concat() 連線多個數組或字串,並返回一個新陣列
- slice(a, b) 從陣列 [a, b) 擷取並返回一個新陣列;如果不寫 b,就擷取所有。
- splice(start, num, item…) 始終都會返回一個新陣列
start : 起始位置,要刪除的第一項
num :要刪除的數量
item :要插入的項,可以插入任意個
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors2); //red,green,blue,yellow,black,brown
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2); //green,blue,yellow,purple
alert(colors3); //green,blue,yellow
var removed = colors.splice(0,1);
alert(colors); // green,blue
alert(removed); // red,返回的陣列中只包含一項
removed = colors.splice(1, 0, "yellow", "orange");
alert(colors); // green,yellow,orange,blue
alert(removed); // 返回的是一個空陣列
removed = colors.splice(1, 1, "red", "purple");
alert(colors); // green,red,purple,orange,blue
alert(removed); // yellow,返回的陣列中只包含一項
- 位置方法
- indexOf(item, index) 從陣列開頭向後查詢
- lastIndexOf(item, index) 從陣列末尾向前查詢
兩個方法都返回要查詢的項在陣列中的位置。
item:要查詢的項。index:(可選)起點位置的索引
var numbers = [1,2,3,4,5,4,3,2,1];
alert(numbers.indexOf(4)); //3
alert(numbers.lastIndexOf(4)); //5
alert(numbers.indexOf(4, 4)); //5
alert(numbers.lastIndexOf(4, 4)); //3
- 迭代方法
ECMAScript 5 為陣列定義了 5 個迭代方法。每個方法都接收兩個引數:要在每一項上執行的函式和 (可選的)執行該函式的作用域物件——影響 this 的值。傳入這些方法中的函式會接收三個引數:陣列項的值(必寫)、(可選)該項在陣列中的位置。
- every():對陣列中的每一項執行給定函式,如果該函式對每一項都返回 true,則返回 true。
- some():對陣列中的每一項執行給定函式,如果該函式對任一項返回 true,則返回 true。
- filter():對陣列中的每一項執行給定函式,返回該函式會返回 true 的項組成的陣列。
- forEach():對陣列中的每一項執行給定函式。這個方法沒有返回值。
- map():對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。
var numbers = [1,2,3,4,5,4,3,2,1];
var everyResult = numbers.every(function(item, index){
return (item > 2);
});
alert(everyResult); //false
var someResult = numbers.some(function(item, index){
return (item > 2);
});
alert(someResult); //true
var filterResult = numbers.filter(function(item, index){
return (item > 2);
});
alert(filterResult);//[3,4,5,4,3]
var mapResult = numbers.map(function(item, index){
return item * 2;
});
alert(mapResult); //[2,4,6,8,10,8,6,4,2]
numbers.forEach(function(item, index){
//執行某些操作
});
- 歸併方法
- reduce(func, num) 從陣列開頭遍歷
- reduceRight(func, num)。從陣列最後一項向前遍歷
func : 在每一項上呼叫的函式
num : (可選的)作為歸併基礎的初始值。
func 接收 4 個引數:前一個值(必須)、當前值(必須)、(可選)項的索引和陣列物件。
這個函式返回的任何值都會作為第一個引數自動傳給下一項。第一次迭代發生在陣列的第二項上,因此第 一個引數是陣列的第一項,第二個引數就是陣列的第二項。
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur){
return prev + cur;
});
alert(sum); //15