Hướng dẫn alternative to nested for loops javascript - thay thế cho javascript lồng cho các vòng lặp

JavaScript là một ngôn ngữ lập trình cực kỳ linh hoạt, theo định nghĩa riêng của nó, đa Paradigm. JavaScript cho chúng ta nhiều cách để tiếp cận các vấn đề, mảng là một trong những cấu trúc dữ liệu linh hoạt và bị hiểu lầm nhất với các công cụ đáng kinh ngạc được tích hợp.

Các mảng được đan xen với việc sử dụng các vòng lặp, tuy nhiên, có một bộ thay thế cho các vòng lặp giúp mã dễ đọc hơn và lý luận về, ngắn hơn, sạch hơn và an toàn hơn. Chúng tôi sẽ tạo các ví dụ thay thế các cách sử dụng phổ biến cho các vòng lặp bằng tìm, bộ lọc, lát cắt, bản đồ, giảm và foreach.for loops, however, there are a suite of alternatives to for loops that make code easier to read and reason about, shorter, cleaner, and safer. We will create examples replacing common uses of for loops with find, filter, slice, map, reduce, and forEach.

Đây là một bài viết hai phần, trong Phần 1, chúng tôi đã đề cập đến những điều cơ bản: Tìm, Bộ lọc và Cắt lát. Trong bài viết này, chúng tôi sẽ đề cập đến bản đồ tiên tiến hơn, giảm và foreach., in Part 1 we covered the basics: find, filter, and slice. In this article we will cover the more advanced map, reduce, and forEach.

Nếu bạn không có sự hiểu biết rõ ràng về tìm kiếm, lọc và lát cắt, bạn sẽ thấy bài viết này khó hiểu.

Chúng tôi sẽ sử dụng bộ dữ liệu sau đây trong suốt các trường hợp:items throughout the cases:

const items = [
	{ name: 'chainsword', price: 20, stock: 5 },
	{ name: 'bolter', price: 15, stock: 10 },
	{ name: 'chainaxe', price: 20, stock: 2 },
	{ name: 'plasma pistol', price: 25, stock: 7 },
	{ name: 'heavy bolter', price: 30, stock: 3 },
];

Thay thế 4: Bản đồ

Vấn đề: Nếu bạn cần thực hiện bất kỳ loại hoạt động nào trên mọi mục trong một mảng, phương thức bản đồ là sự thay thế tốt nhất của bạn. If you need to perform any kind of operation on every item in an array, the map method is your best alternative.

Ví dụ trường hợp sử dụng bản đồ

MAP là một trong những phương thức mảng được sử dụng rộng rãi nhất vì nó cực kỳ linh hoạt, mạnh mẽ và không thay đổi mảng gốc.one of the most widely used Array methods because it is extremely versatile, powerful, and doesn't alter the original Array.

Giả sử bạn muốn xem giá mặt hàng sẽ là gì với VAT là 20% [nhiều hơn 1% so với nơi tôi sống; D] bạn có thể làm như vậy với một lớp lót:

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Bản đồ là một hàm bậc cao hơn lấy phần tử làm đối số đầu tiên của nó, và sau đó trả về một mảng mới với kết quả của hàm chúng tôi đã vượt qua.element as its first argument, and then returns a new array with the results of the function we passed.

Trong trường hợp này, chúng tôi đã sử dụng toán tử lây lan để trả về toàn bộ đối tượng cộng với giá trị thuộc tính giá mới sau khi tính toán thuế VAT của chúng tôi. Nếu chúng tôi chỉ muốn một mảng giá với VAT, chúng tôi sẽ chỉ chạy:spread operator to return the full object plus the new price property value after our VAT calculation. If we just wanted an array of the prices with VAT we would just run:

const pricesWithVat = items.map[item => item.price * vat];
//[ 24, 18, 24, 30, 36 ]

Việc thực hiện đối tượng đầy đủ được sử dụng phổ biến hơn nhiều, đặc biệt là trong sự phát triển trước.

