Lập Trình

3 tips làm việc với JavaScript giúp bạn tiết kiệm thời gian

2050

Tác giả: Gaël Thomas

Để làm việc hiệu quả hơn cũng như tối ưu được thời gian làm việc cho một task, biết thêm một số tips hay ho sẽ giúp ích rất nhiều cho bạn. Dưới đây tôi sẽ giới thiệu với các dev một số JavaScript tip khi làm việc bằng ngôn ngữ JavaScript để tiết kiệm thời gian và công sức.

làm việc với javascript — JavaScript tip giúp công việc trở nên nhẹ nhàng hơn

1. Cấu trúc đối tượng

Đây là một JavaScript tip phổ biến hiện tại. Destructuring là một tính năng đã được giới thiệu trong ES6. Đó là một trong những tính năng bạn sẽ sử dụng hàng ngày khi bạn biết cách. Nó giúp bạn giải quyết ba vấn đề chính:

Lặp lại: Mỗi khi bạn muốn trích xuất một thuộc tính đối tượng và tạo một biến mới, bạn sẽ tạo một dòng mới.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

// Wow... should we display
// John's password like that?

const firstName = user.firstName;
const lastName = user.lastName;
const password = user.password;

Accessibility – Khả năng tiếp cận: Mỗi lần bạn muốn truy cập một thuộc tính đối tượng, bạn nên viết đường dẫn đến nó (ví dụ: user.firstName, user.family.sister)

10 câu hỏi javascript để nâng cao trình độ

12 tips hay cho JavaScript

Usage – Sử dụng. Ví dụ như khi bạn tạo một hàm mới và bạn chỉ đang làm việc với một thuộc tính của một đối tượng.

Xem thêm các việc làm tuyển dụng javascript tại TopDev

Bây giờ bạn đã thấy ba vấn đề này với các đối tượng là gì, bạn nghĩ bạn có thể giải quyết chúng như thế nào? Hãy sử dụng các JavaScript tip dưới đây:

1.1. Cách giải quyết vấn đề lặp lại

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const { firstName, lastName, password } = user;

console.log(firstName, lastName, password);
// Output: 'John', 'Doe', '123'

Destructuring là quá trình trích xuất một thuộc tính từ một đối tượng bằng key của nó. Bằng cách lấy một key hiện có trong đối tượng, sau đó đặt nó giữa hai dấu ngoặc ( { firstName })

Nếu bạn muốn hủy cấu trúc một đối tượng, bạn phải luôn sử dụng một khóa hiện có. Nếu không, nó sẽ không hoạt động.

Xem thêm các việc làm KMS Technology tuyển dụng hấp dẫn tại TopDev

1.2. Cách giải quyết Accessibility

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
  family: {
    sister: {
      firstName: "Maria",
    },
  },
};

// We access to the nested object `sister`
// and we extract the `firstName` property
const { firstName } = user.family.sister;

console.log(firstName);
// Output: 'Maria'

Khi làm việc với các đối tượng lồng ghép vào nhau, nó có thể bị lặp lại và lãng phí nhiều thời gian khi truy cập cùng một thuộc tính nhiều lần.

Sử dụng cấu trúc destructuring, chỉ trong một dòng, bạn có thể giảm đường dẫn thuộc tính thành một biến.

Xem thêm các việc làm KMS tuyển dụng

1.3. Cách giải quyết Usage

Nếu bạn biết React, có lẽ bạn đã quen thuộc với vấn đề này.

function getUserFirstName({ firstName }) {
  return firstName;
}

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

console.log(getUserFirstName(user));
// Output: 'John'

Trong ví dụ trên, chúng ta có một getUserFirstName hàm và biết rằng nó sẽ chỉ sử dụng một thuộc tính của đối tượng là firstName.

Thay vì truyền toàn bộ đối tượng hoặc tạo một biến mới, chúng ta có thể destructure các tham số hàm của đối tượng.

>>> Xem thêm Vượt qua các bài phỏng vấn Javascript

2. Cách hợp nhất các đối tượng trong ES6

