CyberSoft.edu.vn logo
  • BÀI VIẾT
  • HỌC ONLINE CYBERLEARN.VN
  • Hotline: 0961.05.10.14
  • Trang chủ
  • Lộ trình học
  • Danh sách khóa học
    • Tất cả
      • Lộ trình học
      • Tất cả khóa học
      • Phân tích dữ liệu
      • Học online
      • INBOX TƯ VẤN 1-1
    • Học từ Zero (Ngoài giờ)
      • Bootcamp – Lập trình Front-End từ Zero đến có việc
      • Bootcamp – Lập trình Full-Stack Javascript từ Zero đến có việc
      • Bootcamp – Lập trình FullStack JAVA từ Zero đến có việc
      • Phân tích dữ liệu
    • Đã có nền tảng
      • Chuyên đề Cơ sở dữ liệu thực chiến dự án
      • Lập trình Front-End Chuyên Nghiệp
      • Lập trình Back End-Java Web Chuyên Nghiệp
      • Lập trình Back-End viết API với NodeJS
      • Lập trình Back-End Golang xây dựng API thực tế
      • Chuyên gia lập trình di động React Native
    • Học từ Zero (Ban ngày)
      • Bootcamp – Lập trình Full-Stack Javascript từ Zero đến có việc
    • Học online có mentor
      • Tư duy, thuật toán, hướng đối tượng
      • Front-End Foundation
      • Front-End Master React-JS
      • Back-End NodeJS Foundation
    • Học live chung lớp offline (Từ xa)
      • Lập trình Back-End Java Web chuyên nghiệp
    • Thực tập dự án online cùng mentor
      • Nhận dự án & task thực tập – Cấp chứng nhận thực tập (Coming soon)
      • Luyện tập phỏng vấn (Coming soon)
      • Tạo CV tự động với AI
  • Stories
  • Góc học viên
    • Stories
    • Thư viện ảnh
    • Cảm nhận học viên
  • Về CyberSoft
    • Giới thiệu
    • Liên hệ
  • INBOX TƯ VẤN 1-1
Thứ Hai, 27 Tháng Tư 2020 / Published in Front End Tips

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

4.034 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

  • Tweet

What you can read next

8 GHI NHỚ để bạn có thể trở thành một Senior lập trình thực thụ
8 Trang web tăng tư duy lập trình
Slide hành trang chuẩn bị trước khi xin việc lập trình – Kinh nghiệm phỏng vấn đậu ngay

NHỚ LIKE XEM VIDEO FREE MỚI NHẤT

NHẬN TIN SỰ KIỆN & KHUYẾN MÃI

CyberSoft sẽ gởi các khóa học trực tuyến & các chương trình CyberLive hoàn toàn MIỄN PHÍ và các chương trình KHUYẾN MÃI hấp dẫn đến các bạn.

ĐĂNG KÍ TƯ VẤN

TP. Hồ Chí Minh

Trụ sở: 112 Cao Thắng, Quận 3

Hotline: 096.105.1014
Địa chỉ: Tầng 5, toà nhà Suri, 112 Cao Thắng, Quận 3, TPHCM

459 Sư Vạn Hạnh, Quận 10

Hotline: 096.105.1014
Địa chỉ: Tầng 2, toà nhà WinHome, 459 Sư Vạn hạnh, Quận 10, TPHCM

117 Tân Cảng, Bình Thạnh

Hotline: 096.105.1014
Địa chỉ: 117 Tân Cảng, Bình Thạnh, TPHCM

110 Đường số 10, Park Hill City Land, Phan Văn Trị, Gò Vấp

Hotline: 096.105.1014
Địa chỉ: 110 Đường số 10, Park Hill City Land, Phan Văn Trị, Gò Vấp, TPHCM

56 Lê Cảnh Tuân, Tân Phú

Hotline: 096.105.1014
Địa chỉ: 56 Lê Cảnh Tuân, Tân Phú, TPHCM

6C Đường số 8, Linh Tây, Thủ Đức (gần ĐH Cảnh Sát)

Hotline: 096.105.1014
Địa chỉ: 6C Đường số 8, Linh Tây, Thủ Đức, TPHCM

Đà Nẵng

103 Nguyễn Hữu Dật, Hải Châu

Hotline: 096.105.1014
Địa chỉ: 103 Nguyễn Hữu Dật, Hải Châu, ĐN
  • GET SOCIAL

© Bản quyền CyberSoft 2017 - 2021 - Empower by CyberSoft
Lập trình Frontend Lập trình NodeJS      Lập trình Backend   Lập trình Java Web   Lập trình Java Spring - Java Boot  Phân tích Dữ liệu với Python     Tôi Đi Code Dạo

TOP

Chương trình giảng dạy Elearning

Starter

  • Project về gì?
  • Workflow và đặc tả dự án

Task 1: Khởi tạo dự án

  • Khởi tạo project React/Angular
  • Thao tác thử trên Postman
  • Tạo cấu trúc thư mục
  • Thêm thư viện UI (MaterialUI/AntDesign/…)

Task 2: Bắt đầu dự án (Trang chủ)

  • Tạo header và footer cho giao diện người dùng
  • Tạo trang chủ/li>
  • Thực hiện chức năng hiện Danh sách các khóa học và Danh mục