Để thực hiện vòng lặp của bản đồ

const itemsWithVatFor = [];
for [const item of items] {
	itemsWithVatFor.push[{ ...item, price: item.price * vat }];
}

console.log[itemsWithVatFor];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Trong việc thực hiện ... của Loop, chúng tôi phải khai báo mảng trước khi bắt đầu vòng lặp For, sau đó chúng tôi lặp lại tất cả các mục và đẩy đối tượng mới chúng tôi tạo bằng toán tử lan rộng.declare the Array before starting the for loop, then we iterate over all the items and push the new object we created using the spread operator.

Phương pháp bản đồ so với kết quả vòng lặp

• Bản đồ có thể đọc được và không cần lý do vượt quá cái nhìn đầu tiên.
• Chúng ta phải khai báo một giá trị trước khi lặp và sau đó sử dụng một phương thức đẩy bổ sung trong vòng lặp của chúng tôi.push in our for...of loop.

Tiền thưởng: Sử dụng bản đồ mặt trước

Bạn sẽ thấy bản đồ đang được sử dụng rộng rãi trong các khung phía trước như React, nơi bạn có một mảng dữ liệu mà bạn muốn tạo HTML với. Đây là một ví dụ sử dụng cú pháp JSX của React.map being used widely in front-end frameworks like React where you have an array of data that you want to create HTML with. This is an example using React's JSX syntax.

{data.items.map[item => [
	
		{item.name}
		
			${item.price} 
			{item.stock} remaining in stock
		
	
]]}

Trong ví dụ thô này, chúng tôi giả thuyết tìm nạp các mục của chúng tôi từ cơ sở dữ liệu, phản hồi là dữ liệu và chúng tôi nhận được các mục của chúng tôi bên trong dữ liệu đó. Sau đó, chúng tôi ánh xạ chúng và hiển thị thẻ vật phẩm với mỗi mục trong mảng của chúng tôi, sử dụng hiệu quả MAP để trả lại HTML từ dữ liệu JSON thông qua JSX. Đây là một mô hình rất phổ biến và ngay cả khi bạn không biết React, bạn có thể thấy những gì đang được thực hiện.map over them and render a item card with every item in our array, effectively using map to return HTML from JSON data through JSX. This is a very common pattern, and even if you don't know React you can see what is being done.

Thay thế 5: Giảm

Vấn đề: Nếu bạn cần tính toán một giá trị duy nhất bằng cách sử dụng mọi mục trong một mảng, phương pháp giảm là sự thay thế tốt nhất của bạn. If you need to compute a single value using every item in an array, the reduce method is your best alternative.

Ví dụ trường hợp sử dụng giảm

Nếu bạn muốn biết bạn mong đợi bao nhiêu tiền từ việc bán mọi mặt hàng trong cổ phiếu của bạn, bạn sẽ sử dụng giảm. Giảm là một trong những phương pháp mảng phức tạp và khó hiểu nhất, nhưng chúng tôi sẽ phá vỡ nó cho bạn:reduce. Reduce is one of the most complex and confusing array methods, but we will break it down for you:

const totalValue = items.reduce[
	[total, item] => [total += item.price * item.stock],
	0
];

console.log[totalValue]; //555

Phương pháp giảm có hai đối số bắt buộc, phương pháp đầu tiên được gọi là bộ tích lũy, thứ hai là giá trị hiện tại. Ngoài ra còn có một đối số thứ hai tùy chọn cho chức năng gọi lại được gọi là initValue mà chúng tôi đã sử dụng trong ví dụ của chúng tôi là 0.two mandatory arguments, the first one is called the accumulator, the second is the currentValue. There is also an optional second argument to the callback function called initialValue which we used in our example as 0.

