Hướng dẫn foreach in javascript - foreach trong javascript
1. Đặt vấn đềXét một ví dụ đơn giản : " Tính tổng của mảng numbers = [1,2,3,4,5,6]" . Show
Thông thường, chúng ta sẽ làm như sau :
Cách trên khá dễ hiểu và thường đọc xong người ta sẽ nghĩ đến dùng cách này luôn. Tuy nhiên, trong trường hợp nào đó, vô tình chúng ta bị nhầm lẫn biến i đó với một biến số nào trước đó thì thật tệ hại. Ngoài cách dùng vòng for, chúng ta có thể dùng tới forEach, một hàm khá hay và ngắn gọn. 2. Sử dụng forEach thế nào ?Bài toán trên có thể được sử dụng với forEach như sau :
Cũng khá là dễ hiểu nhỉ vì nó khá giống với ngôn ngữ tự nhiên mà (hihi). 3. Giới thiệu về forEachforEach là một phương thức có sẵn của array được Javascript cung cấp. **Cú pháp của nó là : **
Giải thích callback: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số: currentValue: phần tử hiện tại đang được xử lý của array. index: chỉ số của phần tử hiện tại đang được xử lý của array. array: mảng hiện tại đang gọi hàm forEach. thisArg: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback (Nếu thisArg không được nói tới thì mặc định là undefined) Ví dụ in ra tổng của mảng :
Ví dụ có sử dụng thisArg
Khá là dễ hiểu phải không ạ? Đoạn code khi sử dụng forEach khá là dễ hiểu và ngắn gọn, tuy nhiên thì code sẽ chạy chậm hơn so với việc sử dụng vòng lặp (tuy nhiên không đáng kể). Tùy vào từng trường hợp thì mình có thể sử dụng linh hoạt. 4. Một số hàm khácNgoài forEach, thì Javascript còn cung cấp một số phương thức khác như : filter, reduce , map, every .... Trong project mình đang làm cũng liên quan khá nhiều tới xử lí các array, ơn giời là các phương thức này đã cứu cánh mình rất nhiều, nếu mình còn dùng for và for để xử lí thì ... bao nhiêu dòng code cho đủ, và mỗi lần maintain lại thật là ác mộng! Sau đây là một số phương thức mình hay dùng :
Cái đầu tiên phải kể đến đó chính là map, một hàm mình dùng khá là nhiều . Xét một ví dụ:
Nói một cách dễ hiểu, map trả về 1 mảng mới có độ dài bằng mảng ban đầu
Nghe tới tên, là ta có thể hình dung luôn được nó sẽ làm gì rồi đúng không ạ? Đó chính là tìm kiếm. Filter trả về 1 mảng có độ dài Xét ví dụ sau :
Reduce thường được dùng nhiều cho việc tính toán, nó trả về một giá trị. Xét ví dụ:
Ngoài ra, thì có rất nhiều hàm khác, mình có thể tìm hiểu thêm ở đây . Với các ví dụ đơn giản kể trên, ta đã hiểu hơn về cách sử dụng các hàm map, filter và reduce. Các hàm này sẽ càng tối ưu hơn với các dữ liệu hay mã code nhiều, phức tạp, mình khuyên các bạn nên tìm hiểu về nó, vì nó khá hay và và đơn giản. Trên đây là chia sẻ của mình về việc foreEach và các hàm trong javascript. Cám ơn các bạn đã đọc, mong bài viết của mình phần nào có thể giúp ích cho các bạn trong việc xử lí với array! Nguồn tham khảo: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Trong JavaScript, để có thể duyệt array thì forEach là một hàm rất hay. Vậy forEach cụ thể là như thế nào và cách sử dụng nó ra sao? Chúng ta sẽ cùng tìm hiểu ngay sau đây.forEach là một hàm rất hay. Vậy forEach cụ thể là như thế nào và cách sử dụng nó ra sao? Chúng ta sẽ cùng tìm hiểu ngay sau đây. Ví dụ: Cho một mảng numbers = [1, 2, 3, 4, 5, 6,7, 8, 9, 10]. Hãy tính tổng các số trong mảng và hiển thị ra console. Thông thường, chúng ta sẽ giải bài toán này như sau: Cho một mảng numbers = [1, 2, 3, 4, 5, 6,7, 8, 9, 10]. Hãy tính tổng các số trong mảng và hiển thị ra console. Thông thường, chúng ta sẽ giải bài toán này như sau:
Cách giải trên là khá dễ hiểu. Chúng ta lấy từng phần tử trong mảng ra theo chỉ số, rồi cộng với biến sum. Tuy nhiên có một vấn đề với cách này (cũng không hẳn là một vấn đề), đó là việc sử dụng chỉ số i có thể khiến bạn bị nhầm với một biến số trước đó. Dẫn đến những sai lầm không thể đoán trước. Lúc này, forEach xuất hiện giúp bạn giải quyết vấn đề đó.forEach xuất hiện giúp bạn giải quyết vấn đề đó. Cách triển khai hàm forEachMột cách triển khai hàm forEach như sau:
Hàm forEach trên nhận đầu vào là một mảng array và một hàm số action - thực hiện hành động đối với mỗi phần tử của mảng (array[i]). Áp dụng hàm forEach để giải quyết bài toán trên 0Ta có thể diễn giải thuật toán trên bằng lới như sau: Với mỗi phần tử trong mảng numbers, ta sẽ lấy nó ra và cộng dồn với biến sum. Kết quả thu được, sẽ ghi ra console. Nếu so sánh với cách trình bày ở trên thì cách này rõ ràng sẽ dài hơn. Tuy nhiên, đây chỉ là một ví dụ cơ bản, nên ta sẽ không bàn về độ dài, ngắn của code. Vấn đề tôi và bạn quan tâm trước tiên đó là: code-đọc-dễ-hiểu. Theo quan điểm cá nhân tôi thì việc sử dụng hàm forEach giúp code gần giống với ngôn ngữ tự nhiên hơn. Không biết quan điểm của bạn về vấn đề này thế nào?forEach giúp code gần giống với ngôn ngữ tự nhiên hơn. Không biết quan điểm của bạn về vấn đề này thế nào? Giới thiệu hàm forEach của JavaScriptJavaScript cung cấp sẵn cho chúng ta phương thức forEach - là một phương thức có sẵn của array, để thực hiện hành động với mỗi phần tử của mảng.forEach - là một phương thức có sẵn của array, để thực hiện hành động với mỗi phần tử của mảng. Cú pháp 1Giải thíchcallback: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số:: là hàm để thực hiện với mỗi phần tử của mảng, bao gồm 3 tham số:
thisArg: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback.: giá trị được sử dụng như là this, là tham chiếu tới đối tượng khi thực hiện hàm callback. Chú ý:
Ví dụ in ra nội dung của mảng: 2Ví dụ sử dụng thisArg: 3Ưu, nhược điểm của việc sử dụng forEachBất cứ thứ gì cũng có hai mặt của nó, forEach cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của forEach:forEach cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của forEach: Ưu điểm:
Nhược điểm:
Trên đây là một số ưu, nhược điểm của việc sử dụng forEach. Tôi không khuyên các bạn nên sử dụng phương thức này. Đây chỉ đơn giản là một cách thức duyệt mảng, bạn có thể sử dụng nó hoặc bạn chỉ cần sử dụng vòng lặp for, while.
Từ JavaScript forEach đến các phương thức khácNgoài forEach, JavaScript còn cung cấp một số phương thức khác, tương tự dành cho array. Đó là: entries, every, filter, find, findIndex, keys, map, reduce, reduceRight, some, values. array.prototype.entries()Trả về một mảng đối tượng mới, chứa key/value cho mỗi phần tử trong array.key/value cho mỗi phần tử trong array. 4Để duyệt mảng đối tượng mới này, ta sử dụng vòng lặp for...offor...of 5array.prototype.every()Trả về true nếu như tất cả các phần tử trong mảng thoả mãn 1 hàm kiểm tra, ngược lại trả về false. 6Tham số truyền vào giống hệt với hàm forEach. Ví dụ sau trả về true nếu tất cả các phần tử trong mảng thoả mãn đều >= 10: 7array.prototype.filter()Giống như cái tên của nó, phương thức này dùng để lọc ra các phần tử trong mảng thoả mãn một điều kiện cho trước. Và trả về một mảng mới chứa những phần tử đó. 8Tham số truyền vào giống hệt với hàm forEach. Ví dụ sau lọc ra những phần tử trong mảng có giá trị >= 10: 9array.prototype.find()Trả về giá trị của phần tử đầu tiên trong mảng thoả mãn điều kiện cho trước, nếu không tìm thấy thì trả về undefined.undefined. 0Tham số truyền vào cũng giống hệt như hàm forEach. Ví dụ sau tìm ra một object với tên của nó thoả mãn điều kiện cho trước: 1array.prototype.findIndex()Trả về chỉ số đầu tiên của phần tử thoả mãn điều kiện cho trước, ngược lại trả về -1. 2Tham số truyền vào cũng giống hệt như hàm forEach. Ví dụ sau tìm ra chỉ số object với tên của nó thoả mãn điều kiện cho trước: 3array.prototype.map()Trả về mảng mới với mỗi phần tử là kết quả của việc gọi hàm callback ứng với mỗi phần tử của mảng ban đầu. 4Tham số truyền vào cũng giống hệt như hàm forEach. Ví dụ sau trả về mảng mới mà mỗi phần tử của mảng mới là căn bậc hai của phần tử tương ứng trong mảng ban đầu: 5Những phương thức còn lại bạn có thể tham khảo thêm tại đây. Tôi sẽ không trình bày thêm vì bài viết sẽ quá dài. Thực hành1. FlatteningCho một mảng hai chiều. Hãy chuyển mảng đó thành mảng một chiều:
Ví dụ: 62. Every and someHãy viết hàm every() và some() thoả mãn: 7(tham khảo every, some). Chúc bạn thực hành vui vẻ. Xin chào và hẹn gặp lại ở bài viết sau trong series JavaScript cơ bản. Thân ái, Tham khảo
Bản gốc: Blog Complete JavaScript Blog Complete JavaScript Facebook Fanpage: Complete JavaScript Complete JavaScript Facebook Group: Hỏi đáp JavaScript VN Hỏi đáp JavaScript VN |