Hướng dẫn foreach conditional javascript - foreach javascript có điều kiện
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
Nội dung chính
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 ?3. Giới thiệu về forEach
4. Một số hàm khác 3. Giới thiệu về forEach4. Một số hàm khác Đặt bài toán
Giải thích Ví dụ in ra nội dung của mảng Ví dụ sử dụng thisArg Ưu, nhược điểm của việc sử dụng forEach Ưu điểm Nhược điểm Một số từ khóa trong vòng lặp forEach JS
Từ khóa return trong forEach
Từ khóa break trong forEach 4. Một số hàm khácĐặt bài toán
Áp dụng hàm forEach để giải quyết bài toán trên Giới thiệu hàm forEach trong JavaScript
Giải thích
Ví dụ sử dụng thisArg Ưu, nhược điểm của việc sử dụng forEach
Nhược điểm Một số từ khóa trong vòng lặp forEach JS
Từ khóa return trong forEach Từ khóa break trong forEach Từ khóa continue trong forEach Từ JavaScript forEach đến các phương thức khác https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Hàm arr.entries()forEach là một hàm rất hay. Vậy hàm forEach trong JavaScript cụ thể là như thế nào? Cách sử dụng forEach JavaScript ra sao? Mình hãy cùng tìm hiểu để làm chủ forEach js nhé! Đặt bài toánCách triển khai hàm forEach JavaScriptconsole. Áp dụng hàm forEach để giải quyết bài toán trên
Giới thiệu hàm forEach trong JavaScript Giải thích Ví dụ in ra nội dung của mảngforEach JavaScript xuất hiện giúp bạn giải quyết vấn đề trên. Cách triển khai hàm forEach JavaScriptÁp dụng hàm forEach để giải quyết bài toán trên
Giới thiệu hàm forEach trong JavaScript Áp dụng hàm forEach để giải quyết bài toán trên 0Mình 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 4, mình 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 làm trước thì cách này rõ ràng là dài hơn. Tuy nhiên, đây chỉ là một ví dụ cơ bản, nên mình sẽ không bàn về độ dài, ngắn của code.độ dài, ngắn của code. Vấn đề nên quan tâm trước tiên đó là: code-đọc-dễ-hiểu.code-đọc-dễ-hiểu. Theo quan điểm cá nhân mình, 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. 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. Quan điểm của bạn về vấn đề này thế nào? Giới thiệu hàm forEach trong JavaScriptHàm forEach là gì? Hay vòng lặp forEach trong JavaScript là gì? Trả lời: forEach là một phương thức có sẵn của array, để duyệt qua mỗi phần tử của mảng và thực hiện một hành động nào đó.forEach là một phương thức có sẵn của array, để duyệt qua mỗi phần tử của mảng và thực hiện một hành động nào đó. Cú pháp 1Giải thích
Chú ý::
2Ví dụ in ra nội dung của mảng 3Kết quả: Ví dụ sử dụng thisArg 4Ưu, nhược điểm của việc sử dụng forEachBất cứ thứ gì cũng có hai mặt, forEach JavaScript cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của phương thức 0:forEach JavaScript cũng không ngoại lệ. Sau đây là một số ưu, nhược điểm của phương thức 0:Ư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 0. Mình không khuyên bạn nên hay không nên sử dụng phương thức này.nên hay không 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.
Một số từ khóa trong vòng lặp forEach JSKhi so sánh với các vòng lặp khác, ngôn ngữ lập trình khác, bạn sẽ thấy một số từ khóa hay sử dụng trong vòng lặp như: 9, 0 và 1.vòng lặp khác, ngôn ngữ lập trình
khác, bạn sẽ thấy một số từ khóa hay sử dụng trong vòng lặp như: 9, 0 và 1.Câu hỏi đặt ra là liệu những từ khóa này có sử dụng được trong vòng lặp forEach JavaScript hay không? Cách sử dụng của chúng có giống hay không? Sau đây là câu trả lời. Từ khóa return trong forEachTừ khóa 9 dùng để dừng lại một hàm và trả về giá trị từ hàm đó.Giả sử, bạn cần viết một hàm tìm vị trí của số chẵn đầu tiên trong một mảng. Nếu không tìm thấy thì trả về giá trị 3.vị trí của số chẵn
đầu tiên trong một mảng. Nếu không tìm thấy thì trả về giá trị 3.Sau đây là code sử dụng vòng lặp for thông thường:vòng lặp for thông thường: 5Chuyển đoạn code trên sang forEach như sau: 6Tại sao kết quả lại là -1?-1? Tại vì từ khóa 9 trong forEach chỉ có tác dụng để thoát khỏi hàm callback bên trong forEach mà thôi. Do đó, kết quả của hàm trên là giá trị của câu lệnh 5 cuối cùng.thoát khỏi hàm callback bên trong forEach mà thôi. Do đó, kết quả của hàm trên là giá trị của câu lệnh 5 cuối cùng.Dể giải quyết bài toán này, mình khuyên bạn không nên dùng 0. Thay vào đó bạn có thể dùng vòng lặp for thông thường như trên, hoặc sử dụng vòng lặp for...in như sau:for...in như sau: 7Chú ý: vòng lặp 7 chỉ nên dùng với array, không nên sử dụng với đối tượng 8.Từ khóa break trong forEachTừ khóa 0 thường dùng để thoát khỏi câu lệnh 0 hoặc thoát khỏi vòng lặp ( 6, 7, 3, 7).Ví dụ đoạn code sau dùng để thoát khỏi vòng lặp for khi 9 bằng 6: 8Nếu sử dụng từ khóa 0 với forEach thì sao? 9Đúng vậy, bạn sẽ bị lỗi cú pháp Illegal break statement vì từ khóa break là không hợp lệ với forEach JS.Illegal break statement vì từ khóa break là không hợp lệ với forEach JS. Nghĩa là bạn không thể sử dụng từ khóa break với forEach. Thay vào đó bạn có thể sử dụng vòng lặp for như trên hoặc dùng phương thức 8 để thay thế:for như trên hoặc dùng phương thức 8 để thay thế: 0Từ khóa continue trong forEachTừ khóa 1 thường dùng để bỏ qua một lượt lặp trong vòng lặp.bỏ qua một lượt lặp trong vòng lặp.Ví dụ đoạn code sau dùng để bỏ qua lượt lặp khi 9 bằng 6: 1Nếu chuyển sang dùng với 0: 2Bạn sẽ bị lỗi Illegal continue statement: no surrounding iteration statement. Vì từ khóa 1 không hợp lệ với forEach JavaScript.Illegal continue statement: no surrounding iteration statement. Vì từ khóa 1 không hợp lệ với forEach JavaScript.Nghĩa là bạn cũng không thể dùng 1 bên trong 0 được. Thay vào đó, bạn có thể dùng vòng lặp for như trên hoặc sử dụng từ khóa 9 như sau:vòng lặp for như trên hoặc sử dụng từ khóa 9 như sau: 3Từ 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. Hàm arr.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. Để duyệt mảng đối tượng mới này, mình sử dụng vòng lặp 7: 4Hàm arr.every()Trả về 8 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ề 9. 5Tham số truyền vào giống với hàm 0.Ví dụ sau trả về 8 nếu tất cả các phần tử trong mảng thoả mãn đều lớn hơn hoặc bằng 10: 6Hàm arr.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ử đó.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ử đó. 7Tham số truyền vào giống với hàm 0.Ví dụ sau trả về 8 nếu tất cả các phần tử trong mảng thoả mãn đều lớn hơn hoặc bằng 10: 8Hàm arr.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ử đó.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ề 3. 9Ví dụ sau lọc ra những phần tử trong mảng có giá trị lớn hơn hoặc bằng 10: Hàm arr.find() 0Trả 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ề let arrayName = dataResponse.map( item => { return item.Name } 3.Tham số truyền vào cũng giống như hàm 0.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ề 3. 1Ví dụ sau lọc ra những phần tử trong mảng có giá trị lớn hơn hoặc bằng 10: Hàm arr.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ề 3.Tham số truyền vào cũng giống như hàm function Counter() { this.sum = 0; this.count = 0; } Counter.prototype.add = function(array) { array.forEach(function(item) { this.sum += item; ++this.count; }, this); }; const obj = new Counter(); obj.add([2, 5, 9]); console.log(obj.count); // => 3 console.log(obj.sum); // => 16 0.Ví dụ sau tìm ra một object với 5 thoả mãn điều kiện cho trước: 3Hàm arr.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ề 3.căn bậc hai của phần tử tương ứng trong mảng ban đầu: 4Ví dụ sau tìm ra chỉ số object với 5 thoả mãn điều kiện cho trước:function sumOfArray(numbers){ numbers.forEach(function sumElement(element){ console.log(element); }); } 2Hàm arr.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 với mỗi phần tử của mảng ban đầu. 5Tham số truyền vào cũng giống như hàm 0 JavaScript.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: Những phương thức còn lại bạn có thể tham khảo thêm tại bài viết: Các phương thức của mảng trong JavaScript. 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: Những phương thức còn lại bạn có thể tham khảo thêm tại bài viết: Các phương thức của mảng trong JavaScript.Thực hành
6► Sử dụng phương thức 00 và 01.
2. Every and someHãy viết hàm 02 và 03 thoả mãn: 04: trả về 8 khi tất cả các phần tử của mảng 06 làm hàm 07 trả về 8, ngược lại thì trả về 9. 10: trả về 8 khi ít nhất một phần tử của mảng 06 làm hàm 07 trả về 8, ngược lại thì trả về 9.Xem đáp án: |