Khi lần đầu tiên tôi bắt đầu viết mã JavaScript, tôi thấy mình viết mã không phải là mã “ tốt” vì tôi thường sử dụng đặc điểm / tính năng JavaScript cũ và nhiều lần mã của tôi có thể đã được cấu trúc lại và đơn giản hóa để làm cho nó ngắn gọn hơn bằng cách sử dụng một số JavaScript Các tính năng hiện đại.
Hôm nay tôi sẽ chia sẻ 9 mẹo, thủ thuật và tính năng hàng đầu của JavaScript theo thứ tự cụ thể sẽ giúp cải thiện chất lượng mã của bạn và sẽ hữu ích khi viết mã ứng dụng tiếp theo của bạn! 🚀
1. Arrow Functions ➡️
ES6 đã giới thiệu các Arrow Functions giúp mã hàm trông gọn gàng hơn và viết nhanh hơn tổng thể!
Thay vì khai báo các hàm như thế này:
const multiply = function(x, y) {
return x * y;
};
Đạt được kết quả tương tự với ít mã hơn
const multiply = (x, y) => {
return x * y;
};
Sau đó, điều này có thể được đơn giản hóa hơn nữa nếu chỉ có một biểu thức
const multiply = (x, y) => x * y;
2. Spread Operator
Cú pháp Spread cho phép một biểu thức iterable như một biểu thức mảng hay chuỗi được mở rộng ở các vị trí mà hàm zero hay nhiều đối số (đối với lệnh gọi hàm) hoặc phần tử (đối với ký tự mảng) được mong đợi hoặc một biểu thức đối tượng được mở rộng ở những nơi không hoặc Dự kiến sẽ có nhiều cặp khóa-giá trị hơn (đối với các ký tự đối tượng).
Tạo một mảng mới bằng cách sử dụng một mảng hiện có như một phần của nó
const parts = ['shoulders', 'knees'];
const lyrics = ['head', ...parts, 'and', 'toes'];
console.log(lyrics);
// Result: ["head", "shoulders", "knees", "and", "toes"]
Một cách tốt hơn để nối các mảng
let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];
console.log(arr1) // Result: [0, 1, 2, 3, 4, 5
Sử dụng các phần tử của một mảng làm đối số cho một hàm
const add = (a, b, c) => a + b + c;
let array = [1,2,3];
console.log(add(...array)); // Result: 6
3. Rest Operator
Cú pháp Rest trông giống hệt như cú pháp spread nhưng được sử dụng để cấu trúc các mảng và đối tượng.
Theo một cách nào đó, cú pháp Rest là ngược lại với cú pháp lây lan. Cú pháp Spread expands một mảng thành các phần tử của nó, trong khi cú pháp rest collects nhiều phần tử và cô đọng chúng thành một phần tử duy nhất.
const blend = ( ice , liquid , ... theRest ) => {
console.log ( theRest );
};
blend ('đá', 'sữa', 'chuối', 'dâu tây');
// Kết quả: ['banana', 'dâu tây']
Tham số cuối cùng của hàm có thể được bắt đầu bằng ... điều này sẽ khiến tất cả các đối số còn lại được đặt trong một mảng JavaScript.
4. Fill Arrays
Tạo một mảng đơn giản trong một dòng
Một mảng gồm 5 chuỗi trống
let array = Array(5).fill(''); // Result: ['', '', '', '', '']
Mảng số từ 0 đến 4
let array = Array.from(Array(5).keys()); // Result: [0, 1, 2, 3, 4]
// Using the spread operator
let array = [...Array(5).keys()] // Result: [0, 1, 2, 3, 4]
5. Tên thuộc tính đối tượng được tính toán
ES6 hỗ trợ các tên thuộc tính đối tượng được tính toán, cho phép bạn đặt một biểu thức trong dấu ngoặc [], biểu thức này sẽ được tính toán và sử dụng làm tên / khóa thuộc tính.
let key = 'A_DYNAMIC_KEY';
let obj = {
[key]: 'A_VALUE',
};
console.log(obj) // Result: { A_DYNAMIC_KEY: 'A_VALUE' }
6. Những cách tốt để console.log ()
Sử dụng console.table () khi bạn có một mảng đối tượng.
const foo = { name: 'Suibin', age: 30, coder: true };
const bar = { name: 'Borja', age: 40, coder: true };
const baz = { name: 'Paul', age: 50, coder: false };
console.table([foo, bar, baz]);
Result:
Làm cho dữ liệu nổi bật với kiểu CSS tùy chỉnh bằng cách sử dụng dấu ‘%’
console.log('%cStyled log', 'color: orange; font-weight: bold;');
console.log('Normal log');
Result:
Ghi nhật ký nhiều đối tượng trong một nhật ký bảng điều khiển để giảm dấu vết mã và xem biến nào xác định dữ liệu
const foo = { name: 'Suibin', age: 30, coder: true };
const bar = { name: 'Borja', age: 40, coder: true };
const baz = { name: 'Paul', age: 50, coder: false };
console.log({ foo, bar, baz });
Result:
7. Cấu trúc đối tượng
Loại bỏ sự lặp lại mã bằng cách cấu trúc lại các thuộc tính đối tượng mà bạn cần.
const dog = {
name: 'Nala',
gender: 'female',
age: 10
};
Hủy cấu trúc bên trong các đối số của hàm bằng cách đặt tên của các thuộc tính mà chúng ta muốn sử dụng trong dấu ngoặc
const func = ({ name, age }) => {
return `${name} is ${age} years old.`;
};
console.log(func(dog)); // Result: Nala is 10 years old.
Hoặc
Truyền đối tượng động vật vào và thiết lập một biến có tên của các thuộc tính trong đối tượng bằng đối tượng. Điều này sẽ tốt hơn nếu có nhiều đối tượng để phá hủy trong một hàm duy nhất.
const func = (animal) => {
const { name, age } = animal;
return `${name} is ${age} years old.`;
};
console.log(func(dog)); // Result: Nala is 10 years old.
8. Sử dụng Reduce () map () và filter () thay vì các vòng lặp for thông thường
Sử dụng phương thức Reduce () để giảm một mảng xuống một giá trị duy nhất.
let orders = [1, 2, 3, 4, 5];
const total = orders.reduce((acc, cur) => acc + cur);
console.log(total); // Result: 15
Sử dụng phương thức map () để tạo một mảng mới với kết quả là gọi một hàm cho mọi phần tử mảng.
let orders = [1, 2, 3, 4, 5];
const total = orders.map((item) => item * 2);
console.log(total); // Result: [2, 4, 6, 8, 10]
Sử dụng phương thức filter () để tạo một mảng chứa đầy tất cả các phần tử của mảng vượt qua một bài kiểm tra (được cung cấp dưới dạng một hàm).
let orders = [1, 2, 3, 4, 5];
const total = orders.filter((item) => item > 3);
console.log(total); // Result: [4, 5]
9. Toán tử điều kiện
Mọi câu lệnh if..else đều có thể được thay đổi thành câu lệnh điều kiện bằng cú pháp sau:
condition ? (expression if true) : (expression if false)
Ví dụ, đoạn mã sau:
const hour = 5;
if (hour < 18) {
console.log('Good day');
} else {
console.log('Good evening');
}
// Result: Good day
Có thể giảm xuống:
const hour = 5;
hour < 18 ? console.log(‘Good day’) : console.log(‘Good evening’);
// Result: Good day
Bài viết gốc tại đây.
Hiện tại khóa học Web Frontend tại Techmaster Vietnam vẫn liên tục tuyển sinh các lớp tiếp theo. Và trong tình hình dịch bệnh phức tạp, lớp sẽ chuyển sang học hình thức trực tuyến có tương tác, thời lượng và chất lượng không đổi, vẫn đảm bảo việc làm cho học viên tốt nghiệp.
Chi tiết khóa học: https://frontend.techmaster.vn/.
Liên hệ tư vấn: Mr Thịnh - 0987273764 (zalo).
Bình luận