Khám phá nghệ thuật viết tắt JavaScript

Th10 11, 2023 | Bài viết chuyên môn, Blog | 0 Lời bình

Xin chào các bạn đam mê JavaScript!

Hôm nay, chúng ta sẽ khám phá nghệ thuật viết tắt JavaScript – các kỹ thuật tiện lợi giúp mã của bạn ngắn gọn và trang nhã hơn.

Chúng ta sẽ đi sâu vào các ví dụ trường hợp sử dụng thực tế ở cả dạng JavaScript cơ bản và dạng tốc ký.

Vì vậy, hãy thắt dây an toàn và nâng cao kỹ năng JavaScript của bạn lên một tầm cao mới!

Nội dung

1. The Ternary Operator (Toán tử 3 ngôi)
2. Object Property Shorthand (Viết tắt thuộc tính đối tượng)
3. Default Parameter Values (Giá trị tham số mặc định)
4. Short-Circuit Evaluation (Đánh giá ngắn mạch)
5. Array Destructuring (Phá hủy mảng)
6. Template Literals (Mẫu chữ)
7. Arrow Functions (Hàm mũi tên)
8. Nullish Coalescing Operator (Toán tử hợp nhất Nullish)
9. Object Destructuring (Phá hủy đối tượng)
10. Spread Operator (Toán tử lây lan)
11. Logical OR Assignment (Phép gán logic HOẶC)
12. Short-Circuit Evaluation for Function Call (Đánh giá ngắn mạch cho lệnh gọi hàm)

1. The Ternary Operator (Toán tử 3 ngôi)

Trường hợp sử dụng: Bài tập có điều kiện

Normal JavaScript:

let isAdmin;

if (user.role === ‘admin’) {

isAdmin = true;

} else {

isAdmin = false;

}

Shorthand:

const isAdmin = user.role === ‘admin’ ? true : false;

Shorterhand:

const isAdmin = user.role === ‘admin’;

2. Object Property Shorthand (Viết tắt thuộc tính đối tượng)

Trường hợp sử dụng: Tạo đối tượng với các biến

Normal JavaScript:

const name = ‘Leandro’;

const age = 30;

const person = {

age: age,

};

Shorthand:

const name = ‘Leandro’;

const age = 30;

const person = {

name,

age,

};

3. Default Parameter Values (Giá trị tham số mặc định)

Trường hợp sử dụng: Cung cấp giá trị mặc định cho tham số hàm

Normal JavaScript:

function greet(name) {

name = name || ‘Guest’;

return `Hello, ${name}!`;

}

Shorthand:

function greet(name = ‘Guest’) {

return `Hello, ${name}!`;

}

4. Short-Circuit Evaluation (Đánh giá ngắn mạch)

Trường hợp sử dụng: Dự phòng cho các giá trị Null hoặc Undefined

Normal JavaScript:

const username = getUsernameFromAPI();

const displayName = username ? username : ‘Anonymous’;

Shorthand:

const username = getUsernameFromAPI(); const displayName = username || ‘Anonymous’;

5. Array Destructuring (Phá hủy mảng)

Trường hợp sử dụng: Hoán đổi biến

Normal JavaScript:

let a = 5;

let b = 10;

const temp = a;

a = b;

b = temp;

Shorthand:

let a = 5;

let b = 10;

[a, b] = [b, a];

6. Template Literals (Mẫu chữ)

Trường hợp sử dụng: Nối chuỗi động

Normal JavaScript:

const name = ‘Leandro’;

const greeting = ‘Hello, ‘ + name + ‘!’;

Shorthand:

const name = ‘Leandro’;

const greeting = `Hello, ${name}!`;

7. Arrow Functions (Hàm mũi tên)

Trường hợp sử dụng: Định nghĩa hàm ngắn gọn

Normal JavaScript:

function add(a, b) {

return a + b;

}

Shorthand:

const add = (a, b) => a + b;

8. Nullish Coalescing Operator (Toán tử hợp nhất Nullish)

Trường hợp sử dụng: Cung cấp giá trị mặc định cho các biến rỗng hoặc không xác định

Normal JavaScript:

const fetchUserData = () => {

return ‘leandro’; // thay đổi thành null hoặc undefined để xem hành vi

};

const data = fetchUserData();

const username = data !== null && data !== undefined ? data : ‘Guest’;

Shorthand:

const fetchUserData = () => {

return ‘leandro’; // thay đổi thành null hoặc undefined để xem hành vi

};

const data = fetchUserData();

const username = data ?? ‘Guest’;

9. Object Destructuring (Phá hủy đối tượng)

Trường hợp sử dụng: Trích xuất các thuộc tính đối tượng thành các biến

Normal JavaScript:

const user = {

age: 30,

country: ‘USA’,

};

const name = user.name;

const age = user.age;

const country = user.country;

Shorthand:

const user = {

age: 30,

country: ‘USA’,

};

const { name, age, country } = user;

10. Spread Operator (Toán tử lây lan)

Trường hợp sử dụng: Hợp nhất mảng hoặc đối tượng

Normal JavaScript:

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const mergedArray = arr1.concat(arr2);

Shorthand:

const arr1 = [1, 2, 3];

const arr2 = [4, 5, 6];

const mergedArray = […arr1, …arr2];

11. Logical OR Assignment (Phép gán logic HOẶC)

Trường hợp sử dụng: Gán giá trị mặc định cho một biến

Normal JavaScript:

let count;

if (!count) {

count = 0;

}

Shorthand:

let count;

count ||= 0;

12. Short-Circuit Evaluation for Function Call (Đánh giá ngắn mạch cho lệnh gọi hàm)

Trường hợp sử dụng: Tránh thực thi chức năng không cần thiết

Normal JavaScript:

function fetchData() {

if (shouldFetchData) {

return fetchDataFromAPI();

} else {

return null;

}

Shorthand:

function fetchData() {

return shouldFetchData && fetchDataFromAPI();

}

Các tốc ký JavaScript tiếp tục gây ấn tượng với sự sang trọng và hiệu quả của chúng. Hãy kết hợp những ví dụ ngắn gọn này vào cơ sở mã của bạn và xem kỹ năng JavaScript của bạn được nâng lên tầm cao mới.

Chúc bạn viết mã vui vẻ và tận hưởng sức mạnh của tốc ký JavaScript trong các dự án của bạn!