Task 3: Đăng kí/Đăng nhập

  • Tạo cấu trúc đường dẫn URL tới các trang
  • Tạo form Đăng ký/Đăng nhập
  • Validate cho form Đăng ký/Đăng nhập
  • Thực hiện chức năng cho Đăng ký/Đăng nhập

Task 4: Khóa học

  • Tạo trang Các khóa học
  • Thực hiện chức năng hiện Danh sách các khóa học và Danh mục
  • Tạo trang Chi tiết khóa học
  • Thực hiện chức năng hiện Chi tiết khóa học
  • Thực hiện chức năng Đăng ký khóa học

Task 5: Người dùng

  • Tạo trang Thông tin người dùng
  • Thực hiện chức năng Hiện thông tin người dùng
  • Thực hiện chức năng Sửa thông tin người dùng

Task 6: Khởi tạo trang Quản trị

  • Tạo layout Dashboard cho Quản trị
  • Tạo sidebar chứa Dashboard, trang Quản lí khóa học, và trang Quản lí người dùng
  • Tạo cấu trúc đường dẫn URL tới các trang

Task 7: Dashboard

  • Hiện thông tin của admin hiện tại
  • Hiện pie chart cho dữ liệu của Các khóa học và Người dùng

Task 8: Quản lí người dùng

  • Tạo trang quản lí người dùng
  • Tạo Pagination Table cho Danh sách người dùng
  • Thực hiện chức năng hiện Danh sách người dùng
  • Thực hiện chức năng Thêm, Xóa, Sửa người dùng
  • Tạo filter và chức năng Tìm kiếm người dùng

Task 9: Quản lí khóa học

  • Tạo trang quản lí khóa học
  • Tạo Pagination Table cho Danh sách các khóa học
  • Thực hiện chức năng hiện Danh sách khóa học
  • Thực hiện chức năng Thêm, Xóa, Sửa khóa học
  • Thực hiện chức năng lấy Danh sách người dùng đã/đang chờ xét duyệt ghi danh
  • Thực hiện chức năng Ghi danh khóa học
  • Thực hiện chức năng Hủy ghi danh
  • Tạo filter và chức năng Tìm kiếm khóa học
 

Chương trình giảng dạy Movie

Starter

  • Project về gì?
  • Workflow và đặc tả dự án

Task 1: Khởi tạo dự án

  • Khởi tạo project React/Angular
  • Thao tác thử trên Postman
  • Tạo cấu trúc thư mục
  • Thêm thư viện UI (MaterialUI/AntDesign/…)

Task 2: Bắt đầu dự án (Trang chủ)

  • Tạo header và footer cho giao diện người dùng
  • Tạo trang chủ/li>
  • Thực hiện chức năng hiện Danh sách các phim tại trang chủ
  • Thực hiện chức năng hiện Danh sách lịch chiếu tại trang chủ

Task 3: Đăng kí/Đăng nhập

  • Tạo cấu trúc đường dẫn URL tới các trang
  • Tạo form Đăng ký/Đăng nhập
  • Validate cho form Đăng ký/Đăng nhập
  • Thực hiện chức năng cho Đăng ký/Đăng nhập

Task 4: Phim

  • Tạo trang Chi tiết phim
  • Thực hiện chức năng hiện Chi tiết phim/li>
  • Thực hiện chức năng hiện Lịch chiếu của phim tại các rạp
  • Thực hiện chức năng bình luận

Task 5: Người dùng

  • Tạo trang Thông tin người dùng
  • Thực hiện chức năng Hiện thông tin người dùng
  • Thực hiện chức năng Sửa thông tin người dùng

Task 6: Khởi tạo trang Quản trị

  • Tạo layout Dashboard cho Quản trị
  • Tạo sidebar chứa Dashboard, trang Quản lí phim, lịch chiếu, và người dùng
  • Tạo cấu trúc đường dẫn URL tới các trang

Task 7: Dashboard

  • Hiện thông tin của admin hiện tại
  • Hiện pie chart cho dữ liệu của lịch chiếu, phim, và người dùng

Task 8: Quản lí người dùng

  • Tạo trang quản lí người dùng
  • Tạo Pagination Table cho Danh sách người dùng
  • Thực hiện chức năng hiện Danh sách người dùng
  • Thực hiện chức năng Thêm, Xóa, Sửa người dùng
  • Tạo filter và chức năng Tìm kiếm người dùng

Task 9: Quản lí phim

  • Tạo trang quản lí phim
  • Tạo Pagination Table cho Danh sách các bộ phim
  • Thực hiện chức năng Thêm, Xóa, Sửa phim
  • Tạo filter và chức năng Tìm kiếm phim

Task 9: Quản lí lịch chiếu

  • Tạo trang quản lí lịch chiếu
  • Tạo Pagination Table cho Danh sách các lịch chiếu theo cụm rạp
  • Thực hiện chức năng Thêm, Xóa, Sửa lịch chiếu
  • Tạo filter và chức năng Tìm kiếm lịch chiếu theo phim
 
  • Danh sách khóa học
  • Lộ trình học
  • Liên hệ tư vấn
  • Kênh Youtube
  • Facebook
Contact Me on Zalo
Số điện thoại