5 hàm JavaScript nâng cao bạn có thể sử dụng để cải thiện chất lượng mã của mình
JavaScript là ngôn ngữ thực tế để xây dựng các ứng dụng di động và web hiện đại. Nó hỗ trợ một loạt các dự án, từ các trang web đơn giản đến các ứng dụng tương tác năng động.
Để tạo ra những sản phẩm mà người dùng sẽ yêu thích và đánh giá cao, điều cần thiết là bạn phải viết mã không chỉ có chức năng mà còn phải hiệu quả và dễ bảo trì. Mã JavaScript sạch rất quan trọng đối với sự thành công của bất kỳ ứng dụng web hoặc thiết bị di động nào, cho dù đó là dự án phụ theo sở thích hay ứng dụng thương mại phức tạp.
Mục Lục
Có gì tốt về các hàm JavaScript?
Hàm là một thành phần thiết yếu để viết mã cho bất kỳ ứng dụng nào. Nó định nghĩa một đoạn mã có thể tái sử dụng mà bạn có thể gọi để thực hiện một tác vụ cụ thể.
Ngoài khả năng sử dụng lại, các chức năng rất linh hoạt. Về lâu dài, chúng đơn giản hóa quá trình mở rộng quy mô và duy trì cơ sở mã. Bằng cách tạo và sử dụng các chức năng của JavaScript, bạn có thể tiết kiệm rất nhiều thời gian phát triển.
Dưới đây là một số hàm JavaScript hữu ích có thể cải thiện đáng kể chất lượng mã dự án của bạn.
1. một lần
Chức năng một lần bậc cao hơn này bao bọc một chức năng khác để đảm bảo bạn chỉ có thể gọi nó một lần duy nhất. Nó sẽ âm thầm bỏ qua những nỗ lực tiếp theo để gọi hàm kết quả.
Hãy xem xét một tình huống mà bạn muốn thực hiện các yêu cầu API HTTP để tìm nạp dữ liệu từ cơ sở dữ liệu. Bạn có thể đính kèm một lần hoạt động như một cuộc gọi lại cho một chức năng nghe sự kiện, để nó kích hoạt một lần và không kích hoạt nữa.
Đây là cách bạn có thể định nghĩa một chức năng như vậy:
const once = (func) => {
let result;
let funcCalled = false; return (...args) => {
if (!funcCalled) {
result = func(...args);
funcCalled = true;
}
return result;
};
};
Hàm once nhận một hàm làm đối số và trả về một hàm mới mà bạn chỉ có thể gọi một lần. Khi bạn gọi hàm mới lần đầu tiên, nó sẽ chạy hàm ban đầu với các đối số đã cho và lưu kết quả.
Bất kỳ cuộc gọi tiếp theo nào đến chức năng mới đều trả về kết quả đã lưu mà không cần chạy lại chức năng ban đầu. Hãy xem cách thực hiện dưới đây:
function getUserData() {
}
const makeHTTPRequestOnlyOnce = once(getUserData);
const userDataBtn = document.querySelector("#btn");
userDataBtn.addEventListener("click", makeHTTPRequestOnlyOnce);
Bằng cách sử dụng chức năng một lần, bạn có thể đảm bảo mã chỉ gửi một yêu cầu, ngay cả khi người dùng nhấp vào nút nhiều lần. Điều này giúp tránh các vấn đề về hiệu suất và lỗi có thể phát sinh từ các yêu cầu dư thừa.
2. đường ống
Chức năng đường ống này cho phép bạn xâu chuỗi nhiều chức năng lại với nhau theo trình tự. Các hàm trong dãy sẽ lấy kết quả của hàm đứng trước làm đầu vào và hàm cuối cùng trong dãy sẽ tính kết quả cuối cùng.
Đây là một ví dụ trong mã:
const pipe = (...funcs) => {
return (arg) => {
funcs.forEach(function(func) {
arg = func(arg);
}); return arg;
}
}
const addOne = (a) => a + 1;
const double = (x) => x * 2;
const square = (x) => x * x;
const myPipe = pipe(addOne, double, square);
console.log(myPipe(2));
Các hàm ống có thể cải thiện khả năng đọc và tính mô đun của mã bằng cách cho phép bạn viết logic xử lý phức tạp một cách chính xác. Điều này có thể làm cho mã của bạn dễ hiểu hơn và dễ bảo trì hơn.
3. bản đồ
Hàm bản đồ là một phương thức của lớp JavaScript Array tích hợp. Nó tạo một mảng mới bằng cách áp dụng hàm gọi lại cho từng phần tử của mảng ban đầu.
Nó lặp qua từng phần tử trong mảng đầu vào, chuyển nó làm đầu vào cho hàm gọi lại và chèn từng kết quả vào một mảng mới.
Điều quan trọng cần lưu ý là mảng ban đầu không được sửa đổi theo bất kỳ cách nào trong suốt quá trình này.
Đây là một ví dụ về cách sử dụng bản đồ:
const numbers = [1, 2, 3, 4, 5];const doubledNumbers = numbers.map(function(number) {
return number * 2;
});
console.log(doubledNumbers);
Trong ví dụ này, hàm bản đồ lặp qua từng phần tử trong mảng số. Nó nhân mỗi phần tử với 2 và trả về kết quả trong một mảng mới.
Nói chung, các hàm bản đồ loại bỏ nhu cầu sử dụng các vòng lặp trong JavaScript, đặc biệt là các vòng lặp vô hạn—các vòng lặp vô hạn có thể gây ra chi phí tính toán đáng kể, dẫn đến các vấn đề về hiệu suất trong ứng dụng. Điều này làm cho cơ sở mã ngắn gọn hơn và ít bị lỗi hơn.
4. chọn
Hàm chọn này cho phép bạn trích xuất có chọn lọc các thuộc tính cụ thể từ một đối tượng hiện có và tạo một đối tượng mới với các thuộc tính đó là kết quả của quá trình tính toán.
Chẳng hạn, hãy xem xét một tính năng báo cáo trong một ứng dụng, bằng cách sử dụng chức năng chọn, bạn có thể dễ dàng tùy chỉnh các báo cáo khác nhau dựa trên thông tin người dùng mong muốn bằng cách chỉ định rõ ràng các thuộc tính mà bạn muốn đưa vào các báo cáo khác nhau.
Đây là một ví dụ trong mã:
const pick = (object, ...keys) => {
return keys.reduce((result, key) => {
if (object.hasOwnProperty(key)) {
result[key] = object[key];
} return result;
}, {});
};
Hàm chọn lấy một đối tượng và bất kỳ số lượng khóa nào làm đối số. Các phím đại diện cho các thuộc tính bạn muốn chọn. Sau đó, nó trả về một đối tượng mới chỉ chứa các thuộc tính của đối tượng ban đầu với các khóa phù hợp.
const user = {
name: 'Martin',
age: 30,
email: 'Martin@yahoo.com',
};console.log(pick(user, 'name', 'age'));
Về cơ bản, hàm chọn có thể gói gọn logic lọc phức tạp thành một hàm duy nhất, giúp mã dễ hiểu và dễ gỡ lỗi hơn.
Nó cũng có thể thúc đẩy khả năng sử dụng lại mã, vì bạn có thể sử dụng lại chức năng chọn trong toàn bộ cơ sở mã của mình, giảm trùng lặp mã.
5. khóa kéo
Hàm zip này kết hợp các mảng thành một mảng bộ dữ liệu duy nhất, khớp các phần tử tương ứng từ mỗi mảng đầu vào.
Đây là một ví dụ triển khai chức năng zip:
function zip(...arrays) {
const maxLength = Math.min(...arrays.map(array => array.length)); return Array.from(
{ length: maxLength },
(_, index) => arrays.map(array => array[index])
);
};
const a = [1, 2, 3];
const b = ['a', 'b', 'c'];
const c = [true, false, true];
console.log(zip(a, b, c));
Hàm zip chấp nhận các mảng đầu vào và tính toán độ dài dài nhất của chúng. Sau đó, nó tạo và trả về một mảng bằng cách sử dụng phương thức Array.from JavaScript. Mảng mới này chứa các phần tử từ mỗi mảng đầu vào.
Điều này đặc biệt hữu ích nếu bạn cần kết hợp dữ liệu từ nhiều nguồn ngay lập tức, loại bỏ nhu cầu viết mã thừa có thể làm lộn xộn cơ sở mã của bạn.
Làm việc với các hàm JavaScript trong mã của bạn
Các hàm JavaScript cải thiện đáng kể chất lượng mã của bạn bằng cách cung cấp một cách đơn giản và nhỏ gọn để xử lý nhiều logic lập trình cho cả cơ sở mã nhỏ và lớn. Bằng cách hiểu và sử dụng các chức năng này, bạn có thể viết các ứng dụng hiệu quả hơn, dễ đọc và dễ bảo trì hơn.
Viết mã tốt giúp xây dựng các sản phẩm không chỉ giải quyết một vấn đề cụ thể cho người dùng cuối mà còn có thể dễ dàng sửa đổi.