HomeLập trìnhJavaScriptCách sử dụng...

Cách sử dụng map(), filter() và reduce() trong JavaScript


Nếu bạn muốn học React, điều quan trọng trước tiên là phải hiểu rõ về một số khái niệm cốt lõi của JavaScript.

Vì vậy, nếu đó là những gì bạn đang làm, thì trước hết – bạn làm rất tốt! Bạn đã có một quyết định sáng suốt khi không bắt đầu trực tiếp với React.

Thứ hai, React xây dựng dựa trên các khái niệm chính như các phương thức JavaScript map(), filter() và reduce() (xét cho cùng – React là một thư viện JavaScript). Vì vậy, điều này làm cho những phương pháp này phải học.

Map, filter và reduce là ba trong số các phương thức mảng bậc cao hữu ích và mạnh mẽ nhất. Trong hướng dẫn này, bạn sẽ thấy cách hoạt động của từng phương thức mảng bậc cao này. Bạn cũng sẽ tìm hiểu nơi bạn muốn sử dụng chúng và cách sử dụng chúng, với sự trợ giúp của phép loại suy và ví dụ. Nó sẽ rất vui!

Làm thế nào để sử dụng map() Phương pháp

Giả sử bạn có một mảng arrOne nơi bạn đã lưu trữ một số số và bạn muốn thực hiện một số phép tính trên mỗi số đó. Nhưng bạn cũng không muốn gây rối với mảng ban đầu.

Đây là đâu map() đi vào hình ảnh. Các map phương pháp sẽ giúp bạn làm điều này:

let arrOne = [32, 45, 63, 36, 24, 11]

map() nhận tối đa ba đối số, đó là giá trị/phần tử, chỉ mục và mảng.

arrOne.map(value/element, index, array)

Giả sử bạn muốn nhân mỗi phần tử với 5 trong khi không thay đổi mảng ban đầu.

Đây là mã để làm điều đó:

let arrOne = [32, 45, 63, 36, 24, 11]
const multFive = (num) => {
return num * 5; //'num' here, is the value of the array.
}
let arrTwo = arrOne.map(multFive)
console.log(arrTwo)

Và đây là đầu ra:

[ 160, 225, 315, 180, 120, 55 ]

Vì vậy, những gì đang xảy ra ở đây? Vâng, tôi có một arrOne mảng có 6 phần tử trong đó. Tiếp theo, tôi đã khởi tạo một arrow function multFive với ‘num’ làm đối số. Điều này trả về sản phẩm của num và 5, trong đó biến ‘num’ được cung cấp dữ liệu bằng phương thức map().

Đọc thêm  Đệ quy trong JavaScript

Nếu bạn chưa quen với hàm mũi tên nhưng đã quen với các hàm thông thường, thì hàm mũi tên giống như sau:

function(num) 
	{  
    	return num * 5;
    }

Sau đó, tôi khởi tạo một biến khác arrTwo sẽ lưu trữ mảng mới mà phương thức map() sẽ tạo.

Ở phía bên tay phải, tôi đã gọi phương thức map() trên mảng ‘arrOne’. Vì vậy, phương thức map() sẽ chọn từng giá trị của mảng đó bắt đầu từ chỉ mục[0] và thực hiện phép tính mong muốn trên từng giá trị. Sau đó, nó sẽ tạo thành một mảng mới với các giá trị được tính toán.

Quan trọng: Lưu ý rằng tôi đang nhấn mạnh việc không thay đổi mảng ban đầu. Đó là bởi vì thuộc tính này làm cho phương thức map() khác với phương thức ‘forEach()’. Phương thức map() tạo một mảng mới trong khi phương thức ‘forEach()’ biến đổi/thay đổi mảng ban đầu bằng mảng được tính toán.

Làm thế nào để sử dụng filter() Phương pháp

Tên loại cho nó đi, phải không? Bạn sử dụng phương pháp này để lọc mảng dựa trên các điều kiện mà bạn cung cấp. Phương thức filter() cũng tạo một mảng mới.

Hãy lấy một ví dụ: Giả sử bạn có một mảng arrName và mảng đó lưu trữ một loạt các số. Bây giờ, bạn muốn xem những số nào có thể chia hết cho 3 và tạo một mảng riêng biệt với chúng.

Đây là mã để làm điều đó:

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function divByFive(num) {
  return num % 3 == 0
}
let arrNewNum = arrNum.filter(divByFive)
console.log(arrNewNum)