Trong cuộc gọi lại của chúng tôi, bộ tích lũy là giá trị chúng tôi sẽ trả về vào cuối quá trình thực hiện, trong trường hợp của chúng tôi, đó là tổng giá trị của cổ phiếu của chúng tôi. Hiện tại giá trị là phần tử hiện tại đang được xử lý trong mảng, mà chúng tôi đã gọi là mục, bởi vì chúng tôi đang lặp lại trên mảng các mục của chúng tôi. Chúng tôi đang tính toán một số duy nhất, do đó, giá trị đầu tiên của chúng tôi được đặt ở 0 và sẽ được truyền làm giá trị tích lũy đầu tiên trong cuộc gọi lại của chúng tôi.callback, the accumulator is the value we will return at the end of the execution, in our case it is the total value of our stock. The currentValue is the current element being processed in the array, which we have called item, because we are iterating over our items array. We are computing a single number, therefore our initialValue is set at 0 and will be passed as the first accumulator value in our callback.

Nếu chúng tôi không cung cấp đối số initialValue, phần tử đầu tiên trong mảng sẽ được sử dụng làm bộ tích lũy mặc định.initialValue argument, the first element in the array will be used as the default accumulator.

Khi giảm lặp đi lặp lại trên mảng của chúng tôi, nó sẽ thêm vào tổng số của chúng tôi bằng cách sử dụng mọi mục trong mảng của chúng tôi bắt đầu từ 0. Chúng tôi sẽ theo dõi 3 lần lặp đầu tiên của trường hợp giảm để xem nó sẽ hoạt động như thế nào:reduce iterates over our array, it will add on to our total using every item in our array starting at 0. We will track the first 3 iterations of this case of reduce to see how it will work:

//Iteration 1: Uses our initialValue of 0
[0, item] => [0 + item.price * item.stock] //total = 0 + 20 * 5 = 100

//Iteration 2: Uses our new total of 100
[100, item] => [100 + item.price * item.stock] //total = 100 + 15 * 10 = 250

//Iteration 3: Uses our new total of 250
[250, item] => [250 + item.price * item.stock] //total = 250 + 20 * 2 = 290

Quá trình này sẽ tiếp tục cho đến khi mọi mục trong mảng được lặp lại và chúng tôi nhận được kết quả cuối cùng.

Tiền thưởng: Tái cấu trúc sử dụng phá hủy đối tượng

Tôi đã chọn viết ví dụ này với những cái tên này để làm rõ những gì chúng ta đang nói, tuy nhiên chúng ta có thể tái cấu trúc điều này bằng cách sử dụng phá hủy trong mục của chúng ta:destructuring in our item:

const totalValue = items.reduce[
	[total, { price, stock }] => [total += price * stock],
	0
];

Ở đây chúng tôi trích xuất giá trị giá và cổ phiếu từ đối tượng mặt hàng của chúng tôi, cho phép chúng tôi sử dụng giá và vật phẩm mà không cần phải thực hiện mục.price hoặc item.stock Cú pháp. Điều này có thể không phải lúc nào cũng ngắn hơn, nhưng nó làm cho nó sạch hơn khi đọc nếu bạn hiểu những gì đang bị phá hủy.extract the price and stock value from our item object, which allows us to use price and item without having to do item.price or item.stock syntax. This may not always be shorter, but it makes it cleaner to read if you understand what is being destructured.

Để thực hiện vòng lặp giảm

let totalFor = 0;
for [const item of items] {
	totalFor += item.price * item.stock;
}
console.log[totalFor]; //555

Trong ... về việc thực hiện Loop của giảm, chúng tôi tuyên bố tổng số của chúng tôi bên ngoài vòng lặp của chúng tôi và chúng tôi phải tuyên bố đó là một sự cho phép để chúng tôi có thể tích lũy trên đó. Bên trong vòng lặp của chúng tôi, chúng tôi gọi các mục và thêm cổ phiếu thời gian giá của chúng vào tổng số. Hạn chế chính là chúng ta phải sử dụng LET, điều này sẽ làm cho tổng giá trị của chúng ta có thể thay đổi bởi bất kỳ dòng mã nào khác trong tương lai, đó là điều mà chúng ta có thể vô tình sử dụng.declare our total outside of our loop, and we have to declare it as a let so that we can accumulate on it. Inside our loop we call the items and add their price time stock to the total. The major drawback is that we have to use a let, which will make our total value mutable by any other line of code in the future, which is something we might end up using accidentally.

