JS陣列方法彙總
工具類方法
Array.from() :從一個類似陣列或者可迭代物件中建立一個新的陣列例項。
用一種更通俗易懂的方式來說,就是Array.from方法用於將兩類物件轉為真正陣列:類陣列物件(array-like object)和可遍歷(iterable)的物件。
實際應用中,常見的類陣列物件是 DOM 操作返回的 NodeList 集合,以及函式內部的arguments物件。Array.from都可以將它們轉為真正的陣列。
語法:Array.from(arrayLike[, mapFn[, thisArg]])
引數:
arrayLike 想要轉換成陣列的偽陣列物件或可迭代物件。
mapFn (可選引數)
thisArg (可選引數) 可選引數,執行回撥函式 mapFn 時 this 物件。
返回值: 一個新的陣列例項
// arguments物件 function foo() { var args = Array.from(arguments); // ... } Array.from('hello') // ['h', 'e', 'l', 'l', 'o'] // Using an arrow function as the map function to // manipulate the elements Array.from([1, 2, 3], x => x + x); // [2, 4, 6]
Array.isArray() 用於確定傳遞的值是否是一個 Array
語法:Array.isArray(obj)
引數:obj 需要檢測的值;
返回值:如果物件是 Array,則為true; 否則為false
Array.isArray([1, 2, 3]);
// true
Array.isArray({foo: 123});
// false
Array.isArray("foobar");
// false
Array.isArray(undefined);
// false
Array.of方法用於將一組值,轉換為陣列
語法:Array.of(element0[, element1[, ...[, elementN]]])
引數:
elementN
任意個引數,將按順序成為返回陣列中的元素。
返回值:新的 Array 例項。
Array.of 和建構函式Array的區別
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]
Array方法沒有引數、一個引數、三個引數時,返回結果都不一樣。只有當引數個數不少於 2 個時,Array()才會返回由引數組成的新陣列。引數個數只有一個時,實際上是指定陣列的長度。
Array.of基本上可以用來替代Array()或new Array(),並且不存在由於引數不同而導致的過載。它的行為非常統一。
遍歷方法
Array.prototype.forEach:對陣列的每個元素執行一次提供的函式
語法:
array.forEach(callback(currentValue, index, array){
//do something
}, this)
引數:
callback: 為陣列中每個元素執行的函式,該函式接收下面3個引數;
currentValue: 當前陣列元素;
index(可選): 當前陣列索引;
array(可選): 被遍歷的陣列本身;
this(可選): 當執行callback回撥函式時用作this的值(參考物件)
返回值:undefined
示例:
// 列印每個陣列元素
function logArrayElements(element, index, array) {
console.log("a[" + index + "] = " + element);
}
Array.prototype.map(): 建立一個新陣列,其結果是該陣列中的每個元素都呼叫一個提供的函式後返回的結果
語法:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array }[,
thisArg])
引數:
callback:生成新陣列元素的函式,有下面3個引數:
currentValue: 當前陣列元素;
index(可選): 當前陣列索引;
array(可選): 被遍歷的陣列本身;
thisArg(可選): 當執行callback回撥函式時用作this的值(參考物件)
返回值:一個新陣列,每個元素都是回撥函式的結果。
示例:
// 求陣列中每個元素的平方根
let arr = [1, 4, 9];
let new_arr = arr.map(currentValue => {
return Math.sqrt(currentValue)
})
console.log(new_arr)
Array.prototype.reduce():reduce方法把一個函式作用在陣列的所有元素。這個函式必須接收至少兩個引數,reduce()把函式的返回結果繼續和陣列的下一個元素做累積計算
語法:
arr.reduce(function callback(accumulator, currentValue[, currentIndex, array]) {
// coding...
}[, initialValue)
引數:
callback: 執行陣列中每個值的函式,包含四個引數:
accumulator: 函式回撥的返回值;它是上一次呼叫回撥時返回的累積值,或initialValue(見於下方)。
currentValue: 陣列正在處理的元素。
currentIndex: 陣列中正在處理的當前元素的索引。如果提供了initialValue,則索引號未0,否則索引為1。
array: 呼叫reduce()的陣列。
initialValue: 作為第一次呼叫 callback函式時的第一個引數的值。 如果沒有提供初始值,則將使用陣列中的第一個元素。 在沒有初始值的空陣列上呼叫 reduce 將報錯。
返回值:函式累計處理的結果。
示例:
// 求陣列中每個元素的和
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (x, y) {
return x + y;
}
// 10
Array.prototype.reduceRight():reduceRight方法把一個函式作用在陣列的所有元素。這個函式必須接收至少兩個引數,reduceRight()把函式的返回結果繼續和陣列的下一個元素做累積計算。和reduce不同的是,reduceRight的遍歷順序是從右到左。
Array.prototype.every(): every方法測試陣列的所有元素是否都通過了指定元素的測試。
語法:
arr.erery(callback[, thisArg])
引數:
callback:用來測試每個元素的函式。
thisArg:執行callback時內部指定的this值。
示例:
var arr = [1, 2, 3, 4, 11];
var passed = arr.every(function (x) {
return x < 10;
}
// passed is false
Array.prototype.some():some方法測試陣列的所有元素中是否有通過測試的。
語法:
arr.some(callback[, thisArg])
引數:
callback:用來測試每個元素的函式。
thisArg:執行callback時內部指定的this值。
示例:
var arr = [1, 2, 3, 4, 10];
var passed = arr.some(function (x) {
return x < 10;
}
// passed is true
Array.prototype.filter(): filter()方法建立一個數組,其包含通過所提供函式實現的測試的所有元素。
語法:
var new_array = arr.filter(callback(element[, index[, array]])[, thisArg])
引數:
callback
用來測試陣列的每個元素的函式。呼叫時使用引數(element, index, array)。
返回true表示保留該元素(通過測試),false則不保留,它接受三個引數:
element 當前在陣列中處理的元素
index(可選) 正在處理元素在陣列中的索引
array(可選) 呼叫了filter的陣列
thisArg(可選) 執行callback時的用於 this 的值
示例:
var filtered = [12, 5, 8, 130, 44].filter(currentValue => {
return currentValue > 10;
});
// filtered is [12, 130, 44]
Array.prototype.keys(): 對陣列鍵名(也就是索引值)的遍歷,返回一個遍歷器物件。
Array.prototype.value(): 對陣列鍵值(也就是陣列元素)的遍歷,返回一個遍歷器物件。
Array.prototype.entries: 對陣列鍵值對(索引值,對應陣列元素)的遍歷,返回一個遍歷器物件。
直接上示例程式碼:
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"
查詢方法
Array.prototype.find(): 用於找出第一個滿足提供的回撥函式的陣列成員。所有陣列成員依次執行該回調函式,直到找出第一個返回值為true的成員,然後返回該成員。否則返回undefined。
Array.prototype.findIndex():用於找出第一個滿足提供的回撥函式的陣列成員。所有陣列成員依次執行該回調函式,直到找出第一個返回值為true的成員,然後返回該成員的位置(也就是索引)。否則返回-1。
語法:
arr.find(callback[, thisArg]);
arr.findIndex(callback[, thisArg]);
引數:
callback
針對陣列中的每個元素, 都會執行該回調函式, 執行時會自動傳入下面三個引數:
element 當前元素。
index 當前元素的索引。
array 呼叫findIndex的陣列。
thisArg 可選。執行callback時作為this物件的值.
示例:
[1, 5, 10, 15].find(function(value, index, arr) {
return value % 2 == 0;
}) // 10
[1, 5, 10, 15].find(function(value, index, arr) {
return value % 2 == 0;
}) // 2
Array.prototype.indexOf:indexOf方法返回在陣列中可以找到一個給定元素的第一個索引,如果不存在,則返回-1。
Array.prototype.lastIndexOf:lastIndexOf方法返回在陣列中可以找到一個給定元素的最後一個索引(從陣列的後面向前查詢),如果不存在,則返回-1。
語法:
arr.indexOf(searchElement[, fromIndex = 0])
arr.lastIndexOf(searchElement[, fromIndex = 0])
引數:
searchElement 要查詢的元素
fromIndex 開始查詢的位置(對indexOf而言)或者開始逆向查詢的位置(對lastIndexOf而言)
示例:
var indexof = [1, 5, 10, 5].indexOf(5) // 1
var lastindexof = [1, 5, 10, 5].indexOf(5) // 3
Array.prototype.includes(): includes() 方法用來判斷一個數組是否包含一個指定的值,根據情況,如果包含則返回 true,否則返回false。
語法:
arr.includes(searchElement, fromIndex)
引數:
searchElement 需要查詢的元素值。
fromIndex 可選 從該索引處開始查詢 searchElement。如果為負值,則按升序從 array.length - fromIndex 的索引開始搜尋。預設為 0。
增刪元素方法
Array.prototype.pop: 從陣列中刪除最後一個元素,並返回該元素的值。此方法改變陣列的長度。
Array.prototype.push: 將一個或多個元素新增到陣列的末尾,並返回該陣列的新長度。
示例:
// pop
let myFish = ["angel", "clown", "mandarin", "surgeon"];
let popped = myFish.pop();
console.log(myFish);
// ["angel", "clown", "mandarin"]
console.log(popped);
// surgeon
// push
var sports = ["soccer", "baseball"];
var total = sports.push("football", "swimming");
console.log(sports);
// ["soccer", "baseball", "football", "swimming"]
console.log(total);
// 4
Array.prototype.shift(): 從陣列中刪除第一個元素,並返回該元素的值。此方法更改陣列的長度。
Array.prototype.unshift(): 將一個或多個元素新增到陣列的開頭,並返回該陣列的新長度。
示例:
// shift
let myFish = ["angel", "clown", "mandarin", "surgeon"];
let shift_length = myFish.shift();
console.log(myFish);
// ["clown", "mandarin", "surgeon"]
console.log(shift_length);
// angel
// unshift
let sports = ["soccer", "baseball"];
let unshift_length = sports.unshift("football", "swimming");
console.log(sports);
// ["football", "swimming", "soccer", "baseball"]
Array.prototype.splice: 通過刪除現有元素和/或新增新元素來更改一個數組的內容
語法:array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
引數:
start:指定修改的開始位置(從0開始計數)
deleteCount:可選 指定要刪除的陣列元素的個數,如果省略該引數,則從start開始的所有陣列元素都被刪除(包括第start位)
item1, item2, ... : 可選,要新增進陣列的元素,如果省略該引數,則只刪除陣列元素
返回值:
如果沒有刪除元素,則返回空陣列。由被刪除的陣列元素組成的一個數組。如果只刪除了一個元素,則返回只包含一個元素的陣列。
示例:
var myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'];
var removed = myFish.splice(3, 1, 'big', 'small');
console.log(myFish);
console.log(removed)
// > Array ["angel", "clown", "drum", "big", "small", "sturgeon"]
// > Array ["mandarin"]
拼接/擷取方法
Array.prototype.concat(): 拼接兩個或者多個數組,此方法不會修改原陣列,而是返回一個新的陣列。
示例:
var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
var new_arr = arr1.concat(arr2);
// new_arr [1, 2, 3, 4, 5, 6]
Array.prototype.slice(): 返回一個新的陣列物件,這一物件是一個由 begin和end(不包括end)決定的原陣列的淺拷貝。原始陣列不會被改變。
語法:arr.slice(begin, end);
引數:
begin: 可選 從該索引處開始提取原陣列中的元素,如果省略該引數,則從0開始。
end: 可選 從該索引處結束提取原陣列中的元素,如果省略該引數,則會一直提取到原陣列末尾。
示例:
var arr = [1, 2, 3, 4, 5, 6];
var sub_arr = arr.splice(1, 4);
// sub_arr [2, 3, 4]
排序方法
Array.prototype.reverse(): 將陣列中元素的位置顛倒,第一個陣列元素成為最後一個數組元素,最後一個數組元素成為第一個。
示例:
var arr = [1, 2, 3, 4, 5, 6];
arr.reverse();
// arr -> [6, 5, 4, 3, 2, 1]
Array.prototype.sort():MDN給出的定義是用原地演算法對陣列的元素進行排序,並返回陣列。排序不一定是穩定的。預設排序順序是根據字串Unicode碼點。具體是咋排的我也不知道,我的理解就是按照字串的Unicode碼點進行排序的。
語法:arr.sort([compareFunction])
引數:
compareFunction: 用來指定按某種順序進行排列的函式。如果省略,元素按照轉換為的字串的各個字元的Unicode位點進行排序;如果不省略 compareFunction ,那麼陣列會按照呼叫該函式的返回值排序。即 a 和 b 是兩個將要被比較的元素:
- 如果 compareFunction(a, b) 小於 0 ,那麼 a 會被排列到 b 之前;
- 如果 compareFunction(a, b) 等於 0 , a 和 b 的相對位置不變。備註: ECMAScript
標準並不保證這一行為,而且也不是所有瀏覽器都會遵守(例如 Mozilla 在 2003 年之前的版本); - 如果 compareFunction(a, b) 大於 0 , b 會被排列到 a 之前。
- compareFunction(a, b) 必須總是對相同的輸入返回相同的比較結果,否則排序的結果將是不確定的。
示例:
//升序
function sort_increase(a, b) {
return a - b
}
// 降序
function sort_decrease(a, b) {
return b - a
}
var arr = [3, 0 ,6 ,2 ,4 ,7]
arr.sort(sort_increase)
console.log(arr)
arr.sort(sort_decrease)
console.log(arr)
// > Array [7, 6, 4, 3, 2, 0]
// > Array [0, 2, 3, 4, 6, 7]
其他
Array.prototype.copyWith():在當前陣列內部,將指定位置的成員複製到其他位置(會覆蓋原有成員),然後返回當前陣列。也就是說,這個方法會修改原有陣列。
語法:arr.prototype.copyWith(target, start = 0, end = this.length)
引數:
target(必需):從該位置開始替換資料。如果為負值,表示倒數。
start(可選):從該位置開始讀取資料,預設為 0。如果為負值,表示倒數。
end(可選):到該位置前停止讀取資料,預設等於陣列長度。如果為負值,表示倒數。
示例:
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
Array.prototype.fill(): 使用給定值,填充一個數組。這個方法會修改原有陣列。
語法:arr.fill(value[, start[, end]])
引數:
value 用來填充陣列元素的值。
start 可選 起始索引,預設值為0。
end 可選 終止索引(不包括該位置),預設值為 this.length。
示例:
[1, 2, 3].fill(4); // [4, 4, 4]
[1, 2, 3].fill(4, 1); // [1, 4, 4]
[1, 2, 3].fill(4, 1, 2); // [1, 4, 3]
[1, 2, 3].fill(4, 1, 1); // [1, 2, 3]
[1, 2, 3].fill(4, 3, 3); // [1, 2, 3]
[1, 2, 3].fill(4, -3, -2); // [4, 2, 3]
Array.protytye.join(): 一個數組(或一個類陣列物件)的所有元素連線成一個字串並返回這個字串。
語法:arr.join(separator)
引數:
separator 指定一個字串來分隔陣列的每個元素,如果省略(),陣列元素用逗號分隔。預設為 ","。
Array.prototype.toLocalString(): 返回一個字串表示陣列中的元素。陣列中的元素將使用各自的 toLocaleString 方法轉成字串,這些字串將使用一個特定語言環境的字串(例如一個逗號 ",")隔開。
Array.prototype.toString(): 返回一個字串,表示指定的陣列及其元素.