Và đây là đầu ra:

[ 15, 39, 30, 45 ]

Hãy chia nhỏ mã này. Ở đây, tôi có một mảng arrNum với 7 yếu tố trong đó. Tiếp theo, tôi khởi tạo một chức năng divByFive với ‘num’ làm đối số. Nó trả về true hoặc false mỗi khi một số mới được chuyển để so sánh, trong đó biến ‘num’ được cung cấp dữ liệu bằng phương thức filter().

Đọc thêm  Cách đảo ngược một mảng trong JavaScript – Hàm JS .reverse()

Sau đó, tôi khởi tạo một biến khác arrNewNum sẽ lưu trữ mảng mới mà phương thức filter() sẽ tạo.

Ở phía bên tay phải, tôi đã gọi phương thức filter() trên arrNum mảng. Vì vậy, phương thức filter() sẽ chọn từng giá trị của mảng đó bắt đầu từ chỉ mục[0] và thực hiện thao tác trên từng giá trị. Sau đó, nó sẽ tạo thành một mảng mới với các giá trị được tính toán.

Cách sử dụng phương thức reduce()

Giả sử bạn được yêu cầu tìm tổng tất cả các phần tử của một mảng. Bây giờ, bạn có thể sử dụng vòng lặp for hoặc phương thức forEach(), nhưng reduce được xây dựng cho loại tác vụ này.

Các reduce() phương pháp giảm một mảng thành một giá trị duy nhất bằng cách thực hiện thao tác mong muốn trên các phần tử một cách tập thể.

Hãy lấy ví dụ trên và sử dụng reduce trên đó:

let arrNum = [15, 39, 20, 32, 30, 45, 22]
function sumOfEle(num, ind) {
  return num + ind;
}
let arrNum2 = arrNum.reduce(sumOfEle)
console.log(arrNum2)

Đây là đầu ra:

203

Mọi thứ đều giống như các phương thức map() và filter() – nhưng điều quan trọng cần hiểu là cách thức hoạt động của phương thức reduce.

Không có một cú pháp xác định của phương thức reduce(). Hãy xem cách đơn giản nhất và nó sẽ cung cấp cho bạn ý chính của tất cả các cách bạn có thể sử dụng reduce().

Đây là một số cú pháp ví dụ cho reduce():

//Taking the above array for an example
let arrNum = [15, 39, 20, 32, 30, 45, 22]arr.reduce((a1, a2) => { 
 return a1 + a2
})

Hãy xem cú pháp này. Ở đây, reduce đang lấy hai đối số, a1a2ở đâu a1 hoạt động như một bộ tích lũy trong khi a2 có giá trị chỉ số.

Đọc thêm  Cách chèn mã JavaScript để thao tác trang web một cách tự động

Bây giờ, trong lần chạy đầu tiên, bộ tích lũy bằng 0 và a2 giữ phần tử đầu tiên của mảng. Những gì giảm làm là nó ném giá trị vào bộ tích lũy mà a2 giữ và tăng nó sang giá trị tiếp theo. Sau đó, phương thức reduce() thực hiện thao tác trên cả hai toán hạng. Trong trường hợp này là phép cộng.

Nên về cơ bản a1 là bộ tích lũy hiện bằng 0 và a2 giữ 15. Sau lần chạy đầu tiên, bộ tích lũy có 15 trong đó và a2 đang giữ giá trị tiếp theo là 39.

Cho nên, 0 + 15 = 15

Bây giờ, trong lần chạy thứ hai, giảm ném a2giá trị của ‘, 39 trong bộ tích lũy và sau đó thực hiện thao tác trên cả hai toán hạng.

Cho nên, 15 + 39 = 54

Bây giờ, trong lần chạy thứ ba, bộ tích lũy có tổng là 15 và 39 là 54. a2 hiện giữ 20 mà phương thức rút gọn ném vào bộ tích lũy có tổng lên tới 54 + 20 = 74.

Quá trình này tiếp tục diễn ra cho đến hết mảng.

Đăng xuất

Vậy là xong nhé mọi người! Hy vọng bạn đã hiểu rõ về cách hoạt động của các phương thức mảng bậc cao này. Cân nhắc chia sẻ nếu bạn đã có thời gian đọc nó và thấy nó hữu ích.

Hãy xem câu chuyện mới nhất của tôi tại đây và đối với Sách điện tử Git của tôi, hãy xem tại đây.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status