Tiền thưởng: Tái cấu trúc sử dụng phá hủy đối tượng

Tôi đã chọn viết ví dụ này với những cái tên này để làm rõ những gì chúng ta đang nói, tuy nhiên chúng ta có thể tái cấu trúc điều này bằng cách sử dụng phá hủy trong mục của chúng ta:destructuring in for...of loops as well. Personally, I value readability over everything when coding, a good codebase is one that you can come back to after a few weeks and understand what it does. In most cases destructuring will do this and save you a lot of code writing.

let totalFor = 0;
for [const { price, stock } of items] {
	totalFor += price * stock;
}
console.log[totalFor]; //555

Ở đây chúng tôi trích xuất giá trị giá và cổ phiếu từ đối tượng mặt hàng của chúng tôi, cho phép chúng tôi sử dụng giá và vật phẩm mà không cần phải thực hiện mục.price hoặc item.stock Cú pháp. Điều này có thể không phải lúc nào cũng ngắn hơn, nhưng nó làm cho nó sạch hơn khi đọc nếu bạn hiểu những gì đang bị phá hủy.price and stock properties for the elements in an array of items, and inside you can see that we use those two values to calculate the total, making it clearer on first glance than our previous example.

Để thực hiện vòng lặp giảm

• cho..of vòng lặpif you have a clear grasp of what reduce does.
• 4 dòng mãmutable in any other part of our code.

94 ký tự

87 ký tự

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Giảm sẽ rõ ràng hơn nếu bạn có một sự nắm bắt rõ ràng về những gì giảm làm.

Chúng ta phải khai báo một giá trị trước khi lặp sẽ có thể thay đổi trong bất kỳ phần nào khác trong mã của chúng ta.

Lưu ý về độ dài mã If you need to execute anything not necessarily related to your Array, you can use forEach.

Giảm có thể được thực hiện thành một dòng một cách dễ dàng, tuy nhiên, nó không thể đọc được. Tuy nhiên đây là cách nó sẽ trông như thế nào:

Điều này sẽ làm cho giảm 1 dòng và 71 ký tự của chúng tôi với chi phí đọc.forEach can do that a regular for loop cannot do, except do one liner console.log[] statements. The additional benefit is that forEach can be chained where for loops cannot. There are no immutability benefits to the use of forEach, and it is down to a matter of preference between syntax.

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Thay thế 6: ForeachcurrentValue which is the element being processed in the array. Additionally it can use the index, and array which is the full array forEach was called on.

Vấn đề: Nếu bạn cần thực hiện bất cứ điều gì không nhất thiết liên quan đến mảng của bạn, bạn có thể sử dụng foreach.DOM Manipulation using Plain JS. Sometimes you might have a button for each item which you want to add a listener to, and this can be done using a for loop, but the forEach alternative is more readable and shorter.

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Ví dụ trường hợp sử dụng foreach

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Không có gì mà foreach có thể làm điều đó một vòng lặp thường xuyên cho vòng lặp không thể làm, ngoại trừ thực hiện một câu lệnh điều khiển liner.log []. Lợi ích bổ sung là foreach có thể bị xích ở đâu cho các vòng không thể. Không có lợi ích bất biến đối với việc sử dụng foreach, và nó là vấn đề ưu tiên giữa cú pháp.

ForEach có 1 đối số bắt buộc, hiện tại là phần tử được xử lý trong mảng. Ngoài ra, nó có thể sử dụng chỉ mục và mảng là foreach mảng đầy đủ đã được gọi.

