js陣列常用方法

陣列是一種特殊的變數，它能夠一次存放一個以上的值。JS裡的"陣列"不是陣列，而是物件。js裡的陣列和其他語言中的陣列是不同的，實際它並不是陣列，而是一種array-like 特性的物件。它只是把索引轉化成字串，用作其屬性(鍵)。

1、filter（）

舉例：

我們想要得到這個列表中年齡小於或等於24歲的所有學生。我們需要使用filter方法來過濾掉所有大於 24 歲的學生。

輸出：
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 array
return 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)
//
所做的就是為每個專案返回 true 或 false。如果為真，則將其新增到新陣列中，如果為假，則不新增。它們實際上不會更改你正在過濾的底層物件，因此可以記錄學生陣列，並且它仍然包含所有專案。在使用這些新陣列方法建立新陣列時，不必擔心更改舊陣列。

2、map（）
舉例：

map（）允許你獲取一個數組並將其轉換為一個新陣列。在這個中，新陣列中的所有專案看起來都略有不同。如果我們想得到每個學生的名字。我們可以通過使用 map() 獲取名稱陣列。

輸出：

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 array
return 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.*/
/******************/
這可以通過陣列中的任何內容來完成。例如，當你想要獲取一個物件，並且只獲取名稱或單個鍵，或者獲取一個數組並將其轉換為另一個數組時，該方法非常有用。此方法是 JavaScript 陣列中最流行的方法之一。

3、find（）
此方法允許你在陣列中查詢單個物件。這是直截了當的方法。

假設我們想找到一個名叫 john 的學生。
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.e
  Object {
   age: 25,
   name: "john",
   score: 86
 }
*/
在這個方法中，邏輯是有一個 true 或 false 語句，它將返回第一個計算結果為 true 的陣列項。
4、forEach（）
與其他方法不同， forEach() 實際上不返回任何內容，因此不需要 return 語句。假設我們需要打印出 student 陣列中所有學生的名字，可以這樣做：
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 迴圈非常相似，但它將採用一個函式。因此，對於每個陣列項，它將執行函式內的程式碼塊。
這種方法只是使處理需要迴圈專案的陣列變得更加容易，因為你不必像通常那樣寫出笨重而長的for迴圈語句。

5、some（）
這個方法與我們的大多數其他函式有點不同，它不是返回一個全新的陣列，而是返回 true 或 false。所以我們可以檢查這個陣列中是否有一些學生是未成年人。
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.
*/
因此，如果任何學生專案的年齡值低於 18，該函式將返回 true。該方法只是檢查陣列中是否有任何內容返回 true，如果是，則整個內容返回 true。
6、every（）
此方法與 some() 非常相似，除了檢查至少一項以評估為真或假之外，它會檢查以確保每一項都符合給定的條件。
如果我使用 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
如果我要將條件更改為每個專案評估為真的條件，則整個事情都會返回真。
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（）
此方法與所有其他方法完全不同，因為它實際上是對陣列進行一些操作並返回所有這些不同操作的組合。
假設我想要學生陣列中所有專案的總分，通常會進行 for 迴圈並每次都將分數相加，在迴圈結束時，將打印出總分。為了避免冗長的過程，你可以使用 reduce() 方法來執行此操作。
簡化方法的語法與其他方法不同。它不是採用陣列本身，而是採用一個數組和一個屬性，用於我們想要將所有內容減少到和在我們的示例中的分數。除了函式之外，它還需要第二個引數，這將是你的起點，在我們的例子中，我們希望從零開始我們的總數。
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)
在程式碼讀取時，我們有 reduce() 方法，該方法對陣列中的每一項執行一個函式。
該函式的第一個引數將是該陣列的前一次迭代返回的任何內容，第二個引數是陣列中的實際專案。
currentTotal 將在第一次迭代時開始，使用我們作為 reduce() 方法的第二個引數傳入的任何內容，在我們的例子中為零。
這個 reduce() 方法第一次執行，所以我們得到零和“sam”項。所以它只是做了80 加零並返回那個值，也就是 80。
該方法第二次執行時，返回值 80 成為當前總數，我們的下一項是 'john'，所以它計算了 86 加上我們當前的總數 80，即 166，並將其放回當前總數。它一直這樣做，直到我們到達陣列中的最後一個專案，該專案將作為 totalScore 變數中的總數輸出。
這種方法有點混亂，但是，當你需要對陣列中的所有專案進行某種累積操作時，它非常有用，例如，獲取所有專案的總價，每日股票價格等。

8、includes（）
此方法不接受函式作為引數。它需要一個引數。它通常用於不需要大量繁重操作的簡單陣列中。假設你有一堆水果，
const Fruits = [ 'mango', 'apple', 'orange', 'pineapple', 'lemon']
contains() 方法實現的是一種簡單方法，是檢查某個水果是否在陣列中。
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.