今天總結一下常用的JS陣列方法，以免搞忘了或者記混了，大家覺得還有哪些陣列方法在專案里用的特別多我沒提到的可以補充，，
1.map ：遍歷陣列的每一項并對其進行操作， 有回傳值 且 不改變原陣列，
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 ：遍歷陣列每一項并可對其操作，但是結果無用功， 因為forEach沒有回傳值 且 不改變原陣列 可以針對陣列的長度對你想要改變的變數進行修改，
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： 方法測驗陣列中是不是至少有1個元素通過了被提供的函式測驗，它回傳的是一個Boolean型別的值，每一項都會遍歷，
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 ： 該方法 測驗一個陣列內的所有元素是否都能通過某個指定函式的測驗，它回傳一個布林值，當有一項與條件成立時 后面的項停止遍歷，同樣回傳值是一個Boolean型別，
var arr3 = [3, 2, 3, 4, 5, 6, 7]; function test(item) { return item > 1; } console.log(arr3.every(test)); //true
5.filter: 顧名思義 過濾 該陣列方法就是能夠做到拿到你想要得到的那條資料的一個陣列 注意是陣列！ 不會改變原陣列
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: 合并 該方法是將兩個陣列或多個陣列合并成一個陣列 不會改變原陣列 可以采用擴展運算子... 結果是一樣的
var arr5 = [13, 5, 6, 7]; var arr6 = [23, 5, 6, 7]; let res6 = arr6.concat(arr5); let res7 = [...arr5, ...arr6]; //求陣列并集 res7 = [...new Set([...arr5, ...arr6])]; console.log(res7); // [13, 5, 6, 7, 23] // 求陣列交集 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: 這個方法相當強大 基本上所有操作都可以實作 方法對陣列中的每個元素執行一個由您提供的reducer函式(升序執行)，將其結果匯總為單個回傳值， 引數callback， //initialValue（不傳 默認取陣列的第一個元素） // reducer 函式接收4個引數: // Accumulator (acc) (累計器) // Current Value (cur) (當前值) // Current Index (idx) (當前索引) // Source Array (src) (源陣列)
//簡單的例子 var arr7 = [1, 2, 3, 4, 5]; var ress7 = arr7.reduce((acc, cur) => { return acc + cur; }, 0); console.log(ress7); //15
注意：下面分場景分別介紹一下reduce這個方法的強大之處
//reduce場景1：累加物件陣列中的值 var arr8 = [ { name: "lx", age: 28 }, { name: "l1x", age: 5 }, { name: "1lx", age: 15 }, { name: "zlx", age: 25 }, { name: "xlx", age: 22 } ]; var initValue = https://www.cnblogs.com/xiao-yaolx/p/0; const ress8 = arr8.reduce((acc, cur) => { return acc + cur.age; }, 0); console.log(ress8); //95
//場景2： 將二維陣列降一維 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]
//場景3： 計算陣列中每個元素出現的個數 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);
// 場景4： 按屬性對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);
// 場景5：陣列去重 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);
//場景6： 按順序執行Promise function peomise1(a) { return new Promise((resolve, reject) => { //當異步代碼執行成功后才會執行resolve setTimeout(() => { resolve(a * 5); }, 1000); }); } function peomise2(a) { return new Promise((resolve, reject) => { //當異步代碼執行成功后才會執行resolve setTimeout(() => { resolve(a * 2); }, 2000); }); } function peomise3(a) { return new Promise((resolve, reject) => { //當異步代碼執行成功后才會執行resolve setTimeout(() => { resolve(a * 6); }, 1000); }); } console.log(Promise.resolve(3)); //reduce 方式 順序執行并回傳一個結果 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： 方法回傳一個新的陣列物件，這一物件是一個由 begin 和 end 決定的原陣列的淺拷貝（包括 begin，不包括end），同樣不會對原陣列改變
let arr12 = [24, 3, 6, 8, 7, 9]; //省略第二個引數end 會一直拷貝到陣列結尾處的元素 let res12 = arr12.slice(3); console.log(res12); // [8,7,9]
9. splice(start[, deleteCount[, item1[, item2[, ...]]]]): 這個方法之前一直和slice分不清楚，其實它們有個最大的不同點就是，這個方法是改變原陣列的，不會重新開辟一個空間去改變陣列長度，
引數 start? 指定修改的開始位置（從0計數），如果超出了陣列的長度，則從陣列末尾開始添加內容；如果是負值，則表示從陣列末位開始的第幾位（從-1計數，這意味著-n是倒數第n個元素并且等 價于array.length-n）；如果負數的絕對值大于陣列的長度，則表示開始位置為第0位，deleteCount 可選 整數，表示要移除的陣列元素的個數，
item1, item2, ... 可選 要添加進陣列的元素,從start 位置開始，如果不指定，則 splice() 將只洗掉陣列元素，
let arr13 = [1, 3, 5, 7, 9, 7, 2, 6, 57, 7]; //增 第一個引數代表位置索引 arr13.splice(1, 0, "2"); // [1, "2", 3, 5, 7, 9, 7, 2, 6, 57, 7] //刪 第二個引數表示洗掉元素的個數，當省略時表示從索引處到陣列結尾處全刪 arr13.splice(2); //[1,"2"] //改 arr13.splice(0, 1, "哈哈"); console.log(arr13); // ["哈哈", "2"]
//例題熟悉一下這兩個方法： 從第 2 位開始洗掉 0 個元素，插入“drum” var myFish = ["angel", "clown", "mandarin", "sturgeon"]; myFish.splice(1, 0, "drum"); console.log(myFish); //["angel", "drum", "clown", "mandarin", "sturgeon"] //從第 3 位開始洗掉 1 個元素 var myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"]; myFish.splice(3, 1); console.log(myFish); // ["angel", "clown", "drum", "sturgeon"]
10. pop：沒有引數，負責洗掉陣列的最后一個元素,改變原陣列
var arr14 = [1, 4, 5, 9]; arr14.pop(); //[1, 4, 5] console.log(arr14);
11. push: 像陣列末尾添加一個元素或多個元素 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: 洗掉陣列的第一個元素 改變原陣列
var arr15 = [1, 4, 5, 9]; arr15.shift(); //[4, 5, 9] console.log(arr15);
13.unshift: 在陣列首位添加一個或多個元素
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 : 方法用一個固定值填充一個陣列中從起始索引到終止索引內的全部元素，不包括終止索引， arr.fill(value[, start[, end]]) 引數：value 填充陣列元素的值 start 起始索引 默認0 end 終止索引 默認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: 大家對這個方法一定不熟悉，我在一次做專案的時候用到了它，下面看看它的作用 方法很強大 扁平化陣列 但是有兼容性的影響
// 引數表示扁平化的層級 var arr18 = [2, 6, 8, [9, 10, 26]]; let res18 = arr18.flat(1); //[2, 6, 8, 9, 10, 26] //Infinity 可以扁平任意深度的陣列 // let res18 = arr18.flat(Infinity) //[2, 6, 8, 9, 10, 26] console.log(res18);
16.join： 方法將一個陣列（或一個類陣列物件）的所有元素連接成一個字串并回傳這個字串，如果陣列只有一個專案，那么將回傳該專案而不使用分隔符，
// 不改變原陣列 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 ： 方法回傳陣列中滿足提供的測驗函式的第一個元素 的值，否則回傳 undefined， 注意是第一個
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) //回傳陣列 [{…}, {…}]
18.findIndex: 方法回傳陣列中滿足提供的測驗函式的第一個元素的索引，否則回傳-1， 注意是第一個
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： 方法回傳在陣列中可以找到一個給定元素的第一個索引，如果不存在，則回傳-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 回傳索引
先總結這些，后續會補充，還會總結一些物件常用的方法，只有不斷總結，才能讓自己對這些方法不陌生，才能在專案中能有多種解決方法，選擇一種最優解，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/159533.html
標籤：JavaScript