JavaScript數組方法速查手冊極簡版中共收了32個數組的經常使用方法和屬性,並根據方法的用途進行從新排序和分類,在文中簡要的介紹了方法做用和用例說明。收藏備用吧!javascript
文中介紹的過於簡單,想更更多理解相關內容仍是要多多動手實踐!java
每一個數組都有一個length屬性。針對稠密數組,length屬性值表明數組中元素的個數。當數組是稀疏數組時,length屬性值大於元素的個數。數組
var array1 = [ 'a', 'b', 'c' ];
console.log(array1.length); // 輸出 3
array1.length = 2;
console.log(array1); // 輸出 [ "a", "b" ]
複製代碼
查看示例程序函數
Array.isArray()
數組類型斷定。測試
console.log(Array.isArray([1, 2, 3])); // 輸出 true
console.log(Array.isArray({num: 123})); //輸出 false
複製代碼
查看示例程序ui
Array.of()
從可變數量的參數建立數組,無論參數的數量或類型如何。spa
console.log(Array.of(3)); // 輸出 [3]
console.log(Array.of(1,2,3)); // 輸出 [1,2,3]
複製代碼
查看示例程序prototype
Array.from()
用類數組或可迭代對象建立新數組。code
console.log(Array.from('abcd')); // 輸出 [ "a", "b", "c", "d" ]
console.log(Array.from([1, 2, 3], x => x + 1)); // 輸出 [ 2, 3, 4 ]
複製代碼
查看示例程序對象
Array.prototype.find()
找到第一個知足檢測函數條件的元素,並返回該元素,沒找到則返回 undefined。
var array1 = [1, 2, 3, 4, 5];
console.log(array1.find(x => x > 3)); // 輸出 4
複製代碼
Array.prototype.findIndex()
找到第一個知足檢測函數條件的元素,並返回該元素索引。找不到返回-1。
var array1 = [6, 7, 8, 9, 10];
console.log(array1.findIndex(x => x > 8)); // 輸出 3
複製代碼
Array.prototype.indexOf()
查找元素並返回元素索引值,找不到返回-1。
var arr= [1, 2, 3, 4];
console.log(arr.indexOf(3)); // 輸出 2
console.log(arr.indexOf(6)); // 輸出 -1
console.log(arr.indexOf(2, 2)); // 輸出 -1
複製代碼
第二個參數表示查找的起始位置。
Array.prototype.lastIndexOf()
從後向前查找元素並返回元素索引值,找不到返回 -1。
var arr = ['a', 'b', 'c', 'd'];
console.log(arr.lastIndexOf('b')); // 輸出 1
console.log(arr.lastIndexOf('e')); // 輸出 -1
複製代碼
Array.prototype.push()
在尾部添加一個或多個元素,返回數組的新長度。
var array1= ['a', 'b', 'c'];
console.log(array1.push('d')); // 輸出 4
console.log(array1); // 輸出 [ "a", "b", "c", "d" ]
複製代碼
Array.prototype.unshift()
在頭部添加一個或多個元素,並返回數組的新長度。
var array1 = [ 4, 5, 6 ];
console.log(array1.unshift(3)); // 輸出 4
console.log(array1); // 輸出 [ 3, 4, 5, 6 ]
console.log(array1.unshift(1, 2)); // 輸出 6
console.log(array1); // 輸出 [ 1, 2, 3, 4, 5, 6 ]
複製代碼
Array.prototype.pop()
從尾部刪除一個元素,並返回該元素。
var array1= ['a', 'b', 'c', 'd'];
console.log(array1.pop()); // 輸出 d
console.log(array1); // 輸出 [ "a", "b", "c" ]
複製代碼
Array.prototype.shift()
從頭部刪除一個元素,並返回該元素。
var array1 = [1, 2, 3];
console.log(array1.shift()); // 輸出 1
console.log(array1); // 輸出 [ 2, 3 ]
複製代碼
Array.prototype.splice()
添加、替換、刪除元素。會改變原數組。
var array1 = [ 'a', 'c', 'd' ];
array1.splice( 1, 0, 'b');
console.log(array1); // 輸出 [ "a", "b", "c", "d" ]
array1.splice(1,1);
console.log(array1); // 輸出 [ "a", "c", "d" ]
array1.splice(1,1,'bb','cc');
console.log(array1); // 輸出 [ "a", "bb", "cc", "d" ]
複製代碼
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
start
:表示替換的位置deleteCount
:表示刪除元素的數量item1...
: 表示添加的元素Array.prototype.sort()
數組排序,改變原數組。
var array1 = [ 4, 3, 10, 2 ];
console.log(array1.sort()); // 輸出 [ 10, 2, 3, 4 ]
console.log(array1.sort((x1, x2) => x1 > x2)); // 輸出 [ 2, 3, 4, 10 ]
複製代碼
Array.prototype.reverse()
倒置數組,並返回新數組。會改變原數組。
var sourceArray= [ 'a', 'b', 'c' ];
var reverseArray = sourceArray.reverse();
console.log(reverseArray); // 輸出 [ "c", "b", "a" ]
console.log(sourceArray == reverseArray); // 輸出 true
複製代碼
Array.prototype.keys()
數組的鍵迭代器。
var array1 = ['a', 'b', 'c'];
for (let key of array1.keys()) {
console.log(key); // 輸出 0, 1, 2
}
複製代碼
Array.prototype.values()
數組的值迭代器。
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value); // 輸出 a b c
}
複製代碼
Array.prototype.entries()
數組的鍵/值對迭代器。
var array1 = ['a', 'b', 'c'];
var iterator1 = array1.entries();
console.log(iterator1.next().value); // 輸出 Array [0, "a"]
console.log(iterator1.next().value); // 輸出 Array [ 1, "b" ]
複製代碼
Array.prototype.forEach()
遍歷數組中的元素,並執行回調函數。
var arr = [1, 2, 3, 4];
arr.forEach(function (x) {
console.log(x + 1); // 輸出 2 3 4 5
});
複製代碼
Array.prototype.includes()
值包含檢測,如包含返回 true,不包含返回false。
var array1 = [1, 2, 3];
console.log(array1.includes(2)); // 輸出 true
console.log(array1.includes(4)); // 輸出 false
複製代碼
Array.prototype.some()
檢測數組中是否有元素能夠經過檢測函數驗證。
var array1 = [ 1, 2, 3, 4 ];
console.log(array1.some(x => x >3)); // 輸出 true
console.log(array1.some(x => x > 5)); // 輸出 false
複製代碼
Array.prototype.every()
檢測數組中是否全部元素均可以經過檢測函數驗證。
var array1 = [ 1, 2, 3, 4, 5 ];
console.log(array1.every(x => x < 8)); //輸出 true
console.log(array1.every(x => x < 4)); //輸出 false
複製代碼
Array.prototype.join()
合併數組中全部元素成爲字符串並返回。
var array1= [ 'a', 'b', 'c' ];
console.log(array1.join()); // 輸出 a,b,c
console.log(array1.join("-")); // 輸出 a-b-c
複製代碼
Array.prototype.concat()
合併兩個或多個數組,返回一個全新數組,原數組不變。
var array1 = [ 'a', 'b' ];
var array2 = [ 'c', 'd' ];
console.log(array1.concat(array2)); // 輸出 [ "a", "b", "c", "d" ]
複製代碼
該方法能夠有多個參數。
Array.prototype.reduce()
從左至右按 reducer
函數組合元素值,並返回累計器終值。
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer)); // 輸出 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5)); // 輸出 15,其中5是累計器初始值。
複製代碼
Array.prototype.reduceRight()
從右至左按 reducer
函數組合元素值,並返回累計器終值。
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator.concat(currentValue);
console.log(array1.reduceRight(reducer)); // 輸出 [ 4, 3, 2, 1 ]
console.log(array1.reduceRight(reducer, 5)); // 輸出 [ 5, 4, 3, 2, 1 ]
複製代碼
Array.prototype.copyWithin()
數組內部複製,不改變原數組長度。
var array1 = ['a', 'b', 'c', 'd', 'e','f'];
console.log(array1.copyWithin(0, 3, 5)); // 輸出 [ "d", "e", "c", "d", "e", "f" ]
console.log(array1.copyWithin(1, 3)); // 輸出 [ "d", "d", "e", "f", "e", "f" ]
複製代碼
arr.copyWithin(target[, start[, end]])
target
: 表示要複製到的索引位置,如爲負值則從後向前計數。start
: 表示要複製序列的起始索引位置,如爲負值則從後向前計數。如省略該值,則從索引0開始。end
: 表示要複製序列的結束位置,如爲負值則從後向前計數。如省略該值,則複製到結尾位置。Array.prototype.fill()
用固定值填充起始索引到終止索引區間內的所有元素值,不包括終止索引。
var array1 = [1, 2, 3, 4];
console.log(array1.fill(9, 2, 4)); // 輸出 [ 1, 2, 9, 9 ]
console.log(array1.fill(8, 1)); // 輸出 [ 1, 8, 8, 8 ]
console.log(array1.fill(7)); // 輸出 [ 7, 7, 7, 7 ]
複製代碼
Array.prototype.filter()
生成由經過檢測函數驗證元素組成的新數組並返回。
var arr = [ 9 , 8 , 7 , 6];
console.log(arr.filter(x => x >7)); //輸出 [ 9, 8 ]
複製代碼
Array.prototype.flat()
按指定深度遞歸遍歷數組,並返回包含全部遍歷到的元素組成的新數組。不改變原數組。
var arr1 = [ 1, 2, [ 3, 4 ] ];
console.log(arr1.flat()); // 輸出 [ 1, 2, 3, 4 ]
var arr2 = [ 1, 2, [3, 4, [ 5, 6 ] ] ];
console.log(arr2.flat()); // 輸出 [ 1, 2, 3, 4, [ 5, 6 ] ]
var arr3 = [1, 2, [ 3, 4, [ 5, 6 ] ] ];
console.log(arr3.flat(2)); // 輸出 [ 1, 2, 3, 4, 5, 6 ]
複製代碼
Array.prototype.map()
建立一個新數組,該數組中的元素由原數組元素調用map函數產生。
var array1 = [1, 2, 3, 4];
console.log(array1.map(x => x * 2)); // 輸出 [ 2, 4, 6, 8 ]
複製代碼
Array.prototype.slice()
按參數begin
和 end
截取數組,不改變原數組。
var array1 = [ 1, 2, 3, 4, 5];
console.log(array1.slice( 2, 4 )); //輸出 [ 3, 4 ]
console.log(array1); //輸出 [ 1, 2, 3, 4, 5 ]
複製代碼
文中介紹的過於簡單,想更多理解相關內容仍是要多多動手實踐!
因時間不足,能力有限等緣由,存在文字闡述不許及代碼測試不足等諸多問題。如發現錯誤請不吝指正!謝謝。