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! Giả sử bạn có một mảng Cách sử dụng phương pháp
map[]
0 nơi bạn đã lưu trữ một số số và bạn muốn thực hiện một số tính toán trên mỗi số chúng. Nhưng bạn cũng không muốn gây rối với mảng ban đầu.don’t want to mess with the original array. 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]
2 sẽ giúp bạn làm điều này: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]
0 với 6 yếu tố trong đó. Tiếp theo, tôi đã khởi tạo một hàm mũi tên arrOne.map[value/element, index, array]
4 với ‘Num, như một đối số. Điều này trả về sản phẩm của arrOne.map[value/element, index, array]
5 và 5, trong đó biến ‘Num, được cung cấp dữ liệu bằng phương thức Bản đồ [].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]
6 sẽ lưu trữ mảng mới mà phương thức bản đồ [] sẽ tạo.Ở 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
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.
Hãy để lấy một ví dụ: Giả sử bạn có một mảng
8 và mảng đó lưu trữ một loạt các số. Bây giờ, bạn muốn xem những con số nào có thể được chia cho 3 và tạo một mảng riêng biệt với chúng.: Suppose you have an array arrOne.map[value/element, index, array]
arrOne.map[value/element, index, array]
8 and that array stores a bunch of numbers. Now, you would like to see what numbers can be divided by 3 and make a separate array from them.Đâ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]
0 với 6 yếu tố trong đó. Tiếp theo, tôi đã khởi tạo một hàm mũi tên arrOne.map[value/element, index, array]
4 với ‘Num, như một đối số. Điều này trả về sản phẩm của arrOne.map[value/element, index, array]
5 và 5, trong đó biến ‘Num, được cung cấp dữ liệu bằng phương thức Bản đồ [].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]
6 sẽ lưu trữ mảng mới mà phương thức bản đồ [] sẽ tạo.Ở 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]
7Loạ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ảngarrOne.map[value/element, index, array]
8 và mảng đó lưu trữ một loạt các số. Bây giờ, bạn muốn xem những con số nào có thể được chia cho 3 và tạo một mảng riêng biệt với chúng.Hãy chia nhỏ mã này. Ở đây, tôi có một mảng
arrOne.map[value/element, index, array]
9 với 7 yếu tố trong đó. Tiếp theo, tôi đã khởi tạo một hàm 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]
0 với ‘Num, như một đối số. Nó trả về đúng hoặc sai cho mỗi lần một số mới được truyền để so sánh, trong đó biến ‘num num được cung cấp dữ liệu bằng phương thức Filter [].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]
4Sau đó, 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]
1 sẽ lưu trữ mảng mới mà phương thức Filter [] sẽ tạo.Ở 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]
9. 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 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.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]
3 làm giảm một mảng thành một giá trị duy nhất bằng cách thực hiện hoạt động mong muốn trên các phần tử.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]
6 là bộ tích lũy hiện bằng 0 và 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]
7 giữ 15. Sau lần chạy đầu tiên, bộ tích lũy có 15 trong đó và 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]
7 đang giữ giá trị tiếp theo là 39.Vì vậy,
[ 160, 225, 315, 180, 120, 55 ]
4Bâ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 ]
6Bâ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]
7 hiện giữ 20 phương thức giảm mà phương pháp ném vào bộ tích lũy tổng hợp lên đến [ 160, 225, 315, 180, 120, 55 ]
8.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.
Học mã miễn phí. Chương trình giảng dạy nguồn mở của Freecodecamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu