GALAXY TECH
Chuyên gia Công nghệ
Thứ hai, 26/11/2018 | 00:00 GMT+7

Thủ thuật với JavaScript Hủy cấu trúc

Để hiểu cú pháp cấu trúc mới hơn được giới thiệu trong ES6, ta hãy xem xét cách "cũ". Tôi sẽ đề cập đến vấn đề này một vài lần trong suốt, nhưng đây là những cú pháp tùy chọn CÓ THỂ hữu ích. Vẫn có một số trường hợp sử dụng rõ ràng hơn với các phương pháp root , chẳng hạn như trình truy cập thuộc tính và điều đó hoàn toàn hợp lệ.

// some object
const apple = {
  numberOfLeaves: 2,
  colors: {
    actual: ['green', 'yellow'],
    possible: ['red', 'green', 'yellow'],
  },
  kind: 'Golden Delicious',
  sku: 'A-GD-01',
};

Đây là cách ta có thể lấy các giá trị từ đối tượng này trước ES6:

// property accessors using the dot syntax
const kind = apple.kind;
const sku = apple.sku;

Và bây giờ ta đã cấu trúc lại, ta có thể làm như thế này để extract cả hai thuộc tính này từ đối tượng và gán chúng cho các biến const mới:

const { kind, sku } = apple;

Nó có ích để truy cập các giá trị lồng nhau. Bạn cũng có thể chọn tên của riêng mình cho biến - nó không cần phải trùng với tên thuộc tính!

// instead of:
//   const colors = apple.colors.actual;
//   const possibleColors = apple.colors.possible;

const { actual: colors, possible: possibleColors } = apple.colors;

console.log(colors); // outputs ["green", "yellow"]
console.log(possibleColors); // outputs ["red", "green", "yellow"]

Cấu trúc mảng

Cấu trúc mảng rất giống nhau và cho phép ta chỉ lấy một số giá trị từ một mảng, như sau:

const names = ['Jack', 'Janet', 'John', 'Jessie', 'Jaqueline', 'Jerry', 'Justin', 'Julie', 'Jake'];

const [first, second, third, ...theRest] = names;

console.log(first); // outputs "Jack"

console.log(theRest); // outputs ["Jessie", "Jaqueline", "Jerry", "Justin", "Julie", "Jake"]

Như bạn thấy , ta đang extract 3 mục đầu tiên thành các biến của riêng chúng và sử dụng cú pháp còn lại ... để gán các giá trị còn lại vào một biến mới khác.

Ta không phải gán các giá trị còn lại cho một biến. Giả sử ta chỉ muốn giá trị mảng đầu tiên - ta chỉ có thể đặt biến trong dấu ngoặc.

Bây giờ, ta sẽ kết hợp hủy cấu trúc mảng với hủy cấu trúc đối tượng để lấy ra một giá trị mà ta muốn, giảm việc extract thành một câu lệnh.

const winners = [
  { name: 'Mario',   time: 110 },
  { name: 'Waluigi', time: 115 },
  { name: 'Toad',    time: 116 },
  { name: 'Yoshi',   time: 124 },
  { name: 'Bowser',  time: 129 },
];

function getBestTimeOf(racers) {
  // extract only the first item and from that, we only assign 
  // the property of time to the new variable of bestTime
  const [{ time: bestTime }] = racers;
  return bestTime;
}

console.log( getBestTimeOf(winners) ); // outputs 110

Một số người có thể không nghĩ rằng cách extract này sạch hơn const bestTime = winners[0].time; và tôi đồng ý rằng ta có thể mất một số khả năng đọc nhanh mã. Đó là lý do tại sao mọi chiến lược đều đòi hỏi tầm nhìn xa và nhận thức chung trước khi thực hiện nó. Trong các ví dụ thực tế của bạn, bạn có thể sẽ kéo nhiều hơn chỉ MỘT thuộc tính từ MỘT giá trị mảng. Việc phá hủy sẽ giúp ích rất nhiều vào thời điểm đó.

Hai mẹo nhanh khác cho mảng

  1. Bạn có thể swap các giá trị, giả sử rằng chúng không được xác định bằng const .
let a = 2;
let b = 5;

[a, b] = [b, a];
console.log(a); // 5
console.log(b); // 2
  1. Bạn có thể bỏ qua các giá trị bằng cách để lại vị trí bằng dấu phẩy. Trong ví dụ này, tôi sẽ chỉ lấy giá trị thứ hai. Đừng lo lắng về việc sử dụng biểu thức chính quy - tôi đã thay đổi mã một chút từ một dự án của tôi để hiển thị cách sử dụng khả thi.
const [,, three] = [1, 2, 3, 4, 5, 6, 7];
console.log(`I selected ${three}.`); // outputs "I selected 3."

🔥🔥 Mẹo hay cho các chức năng 🔥🔥

Nhiều giá trị trả lại

Bạn có thể sử dụng cấu trúc mảng để trả về nhiều giá trị từ một hàm! Các nhà phát triển React sử dụng chức năng hooks mới có thể quen thuộc với cách sử dụng chức năng này:

const [count, setCount] = useState(0);

Tất cả những gì bạn cần làm để có cùng chức năng trả về nhiều giá trị là trả về các giá trị đó. Theo nghĩa đen.

function getCoordinates(address) {
  // use an API to get the lon/lat of an address
  const coordinates = maps.address(address).coordinates;
  return [coordinates.lon, coordinates.lat];
}

// later I can get this with
const [longitude, latitude] = getCoordinates(someAddress);

Tham số biểu thức / Cú pháp đối số

Đây là cách sử dụng hủy cấu trúc yêu thích của tôi. Ta sẽ sử dụng các đối tượng làm cả tham số hàm VÀ đối số của ta ! Điều này có thể đơn giản hóa cấu trúc của các chức năng. Xin lưu ý bạn không cần phải sử dụng điều này trong mọi trường hợp, chẳng hạn như đối với những trường hợp đã đơn giản.

Để làm rõ - Tham số là một biến trong khai báo hàm. Đối số là dữ liệu bạn truyền vào các tham số hàm khi nó được gọi.

Dưới đây là một đoạn mã để làm rõ các định nghĩa này. Đừng chú ý quá nhiều đến những gì mã đang làm - hãy xem những gì các ghi chú đang chỉ ra.

// level and data are the parameters
function logData(level, data) {
  console.log(`New log of level: ${level}`);
  console.log(data);
}

const someLevel = 'error';
const calculatedData = {
  id: 1,
  name: 'Jack',
};

// the VALUES of someLevel and calculatedData are the arguments 
// we are passing to logData() - the variable names are irrelevant
logData(someLevel, calculatedData);

Đây là một số mã có thể điều khiển một phần của lựa chọn viễn thông. Hàm này đặt một biến trên một kênh cuộc gọi. , hãy bỏ qua mục đích mã thực tế và tập trung vào các ghi chú và chiến lược.

// ...inside a class
async set({
  variable = '',
  value = '',
  callId = '',
} = {})
{
  console.log(`Setting ${variable} equal to ${value} on call ID: ${callId}`);
  return await this.api('call_setvar', `${callId} ${variable} ${value}`);
}

Tôi gọi chức năng này như sau:

// callId and url are defined above

await this.set({ callId, variable: 'custom_transfer_url', value: url });

Phương thức truyền vào một đối tượng và để nó bị hủy ngầm ở đầu bên kia mang lại cho ta một số lợi ích có giá trị:

  1. tham số được đặt tên (tự lập tài liệu)
  2. giá trị mặc định (qua dấu = ) **
  3. trật tự là không quan trọng
  4. đối tượng thuộc tính-giá trị viết tắt (sử dụng cùng một tên cho thuộc tính và biến giữ giá trị, chẳng hạn như cách truyền uuid vào) uuid: uuid, được rút ngắn thành uuid,

Bạn không phải đặt mỗi biến trên một dòng khác nhau như bạn thấy trong phần khai báo hàm của tôi. Tôi làm điều này để có thể cung cấp rõ ràng các giá trị mặc định và ghi chú nếu tôi muốn.

** Lưu ý các giá trị mặc định sẽ chỉ được sử dụng nếu giá trị không được xác định, nghĩa là nó không được chuyển vào hoặc nó được đặt rõ ràng là không xác định. Giá trị rỗng sẽ không kích hoạt giá trị mặc định và sẽ vẫn trống.

Tôi hy vọng rằng những cách sử dụng này của cấu trúc mảng và đối tượng đã cung cấp cho bạn một số cách mới để đơn giản hóa và cấu trúc mã của bạn! Nếu bạn nghĩ rằng bất kỳ nhà phát triển nào trong số các nhà phát triển đồng nghiệp của bạn có thể sử dụng các mẹo này, hãy chia sẻ điều này với họ. Bạn cũng có thể tweet hoặc chia sẻ điều này và liên kết đến @alligatorio !

Tags:

Các tin liên quan

Đừng sợ theo dõi JavaScript
2018-10-17
Làm phẳng mảng trong Vanilla JavaScript với flat () và flatMap ()
2018-09-28
Cách sử dụng các phương thức đối tượng trong JavaScript
2018-08-03
Xử lý lỗi trong JavaScript Sử dụng try ... catch
2018-08-03
Hiểu sự kiện trong JavaScript
2018-06-19
Lập lịch tác vụ trong JavaScript Sử dụng setTimeout & setInterval
2018-06-12
Hiểu các lớp trong JavaScript
2018-05-04
Truy cập API Rails trong ứng dụng khách JavaScript bằng Rails Ranger
2018-03-15
Hiểu các biến, phạm vi và lưu trữ trong JavaScript
2018-02-20
Tìm hiểu Nguyên mẫu và Kế thừa trong JavaScript
2018-01-12