Hướng dẫn map, filter and reduce in javascript - bản đồ, bộ lọc và thu nhỏ trong javascript

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

Vì vậy, nếu đó là những gì bạn đang làm, trước hết - công việc tuyệt vời! Bạn đã đưa ra một quyết định khôn ngoan bằng cách 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ư bản đồ (), Filter () và giảm () các phương thức JavaScript (sau tất cả - React là thư viện JavaScript). Vì vậy, điều này làm cho các phương pháp này phải học.

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

Cách sử dụng phương pháp map()

Giả sử bạn có một mảng

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

Đây là nơi map() đi vào hình ảnh. Phương pháp

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

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

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

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

Hãy nói rằng bạn muốn nhân mỗi phần tử với 5 trong khi không thay đổi mảng gốc.

Đâ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ậy chuyện gì đang xảy ra ở đây? Chà, tôi có một mảng

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

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

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

Nếu bạn mới sử dụng các chức năng mũi tên nhưng quen thuộc với các chức năng thông thường, một hàm mũi tên giống như thế này:

function(num) 
	{  
    	return num * 5;
    }

Sau đó, tôi đã khởi tạo một biến khác

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

Ở phía bên phải, tôi đã gọi phương thức bản đồ () trên mảng ‘Arrone. Vì vậy, phương thức bản đồ () sẽ chọn từng giá trị của mảng đó bắt đầu từ chỉ mục [0] và thực hiện tính toán mong muốn trên mỗi 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 ý làm thế nào tôi nhấn mạnh không thay đổi mảng ban đầu. Đó là bởi vì thuộc tính này là những gì làm cho phương thức bản đồ () khác với phương thức ‘foreach (). Phương thức bản đồ () tạo ra một mảng mới trong khi phương thức ‘foreach (), thay đổi/thay đổi mảng gốc với mảng được tính toán.: Notice how I’m stressing not changing the original array. That is because this property is what makes the map() method different from the ‘forEach()’ method. The map() method makes a new array whereas the ‘forEach()’ method mutates/changes the original array with the calculated array.

Cách sử dụng phương pháp arrOne.map(value/element, index, array)7

Loại tên 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 bạn cung cấp. Phương thức Filter () cũng tạo ra một mảng mới.

Hãy để lấy một ví dụ: Giả sử bạn có một mảng

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

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

Đâ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 ]

Vậy chuyện gì đang xảy ra ở đây? Chà, tôi có một mảng

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

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

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

Nếu bạn mới sử dụng các chức năng mũi tên nhưng quen thuộc với các chức năng thông thường, một hàm mũi tên giống như thế này:

Sau đó, tôi đã khởi tạo một biến khác

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

Ở phía bên phải, tôi đã gọi phương thức bản đồ () trên mảng ‘Arrone. Vì vậy, phương thức bản đồ () sẽ chọn từng giá trị của mảng đó bắt đầu từ chỉ mục [0] và thực hiện tính toán mong muốn trên mỗi 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 ý làm thế nào tôi nhấn mạnh không thay đổi mảng ban đầu. Đó là bởi vì thuộc tính này là những gì làm cho phương thức bản đồ () khác với phương thức ‘foreach (). Phương thức bản đồ () tạo ra một mảng mới trong khi phương thức ‘foreach (), thay đổi/thay đổi mảng gốc với mảng được tính toán.

Cách sử dụng phương pháp

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

Loại tên 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 bạn cung cấp. Phương thức Filter () cũng tạo ra một mảng mới.

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

Hãy chia nhỏ mã này. Ở đây, tôi có một mảng

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

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)

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)

Sau đó, tôi đã khởi tạo một biến khác

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)

Ở phía bên phải, tôi gọi phương thức Filter () trên mảng

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

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

//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 nói rằng bạn được yêu cầu tìm tổng của tất cả các yếu tố của một mảng. Bây giờ, bạn có thể sử dụng một phương thức For Loop hoặc foreach (), nhưng giảm được xây dựng cho loại nhiệm vụ này.

Phương pháp

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ì vậy, về cơ bản

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)

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)

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ì vậy,

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

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

Vì vậy,

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

Bây giờ, trên lần chạy thứ ba, bộ tích lũy có tổng 15 và 39, là 54.

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)

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

Quá trình này tiếp tục đi cho đến khi kết thúc mảng.

Đăng nhập

Vâng, đó là nó, tất cả mọi người! Hy vọng bạn có một ý tưởng tốt về cách các phương pháp mảng bậc cao này hoạt động bây giờ. Cân nhắc chia sẻ nếu bạn đã có một thời gian tốt để đọc nó và thấy nó hữu ích.

Kiểm tra câu chuyện mới nhất của tôi ở đây, và cho ebook Git của tôi, hãy kiểm tra tại đây.