Một nơi mà việc sử dụng chỉ mục là có lợi là khi thực hiện thao tác dom bằng cách sử dụng JS đơn giản. Đôi khi bạn có thể có một nút cho mỗi mục mà bạn muốn thêm người nghe và điều này có thể được thực hiện bằng cách sử dụng một vòng lặp, nhưng sự thay thế của Foreach dễ đọc và ngắn hơn.forEach is generic, doesn't create a shallow copy and has more limited functionality than a vanilla for loop or for...of loop. As a general rule, there is always a better alternative to forEach and for loops.

Để thực hiện vòng lặp của foreach

Thành thật mà nói, đây là trường hợp sử dụng mà bạn sẽ thường thay thế bằng foreach.map and reduce which are more complex Array methods than what we saw in part 1. In the case of reduce, we actually ended up with more code than using for...of, however, chaining is where the real magic happens.

Phương pháp foreach so với kết quả vòng lặp

Tôi sẽ bỏ qua so sánh vì Foreach thực sự không phải là một phương pháp mảng hữu ích cho phép lặp như các phương pháp khác mà chúng tôi đã thấy. Foreach là chung chung, không tạo ra một bản sao nông và có chức năng hạn chế hơn so với vani cho vòng lặp hoặc cho ... của vòng lặp. Theo nguyên tắc chung, luôn có một sự thay thế tốt hơn cho foreach và cho các vòng lặp.

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Ở đây, trước tiên chúng tôi đã lọc các mặt hàng bằng cổ phiếu của họ, sau đó chúng tôi đã ánh xạ qua các mục được lọc và trả lại toàn bộ mảng với các tên được viết hoa, nơi chúng tôi cũng sử dụng lát cắt, và sau đó chúng tôi đã sử dụng giảm để lấy tổng giá trị của các mục và danh sách tên của các mặt hàng. Chúng tôi cũng có thể thấy rằng chúng tôi đã không thay đổi tập dữ liệu gốc của chúng tôi.filtered the items by their stock, then we mapped over the filtered items and returned the whole array with the names Capitalized, where we also used slice, and then we used reduce to get the total value of the items and a list of the names of the items. We can also see that we did not alter our original data set.

Để thực hiện vòng lặp của bộ lọc, bản đồ, giảm

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Như một lưu ý cá nhân: Viết mã này, tôi đã phạm nhiều sai lầm hơn so với việc viết chuỗi phương thức và phải chạy rất nhiều giao diện điều khiển để xem những gì đang xảy ra. Đầu tiên tôi đã cố gắng làm tất cả trong một vòng duy nhất, điều chắc chắn có thể được thực hiện, nhưng sẽ phức tạp hơn nhiều so với ví dụ này. Tôi đã thực hiện một vài Frankensteins viết điều này và tôi ước tính tôi mất khoảng 5 lần thời gian để viết mã này và khắc phục sự cố, thậm chí đã thực hiện logic trong ví dụ trước.I made a lot more mistakes than writing method chaining and had to run a lot of console.logs to see what was going on. I first tried to do it all in a single for loop, which can definitely be done, but would be far more complex than this example. I made a few frankensteins writing this and I'd estimate it took me about 5 times more time to write this code and troubleshoot it, even having already done the logic in the previous example.

Ở đây chúng tôi đã phải khai báo mảng được lọc và tổng số trước khi bắt đầu mọi thứ. Sau đó, chúng tôi phải lặp qua các mục để tạo mảng được lọc. Sau khi được thực hiện, chúng tôi đã lặp đi lặp lại trên mảng đó và ở trên các tên và sau đó tích lũy tổng số và đẩy tên vật phẩm để tạo danh sách đó.

