JS 數組常用API
常用屬性
- length 屬性
- prototype
常用方法
-
from 從一個類似數組或可迭代對象中創建一個新的數組實例。
-
isArray 用於確定傳遞的值是否是一個 Array。
-
of 創建一個具有可變數量參數的新數組實例，而不考慮參數的數量或類型。
-
concat 用於合並兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。
-
copyWithin 淺復制數組的一部分到同一數組中的另一個位置，並返回它，不會改變原數組的長度。
-
entries 返回一個新的Array Iterator對象，該對象包含數組中每個索引的鍵/值對。
-
every 測試數組的所有元素是否都通過了指定函數的測試。
-
fill 用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。
-
filter 創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
-
find 返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
-
findIndex 返回數組中滿足提供的測試函數的第一個元素的索引。否則返回-1。
-
flat 會按照一個可指定的深度遞歸遍歷數組，並將所有元素與遍歷到的子數組中的元素合並為一個新數組返回。
-
flatMap 首先使用映射函數映射每個元素，然后將結果壓縮成一個新數組。它與 map 和 深度值1的 flat 幾乎相同，但 flatMap 通常在合並成一種方法的效率稍微高一些。
-
forEach 對數組的每個元素執行一次提供的函數。
-
includes 用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回false。（注意：對象數組不能使用includes方法來檢測。）
-
indexOf 返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
-
join 將一個數組（或一個類數組對象）的所有元素連接成一個字符串並返回這個字符串。如果數組只有一個項目，那么將返回該項目而不使用分隔符。
-
keys 返回一個包含數組中每個索引鍵的Array Iterator對象。
-
lastIndexOf 返回指定元素（也即有效的 JavaScript 值或變量）在數組中的最后一個的索引，如果不存在則返回 -1。從數組的后面向前查找，從 fromIndex 處開始。
-
map 創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。
-
pop 從數組中刪除最后一個元素，並返回該元素的值。此方法更改數組的長度。
-
push 將一個或多個元素添加到數組的末尾，並返回該數組的新長度。
-
reduce 對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
-
reduceRight 接受一個函數作為累加器（accumulator）和數組的每個值（從右到左）將其減少為單個值。
-
reverse 將數組中元素的位置顛倒,並返回該數組。該方法會改變原數組。
-
shift 從數組中刪除第一個元素，並返回該元素的值。此方法更改數組的長度。
-
slice 返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變。
-
some 測試是否至少有一個元素通過由提供的函數實現的測試。
-
sort 用原地算法對數組的元素進行排序，並返回數組。排序算法現在是穩定的。默認排序順序是根據字符串Unicode碼點。
-
splice 通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。
-
toLocaleString 返回一個字符串表示數組中的元素。數組中的元素將使用各自的 toLocaleString 方法轉成字符串，這些字符串將使用一個特定語言環境的字符串（例如一個逗號 ","）隔開。
-
toString 返回一個字符串，表示指定的數組及其元素。
-
unshift 將一個或多個元素添加到數組的開頭，並返回該數組的新長度。
-
values 返回一個新的 Array Iterator 對象，該對象包含數組每個索引的值
常見方法語法解釋
上面列出了在js數組當中常見的方法，下面在其中選取一些比較高頻和重要的方法來說明。
from方法
從一個類似數組或可迭代對象中創建一個新的數組實例。
語法：
Array.from(arrayLike[, mapFn[, thisArg]])
參數:
- arrayLike
想要轉換成數組的偽數組對象或可迭代對象。 - mapFn (可選參數)
如果指定了該參數，新數組中的每個元素會執行該回調函數。 - thisArg (可選參數)
可選參數，執行回調函數 mapFn 時 this 對象。
返回值:
一個新的數組實例。
demo:
Array.from('foo');
// ["f", "o", "o"]
isArray
用於確定傳遞的值是否是一個 Array。
語法：
Array.isArray(obj)
參數:
- obj
需要檢測的值。
demo:
Array.isArray([1, 2, 3]); // true
concat
用於合並兩個或多個數組。此方法不會更改現有數組，而是返回一個新數組。
語法：
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
參數:
- valueN
將數組和/或值連接成新數組。
demo:
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
console.log(array1.concat(array2));
// expected output: Array ["a", "b", "c", "d", "e", "f"]
every
測試數組的所有元素是否都通過了指定函數的測試。
語法：
arr.every(callback[, thisArg])
參數:
- callback
用來測試每個元素的函數。 - thisArg
執行 callback 時使用的 this 值。
demo:
function isBelowThreshold(currentValue) {
return currentValue < 40;
}
var array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// expected output: true
fill
用一個固定值填充一個數組中從起始索引到終止索引內的全部元素。不包括終止索引。
語法:
arr.fill(value[, start[, end]])
參數:
- value
用來填充數組元素的值。 - start 可選
起始索引，默認值為0。 - end 可選
終止索引，默認值為 this.length。
返回值:
修改后的數組。
filter
創建一個新數組, 其包含通過所提供函數實現的測試的所有元素。
語法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
參數:
- callback
用來測試數組的每個元素的函數。返回 true 表示該元素通過測試，保留該元素，false 則不保留。它接受以下三個參數： - element
數組中當前正在處理的元素。 - index可選
正在處理的元素在數組中的索引。
array可選
調用了 filter 的數組本身。
thisArg可選
執行 callback 時，用於 this 的值。
返回值:
一個新的、由通過測試的元素組成的數組，如果沒有任何數組元素通過測試，則返回空數組。
demo:
var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);
console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]
find
返回數組中滿足提供的測試函數的第一個元素的值。否則返回 undefined。
語法:
arr.find(callback[, thisArg])
參數:
- callback
在數組每一項上執行的函數，接收 3 個參數：
element
當前遍歷到的元素。
index可選
當前遍歷到的索引。
array可選
數組本身。 - thisArg可選
執行回調時用作this 的對象。
demo:
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
// expected output: 12
forEach
對數組的每個元素執行一次提供的函數。
語法:
arr.forEach(callback[, thisArg]);
參數:
- callback
為數組中每個元素執行的函數，該函數接收三個參數：
currentValue
數組中正在處理的當前元素。
index可選
數組中正在處理的當前元素的索引。
array可選
forEach() 方法正在操作的數組。 - thisArg可選
可選參數。當執行回調函數時用作 this 的值(參考對象)。
demo:
var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
console.log(element);
});
// expected output: "a"
// expected output: "b"
// expected output: "c"
indexOf
返回在數組中可以找到一個給定元素的第一個索引，如果不存在，則返回-1。
語法:
arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])
參數:
- searchElement
要查找的元素 - fromIndex
開始查找的位置。如果該索引值大於或等於數組長度，意味着不會在數組里查找，返回-1。如果參數中提供的索引值是一個負值，則將其作為數組末尾的一個抵消，即-1表示從最后一個元素開始查找，-2表示從倒數第二個元素開始查找 ，以此類推。 注意：如果參數中提供的索引值是一個負值，並不改變其查找順序，查找順序仍然是從前向后查詢數組。如果抵消后的索引值仍小於0，則整個數組都將會被查詢。其默認值為0.
返回值:
首個被找到的元素在數組中的索引位置; 若沒有找到則返回 -1
demo:
var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// expected output: 1
// start from index 2
console.log(beasts.indexOf('bison', 2));
// expected output: 4
console.log(beasts.indexOf('giraffe'));
// expected output: -1
join
將一個數組（或一個類數組對象）的所有元素連接成一個字符串並返回這個字符串。如果數組只有一個項目，那么將返回該項目而不使用分隔符。
語法:
arr.join([separator])
參數:
- separator
指定一個字符串來分隔數組的每個元素。如果需要，將分隔符轉換為字符串。如果省略()，數組元素用逗號分隔。默認為 ","。如果separator是空字符串("")，則所有元素之間都沒有任何字符。
返回值:
一個所有數組元素連接的字符串。如果 arr.length 為0，則返回空字符串。
demo:
var elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join(''));
// expected output: "FireAirWater"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"
keys
返回一個包含數組中每個索引鍵的Array Iterator對象。
語法:
arr.keys()
返回值:
一個新的 Array 迭代器對象。
demo：
var array1 = ['a', 'b', 'c'];
var iterator = array1.keys();
for (let key of iterator) {
console.log(key); // expected output: 0 1 2
}
map
創建一個新數組，其結果是該數組中的每個元素都調用一個提供的函數后返回的結果。
語法:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
參數:
- callback
生成新數組元素的函數，使用三個參數：
currentValue
callback 數組中正在處理的當前元素。
index可選
callback 數組中正在處理的當前元素的索引。
array可選
callback map 方法被調用的數組。 - thisArg可選
執行 callback 函數時使用的this 值。
返回值:
一個新數組，每個元素都是回調函數的結果。
demo:
var array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32]
pop
從數組中刪除最后一個元素，並返回該元素的值。此方法更改數組的長度。
語法：
arr.pop()
返回值：
從數組中刪除的元素(當數組為空時返回undefined)。
demo:
var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage"]
reduce
對數組中的每個元素執行一個由您提供的reducer函數(升序執行)，將其結果匯總為單個返回值。
語法:
arr.reduce(callback[, initialValue])
參數:
- callback
執行數組中每個值的函數，包含四個參數：
accumulator
累計器累計回調的返回值; 它是上一次調用回調時返回的累積值，或initialValue（見於下方）。
currentValue
數組中正在處理的元素。
currentIndex可選
數組中正在處理的當前元素的索引。 如果提供了initialValue，則起始索引號為0，否則為1。
array可選
調用reduce()的數組
2. initialValue可選
作為第一次調用 callback函數時的第一個參數的值。 如果沒有提供初始值，則將使用數組中的第一個元素。 在沒有初始值的空數組上調用 reduce 將報錯。
返回值:
函數累計處理的結果.
demo:
const array1 = [1, 2, 3, 4];
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
// expected output: 10
// 5 + 1 + 2 + 3 + 4
console.log(array1.reduce(reducer, 5));
// expected output: 15
reverse
將數組中元素的位置顛倒,並返回該數組。該方法會改變原數組。
語法:
arr.reverse()
demo :
var array1 = ['one', 'two', 'three'];
console.log('array1: ', array1);
// expected output: Array ['one', 'two', 'three']
var reversed = array1.reverse();
console.log('reversed: ', reversed);
// expected output: Array ['three', 'two', 'one']
/* Careful: reverse is destructive. It also changes
the original array */
console.log('array1: ', array1);
// expected output: Array ['three', 'two', 'one']
slice
返回一個新的數組對象，這一對象是一個由 begin和 end（不包括end）決定的原數組的淺拷貝。原始數組不會被改變。
語法:
arr.slice();
// [0, end]
arr.slice(begin);
// [begin, end]
arr.slice(begin, end);
// [begin, end)
參數:
- begin 可選
從該索引處開始提取原數組中的元素（從0開始）。
如果該參數為負數，則表示從原數組中的倒數第幾個元素開始提取，slice(-2)表示提取原數組中的倒數第二個元素到最后一個元素（包含最后一個元素）。
如果省略 begin，則 slice 從索引 0 開始。 - end可選
在該索引處結束提取原數組元素（從0開始）。slice會提取原數組中索引從 begin 到 end 的所有元素（包含begin，但不包含end）。
slice(1,4) 提取原數組中的第二個元素開始直到第四個元素的所有元素 （索引為 1, 2, 3的元素）。
如果該參數為負數， 則它表示在原數組中的倒數第幾個元素結束抽取。 slice(-2,-1)表示抽取了原數組中的倒數第二個元素到最后一個元素（不包含最后一個元素，也就是只有倒數第二個元素）。
如果 end 被省略，則slice 會一直提取到原數組末尾。
如果 end 大於數組長度，slice 也會一直提取到原數組末尾。
返回值：
一個含有提取元素的新數組
demo:
var animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]
some
測試是否至少有一個元素通過由提供的函數實現的測試。
語法:
arr.some(callback(element[, index[, array]])[, thisArg])
參數:
- callback
用來測試每個元素的函數，接受三個參數：
element
數組中正在處理的元素。
index 可選
數組中正在處理的元素的索引值。
array可選
some()被調用的數組。 - thisArg可選
執行 callback 時使用的 this 值。
返回值:
如果回調函數返回任何數組元素的truthy值，則返回true；否則為false。
demo:
var array = [1, 2, 3, 4, 5];
var even = function(element) {
// checks whether an element is even
return element % 2 === 0;
};
console.log(array.some(even));
// expected output: true
sort
用原地算法對數組的元素進行排序，並返回數組。排序算法現在是穩定的。默認排序順序是根據字符串Unicode碼點。
語法:
arr.sort([compareFunction])
參數:
- compareFunction 可選
用來指定按某種順序進行排列的函數。如果省略，元素按照轉換為的字符串的各個字符的Unicode位點進行排序。
返回值:
排序后的數組。請注意，數組已原地排序，並且不進行復制。
demo:
var months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]
var array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]
splice
通過刪除或替換現有元素或者原地添加新的元素來修改數組,並以數組形式返回被修改的內容。此方法會改變原數組。
語法:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
參數:
-
start
指定修改的開始位置（從0計數）。如果超出了數組的長度，則從數組末尾開始添加內容；如果是負值，則表示從數組末位開始的第幾位（從-1計數，這意味着-n是倒數第n個元素並且等價於array.length-n）；如果負數的絕對值大於數組的長度，則表示開始位置為第0位。 -
deleteCount 可選
整數，表示要移除的數組元素的個數。
如果 deleteCount 大於 start 之后的元素的總數，則從 start 后面的元素都將被刪除（含第 start 位）。
如果 deleteCount 被省略了，或者它的值大於等於array.length - start(也就是說，如果它大於或者等於start之后的所有元素的數量)，那么start之后數組的所有元素都會被刪除。
如果 deleteCount 是 0 或者負數，則不移除元素。這種情況下，至少應添加一個新元素。 -
item1, item2, ... 可選
要添加進數組的元素,從start 位置開始。如果不指定，則 splice() 將只刪除數組元素。
返回值:
由被刪除的元素組成的一個數組。如果只刪除了一個元素，則返回只包含一個元素的數組。如果沒有刪除元素，則返回空數組。
demo:
var months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'June']
months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ['Jan', 'Feb', 'March', 'April', 'May']
具體方法介紹可以訪問：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array