Destructuring Assignments trong JavaScript

let myPointInSpace = {
  x: 3,
  y: -2,
  z: 2.7
}

Giả sử bạn muốn thực hiện một số tính toán với tọa độ của điểm [như tính toán khoảng cách của nó từ gốc, (0, 0, 0)], vì vậy bạn muốn ném tọa độ x, y và z của điểm vào một số biến để dễ tham khảo. Người ta có thể làm như sau:

let x = myPointInSpace.x;
let y = myPointInSpace.y;
let z = myPointInSpace.z;

let distance = Math.sqrt(x*x + y*y + z*z);

Điều này chắc chắn hoạt động! Nhưng nếu bạn làm điều đó đủ thời gian, bạn có thể bị bệnh sao chép / dán. Với destructuring assignment, bạn có thể nhổ những tọa độ đó theo một cách ngắn gọn hơn nhiều! Dưới đây là cách thực hiện:

let {x, y, z} = myPointInSpace;

let distance = Math.sqrt(x*x + y*y + z*z);

Các dấu ngoặc nhọn trong trường hợp này chỉ ra destructuring assignment. Dòng đầu tiên ở trên nhìn vào biến myPointInSpace và tìm kiếm bất kỳ thuộc tính nào được chỉ định trong dấu ngoặc nhọn và sẽ trả về các biến đó trong các phép gán biến riêng lẻ.

let {x, y} = myPointInSpace;

Destructuring Assignment với Arrays

let x = myPointInSpace[0];
let y = myPointInSpace[1];
let z = myPointInSpace[2];

let [x, y, z] = myPointInSpace;

let toMilliseconds = ({
  hours = 0,
  minutes = 0,
  seconds = 0
}) => {
  // Compute the # of ms
  let ms = (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000);
  // Return the # of ms
  return ms;
}

let ms1 = toMilliseconds({hours: 3, minutes: 42, seconds: 33});
let ms2 = toMilliseconds({minutes: 7});

// Initial values
let x = 5;
let y = 3;

// Now swap, creating tmp variable
let tmp = y;
y = x;
x = tmp;
delete tmp;

// Initial values
let x = 5;
let y = 3;

// Now swap
[x, y] = [y, x];

let apiResponse = {
  someWeirdKeyForX: 3,
  someWeirdKeyForY: -7
}

let {someWeirdKeyForX: x, someWeirdKeyForY: y} = apiResponse;

// Declare x and y ahead of time
let x, y;
// Object that we will destructure
let o = {x: 3, y: -7};

// Try to destructure
{x, y} = o; // -> No good!

// Declare x and y ahead of time
let x, y;
// Object that we will destructure
let o = {x: 3, y: -7};

// Successfully destructure
({x, y} = o); // -> Good!