Không cần sử dụng Vòng lặp trong JavaScript

4.342 Lượt xem

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

200+

Đối tác

8500+

Học viên

92%

Có việc làm
sau khoá học

6

Chi nhánh

TOP
Contact Me on Zalo