Tại sao nên thay thế vòng lặp trong Javascript ?

Nên sử dụng các hàm higher-order như map, reduce, và filter để remove vòng lặp. Việc sử dụng các phương thức sẽ giúp cho code của bạn:

• Dễ đọc hơn
• Dễ hiểu hơn
• Dễ gỡ lỗi chương trình

---

1. Để lặp qua tất cả các phần tử và tạo ra mảng mới

Trường hợp sử dụng vòng lặp:

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = [];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
    upperCaseNames[i] = names[i].toUpperCase();
}

Không sử dụng lặp:

var names = ["Jack", "Jecci", "Ram", "Tom"];
var upperCaseNames = names.map(name => name.toUpperCase());

Lưu ý: Nếu bạn sử dụng map, bạn không thể break hoặc continue hoặc return trong khi lặp. Trong trường hợp này, bạn nên sử dụng every hoặc some.

---

2. Lặp qua tất cả phần tử và thao tác

Trường hợp sử dụng vòng lặp:

function print(name) {
   console.log(name);
}
var names = ["Jack", "Jecci", "Ram", "Tom"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
    print(names[i])
}

Không sử dụng lặp:

var names = ["Jack", "Jecci", "Ram", "Tom"];
names.forEach(name=> print(name));

3. Lọc trong mảng

Sử dụng vòng lặpfor:

function isOdd(n) {
   return n %2;
}
var numbers = [1,2,3,4,5];
var odd = [];
for(let i=0, total = numbers.length; i< total ; i= i +1) {  
   let number = numbers[i];
   if( isOdd(number) ) {
      odd.push(number);
   }}

Sử dụng filter:

var numbers = [1,2,3,4,5, 6, 7]
var odd = numbers.filter(n => n%2); // chỉ một dòng

---

4. Trả về kết quả tổng mảng các phần tử

Tổng các số:

var numbers = [1,2,3,4,5]
var result = 0;
for(let i=0, total = numbers.length; i< total ; i= i +1) {  
 result = result + numbers[i];
}

Sử dụng reduce:

var numbers = [1,2,3,4,5,6,7];
function sum(accumulator, currentValue){
   return accumulator + currentValue;
}
var initialVal = 0;
var result = numbers.reduce(sum, initialVal);

Đoạn code trên có thể viết gọn lại là:

var numbers = [1,2,3,4,5,6,7, 10];
var result = numbers.reduce((acc, val)=> acc+val, 0);

---

5. Kiểm tra nếu mảng có chứa giá trị

var names = ["ram", "raj", "rahul"];
for(let i=0, totalNames = names.length; i< totalNames ; i= i +1) {
   if(names[i] === "rahul") {
     console.log("%c found rahul", "color:red");
     return; 
   }
}

Sử dụng some:

var names = ["ram", "raj", "rahul"];
let isRahulPresent = names.some(name => name==="rahul");
if(isRahulPresent) {
  console.log("%c found rahul", "color:red"); 
}

%c trong lệnh console sẽ áp dụng style cho text

---

6. Kiểm tra mỗi phần từ trong mảng thỏa mãn một điều kiện nào đó

Sử dụng for loop:

var num = [1,2,3,4,5, 0];
for(let i=0, total = numbers.length; i< total ; i= i +1) {   
 if(num <= 0) {     
 console.log("0 present in array");   
 }
}

Sử dụng every:

var num = [1,2,3,4,5, 0];
var isZeroFree = num.every(e => e > 0);
if(!isZeroFree) {
    console.log("0 present in array");
}

Chúc các bạn học tốt. Nguồn medium.com

Học lập trình front end theo lộ trình dự án chuyên sâu Offline tại HCM : https://cybersoft.edu.vn

Học lập trình trực tuyến theo lộ trình dự án tại: https://cyberlearn.vn