Trong dòng mã cuối cùng, chúng ta có thể thấy rằng chúng ta đã thay đổi tập dữ liệu gốc của mình khi chúng ta viết hoa mảng được lọc, đây là một tác dụng phụ không mong muốn ảnh hưởng đến bất kỳ mã nào chúng ta có thể làm bằng cách sử dụng mảng gốc của chúng ta trong tương lai. Để tránh điều này, chúng ta phải nhận thức được rằng nó xảy ra và tạo ra một bản sao nông của chúng ta ở nơi chúng ta cần nó. Tôi sẽ tránh tất cả cùng nhau bằng cách sử dụng các lựa chọn thay thế vòng lặp và loại bỏ khả năng đó cho tốt.altered our original data set when we capitalized our filtered array, which is an unexpected side-effect that affects any code we might do using our original array in the future. To avoid this we must be aware that it happens and create a shallow copy by our own where we need it. I'd avoid it all together using for loop alternatives and remove that possibility for good.

Tiền thưởng: Tái cấu trúc bằng cách sử dụng thành phần

Bằng cách khai báo các chức năng để gọi trong các phương thức của chúng tôi, mã của bạn sẽ có nhiều mô -đun hơn và có thể đọc được nhiều hơn:declaring functions to call in our methods your code will be much more modular and readable:

const vat = 1.2; // We could get this value from the UI through one of many means.

const itemsWithVat = items.map[item => [{ ...item, price: item.price * vat }]];
/*[
  { name: 'chainsword', price: 24, stock: 5 },
  { name: 'bolter', price: 18, stock: 10 },
  { name: 'chainaxe', price: 24, stock: 2 },
  { name: 'plasma pistol', price: 30, stock: 7 },
  { name: 'heavy bolter', price: 36, stock: 3 }
]*/

Ở đây chúng ta có thể thấy rằng chúng ta đang lọc cổ phiếu trên 5, sau đó viết hoa tên và nhận được danh sách tổng số và mục chỉ bằng cách đọc qua dòng mã cuối cùng đó. Nếu chúng ta muốn xem với nhiều chi tiết hơn những gì chúng ta đang làm, chúng ta có thể đi đến các tuyên bố để làm rõ thêm.declarations for further clarification.

Chúng ta có thể dễ dàng khai báo một chức năng mới để gọi bộ lọc bằng bất cứ thứ gì khác và chúng ta chỉ cần trao đổi những gì chúng ta gọi trong bộ lọc, nếu chúng ta cần tận dụng bất kỳ từ nào khác trong tương lai, chúng ta đã có chức năng CaptializeWord nó. Điều này làm cho mã của chúng tôi có thể tái sử dụng và mô -đun.filter using anything else, and we would only need to swap out what we call in filter, additionally, if we need to capitalize any other word in the future, we already have a captializeWord function that does it. This makes our code reusable and modular.

Sự kết luận

Chúng tôi đã đề cập đến các phương pháp thay thế phương pháp mảng chính, nướng vào JavaScript, để sử dụng các vòng lặp. Mã của chúng tôi bây giờ luôn dễ đọc hơn, dễ dàng hơn để lý luận và an toàn hơn. Trong hầu hết các trường hợp, nó cũng sẽ ngắn hơn để viết. Trong bài đăng này, chúng tôi đã đề cập đến ba trong số các phương pháp mảng JavaScript: MAP, GIẢM GIÁ và FOREACH, sử dụng các trường hợp cho mỗi người trong số chúng và các lợi ích bổ sung mà họ có thể có khả năng tái sử dụng mã, chuỗi và tính bất biến. Chúng tôi cũng đã thực hiện một phương pháp chuỗi thử nghiệm từ Phần 1 và Phần 2. Làm quen với chúng và bắt đầu viết mã tốt hơn!for loops. Our code is now always easier to read, easier to reason about, and safer. In most cases it will also be shorter to write. In this post we covered three of the javascript Array methods: map, reduce, and forEach, use cases for each of them, and additional benefits they can have such as reusability of code, chaining, and immutability. We also did a test chaining methods from part 1 and part 2. Get familiar with them and start writing better code!