JavaScript cung cấp một số higher-order function1 để thao tác với kiểu mảng.
General Syntax:
// Inline Callback Funtion
arr.methodName(function (element, index, arr) {
console.log(index, element, arr)
})
// Arrow Function
arr.methodName((element, index, arr) => {
console.log(index, element, arr)
})
// Implicit return
arr.methodName((element, index, arr) => console.log(index, element, arr))forEach
Use case: khi cần thực thi một hàm bất kỳ cho mỗi phần tử trong mảng.
Ví dụ:
const numbers = [1, 2, 3, 4, 5, 6]
let sum = 0
numbers.forEach(function (number) {
sum += number
})
console.log(sum) // 21map
Use case: khi cần tạo ra mảng mới có các giá trị mới.
Ví dụ 1:
// Create an uppercase array
const names = ["Asabeneh", "Mathias", "Elias", "Brook"]
const namesToUpperCase = names.map(function (name) {
return name.toUpperCase()
})
console.log(namesToUpperCase) // ['ASABENEH', 'MATHIAS', 'ELIAS', 'BROOK']Ví dụ 2:
// Create an even array
const numbers = [1, 2, 3, 4, 5, 6]
const doubleNumbers = numbers.map(function (number) {
return number * 2
})
console.log(doubleNumbers) // [2, 4, 6, 8, 10, 12]Note
Lưu ý:
mapkhông làm thay đổi mảng gốc ban đầu.
reduce
Use case: khi cần thu gọn mảng lại còn một giá trị duy nhất.
Ví dụ 1:
// Find the sum of prices array
const prices = [5, 10, 15, 20, 25]
const totalPrice = prices.reduce(function (sum, currentPrice) {
return sum + currentPrice
})
console.log(totalPrice) // 75Attention
Giá trị của
sum= 5 vàcurrentPrice= 10 nếu không truyền vào giá trị khởi tạo ở tham số thứ hai.
Ví dụ 2:
// Find the sum of even numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const initialValue = 0
const sumOfEvens = numbers.reduce(function (sum, currentNumber) {
if (currentNumber % 2 == 0) {
return sum + currentNumber
}
}, initialValue)
console.log(sumOfEvens) // NaNBug
Reducer phải chắc chắn trả về giá trị, nếu không trả về giá trị,
sumsẽ mang giá trị làundefinedvà không thể sử dụng cho những vòng lặp sau.
Ví dụ 3:
// Find the sum of even numbers
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const initialValue = 0
const sumOfEvens = numbers.reduce(function (sum, currentNumber) {
return currentNumber % 2 == 0 ? sum + currentNumber : sum
}, initialValue)
console.log(sumOfEvens) // 30Info
Callback truyền vào hàm
reduce()được gọi là reducer.
find
Use case: khi chỉ cần tìm một phần tử.
Ví dụ 1:
// Find age less than 20
const ages = [24, 22, 25, 32, 35, 18]
const age = ages.find(function (age) {
return age < 20
})
console.log(age) // 18Ví dụ 2:
// Find even number
const numbers = [1, 2, 3, 4, 5, 6]
const evenNumber = numbers.find(function (number) {
return number % 2 == 0
})
console.log(evenNumber) // 2Info
- Nếu có nhiều phần tử thỏa điều kiện, chỉ trả về phần tử đầu tiên tìm thấy.
- Ngoài ra còn có phương thức
findIndextương tự, nhưng thay vì trả về giá trị thì nó sẽ trả về chỉ số index.
filter
Use case: khi cần tìm kiếm nhiều phần tử.
Ví dụ 1:
// Filter countries with "land" in the name.
const countries = ["Albania", "Ethiopia", "Finland", "Germany", "Ireland"]
const countriesContainingLand = countries.filter(function (country) {
return country.includes("land")
})
console.log(countriesContainingLand) // ['Finland', 'Ireland']Ví dụ 2:
// Filter odd numbers
const numbers = [1, 2, 3, 4, 5, 6]
const oddNumbers = numbers.filter(function (number) {
return number % 2 != 0
})
console.log(oddNumbers) // [1, 3, 5]Dùng phương thức filter để lọc ra các phần tử undefined và null ở trong mảng:
// Filter undefined and null values
const values = [1, 2, undefined, 3, null]
console.log(values.filter(Boolean)) // [1, 2, 3]Cú pháp trên tương đương với:
console.log(
values.filter((item) => {
return Boolean(item)
}),
)Việc dùng constructor của Boolean là tương tự với việc dùng 2 lần toán tử not (!!):
console.log(
values.filter((item) => {
return !!item
}),
)Cần lưu ý là ngoài undefined và null thì cách làm này còn lọc ra các số âm và số 0.
Seealso
every
Use case: cần kiểm tra tất cả phần tử trong mảng có thỏa điều kiện nào đó.
Ví dụ 1:
// Check whether all of ages are more than 20
const ages = [32, 33, 15, 40]
const isAllAboveTwenty = ages.every(function (age) {
return age > 20
})
console.log(isAllAboveTwenty) // falseVí dụ 2:
// Check whether all of numbers are positive
const numbers = [1, 2, 3, 4, 5, 6]
const isAllPositive = numbers.every(function (number) {
return number > 0
})
console.log(isAllPositive) // truesome
Use case: cần kiểm tra một vài phần tử trong mảng có thỏa điều kiện nào đó.
Ví dụ:
const numbers = [20, 50, 80, 1, 40]
const isLessThanTen = numbers.some(function (number) {
return number < 10
})
console.log(isLessThanTen) // truesort
Use case: khi cần sắp xếp mảng theo một thứ tự cho trước.
Compare function: hàm sort khác các higher-order function khác ở chỗ nó nhận vào duy nhất một đối số, và cũng là đối số optional, có tên là compare function.
Nếu compare function không được sử dụng thì mọi giá trị trong mảng đều được chuyển thành chuỗi và các phép so sánh sẽ dựa trên chuỗi. Điều này có thể gây ra lỗi khi sắp xếp một mảng gồm các số. Ví dụ, khi chuyển sang chuỗi, “80” sẽ đứng trước “9” trong bảng mã Unicode nên “80” sẽ nhỏ hơn “9”.
const numbers = [80, 9, 100, 22, 5]
// Sắp xếp mảng theo giá trị mặc định (chuyển thành chuỗi)
numbers.sort()
console.log(numbers) // Output: [100, 22, 5, 80, 9]Trường hợp có sử dụng compare function, cần lưu ý cách sắp xếp của hàm sort dựa trên giá trị trả về của compare function:
compareFunction(a, b) return value | sort order |
|---|---|
| > 0 | sort a after b |
| < 0 | sort a before b |
| === 0 | keep original order of a and b |
Ví dụ 1:
// Sort inversely grade array
const numbers = [1, 5, 7, 2, -1, 0, 9, 4]
// Compare function
const compare = (a, b) => {
if (a > b) return 1
else if (a < b) return -1
return 0
}
// Use predefined function
console.log(numbers.sort(compare)) // [-1, 0, 1, 2, 4, 5, 7, 9]
// Use arrow function
console.log(numbers.sort((a, b) => a - b)) // [-1, 0, 1, 2, 4, 5, 7, 9]Ví dụ 2:
// Sort descendingly grade object array
const grades = [
{ grade: 10 },
{ grade: 7 },
{ grade: 8 },
{ grade: 10 },
{ grade: 7 },
{ grade: 10 },