添加/移除首端或尾端數(shù)組元素
從數(shù)組的首端或尾端添加和刪除元素的方法:
-
arr.push(...items)
—— 從尾端添加元素袭灯, -
arr.pop()
—— 從尾端提取元素, -
arr.shift()
—— 從首端提取元素, -
arr.unshift(...items)
—— 從首端添加元素儡循。
從數(shù)組中刪除元素
因為數(shù)組是對象隅茎,所以可以使用 delete
:
let arr = ["I", "go", "home"];
delete arr[1]; // remove "go"
alert( arr[1] ); // undefined
// now arr = ["I", , "home"];
alert( arr.length ); // 3
元素被刪除了,但數(shù)組仍然有 3 個元素剑鞍,因為 delete obj.key
是通過 key
來移除對應(yīng)的值怜浅,被釋放的位置沒有被占據(jù)铐然,如果想讓數(shù)組空位置被占據(jù)蔬崩,就要使用數(shù)組的方法。
splice(添加搀暑,刪除和插入)
arr.splice(str)可以添加沥阳,刪除和插入元素
語法:
arr.splice(index[, deleteCount, elem1, ..., elemN])
從 index
開始:刪除 deleteCount
個元素并在當(dāng)前位置插入 elem1, ..., elemN
。最后返回已刪除元素的數(shù)組。
只有index
時會刪除從當(dāng)前索引開始的所有元素
例子:
- 從索引 1 開始刪除 1 個元素
let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // 從索引 1 開始刪除 1 個元素
alert( arr ); // ["I", "JavaScript"]
- 從頭刪除三個元素并替換
let arr = ["I", "study", "JavaScript", "right", "now"];
// remove 3 first elements and replace them with another
arr.splice(0, 3, "Let's", "dance");
alert( arr ) // now ["Let's", "dance", "right", "now"]
- 返回已刪除元素的數(shù)組
let arr = ["I", "study", "JavaScript", "right", "now"];
// 刪除前兩個元素
let removed = arr.splice(0, 2);
alert( removed ); // "I", "study" <-- 被從數(shù)組中刪除了的元素
- 將
deleteCount
設(shè)置為0
,splice
方法就能夠插入元素而不用刪除任何元素:
let arr = ["I", "study", "JavaScript"];
// 從索引 2 開始
// 刪除 0 個元素
// 然后插入 "complex" 和 "language"
arr.splice(2, 0, "complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"
---------------------------------------------------------------------
// 也可以使用負(fù)向索引
arr.splice(-1, 0,"complex", "language");
alert( arr ); // "I", "study", "complex", "language", "JavaScript"
slice(返回新數(shù)組)
arr.slice 方法比 arr.splice
簡單得多鱼鸠,就是根據(jù)兩個(開始潮峦、結(jié)束)索引返回新數(shù)組怠李。
語法:
arr.slice([start], [end])
它會返回一個新數(shù)組,將所有從索引 start
到 end
(不包括 end
)的數(shù)組項復(fù)制到一個新的數(shù)組。start
和 end
都可以是負(fù)數(shù),在這種情況下薪伏,從末尾計算索引。
只有start
時粗仓,返回從位置start
到尾端的的數(shù)組
例子:
let arr = ["t", "e", "s", "t"];
alert( arr.slice(1, 3) ); // e,s(復(fù)制從位置 1 到位置 3 的元素)
alert( arr.slice(-2) ); // s,t(復(fù)制從位置 -2 到尾端的元素)
alert( arr.slice() ); //
當(dāng)不帶參數(shù)地調(diào)用時:arr.slice()
會創(chuàng)建一個 arr
的副本嫁怀。其通常用于獲取副本,以進(jìn)行不影響原始數(shù)組的進(jìn)一步轉(zhuǎn)換借浊。
concat(數(shù)組拼接數(shù)組/值)
arr.concat 創(chuàng)建一個新數(shù)組塘淑,其中包含來自于其他數(shù)組和其他項的值。
語法:
arr.concat(arg1, arg2...)
它接受任意數(shù)量的參數(shù) —— 數(shù)組或值都可以蚂斤。
返回一個包含來自于 arr
存捺,然后是 arg1
,arg2
的元素的新數(shù)組曙蒸。
如果參數(shù) argN
是一個數(shù)組捌治,那么其中的所有元素都會被復(fù)制。否則逸爵,將復(fù)制參數(shù)本身
例子:
let arr = [1, 2];
// create an array from: arr and [3,4]
alert( arr.concat([3, 4]) ); // 1,2,3,4
// create an array from: arr and [3,4] and [5,6]
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6
// create an array from: arr and [3,4], then add values 5 and 6
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6
當(dāng)拼接對象時具滴,對象會作為一個整體添加
let arr = [1, 2];
let obj = {
aaa: "something",
};
console.log( arr.concat(obj) ); // [1, 2, {…}]
即使該對象看起來像數(shù)組一樣凹嘲,但仍然會被作為一個整體添加
let arr = [1, 2];
let arrayLike = {
0: "something",
length: 1
};
alert( arr.concat(arrayLike) ); // 1,2,[object Object]
console.log(arr.concat(arrayLike) ) // [1, 2, {…}]
但是师倔,如果類似數(shù)組的對象具有 Symbol.isConcatSpreadable
屬性,那么它就會被 concat
當(dāng)作一個數(shù)組來處理:此對象中的元素將被添加:
let arr = [1, 2];
let arrayLike = {
aaa: "something",
bbb: "else",
[Symbol.isConcatSpreadable]: true,
length: 2
};
alert( arr.concat(arrayLike) ); // 1,2,something,else
遍歷:forEach
arr.forEach 方法對數(shù)組的每個元素執(zhí)行一次給定的函數(shù)
語法:
arr.forEach(function(item[, index [, array]]) {
// ... do something with item
})[, thisArg]);// thisArg為可選參數(shù)周蹭,當(dāng)執(zhí)行回調(diào)函數(shù)時趋艘,用作 this 的值。
-
item
是數(shù)組中正在處理的當(dāng)前元素 -
index
是數(shù)組中正在處理的當(dāng)前元素的索引 -
array
是正在操作的數(shù)組
例子:
對每個元素調(diào)用 alert
["Bilbo", "Gandalf", "Nazgul"].forEach(alert);
這段代碼更詳細(xì)地介紹了它們在目標(biāo)數(shù)組中的位置
["Bilbo", "Gandalf", "Nazgul"].forEach((item, index, array) => {
alert(`${item} is at index ${index} in ${array}`);
});
該方法沒有返回值(undefined
)凶朗。
注意:如果使用箭頭函數(shù)表達(dá)式來傳入函數(shù)參數(shù)瓷胧,
thisArg
參數(shù)會被忽略,因為箭頭函數(shù)在詞法上綁定了this
值棚愤。
在數(shù)組中搜索
indexOf
arr.indexOf(searchElement[, fromIndex])
searchElement
:要查找的元素
從索引fromIndex
開始查找搓萧,返回在數(shù)組中要查找的元素searchElement
的第一個索引杂数,如果不存在,則返回-1瘸洛。
- 如果該索引值大于或等于數(shù)組長度揍移,意味著不會在數(shù)組里查找,返回-1反肋。
- 如果參數(shù)中提供的索引值是一個負(fù)值那伐,則將其作為數(shù)組末尾的一個抵消,即-1表示從最后一個元素開始查找石蔗,-2表示從倒數(shù)第二個元素開始查找 罕邀,以此類推。
- 注意:如果參數(shù)中提供的索引值是一個負(fù)值养距,并不改變其查找順序诉探,查找順序仍然是從前向后查詢數(shù)組。如果抵消后的索引值仍小于0棍厌,則整個數(shù)組都將會被查詢阵具。其默認(rèn)值為0.
例子:
let arr = [1, 0, false];
alert( arr.indexOf(0) ); // 1
alert( arr.indexOf(false) ); // 2
alert( arr.indexOf(null) ); // -1
alert( arr.includes(1) ); // true
lastIndexOf
arr.lastIndexOf(searchElement[, fromIndex])
從索引fromIndex
從右向左開始查找,返回在數(shù)組中要查找的元素searchElement
的最后一個索引定铜,如果不存在阳液,則返回-1。
- 如果索引值大于或等于數(shù)組的長度揣炕,則整個數(shù)組會被查找帘皿。
- 如果索引值為負(fù)值,數(shù)組仍然會被從后向前查找畸陡。
- 如果索引值為負(fù)值鹰溜,其絕對值大于數(shù)組長度,則方法返回 -1丁恭,即數(shù)組不會被查找曹动。
- 索引值默認(rèn)為數(shù)組的長度減 1(
arr.length - 1
),即整個數(shù)組都被查找牲览。
includes
includes()
方法用來判斷一個數(shù)組是否包含一個指定的值墓陈,根據(jù)情況,如果包含則返回 true第献,否則返回false贡必。
arr.includes(item[, from])
從索引 from
開始搜索 item
,如果找到則返回 true
庸毫,如果沒找到仔拟,則返回 false
。
如果我們想檢查是否包含某個元素飒赃,并且不想知道確切的索引利花,那么 arr.includes
是首選科侈。
此外,includes
的一個非常小的差別是它能正確處理NaN
炒事,而不像 indexOf/lastIndexOf
:
const arr = [NaN];
alert( arr.indexOf(NaN) ); // -1(應(yīng)該為 0兑徘,但是嚴(yán)格相等 === equality 對 NaN 無效)
alert( arr.includes(NaN) );// true(這個結(jié)果是對的)
找到具有特定條件的對象
find和findindex
find()
方法返回數(shù)組中滿足提供的測試函數(shù)的第一個元素的值。否則返回 undefined
羡洛。
語法:
let result = arr.find(function(item, index, array) {
// 如果返回 true挂脑,則返回 item 并停止迭代
// 對于 falsy 則返回 undefined
});
-
item
是當(dāng)前元素。 -
index
是當(dāng)前元素的索引欲侮。 -
array
是數(shù)組本身崭闲。
依次對數(shù)組中的每個元素調(diào)用該函數(shù):
如果它返回 true
,則搜索停止威蕉,并返回 item
刁俭。如果沒有搜索到,則返回 undefined
韧涨。
例子:
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
let user = users.find(item => item.id == 1);
alert(user.name); // John
arr.findIndex
方法(與 arr.find
方法)基本上是一樣的牍戚,但它返回找到元素的索引,而不是元素本身虑粥。并且在未找到任何內(nèi)容時返回 -1
如孝。
filter
如果需要匹配的有很多,我們可以使用 arr.filter(fn)娩贷。
語法與 find
大致相同第晰,但是 filter
返回的是所有匹配元素組成的數(shù)組:
let results = arr.filter(function(item, index, array) {
// 如果 true item 被 push 到 results,迭代繼續(xù)
// 如果什么都沒找到彬祖,則返回空數(shù)組
});
例子:
let users = [
{id: 1, name: "John"},
{id: 2, name: "Pete"},
{id: 3, name: "Mary"}
];
// 返回前兩個用戶的數(shù)組
let someUsers = users.filter(item => item.id < 3);
alert(someUsers.length); // 2
轉(zhuǎn)換數(shù)組(遍歷)
map(返回數(shù)組)
arr.map 方法是最有用和經(jīng)常使用的方法之一茁瘦。
它對數(shù)組的每個元素都調(diào)用函數(shù),并返回結(jié)果數(shù)組储笑。
語法:
let result = arr.map(function(item, index, array) {
// 返回新值而不是當(dāng)前元素
})
例子:
let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
alert(lengths); // 5,7,6
sort(fn)
arr.sort 方法對數(shù)組進(jìn)行 原位(in-place) 排序甜熔,更改元素的順序。(原位是指在此數(shù)組內(nèi)突倍,而非生成一個新數(shù)組腔稀。)
它還返回排序后的數(shù)組,但是返回值通常會被忽略赘方,因為修改了 arr
本身烧颖。
語法:
arr.sort([compareFunction])
compareFunction
可選
用來指定按某種順序進(jìn)行排列的函數(shù)弱左。如果省略窄陡,元素按照轉(zhuǎn)換為的字符串的各個字符的Unicode
位點進(jìn)行排序。
-
firstEl
第一個用于比較的元素拆火。
-
secondEl
第二個用于比較的元素跳夭。
例子:
let arr = [ 1, 2, 15 ];
// 該方法重新排列 arr 的內(nèi)容
arr.sort();
alert( arr ); // 1, 15, 2
如果指明了 compareFunction
涂圆,那么數(shù)組會按照調(diào)用該函數(shù)的返回值排序。即 a 和 b 是兩個將要被比較的元素:
如果
compareFunction(a, b)
小于 0 币叹,那么 a 會被排列到 b 之前润歉;如果
compareFunction(a, b)
等于 0 , a 和 b 的相對位置不變颈抚。備注: ECMAScript 標(biāo)準(zhǔn)并不保證這一行為踩衩,而且也不是所有瀏覽器都會遵守(例如 Mozilla 在 2003 年之前的版本);如果
compareFunction(a, b)
大于 0 贩汉, b 會被排列到 a 之前驱富。compareFunction(a, b)
必須總是對相同的輸入返回相同的比較結(jié)果,否則排序的結(jié)果將是不確定的匹舞。
function compareNumeric(a, b) {
// if (a > b) return 1;
// if (a == b) return 0;
// if (a < b) return -1;
return a - b;
}
let arr = [ 1, 2, 15 ];
arr.sort(compareNumeric);
alert(arr); // 1, 2, 15
// 上面簡寫arr.sort( (a, b) => a - b );
reverse反轉(zhuǎn)數(shù)組
arr.reverse 方法用于顛倒 arr
中元素的順序褐鸥。
例如:
let arr = [1, 2, 3, 4, 5];
arr.reverse();
alert( arr ); // 5,4,3,2,1
它也會返回顛倒后的數(shù)組 arr
。
split (分割字符串為數(shù)組)
str.split(delim) 可以通過給定的分隔符 delim
將字符串分割成一個數(shù)組赐稽。
使用"逗號后跟著一個空格"作為分隔符
let names = 'Bilbo, Gandalf, Nazgul';
let arr = names.split(', ');
for (let name of arr) {
alert( `A message to ${name}.` ); // A message to Bilbo(和其他名字)
}
split
方法有一個可選的第二個數(shù)字參數(shù) —— 對數(shù)組長度的限制叫榕。如果提供了,那么額外的元素會被忽略姊舵。但實際上它很少使用:
let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);
alert(arr); // Bilbo, Gandalf
拆分為字母
調(diào)用帶有空參數(shù)
s
的split(s)
晰绎,會將字符串拆分為字母數(shù)組:let str = "test"; alert( str.split('') ); // t,e,s,t
join(拼接字符串為數(shù)組)
arr.join(glue) 與 split
相反。它會在它們之間創(chuàng)建一串由 glue
粘合的 arr
項括丁。
例子:
let arr = ['Bilbo', 'Gandalf', 'Nazgul'];
let str = arr.join(';'); // 使用分號 ; 將數(shù)組粘合成字符串
alert( str ); // Bilbo;Gandalf;Nazgul
reduce/reduceRight(根據(jù)數(shù)組計算單個值)
當(dāng)我們需要遍歷一個數(shù)組時 —— 我們可以使用 forEach
寒匙,for
或 for..of
。
當(dāng)我們需要遍歷并返回每個元素的數(shù)據(jù)時 —— 我們可以使用 map
躏将。
arr.reduce 方法和 arr.reduceRight 方法和上面的種類差不多锄弱,但稍微復(fù)雜一點。它們用于根據(jù)數(shù)組計算單個值祸憋。
語法是:
let value = arr.reduce(function(accumulator, item, index, array) {
// ...
}, [initial]);
該函數(shù)一個接一個地應(yīng)用于所有數(shù)組元素会宪,并將其結(jié)果“搬運(carry on)”到下一個調(diào)用。
參數(shù):
-
accumulator
—— 是上一個函數(shù)調(diào)用的結(jié)果蚯窥,第一次等于initial
(如果提供了initial
的話)掸鹅。 -
item
—— 當(dāng)前的數(shù)組元素。 -
index
—— 當(dāng)前索引拦赠。 -
arr
—— 數(shù)組本身巍沙。
應(yīng)用函數(shù)時,上一個函數(shù)調(diào)用的結(jié)果將作為第一個參數(shù)傳遞給下一個函數(shù)荷鼠。
因此句携,第一個參數(shù)本質(zhì)上是累加器,用于存儲所有先前執(zhí)行的組合結(jié)果允乐。最后矮嫉,它成為 reduce
的結(jié)果削咆。
在這里,我們通過一行代碼得到一個數(shù)組的總和:
let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((sum, current) => sum + current, 0);
alert(result); // 15
傳遞給 reduce
的函數(shù)僅使用了 2 個參數(shù)蠢笋,通常這就足夠了
讓我們看看細(xì)節(jié)拨齐,到底發(fā)生了什么。
- 在第一次運行時昨寞,
sum
的值為初始值initial
(reduce
的最后一個參數(shù))瞻惋,等于 0,current
是第一個數(shù)組元素援岩,等于1
熟史。所以函數(shù)運行的結(jié)果是1
。 - 在第二次運行時窄俏,
sum = 1
蹂匹,我們將第二個數(shù)組元素(2
)與其相加并返回。 - 在第三次運行中凹蜈,
sum = 3
限寞,我們繼續(xù)把下一個元素與其相加,以此類推……
計算流程:
或者以表格的形式表示仰坦,每一行代表的是對下一個數(shù)組元素的函數(shù)調(diào)用:
current |
result |
sum |
|
---|---|---|---|
第 1 次調(diào)用 | 0 |
1 |
1 |
第 2 次調(diào)用 | 1 |
2 |
3 |
第 3 次調(diào)用 | 3 |
3 |
6 |
第 4 次調(diào)用 | 6 |
4 |
10 |
第 5 次調(diào)用 | 10 |
5 |
15 |
在這里履植,我們可以清楚地看到上一個調(diào)用的結(jié)果如何成為下一個調(diào)用的第一個參數(shù)。
我們也可以省略初始值:
let arr = [1, 2, 3, 4, 5];
// 刪除 reduce 的初始值(沒有 0)
let result = arr.reduce((sum, current) => sum + current);
alert( result ); // 15
結(jié)果是一樣的悄晃。這是因為如果沒有初始值玫霎,那么 reduce
會將數(shù)組的第一個元素作為初始值,并從第二個元素開始迭代妈橄。
計算表與上面相同庶近,只是去掉第一行。
但是這種使用需要非常小心眷蚓。如果數(shù)組為空鼻种,那么在沒有初始值的情況下調(diào)用 reduce
會導(dǎo)致錯誤。
例子:
let arr = [];
// Error: Reduce of empty array with no initial value
// 如果初始值存在沙热,則 reduce 將為空 arr 返回它(即這個初始值)叉钥。
arr.reduce((sum, current) => sum + current);
所以建議始終指定初始值。
arr.reduceRight 和 arr.reduce 方法的功能一樣篙贸,只是遍歷為從右到左投队。
Array.isArray(判斷是否為數(shù)組)
數(shù)組是基于對象的,不構(gòu)成單獨的語言類型爵川。
所以 typeof
不能幫助從數(shù)組中區(qū)分出普通對象:
alert(typeof {}); // object
alert(typeof []); // object
Array.isArray(value)可以對此進(jìn)行判斷敷鸦,如果 value
是一個數(shù)組,則返回 true
;否則返回 false
轧膘。
alert(Array.isArray({})); // false
alert(Array.isArray([])); // true
thisArg(附加參數(shù))
幾乎所有調(diào)用函數(shù)的數(shù)組方法 —— 比如 find
钞螟,filter
兔甘,map
谎碍,除了 sort
是一個特例,都接受一個可選的附加參數(shù) thisArg
洞焙。
上面的部分中沒有解釋該參數(shù)蟆淀,因為該參數(shù)很少使用以下是這些方法的完整語法:
arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);
// ...
// thisArg 是可選的最后一個參數(shù)
thisArg
參數(shù)的值在 func
中變?yōu)?this
。
例如澡匪,在這里我們使用 army
對象方法作為過濾器熔任,thisArg
用于傳遞上下文(passes the context):
let army = {
minAge: 18,
maxAge: 27,
canJoin(user) {
return user.age >= this.minAge && user.age < this.maxAge;
}
};
let users = [
{age: 16},
{age: 20},
{age: 23},
{age: 30}
];
// 找到 army.canJoin 返回 true 的 user
let soldiers = users.filter(army.canJoin, army);
alert(soldiers.length); // 2
alert(soldiers[0].age); // 20
alert(soldiers[1].age); // 23
如果在上面的示例中我們使用了 users.filter(army.canJoin)
,那么 army.canJoin
將被作為獨立函數(shù)調(diào)用唁情,并且這時 this=undefined
疑苔,從而會導(dǎo)致即時錯誤。
可以用 users.filter(user => army.canJoin(user))
替換對 users.filter(army.canJoin, army)
的調(diào)用甸鸟。前者的使用頻率更高惦费,因為對于大多數(shù)人來說,它更容易理解抢韭。
總結(jié)
數(shù)組方法備忘單:
- 添加/刪除元素:
-
push(...items)
—— 向尾端添加元素薪贫, -
pop()
—— 從尾端提取一個元素, -
shift()
—— 從首端提取一個元素刻恭, -
unshift(...items)
—— 向首端添加元素瞧省, -
splice(pos, deleteCount, ...items)
—— 從index
開始刪除deleteCount
個元素,并在當(dāng)前位置插入items
鳍贾。 -
slice(start, end)
—— 創(chuàng)建一個新數(shù)組鞍匾,將從位置start
到位置end
(但不包括end
)的元素復(fù)制進(jìn)去。 -
concat(...items)
—— 返回一個新數(shù)組:復(fù)制當(dāng)前數(shù)組的所有元素骑科,并向其中添加items
候学。如果items
中的任意一項是一個數(shù)組,那么就取其元素纵散。
-
- 搜索元素:
-
indexOf/lastIndexOf(item, pos)
—— 從位置pos
開始搜索item
梳码,搜索到則返回該項的索引,否則返回-1
伍掀。 -
includes(value)
—— 如果數(shù)組有value
掰茶,則返回true
,否則返回false
蜜笤。 -
find/filter(func)
—— 通過func
過濾元素濒蒋,返回使func
返回true
的第一個值/所有值。 -
findIndex
和find
類似,但返回索引而不是值沪伙。
-
- 遍歷元素:
-
forEach(func)
—— 對每個元素都調(diào)用func
瓮顽,不返回任何內(nèi)容。
-
- 轉(zhuǎn)換數(shù)組:
-
map(func)
—— 根據(jù)對每個元素調(diào)用func
的結(jié)果創(chuàng)建一個新數(shù)組围橡。 -
sort(func)
—— 對數(shù)組進(jìn)行原位(in-place)排序暖混,然后返回它。 -
reverse()
—— 原位(in-place)反轉(zhuǎn)數(shù)組翁授,然后返回它拣播。 -
split/join
—— 將字符串轉(zhuǎn)換為數(shù)組并返回。 -
reduce(func, initial)
—— 通過對每個元素調(diào)用func
計算數(shù)組上的單個值收擦,并在調(diào)用之間傳遞中間結(jié)果贮配。
-
- 其他:
-
Array.isArray(arr)
檢查arr
是否是一個數(shù)組。
-
請注意塞赂,sort
泪勒,reverse
和 splice
方法修改的是數(shù)組本身。
這些是最常用的方法宴猾,它們覆蓋 99% 的用例圆存。但是還有其他幾個:
-
arr.some(fn)/arr.every(fn) 檢查數(shù)組。
與
map
類似鳍置,對數(shù)組的每個元素調(diào)用函數(shù)fn
辽剧。如果任何/所有結(jié)果為true
,則返回true
税产,否則返回false
怕轿。 arr.fill(value, start, end) —— 從索引
start
到end
,用重復(fù)的value
填充數(shù)組辟拷。arr.copyWithin(target, start, end) —— 將從位置
start
到end
的所有元素復(fù)制到 自身 的target
位置(覆蓋現(xiàn)有元素)撞羽。
有關(guān)完整列表,請參閱 手冊衫冻。
參考:
1.現(xiàn)代javascript教程
2.mdn