js數組常用方法

來源:趣味經驗館 1.85W

數組是一種特殊的變量,它能夠一次存放一個以上的值。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。如果為真,則將其添加到新數組中,如果為假,則不添加。它們實際上不會更改你正在過濾的底層對象,因此可以記錄學生數組,並且它仍然包含所有項目。在使用這些新數組方法創建新數組時,不必擔心更改舊數組。

js數組常用方法

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 數組中最流行的方法之一。

js數組常用方法 第2張

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循環語句。

js數組常用方法 第3張

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

js數組常用方法 第4張

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 變量中的總數輸出。
這種方法有點混亂,但是,當你需要對數組中的所有項目進行某種累積操作時,它非常有用,例如,獲取所有項目的總價,每日股票價格等。

js數組常用方法 第5張

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.

熱門標籤