Trong lập trình, bạn thường phải giải quyết các vấn đề với cấu trúc dữ liệu. Nhờ toán tử spread được giới thiệu trong ES6, các thao tác đối tượng và mảng đơn giản hơn.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

Hãy tưởng tượng rằng chúng ta có hai đối tượng:

User: Một đối tượng xác định thông tin chung về người dùng.
UserJob: Một đối tượng xác định thông tin công việc của người dùng.

Chúng ta muốn tạo một đối tượng chỉ chứa các thuộc tính của hai đối tượng này.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const userJob = {
  jobName: "Developer",
  jobCountry: "France",
  jobTimePerWeekInHour: "35",
};

const myNewUserObject = {
  ...user,
  ...userJob,
};

console.log(myNewUserObject);
// Output:
//{
//  firstName: 'John',
//  lastName: 'Doe',
//  password: '123',
//  jobName: 'Developer',
//  jobCountry: 'France',
//  jobTimePerWeekInHour: '35'
//}

Sử dụng toán tử spread ( ...), chúng ta có thể trích xuất tất cả các thuộc tính của đối tượng này sang đối tượng khác.

const user = {
  firstName: "John",
  lastName: "Doe",
  password: "123",
};

const myNewUserObject = {
  ...user,
  // We extract:
  // - firstName
  // - lastName
  // - password
  // and send them to
  // a new object `{}`
};

2.1. Cách Merge Arrays – hợp nhất mảng

const girlNames = ["Jessica", "Emma", "Amandine"];
const boyNames = ["John", "Terry", "Alexandre"];

const namesWithSpreadSyntax = [...girlNames, ...boyNames];

console.log(namesWithSpreadSyntax);
// Output: ['Jessica', 'Emma', 'Amandine', 'John', 'Terry', 'Alexandre']

Giống như các đối tượng, toán tử spread ( ...) trích xuất tất cả các phần tử từ mảng này sang mảng khác.

const girlNames = ["Jessica", "Emma", "Amandine"];

const newNewArray = [
  ...girlNames,
  // We extract:
  // - 'Jessica'
  // - 'Emma'
  // - 'Amandine'
  // and send them to
  // a new array `[]`
];

2.2. Cách loại bỏ Array Duplicates

Vì mảng là danh sách nên có thể có nhiều mục cùng giá trị. Nếu bạn muốn loại bỏ các bản sao trong mảng của mình, bạn có thể làm theo một trong các ví dụ dưới đây.

Một trong số đó sẽ chỉ có một dòng nhờ ES6, nhưng tôi để ví dụ “cũ” trong đó để bạn có thể so sánh.

tip for javascript — Tìm hiểu thêm các tip JavaScript thông qua bài viết này

Xem thêm các việc làm tuyển dụng Tester HCM hấp dẫn tại TopDev

2.2.1. Cách loại bỏ các bản sao mảng “theo cách cũ”

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithFilter = animals.filter(
  // Parameters example: 'owl', 0, ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl']
  (animal, index, array) => array.indexOf(animal) == index
);

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Trong ví dụ trên, tôi muốn clean mảng animals bằng cách loại bỏ tất cả các bản sao.

Chúng ta có thể làm điều đó bằng cách sử dụng hàm filter với indexOf bên trong nó.

Các filter chức năng sẽ đưa tất cả các yếu tố của mảng animals ( animals.filter). Sau đó, đối với mỗi lần xuất hiện, nó cung cấp:

