這么多數(shù)組方法，你掌握了么？

今天總結(jié)一下常用的JS數(shù)組方法，以免搞忘了或者記混了，大家覺(jué)得還有哪些數(shù)組方法在項(xiàng)目里用的特別多我沒(méi)提到的可以補(bǔ)充。。
?1.map?：遍歷數(shù)組的每一項(xiàng)并對(duì)其進(jìn)行操作。? 有返回值??且??不改變?cè)瓟?shù)組。
var arr = [1, 2, 3, 4, 5, 6]; var res = arr.map(item => { return item * 2; });
console.log(arr);//[1, 2, 3, 4, 5, 6] console.log(res); //[2, 4, 6, 8, 10, 12]
2. forEach?：遍歷數(shù)組每一項(xiàng)并可對(duì)其操作，但是結(jié)果無(wú)用功。? 因?yàn)閒orEach沒(méi)有返回值 且 不改變?cè)瓟?shù)組
可以針對(duì)數(shù)組的長(zhǎng)度對(duì)你想要改變的變量進(jìn)行修改。
var arr1 = [3, 4, 5, 6, 7]; var nums = 0; arr1.forEach(item => {
console.log(item); nums++; }); console.log(arr1, nums);//[3,4,5,6,7],5
3. some：?方法測(cè)試數(shù)組中是不是至少有1個(gè)元素通過(guò)了被提供的函數(shù)測(cè)試。它返回的是一個(gè)Boolean類型的值。每一項(xiàng)都會(huì)遍歷。
const result = []; var arr2 = [ { name: "lx", age: 35 }, { name: "lxx", age:
20 }, { name: "l1x", age: 5 }, { name: "1lx", age: 15 }, { name: "zlx", age: 25
}, { name:"xlx", age: 22 } ]; arr2.some(item => { // console.log(item.age)
console.log(item.age % 5 == 0);// 5true false if (item.age % 5 == 0) {
result.push({ age: item.age }); }else { result.push({ unage: item.age }); } });
console.log(result);
4.every?：
?該方法??測(cè)試一個(gè)數(shù)組內(nèi)的所有元素是否都能通過(guò)某個(gè)指定函數(shù)的測(cè)試。它返回一個(gè)布爾值。當(dāng)有一項(xiàng)與條件成立時(shí)?后面的項(xiàng)停止遍歷。同樣返回值是一個(gè)Boolean類型。
? ?? var arr3 = [3, 2, 3, 4, 5, 6, 7]; function test(item) { return item > 1;
} console.log(arr3.every(test));//true
5.filter:?顧名思義?過(guò)濾??該數(shù)組方法就是能夠做到拿到你想要得到的那條數(shù)據(jù)的一個(gè)數(shù)組??注意是數(shù)組！?不會(huì)改變?cè)瓟?shù)組
? ?? var arr4 = [ { name: "lx", age: 28 }, { name: "l1x", age: 5 }, { name:
"1lx", age: 15 }, { name: "zlx", age: 25 }, { name: "xlx", age: 22 } ]; let res4
= arr4.filter(item => { return item.age == 25; }); console.log(res4); //
[{…}]0: {name: "zlx", age: 25} length: 1__proto__: Array(0)
6. concat:?合并?該方法是將兩個(gè)數(shù)組或多個(gè)數(shù)組合并成一個(gè)數(shù)組?不會(huì)改變?cè)瓟?shù)組?可以采用擴(kuò)展運(yùn)算符...?結(jié)果是一樣的
? ? ? var arr5 = [13, 5, 6, 7]; var arr6 = [23, 5, 6, 7]; let res6 =
arr6.concat(arr5); let res7= [...arr5, ...arr6]; //求數(shù)組并集 res7 = [...new
Set([...arr5, ...arr6])]; console.log(res7);// [13, 5, 6, 7, 23] // 求數(shù)組交集 var
bs =new Set(arr5); var sa = new Set(arr6); //{23,5,6,7} let res8 =
arr5.filter(item => sa.has(item)); console.log(res8); 7.
reduce:?這個(gè)方法相當(dāng)強(qiáng)大??基本上所有操作都可以實(shí)現(xiàn)?方法對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序執(zhí)行)，將其結(jié)果匯總為單個(gè)返回值。?參數(shù)callback，
??????//initialValue（不傳?默認(rèn)取數(shù)組的第一個(gè)元素） ??????//?reducer?函數(shù)接收4個(gè)參數(shù):
??????//?Accumulator?(acc)?(累計(jì)器) ??????//?Current?Value?(cur)?(當(dāng)前值)
??????//?Current?Index?(idx)?(當(dāng)前索引) ??????//?Source?Array?(src)?(源數(shù)組) ? ? ?? //
簡(jiǎn)單的例子 var arr7 = [1, 2, 3, 4, 5]; var ress7 = arr7.reduce((acc, cur) => { return
acc + cur; }, 0); console.log(ress7); //15
?注意：下面分場(chǎng)景分別介紹一下reduce這個(gè)方法的強(qiáng)大之處
//reduce場(chǎng)景1：累加對(duì)象數(shù)組中的值 var arr8 = [ { name: "lx", age: 28 }, { name: "l1x",
age: 5 }, { name: "1lx", age: 15 }, { name: "zlx", age: 25 }, { name: "xlx",
age: 22 } ]; var initValue = 0; const ress8 = arr8.reduce((acc, cur) => { return
acc + cur.age; }, 0); console.log(ress8); //95 //場(chǎng)景2： 將二維數(shù)組降一維 var arr9 = [[1,
2], 4, 8, 9]; let res9 = arr9.reduce((acc, cur) => { return acc.concat(cur); },
[]); console.log(res9);// [1, 2, 4, 8, 9] //場(chǎng)景3： 計(jì)算數(shù)組中每個(gè)元素出現(xiàn)的個(gè)數(shù) var arr10 =
["Alice", "Bob", "Tiff", "Bruce", "Alice"]; let res10 = arr10.reduce((acc, cur)
=> { if (cur in acc) { acc[cur]++; } else { acc[cur] = 1; } return acc; }, {});
console.log(res10); // 場(chǎng)景4： 按屬性對(duì)Object分類 var people = [ { name: "Alice", age: 21
}, { name:"Max", age: 20 }, { name: "Jane", age: 20 } ]; var resPeople =
people.reduce((acc, obj) => { var key = obj["age"]; if (!acc[key]) { acc[key] =
[]; } acc[key].push(obj);return acc; }, {}); console.log(resPeople); // 場(chǎng)景5：數(shù)組去重
var arr11 = ["a", "b", "a", "b", "c", "e", "e", "c", "d", "d", "d", "d"]; var
res11 = arr11.reduce((acc, cur) => { if (acc.indexOf(cur) === -1) {
acc.push(cur); }return acc; }, []); console.log(res11); //場(chǎng)景6： 按順序執(zhí)行Promise
function peomise1(a) { return new Promise((resolve, reject) => { //
當(dāng)異步代碼執(zhí)行成功后才會(huì)執(zhí)行resolve setTimeout(() => { resolve(a * 5); }, 1000); }); }
function peomise2(a) { return new Promise((resolve, reject) => { //
當(dāng)異步代碼執(zhí)行成功后才會(huì)執(zhí)行resolve setTimeout(() => { resolve(a * 2); }, 2000); }); }
function peomise3(a) { return new Promise((resolve, reject) => { //
當(dāng)異步代碼執(zhí)行成功后才會(huì)執(zhí)行resolve setTimeout(() => { resolve(a * 6); }, 1000); }); }
console.log(Promise.resolve(3)); //reduce 方式 順序執(zhí)行并返回一個(gè)結(jié)果 function
runPromise(arr, input) {return arr.reduce((acc, cur) => acc.then(cur),
Promise.resolve(input)); } const promiseArr= [peomise1, peomise3, peomise2];
runPromise(promiseArr, peomise1(3)).then(console.log);
8.
slice：?方法返回一個(gè)新的數(shù)組對(duì)象，這一對(duì)象是一個(gè)由?begin?和?end?決定的原數(shù)組的淺拷貝（包括?begin，不包括end）。同樣不會(huì)對(duì)原數(shù)組改變
? ?? let arr12 = [24, 3, 6, 8, 7, 9]; //省略第二個(gè)參數(shù)end 會(huì)一直拷貝到數(shù)組結(jié)尾處的元素 let res12 =
arr12.slice(3); console.log(res12); // [8,7,9]
9.
splice(start[,?deleteCount[,?item1[,?item2[,?...]]]]):?這個(gè)方法之前一直和slice分不清楚，其實(shí)它們有個(gè)最大的不同點(diǎn)就是，這個(gè)方法是改變?cè)瓟?shù)組的，不會(huì)重新開(kāi)辟一個(gè)空間去改變數(shù)組長(zhǎng)度。
?????
參數(shù)?start??指定修改的開(kāi)始位置（從0計(jì)數(shù)）。如果超出了數(shù)組的長(zhǎng)度，則從數(shù)組末尾開(kāi)始添加內(nèi)容；如果是負(fù)值，則表示從數(shù)組末位開(kāi)始的第幾位（從-1計(jì)數(shù)，這意味著-n是倒數(shù)第n個(gè)元素并且等
價(jià)于array.length-n）；如果負(fù)數(shù)的絕對(duì)值大于數(shù)組的長(zhǎng)度，則表示開(kāi)始位置為第0位。
deleteCount?可選?整數(shù)，表示要移除的數(shù)組元素的個(gè)數(shù)。

