目錄
-
JS 數(shù)組常用API
- 常用屬性
- 常用方法
- 常見方法語法解釋
- from方法
- isArray
- concat
- every
- fill
- filter
- find
- forEach
- indexOf
- join
- keys
- map
- pop
- reduce
- reverse
- slice
- some
- sort
- splice
JS 數(shù)組常用API
常用屬性
- length 屬性
- prototype
常用方法
-
from
從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。 -
isArray
用于確定傳遞的值是否是一個(gè)Array
。 -
of
創(chuàng)建一個(gè)具有可變數(shù)量參數(shù)的新數(shù)組實(shí)例,而不考慮參數(shù)的數(shù)量或類型。 -
concat
用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組,而是返回一個(gè)新數(shù)組。 -
copyWithin
淺復(fù)制數(shù)組的一部分到同一數(shù)組中的另一個(gè)位置,并返回它,不會(huì)改變?cè)瓟?shù)組的長度。 -
entries
返回一個(gè)新的Array Iterator
對(duì)象,該對(duì)象包含數(shù)組中每個(gè)索引的鍵/值對(duì)。 -
every
測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。 -
fill
用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。 -
filter
創(chuàng)建一個(gè)新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。 -
find
返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值。否則返回undefined
。 -
findIndex
返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的索引。否則返回-1。 -
flat
會(huì)按照一個(gè)可指定的深度遞歸遍歷數(shù)組,并將所有元素與遍歷到的子數(shù)組中的元素合并為一個(gè)新數(shù)組返回。 -
flatMap
首先使用映射函數(shù)映射每個(gè)元素,然后將結(jié)果壓縮成一個(gè)新數(shù)組。它與 map 和 深度值1的 flat 幾乎相同,但 flatMap 通常在合并成一種方法的效率稍微高一些。 -
forEach
對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。
-includes
用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值,根據(jù)情況,如果包含則返回 true,否則返回false。(注意:對(duì)象數(shù)組不能使用includes方法來檢測。) -
indexOf
返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引,如果不存在,則返回-1。
-join
將一個(gè)數(shù)組(或一個(gè)類數(shù)組對(duì)象)的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目,那么將返回該項(xiàng)目而不使用分隔符。 -
keys
返回一個(gè)包含數(shù)組中每個(gè)索引鍵的Array Iterator
對(duì)象。
-lastIndexOf
返回指定元素(也即有效的 JavaScript 值或變量)在數(shù)組中的最后一個(gè)的索引,如果不存在則返回 -1。從數(shù)組的后面向前查找,從fromIndex
處開始。 -
map
創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。 -
pop
從數(shù)組中刪除最后一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長度。
-push
將一個(gè)或多個(gè)元素添加到數(shù)組的末尾,并返回該數(shù)組的新長度。 -
reduce
對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行),將其結(jié)果匯總為單個(gè)返回值。
-reduceRight
接受一個(gè)函數(shù)作為累加器(accumulator)和數(shù)組的每個(gè)值(從右到左)將其減少為單個(gè)值。 -
reverse
將數(shù)組中元素的位置顛倒,并返回該數(shù)組。該方法會(huì)改變?cè)瓟?shù)組。
-shift
從數(shù)組中刪除第一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長度。 -
slice
返回一個(gè)新的數(shù)組對(duì)象,這一對(duì)象是一個(gè)由 begin和 end(不包括end)決定的原數(shù)組的淺拷貝。原始數(shù)組不會(huì)被改變。 -
some
測試是否至少有一個(gè)元素通過由提供的函數(shù)實(shí)現(xiàn)的測試。
-sort
用原地算法對(duì)數(shù)組的元素進(jìn)行排序,并返回?cái)?shù)組。排序算法現(xiàn)在是穩(wěn)定的。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。 -
splice
通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。 -
toLocaleString
返回一個(gè)字符串表示數(shù)組中的元素。數(shù)組中的元素將使用各自的 toLocaleString 方法轉(zhuǎn)成字符串,這些字符串將使用一個(gè)特定語言環(huán)境的字符串(例如一個(gè)逗號(hào) ",")隔開。 -
toString
返回一個(gè)字符串,表示指定的數(shù)組及其元素。 -
unshift
將一個(gè)或多個(gè)元素添加到數(shù)組的開頭,并返回該數(shù)組的新長度。 -
values
返回一個(gè)新的 Array Iterator 對(duì)象,該對(duì)象包含數(shù)組每個(gè)索引的值
常見方法語法解釋
上面列出了在js數(shù)組當(dāng)中常見的方法,下面在其中選取一些比較高頻和重要的方法來說明。
from方法
從一個(gè)類似數(shù)組或可迭代對(duì)象中創(chuàng)建一個(gè)新的數(shù)組實(shí)例。
語法:
Array.from(arrayLike[, mapFn[, thisArg]])
參數(shù):
?1. arrayLike
? 想要轉(zhuǎn)換成數(shù)組的偽數(shù)組對(duì)象或可迭代對(duì)象。
? 2. mapFn
(可選參數(shù))
? 如果指定了該參數(shù),新數(shù)組中的每個(gè)元素會(huì)執(zhí)行該回調(diào)函數(shù)。
?3. thisArg
(可選參數(shù))
? 可選參數(shù),執(zhí)行回調(diào)函數(shù) mapFn
時(shí) this
對(duì)象。
返回值:
一個(gè)新的數(shù)組實(shí)例。
demo:
Array.from('foo');
// ["f", "o", "o"]
isArray
用于確定傳遞的值是否是一個(gè)Array
。
語法:
Array.isArray(obj)
參數(shù):
?1. obj
? 需要檢測的值。
demo:
Array.isArray([1, 2, 3]); // true
concat
用于合并兩個(gè)或多個(gè)數(shù)組。此方法不會(huì)更改現(xiàn)有數(shù)組,而是返回一個(gè)新數(shù)組。
語法:
var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])
參數(shù):
?valueN
? 將數(shù)組和/或值連接成新數(shù)組。
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
測試數(shù)組的所有元素是否都通過了指定函數(shù)的測試。
語法:
arr.every(callback[, thisArg])
參數(shù):
?1. callback
? 用來測試每個(gè)元素的函數(shù)。
?2. thisArg
? 執(zhí)行 callback
時(shí)使用的 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
用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。
語法:
arr.fill(value[, start[, end]])
參數(shù):
?1. value
? 用來填充數(shù)組元素的值。
?2. start
可選
? 起始索引,默認(rèn)值為0。
?3. end
可選
? 終止索引,默認(rèn)值為 this.length。
返回值:
修改后的數(shù)組。
filter
創(chuàng)建一個(gè)新數(shù)組, 其包含通過所提供函數(shù)實(shí)現(xiàn)的測試的所有元素。
語法:
var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
參數(shù):
?1. callback
? 用來測試數(shù)組的每個(gè)元素的函數(shù)。返回 true 表示該元素通過測試,保留該元素,false 則不保留。它接受以下三個(gè)參數(shù):
?2. element
? 數(shù)組中當(dāng)前正在處理的元素。
?3. index
可選
? 正在處理的元素在數(shù)組中的索引。
?4. array
可選
? 調(diào)用了 filter 的數(shù)組本身。
?5. thisArg
可選
? 執(zhí)行 callback 時(shí),用于 this 的值。
返回值:
一個(gè)新的、由通過測試的元素組成的數(shù)組,如果沒有任何數(shù)組元素通過測試,則返回空數(shù)組。
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
返回?cái)?shù)組中滿足提供的測試函數(shù)的第一個(gè)元素的值。否則返回 undefined。
語法:
arr.find(callback[, thisArg])
參數(shù):
?1. callback
? 在數(shù)組每一項(xiàng)上執(zhí)行的函數(shù),接收 3 個(gè)參數(shù):
?2. element
? 當(dāng)前遍歷到的元素。
?3. index
可選
? 當(dāng)前遍歷到的索引。
?4. array
可選
? 數(shù)組本身。
?5. thisArg
可選
? 執(zhí)行回調(diào)時(shí)用作this 的對(duì)象。
demo:
var array1 = [5, 12, 8, 130, 44];
var found = array1.find(function(element) {
return element > 10;
});
console.log(found);
// expected output: 12
forEach
對(duì)數(shù)組的每個(gè)元素執(zhí)行一次提供的函數(shù)。
語法:
arr.forEach(callback[, thisArg]);
參數(shù):
?1. callback
? 為數(shù)組中每個(gè)元素執(zhí)行的函數(shù),該函數(shù)接收三個(gè)參數(shù):
?2. currentValue
?數(shù)組中正在處理的當(dāng)前元素。
?3. index
可選
? 數(shù)組中正在處理的當(dāng)前元素的索引。
?4. array
可選
? forEach() 方法正在操作的數(shù)組。
?5. thisArg
可選
? 可選參數(shù)。當(dāng)執(zhí)行回調(diào)函數(shù)時(shí)用作 this 的值(參考對(duì)象)。
demo:
var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {
console.log(element);
});
// expected output: "a"
// expected output: "b"
// expected output: "c"
indexOf
返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引,如果不存在,則返回-1。
語法:
arr.indexOf(searchElement)
arr.indexOf(searchElement[, fromIndex = 0])
參數(shù):
?1. searchElement
要查找的元素
?2. fromIndex
? 開始查找的位置。如果該索引值大于或等于數(shù)組長度,意味著不會(huì)在數(shù)組里查找,返回-1。如果參數(shù)中提供的索引值是一個(gè)負(fù)值,則將其作為數(shù)組末尾的一個(gè)抵消,即-1表示從最后一個(gè)元素開始查找,-2表示從倒數(shù)第二個(gè)元素開始查找 ,以此類推。 注意:如果參數(shù)中提供的索引值是一個(gè)負(fù)值,并不改變其查找順序,查找順序仍然是從前向后查詢數(shù)組。如果抵消后的索引值仍小于0,則整個(gè)數(shù)組都將會(huì)被查詢。其默認(rèn)值為0.
返回值:
首個(gè)被找到的元素在數(shù)組中的索引位置; 若沒有找到則返回 -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
將一個(gè)數(shù)組(或一個(gè)類數(shù)組對(duì)象)的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目,那么將返回該項(xiàng)目而不使用分隔符。
語法:
arr.join([separator])
參數(shù):
?1. separator
指定一個(gè)字符串來分隔數(shù)組的每個(gè)元素。如果需要,將分隔符轉(zhuǎn)換為字符串。如果省略(),數(shù)組元素用逗號(hào)分隔。默認(rèn)為 ","。如果?2. separator是空字符串(""),則所有元素之間都沒有任何字符。
返回值:
一個(gè)所有數(shù)組元素連接的字符串。如果 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
返回一個(gè)包含數(shù)組中每個(gè)索引鍵的Array Iterator對(duì)象。
語法:
arr.keys()
返回值:
一個(gè)新的 Array 迭代器對(duì)象。
demo:
var array1 = ['a', 'b', 'c'];
var iterator = array1.keys();
for (let key of iterator) {
console.log(key); // expected output: 0 1 2
}
map
創(chuàng)建一個(gè)新數(shù)組,其結(jié)果是該數(shù)組中的每個(gè)元素都調(diào)用一個(gè)提供的函數(shù)后返回的結(jié)果。
語法:
var new_array = arr.map(function callback(currentValue[, index[, array]]) {
// Return element for new_array
}[, thisArg])
參數(shù):
?1. callback
? 生成新數(shù)組元素的函數(shù),使用三個(gè)參數(shù):
?2. currentValue
? callback 數(shù)組中正在處理的當(dāng)前元素。
?3. index
可選
? callback 數(shù)組中正在處理的當(dāng)前元素的索引。
?4. array
可選
? callback map 方法被調(diào)用的數(shù)組。
?5. thisArg
可選
? 執(zhí)行 callback 函數(shù)時(shí)使用的this 值。
返回值:
一個(gè)新數(shù)組,每個(gè)元素都是回調(diào)函數(shù)的結(jié)果。
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
從數(shù)組中刪除最后一個(gè)元素,并返回該元素的值。此方法更改數(shù)組的長度。
語法:
arr.pop()
返回值:
從數(shù)組中刪除的元素(當(dāng)數(shù)組為空時(shí)返回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
對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行),將其結(jié)果匯總為單個(gè)返回值。
語法:
arr.reduce(callback[, initialValue])
參數(shù):
?1. callback
? 執(zhí)行數(shù)組中每個(gè)值的函數(shù),包含四個(gè)參數(shù):
?2. accumulator
? 累計(jì)器累計(jì)回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時(shí)返回的累積值,或initialValue(見于下方)。
?3. currentValue
?數(shù)組中正在處理的元素。
?4. currentIndex
可選
? 數(shù)組中正在處理的當(dāng)前元素的索引。 如果提供了initialValue,則起始索引號(hào)為0,否則為1。
?5. array
可選
? 調(diào)用reduce()的數(shù)組
?6. initialValue
可選
? 作為第一次調(diào)用 callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。 如果沒有提供初始值,則將使用數(shù)組中的第一個(gè)元素。 在沒有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。
返回值:
函數(shù)累計(jì)處理的結(jié)果.
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
將數(shù)組中元素的位置顛倒,并返回該數(shù)組。該方法會(huì)改變?cè)瓟?shù)組。
語法:
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
返回一個(gè)新的數(shù)組對(duì)象,這一對(duì)象是一個(gè)由 begin和 end(不包括end)決定的原數(shù)組的淺拷貝。原始數(shù)組不會(huì)被改變。
語法:
arr.slice();
// [0, end]
arr.slice(begin);
// [begin, end]
arr.slice(begin, end);
// [begin, end)
參數(shù):
?1. begin
可選
? 從該索引處開始提取原數(shù)組中的元素(從0開始)。
如果該參數(shù)為負(fù)數(shù),則表示從原數(shù)組中的倒數(shù)第幾個(gè)元素開始提取,slice(-2)表示提取原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(包含最后一個(gè)元素)。
如果省略 begin,則 slice 從索引 0 開始。
?2. end
可選
? 在該索引處結(jié)束提取原數(shù)組元素(從0開始)。slice會(huì)提取原數(shù)組中索引從 begin 到 end 的所有元素(包含begin,但不包含end)。
slice(1,4) 提取原數(shù)組中的第二個(gè)元素開始直到第四個(gè)元素的所有元素 (索引為 1, 2, 3的元素)。
如果該參數(shù)為負(fù)數(shù), 則它表示在原數(shù)組中的倒數(shù)第幾個(gè)元素結(jié)束抽取。 slice(-2,-1)表示抽取了原數(shù)組中的倒數(shù)第二個(gè)元素到最后一個(gè)元素(不包含最后一個(gè)元素,也就是只有倒數(shù)第二個(gè)元素)。
如果 end 被省略,則slice 會(huì)一直提取到原數(shù)組末尾。
如果 end 大于數(shù)組長度,slice 也會(huì)一直提取到原數(shù)組末尾。
返回值:
一個(gè)含有提取元素的新數(shù)組
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
測試是否至少有一個(gè)元素通過由提供的函數(shù)實(shí)現(xiàn)的測試。
語法:
arr.some(callback(element[, index[, array]])[, thisArg])
參數(shù):
?1. callback
? 用來測試每個(gè)元素的函數(shù),接受三個(gè)參數(shù):
?2. element
? 數(shù)組中正在處理的元素。
?3. index
可選
? 數(shù)組中正在處理的元素的索引值。
?4. array
可選
? some()被調(diào)用的數(shù)組。
?5. thisArg
可選
? 執(zhí)行 callback 時(shí)使用的 this 值。
返回值:
如果回調(diào)函數(shù)返回任何數(shù)組元素的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
用原地算法對(duì)數(shù)組的元素進(jìn)行排序,并返回?cái)?shù)組。排序算法現(xiàn)在是穩(wěn)定的。默認(rèn)排序順序是根據(jù)字符串Unicode碼點(diǎn)。
語法:
arr.sort([compareFunction])
參數(shù):
?1. compareFunction
可選
用來指定按某種順序進(jìn)行排列的函數(shù)。如果省略,元素按照轉(zhuǎn)換為的字符串的各個(gè)字符的Unicode位點(diǎn)進(jìn)行排序。
返回值:
排序后的數(shù)組。請(qǐng)注意,數(shù)組已原地排序,并且不進(jìn)行復(fù)制。
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
通過刪除或替換現(xiàn)有元素或者原地添加新的元素來修改數(shù)組,并以數(shù)組形式返回被修改的內(nèi)容。此方法會(huì)改變?cè)瓟?shù)組。
語法:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]])
參數(shù):
?1. start?
? 指定修改的開始位置(從0計(jì)數(shù))。如果超出了數(shù)組的長度,則從數(shù)組末尾開始添加內(nèi)容;如果是負(fù)值,則表示從數(shù)組末位開始的第幾位(從-1計(jì)數(shù),這意味著-n是倒數(shù)第n個(gè)元素并且等價(jià)于array.length-n);如果負(fù)數(shù)的絕對(duì)值大于數(shù)組的長度,則表示開始位置為第0位。
?2. deleteCount
可選
? 整數(shù),表示要移除的數(shù)組元素的個(gè)數(shù)。
如果 deleteCount 大于 start 之后的元素的總數(shù),則從 start 后面的元素都將被刪除(含第 start 位)。
如果 deleteCount 被省略了,或者它的值大于等于array.length - start(也就是說,如果它大于或者等于start之后的所有元素的數(shù)量),那么start之后數(shù)組的所有元素都會(huì)被刪除。
如果 deleteCount 是 0 或者負(fù)數(shù),則不移除元素。這種情況下,至少應(yīng)添加一個(gè)新元素。
?3. item1, item2, ...
可選
? 要添加進(jìn)數(shù)組的元素,從start 位置開始。如果不指定,則 splice() 將只刪除數(shù)組元素。
返回值:
由被刪除的元素組成的一個(gè)數(shù)組。如果只刪除了一個(gè)元素,則返回只包含一個(gè)元素的數(shù)組。如果沒有刪除元素,則返回空數(shù)組。
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