一、常用的數(shù)組方法
★ 直接操作影響原數(shù)組的方法:
Array.push() // 向數(shù)組的末尾添加一個(gè)或多個(gè)元素省撑,并返回新的數(shù)組長(zhǎng)度。原數(shù)組改變。
Array.pop() // 刪除并返回?cái)?shù)組的最后一個(gè)元素,若該數(shù)組為空本刽,則返回 undefined 。原數(shù)組改變赠涮。
Array.unshift() // 向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素,并返回新的數(shù)組長(zhǎng)度暗挑。原數(shù)組改變笋除。
Array.shift() // 刪除數(shù)組的第一項(xiàng),并返回第一個(gè)元素的值炸裆。若該數(shù)組為空垃它,則返回 undefined 。原數(shù)組改變烹看。
Array.reverse() // 將數(shù)組倒序国拇。原數(shù)組改變。
Array.sort(func) // 對(duì)數(shù)組元素進(jìn)行排序惯殊。按照字符串 UniCode 碼排序酱吝,原數(shù)組改變。
Array.splice(index,howmany,arr1,arr2...) // 刪除元素并添加元素土思,從 index 位置開(kāi)始刪除 howmany 個(gè)元素务热,并將 arr1、arr2...數(shù)據(jù)從 index 位置依次插入己儒。howmany 為 0 時(shí)崎岂,則不刪除元素。原數(shù)組改變闪湾。
Array.fill() // 使用給定值冲甘,填充一個(gè)數(shù)組。原數(shù)組改變。
★ 直接操作不影響原數(shù)組的方法:
Array.concat(arr1,arr2...) // 合并兩個(gè)或多個(gè)數(shù)組江醇,生成一個(gè)新的數(shù)組省艳。原數(shù)組不變。
Array.join() // 將數(shù)組的每一項(xiàng)用指定字符連接形成一個(gè)字符串嫁审。默認(rèn)連接字符為 “,” 逗號(hào)跋炕。原數(shù)組不變。
Array.slice(start,end) // 從 start 開(kāi)始律适, end 之前結(jié)束辐烂,不到 end ;如果不給 end 值捂贿,從 start 開(kāi)始到數(shù)組結(jié)束纠修。 start 可以給負(fù)值, -1 表示數(shù)組最后位置厂僧,-2 表示倒數(shù)第二個(gè)扣草,以此類推,顧前不顧后颜屠。原數(shù)組不變辰妙。
Array.find(func) // find 返回?cái)?shù)組中第一個(gè)滿足條件的元素(如果有的話), 如果沒(méi)有甫窟,則返回 undefined 密浑。原數(shù)組不變。
Array.findIndex(func) // findIndex 方法的用法與 find 粗井。原數(shù)組不變尔破。 方法很類似,返回第一個(gè)符合條件的數(shù)組成員的位置浇衬,如果所有成員都不符合條件懒构,則返回 -1≡爬蓿可識(shí)別 NaN 胆剧。原數(shù)組不變。
Array.filter(func) // 過(guò)濾數(shù)組梳星,返回一個(gè)滿足要求的數(shù)組 赞赖。原數(shù)組不變。
Array.every(func) // 對(duì)數(shù)組中的每一項(xiàng)進(jìn)行判斷冤灾,若都符合則返回 true 前域,否則返回 false 。原數(shù)組不變韵吨。
Array.some(func) // 對(duì)數(shù)組中的每一項(xiàng)進(jìn)行判斷匿垄,若都不符合則返回 false ,否則返回 true 。原數(shù)組不變椿疗。
Array.reduce(func) // reduce 方法接收一個(gè)函數(shù)作為累加器漏峰,數(shù)組中的每個(gè)值(從左到右)開(kāi)始縮減,最終計(jì)算為一個(gè)值届榄。原數(shù)組不變浅乔。
Array.from() // 快速便捷把一個(gè)類似數(shù)組的可迭代對(duì)象創(chuàng)建成一個(gè)新的數(shù)組實(shí)例。只要一個(gè)對(duì)象有 length 铝条, Array.from 就能把它變成一個(gè)數(shù)組靖苇,返回新的數(shù)組,而不改變?cè)瓕?duì)象班缰。原數(shù)組不變贤壁。
Array.includes() // 方法返回一個(gè)布爾值,表示某個(gè)數(shù)組是否包含給定的值埠忘,與字符串的 includes 方法類似脾拆。可識(shí)別 NaN 莹妒。原數(shù)組不變名船。
★ 直接操作有可能影響到原數(shù)組的方法:
Array.forEach(func) //用于調(diào)用數(shù)組的每個(gè)元素,并將元素傳遞給回調(diào)函數(shù)动羽。原數(shù)組不變包帚。(注意該方法和 map 的區(qū)別,若直接打印 Array.forEach 运吓,結(jié)果為 undefined )。
Array.map(func) //原數(shù)組的每一項(xiàng)執(zhí)行函數(shù)后疯趟,返回一個(gè)新的數(shù)組拘哨。原數(shù)組不變。(原數(shù)組里為對(duì)象信峻,直接操作數(shù)組本身倦青,是會(huì)改變數(shù)組的)
二、新舊方法對(duì)比
★ sort 排序 reverse 數(shù)組倒序:
var arr = [1, 3, 5, 4, 1, 2, 3, 6, 7]
//從小到大
arr.sort((a,b) => a-b);
console.log(arr) //[1, 1, 2, 3, 3, 4, 5, 6, 7]
//從大到小
arr.sort((a,b) => b-a);
console.log(arr) //[7, 6, 5, 4, 3, 3, 2, 1, 1]
//倒序
var arr = [1, 3, 5, 4, 1, 2, 3, 6, 7]
arr.reverse();
console.log(arr) //[7, 6, 3, 2, 1, 4, 5, 3, 1]
★ forEach 和 map
forEach 和 map 的作用類似盹舞,都是循環(huán)數(shù)組去做一些事情产镐,區(qū)別在于 map 會(huì)返回一個(gè)新數(shù)組,而 forEach 不會(huì)返回
例如一個(gè)班級(jí)中每個(gè)人年齡都加 1
var arr = [
{ id: 1, age: 18 },
{ id: 2, age: 24 },
{ id: 3, age: 26 },
{ id: 4, age: 19 },
]
// 舊寫(xiě)法
for (let i = 0; i < arr.length; i++) {
arr[i].age++;
}
console.log(arr); //[...]
// forEach
var newArr = arr.forEach( it => {
it.age++;
return it
})
console.log(arr,newArr); //[...] undefined
// map
var newArr = arr.map(it => {
it.age++;
return it;
})
console.log(arr,newArr); //[...] [...]
★ every和some
在沒(méi)有every和some之前踢步,做一些數(shù)組的判斷癣亚,都是用for循環(huán)來(lái)做的,現(xiàn)在可以簡(jiǎn)潔一下代碼了
例如說(shuō)檢查一組年齡获印,是否有大于 25 歲的
var age = [17, 24, 26, 25, 24];
// 舊寫(xiě)法
var flag = false;
for (let i = 0; i < age.length; i++) {
if(age[i] > 25){
flag = true;
}
}
console.log(flag);
// every 全滿足返回 true 否則為 false
// 是否全部小于等于 25
var flag = age.every(it => it<=25)
console.log(flag); // false 表明有大于 25 的
// some 滿足其一即返 回true 否則為 false 可
// 是否有大于 25
var flag = age.some(it => it>25)
console.log(flag); // true 表明有大于 25 的
★ filter方法的使用
filter過(guò)濾, 和map一樣述雾,也會(huì)返回新數(shù)組,保留哪些返回true的元素 例如篩選出年齡大于 25 歲的學(xué)生
var arr = [
{ id: 1, age: 18 },
{ id: 2, age: 24 },
{ id: 3, age: 26 },
{ id: 4, age: 19 },
]
// 舊寫(xiě)法
var newArr = [];
for (let i = 0; i < arr.length; i++) {
if (arr[i].age > 25) {
newArr.push(arr[i]);
}
}
console.log(newArr); // [{id: 3, age: 26}]
// filter
var newArr = arr.filter(it => it.age > 25);
console.log(newArr); //[{id: 3, age: 26}]
★ find和findIndex includes和indexOf
find返回?cái)?shù)組中第一個(gè)滿足條件的元素(如果有的話), 如果沒(méi)有玻孟,則返回undefined唆缴。
findIndex的話則是返回下標(biāo),如果所有成員都不符合條件黍翎,則返回 -1面徽。可識(shí)別 NaN
// 查找數(shù)組中第一個(gè) 20 歲的值
var arr = [
{ id: 1, age: 18 },
{ id: 2, age: 24 },
{ id: 3, age: 20 },
{ id: 4, age: 26 },
{ id: 5, age: 20 },
{ id: 6, age: 19 },
]
// 舊寫(xiě)法
var obj = {};
for (let i = 0; i < arr.length; i++) {
if (arr[i].age == 20) {
obj = arr[i];
break;
}
}
console.log(obj); // {id: 3, age: 20}
// find
var obj = arr.find(it => it.age == 20);
console.log(obj); // {id: 3, age: 20}
// 需要注意的是 find 只會(huì)返回第一個(gè)符合條件的那一項(xiàng)匣掸,filter 則是返回所有符合的項(xiàng)組成的新數(shù)組
// findIndex
var index = arr.findIndex(it => it.age == 20);
var obj = arr[index];
console.log(obj); // {id: 3, age: 20}
與findIndex類似趟紊,indexOf也是返回的數(shù)組下標(biāo),通常用于判斷數(shù)組里是否存在指定值旺聚,一般用于簡(jiǎn)單數(shù)組织阳,如果返回的不是 -1 則說(shuō)明數(shù)組中有這一項(xiàng) includes則直接返回Boolean值,true則表示有砰粹,而且includes可以判斷NaN唧躲,indexOf不行
// 判斷數(shù)組中是否有 20
var arr = [11, 24, 26, 20, 10, 20]
console.log(arr.indexOf(20) != -1) // true
console.log(arr.includes(20)) // true
arr.push(NaN)
console.log(arr.indexOf(NaN) != -1) // false
console.log(arr.includes(NaN)) // true
在檢查對(duì)象數(shù)組中是否存在某個(gè)值的時(shí)候一般來(lái)說(shuō)不使用indexOf和include,一般都是用find 或者fitter實(shí)現(xiàn)
★ Array.from()
Array.from()可以用于把有l(wèi)ength屬性的對(duì)象生成一個(gè)新數(shù)組碱璃,所以可以用他來(lái)新建數(shù)組弄痹,也可以結(jié)合Set來(lái)做數(shù)組的去重
var arr = [1, 2, 3, 3, 4, 1, 5];
// 舊方法去重
var newArr = [];
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
console.log(newArr) // [1, 2, 3, 4, 5]
// Set+from Set 和 Map 類似,也是一組 key 的集合嵌器,但不存儲(chǔ) value 肛真。由于 key 不能重復(fù),所以爽航,在 Set 中蚓让,沒(méi)有重復(fù)的 key。
var newArr = Array.from(new Set(arr));
console.log(newArr) // [1, 2, 3, 4, 5]