giá trị hiện tại ( ví dụ duck 🙂
chỉ mục ( ví dụ: 0)
mảng ban đầu ( ví dụ: các animalsmảng => ['owl', 'frog', 'canary', 'duck', 'duck', 'goose', 'owl'])

Tôi sẽ áp dụng indexOf trên mảng ban đầu cho mỗi lần xuất hiện và đưa ra dưới dạng một tham số là biến animal (giá trị hiện tại).

indexOf sẽ trả về chỉ mục đầu tiên của giá trị hiện tại (ví dụ: đối với ‘cú’, chỉ mục là 0).

Sau đó, bên trong bộ lọc, tôi so sánh giá trị của indexOf với chỉ mục hiện tại. Nếu nó giống nhau, chúng tôi trả lại true khác false.

filter sẽ tạo một mảng mới chỉ với các phần tử có giá trị trả về true.

Vì vậy, trong trường hợp của chúng tôi: ['owl', 'frog', 'canary', 'duck', 'goose'].

2.2.2. Cách loại bỏ các bản sao mảng “theo cách mới”

Cách cũ cũng thú vị nhưng nó dài và hơi khó. Nếu muốn bạn có thể thực hiện bằng cách mới như sau:

const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

const uniqueAnimalsWithSet = [...new Set(animals)];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Hãy tách các bước khác nhau ra:

// 1
const animals = ["owl", "frog", "canary", "duck", "duck", "goose", "owl"];

// 2
const animalsSet = new Set(animals);

console.log(animalsSet);
// Output: Set { 'owl', 'frog', 'canary', 'duck', 'goose' }

// 3
const uniqueAnimalsWithSet = [...animalsSet];

console.log(uniqueAnimalsWithSet);
// Output: ['owl', 'frog', 'canary', 'duck', 'goose']

Tôi có một mảng animal và muốn chuyển đổi nó thành một Set, là một loại đối tượng đặc biệt trong ES6.

Điều khác biệt ở nó là nó cho phép bạn tạo ra một bộ sưu tập các giá trị độc đáo.

Lưu ý: Set là một tập hợp các giá trị duy nhất, nhưng nó không phải là một Array.

Khi chúng ta có Set đối tượng của mình với các giá trị duy nhất, chúng ta cần chuyển đổi nó trở lại một mảng.

Để làm điều đó, tôi sử dụng các toán tử spread để phá hủy nó và gửi tất cả các thuộc tính sang một thuộc tính mới Array.

Vì Set đối tượng có các thuộc tính duy nhất nên mảng mới của chúng ta cũng sẽ chỉ có các giá trị duy nhất.

3 lỗi javascript thường mắc phải làm ảnh hưởng perfomance

3. Cách sử dụng toán tử bậc ba

Bạn đã nghe nói về cách viết các điều kiện nhỏ chỉ trong một dòng chưa? Hãy làm quen với cách này bằng một JavaScript tip.

Nếu không, đã đến lúc loại bỏ nhiều khối if và else chuyển chúng thành các phép toán bậc ba nhỏ.

Hãy xem một ví dụ với console.log để bắt đầu. Ý tưởng là kiểm tra giá trị của một biến và hiển thị có điều kiện một đầu ra.

const colour = "blue";

if (colour === "blue") {
  console.log(`It's blue!`);
} else {
  console.log(`It's not blue!`);
}

Ví dụ này là một trường hợp điển hình trong đó bạn có thể sử dụng toán tử bậc ba để giảm 5 if và else các dòng này xuống chỉ còn một!

Một dòng để tổng hợp tất cả!

const colour = "blue";

colour === "blue" ? console.log(`It's blue!`) : console.log(`It's not blue!`);
// [condition] ? [if] : [else]

Toán tử bậc ba thay thế if và else cho các điều kiện nhỏ.

Lưu ý: Không nên tạo điều kiện phức tạp với toán tử bậc ba vì nó có thể làm giảm khả năng đọc.

Dưới đây là một ví dụ khác sử dụng toán tử bậc ba, nhưng lần này là return trong một hàm.

function sayHelloToAnne(name) {
  return name === "Anne" ? "Hello, Anne!" : "It's not Anne!";
}

console.log(sayHelloToAnne("Anne"));
// Output: 'Hello, Anne!'

console.log(sayHelloToAnne("Gael"));
// Output: "It's not Anne!"

Hi vọng một số tip hay ho trên đây có thể giúp bạn coding hiệu quả hơn với ngôn ngữ JavaScript. Happy Coding!

Bài viết gốc được đăng tải tại freecodecamp.org

Có thể bạn quan tâm:

Xem thêm việc làm tuyển dụng lập trình viên hấp dẫn tại TopDev