8個(gè)常用的JavaScript數(shù)組方法每個(gè)開發(fā)人員都必須知道
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]
現(xiàn)在，讓我們開始吧。
1、filter()
現(xiàn)在，我們假設(shè)，我們想要得到這個(gè)列表中年齡小于或等于 24歲的所有學(xué)生。我們需要使用filter方法來過濾掉所有大于 24 歲的學(xué)生。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const filteredStudents = students.filter((students) => {//this filter method just takes a single function, which is going to have one parameter of student which is every student/item in the array// we'd need to return a true or false statement on whether or not we want to include them in the new arrayreturn students.age <= 24//This line basically stashes all of the students whose ages are less than a 24 in the new filteredStudents array})console.log(filteredStudents)//
這種filter()數(shù)組方法超級(jí)好用。你所做的就是為每個(gè)項(xiàng)目返回 true 或 false。如果為真，則將其添加到新數(shù)組中，如果為假，則不添加。filter 方法和本文中所有其他方法的優(yōu)點(diǎn)在于，它們實(shí)際上不會(huì)更改你正在過濾的底層對(duì)象，因此我們可以記錄學(xué)生數(shù)組，并且它仍然包含所有項(xiàng)目。這非常方便，因?yàn)槲覀冊谑褂眠@些新數(shù)組方法創(chuàng)建新數(shù)組時(shí)，不必?fù)?dān)心更改舊數(shù)組。
2、map()
map() 允許你獲取一個(gè)數(shù)組并將其轉(zhuǎn)換為一個(gè)新數(shù)組。在這個(gè)中，新數(shù)組中的所有項(xiàng)目看起來都略有不同。如果我們想得到每個(gè)學(xué)生的名字。我們可以通過使用 map() 獲取名稱數(shù)組。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const studentNames = students.map((students) => {//the method takes a single function, with the students/items as a parameter// here we just return what we want in the new arrayreturn students.name})console.log(studentNames)/*If we print out these student names,console.log(studentNames)we get a new array that is just full of all the different names of the students.*//******************/
這可以通過數(shù)組中的任何內(nèi)容來完成。例如，當(dāng)你想要獲取一個(gè)對(duì)象，并且只獲取名稱或單個(gè)鍵，或者獲取一個(gè)數(shù)組并將其轉(zhuǎn)換為另一個(gè)數(shù)組時(shí)，該方法非常有用。此方法是 JavaScript 數(shù)組中最流行的方法之一。
3、find（）
此方法允許你在數(shù)組中查找單個(gè)對(duì)象。這是直截了當(dāng)?shù)姆椒?。假設(shè)我們想找到一個(gè)名叫 john 的學(xué)生。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const singleStudent = students.find((students) => {return students.name === 'john'})console.log(singleStudent)/*console.log(singleStudent) will give the everything associated with john in this example, I.eObject {age: 25,name: "john",score: 86}*/
在這個(gè)方法中，邏輯是有一個(gè) true 或 false 語句，它將返回第一個(gè)計(jì)算結(jié)果為 true 的數(shù)組項(xiàng)。
4、forEach()
與其他方法不同， forEach() 實(shí)際上不返回任何內(nèi)容，因此不需要 return 語句。假設(shè)我們需要打印出 student 數(shù)組中所有學(xué)生的名字，我們會(huì)這樣做：
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]students.forEach((students) => {console.log(students.name)})/*the result is the name property printed out on the console line after line like so"sam""john""dean""timothy""frank"*/
這將與 for 循環(huán)非常相似，但它將采用一個(gè)函數(shù)。因此，對(duì)于每個(gè)數(shù)組項(xiàng)，它將執(zhí)行函數(shù)內(nèi)的代碼塊。
這種方法只是使處理需要循環(huán)項(xiàng)目的數(shù)組變得更加容易，因?yàn)槟悴槐叵裢ǔＤ菢訉懗霰恐囟L的for循環(huán)語句。
5、some（）
這個(gè)方法與我們的大多數(shù)其他函數(shù)有點(diǎn)不同，它不是返回一個(gè)全新的數(shù)組，而是返回 true 或 false。所以我們可以檢查這個(gè)數(shù)組中是否有一些學(xué)生是未成年人。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const hasUnderageStudents = students.some((students) => {return students.age < 18})console.log(hasUnderageStudents)/*this will return false because there is no underage student in the array.*/
因此，如果任何學(xué)生項(xiàng)目的年齡值低于 18，該函數(shù)將返回 true。該方法只是檢查數(shù)組中是否有任何內(nèi)容返回 true，如果是，則整個(gè)內(nèi)容返回 true。
6、every()
此方法與 some() 非常相似，除了檢查至少一項(xiàng)以評(píng)估為真或假之外，它會(huì)檢查以確保每一項(xiàng)都符合給定的條件。
如果我使用 some() 代碼示例中使用的相同代碼。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const hasUnderageStudents = students.every((students) => {return students.age < 18})console.log(hasUnderageStudents)// this returns false because there are no ages below 18
如果我要將條件更改為每個(gè)項(xiàng)目評(píng)估為真的條件，則整個(gè)事情都會(huì)返回真。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const hasUnderageStudents = students.every((students) => {return students.age < 40})console.log(hasUnderageStudents)// this will return true because every single age property is below 40
7、reduce()
此方法與所有其他方法完全不同，因?yàn)樗鼘?shí)際上是對(duì)數(shù)組進(jìn)行一些操作并返回所有這些不同操作的組合。
假設(shè)我想要學(xué)生數(shù)組中所有項(xiàng)目的總分，通常會(huì)進(jìn)行 for 循環(huán)并每次都將分?jǐn)?shù)相加，在循環(huán)結(jié)束時(shí)，將打印出總分。為了避免冗長的過程，你可以使用 reduce() 方法來執(zhí)行此操作。
簡化方法的語法與其他方法不同。它不是采用數(shù)組本身，而是采用一個(gè)數(shù)組和一個(gè)屬性，用于我們想要將所有內(nèi)容減少到和在我們的示例中的分?jǐn)?shù)。除了函數(shù)之外，它還需要第二個(gè)參數(shù)，這將是你的起點(diǎn)，在我們的例子中，我們希望從零開始我們的總數(shù)。
const students = [{name: "sam", age: 26, score: 80},{name: "john", age: 25, score: 86},{name: "dean", age: 20, score: 78},{name: "timothy", age: 18, score: 95},{name: "frank", age: 21, score: 67}]const totalScore = students.reduce((currentTotal, students) => {return students.score + currentTotal}, 0)console.log(totalScore)
在代碼讀取時(shí)，我們有 reduce() 方法，該方法對(duì)數(shù)組中的每一項(xiàng)運(yùn)行一個(gè)函數(shù)。
該函數(shù)的第一個(gè)參數(shù)將是該數(shù)組的前一次迭代返回的任何內(nèi)容，第二個(gè)參數(shù)是數(shù)組中的實(shí)際項(xiàng)目。
currentTotal 將在第一次迭代時(shí)開始，使用我們作為 reduce() 方法的第二個(gè)參數(shù)傳入的任何內(nèi)容，在我們的例子中為零。
這個(gè) reduce() 方法第一次運(yùn)行，所以我們得到零和“sam”項(xiàng)。所以它只是做了80 加零并返回那個(gè)值，也就是 80。
該方法第二次運(yùn)行時(shí)，返回值 80 成為當(dāng)前總數(shù)，我們的下一項(xiàng)是 'john'，所以它計(jì)算了 86 加上我們當(dāng)前的總數(shù) 80，即 166，并將其放回當(dāng)前總數(shù)。它一直這樣做，直到我們到達(dá)數(shù)組中的最后一個(gè)項(xiàng)目，該項(xiàng)目將作為 totalScore 變量中的總數(shù)輸出。
這種方法有點(diǎn)混亂，但是，當(dāng)你需要對(duì)數(shù)組中的所有項(xiàng)目進(jìn)行某種累積操作時(shí)，它非常有用，例如，獲取所有項(xiàng)目的總價(jià)，每日股票價(jià)格等。
8、includes()
此方法不接受函數(shù)作為參數(shù)。它需要一個(gè)參數(shù)。它通常用于不需要大量繁重操作的簡單數(shù)組中。假設(shè)你有一堆水果，
const Fruits = [ 'mango', 'apple', 'orange', 'pineapple', 'lemon']
contains() 方法實(shí)現(xiàn)的是一種簡單方法，是檢查某個(gè)水果是否在數(shù)組中。
const fruits = [ 'mango', 'apple', 'orange', 'pineapple', 'lemon']const includesApple = fruits.includes('apple')console.log(includesApple) // this will return true because 'apple' is one of the items inside the array.
在我看來，這些方法是任何 JavaScript 開發(fā)人員都必須知道的，因?yàn)閿?shù)組是最常用于組織的數(shù)據(jù)結(jié)構(gòu)之一。掌握好這些方法將大大提高你在陣列方面的技能和解決問題的能力。
如果你覺得今天的內(nèi)容對(duì)你有用，清請(qǐng)記得分享給你身邊的開發(fā)者朋友們。
感謝你的閱讀，祝編程愉快！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