item1,?item2,?...?可選??要添加進(jìn)數(shù)組的元素,從start?位置開(kāi)始。如果不指定，則?splice()?將只刪除數(shù)組元素。
? ?? let arr13 = [1, 3, 5, 7, 9, 7, 2, 6, 57, 7]; //增 第一個(gè)參數(shù)代表位置索引
arr13.splice(1, 0, "2");// [1, "2", 3, 5, 7, 9, 7, 2, 6, 57, 7] //刪
第二個(gè)參數(shù)表示刪除元素的個(gè)數(shù)，當(dāng)省略時(shí)表示從索引處到數(shù)組結(jié)尾處全刪 arr13.splice(2); //[1,"2"] //改
arr13.splice(0, 1, "哈哈"); console.log(arr13); // ["哈哈", "2"] ? ? ?? //
例題熟悉一下這兩個(gè)方法： 從第 2 位開(kāi)始刪除 0 個(gè)元素，插入“drum” var myFish = ["angel", "clown",
"mandarin", "sturgeon"]; myFish.splice(1, 0, "drum"); console.log(myFish); //
["angel", "drum", "clown", "mandarin", "sturgeon"] //從第 3 位開(kāi)始刪除 1 個(gè)元素 var
myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; myFish.splice(3, 1
); console.log(myFish);// ["angel", "clown", "drum", "sturgeon"]
10. pop：沒(méi)有參數(shù)，負(fù)責(zé)刪除數(shù)組的最后一個(gè)元素,改變?cè)瓟?shù)組
? ? ? var arr14 = [1, 4, 5, 9]; arr14.pop(); //[1, 4, 5] console.log(arr14);
11. push:?像數(shù)組末尾添加一個(gè)元素或多個(gè)元素?arr.push(element1,?...,?elementN)
? ? ? var arr14 = [1, 4, 5, 9]; arr14.push("3"); //[1, 4, 5,9,"3"]
arr14.push("3", 2); console.log(arr14);
12.shift:?刪除數(shù)組的第一個(gè)元素?改變?cè)瓟?shù)組
var arr15 = [1, 4, 5, 9]; arr15.shift(); //[4, 5, 9] console.log(arr15);
13.unshift:?在數(shù)組首位添加一個(gè)或多個(gè)元素
var arr16 = [6, 1, 4, 5, 9, 8]; arr16.unshift("5", 3); //["5", 3, 6, 1, 4, 5,
9, 8] console.log(arr16); 14. fill?:?方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素。不包括終止索引。 ?
? ? arr.fill(value[,?start[,?end]]) ? 參數(shù)：value?填充數(shù)組元素的值 ? ? ? ? start?起始索引??默認(rèn)0
? ? ? ? ?end?終止索引?默認(rèn)this.length var arr17 = [2, 3, 4]; arr17.fill(6); //[6,6,6]
arr17.fill("7", 0, 2);//["7", "7", 6] console.log(arr17);
15. flat:?大家對(duì)這個(gè)方法一定不熟悉，我在一次做項(xiàng)目的時(shí)候用到了它，下面看看它的作用?方法很強(qiáng)大?扁平化數(shù)組??但是有兼容性的影響
// 參數(shù)表示扁平化的層級(jí) var arr18 = [2, 6, 8, [9, 10, 26]]; let res18 = arr18.flat(1); //
[2, 6, 8, 9, 10, 26] //Infinity 可以扁平任意深度的數(shù)組 // let res18 = arr18.flat(Infinity)
//[2, 6, 8, 9, 10, 26] console.log(res18);
16.join：?方法將一個(gè)數(shù)組（或一個(gè)類數(shù)組對(duì)象）的所有元素連接成一個(gè)字符串并返回這個(gè)字符串。如果數(shù)組只有一個(gè)項(xiàng)目，那么將返回該項(xiàng)目而不使用分隔符。
// 不改變?cè)瓟?shù)組 var arr19 = [2, 2, 6, 3, 4, 5, 6, "y"]; var res19 = arr19.join(",");
//2,2,6,3,4,5,6,y var res20 = arr19.join(""); //2263456y console.log(res20);
17. find?：?方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素??的值。否則返回?undefined。??注意是第一個(gè)
var arr21 = [ { name: "lz", age: 21 }, { name: "lx", age: 21 }, { tine: "xx",
ageL: 23 } ]; let res21 = arr21.find(ele => ele.age === 21) console.log(res21)
//{name: "lz", age: 21} 返回元素 //想要所有符合條件的 就可以用filter方法 let res22 =
arr21.filter(ele => ele.age === 21) console.log(res22) //返回?cái)?shù)組 [{…}, {…}]
18.findIndex:?方法返回?cái)?shù)組中滿足提供的測(cè)試函數(shù)的第一個(gè)元素的索引。否則返回-1。??注意是第一個(gè)
var arr23 = [ { name: "lz", age: 21 }, { name: "lx", age: 21 }, { tine: "xx",
ageL: 23 } ]; let res23 = arr23.findIndex(ele => ele.age === 21)
console.log(res23)//0 返回索引
19.indexOf：?方法返回在數(shù)組中可以找到一個(gè)給定元素的第一個(gè)索引，如果不存在，則返回-1。
? ? var arr24 = [1, { name: "lz", age: 21 }, { name: "lx", age: 21 }, { tine:
"xx", ageL: 23 } ]; let res24 = arr24.indexOf(1) console.log(res24) //0 返回索引
先總結(jié)這些，后續(xù)會(huì)補(bǔ)充，還會(huì)總結(jié)一些對(duì)象常用的方法，只有不斷總結(jié)，才能讓自己對(duì)這些方法不陌生，才能在項(xiàng)目中能有多種解決方法，選擇一種最優(yōu)解。

• ? 上一篇：多機(jī)部署之定時(shí)任務(wù)完整方案
• ? 下一篇：全鏈路壓測(cè)第一次實(shí)踐