HomeLập trìnhJavaScriptPhá hủy cấu...

Phá hủy cấu trúc trong JavaScript – Cách phá hủy cấu trúc mảng và đối tượng


Làm việc với các mảng và đối tượng JavaScript có thể thú vị hơn nếu bạn hủy cấu trúc chúng. Điều này hữu ích khi bạn đang tìm nạp dữ liệu được lưu trữ.

Trong bài viết này, bạn sẽ tìm hiểu cách bạn có thể đưa việc phá hủy lên cấp độ tiếp theo trong mảng và đối tượng JavaScript.

Mục lục:

  • Mảng là gì?
  • Đối tượng là gì?
  • Ý nghĩa của việc hủy cấu trúc trong JavaScript
  • Phá hủy trong mảng
  • Phá hủy trong các đối tượng

Mảng trong JavaScript là gì?

Trong JavaScript, một mảng là một biến lưu trữ nhiều phần tử. Nó là một tập hợp các dữ liệu. Chúng ta có thể khai báo một mảng theo hai cách khác nhau, đó là:

// Method 1
const firstArray = ["JavaScript", "Python", "Go"];

// Method 2
const secondArray = new Array(3);
secondArray[0] = "JavaScript";
secondArray[1] = "Python";
secondArray[2] = "Go";

Ở phương pháp 1, bạn có thể khởi tạo trong khi khai báo mảng của mình. Ở cách 2, bạn khai báo mảng của mình với số lượng phần tử sẽ được lưu trữ trước khi khởi tạo.

Đối tượng trong JavaScript là gì?

Trong JavaScript, một đối tượng là một tập hợp các thuộc tính và một thuộc tính là một liên kết giữa một tên (hoặc Chìa khóa) và một giá trị.

Viết một đối tượng trong JavaScript trông giống như một mảng, nhưng thay vào đó chúng ta sử dụng dấu ngoặc nhọn hoặc ria mép để tạo chúng. Hãy xem đoạn mã dưới đây hiển thị một đối tượng xe hơi với các thuộc tính của nó:

const car = {
  name: "Toyota",
  color: "Black",
  year: 2022,
  engineType: "Automatic",
};

Lưu ý rằng những gì tạo nên một đối tượng là một khóa theo sau giá trị của nó.

Đọc thêm  React js không thể đọc thuộc tính của 'kiểu' null trong javascript - JavaScript

Bây giờ bạn đã biết những kiến ​​thức cơ bản về các mảng và đối tượng JavaScript trông như thế nào, hãy nói thêm về phá hủy.

Phá hủy cấu trúc trong JavaScript là gì?

Hãy tưởng tượng bạn muốn chọn một số đôi giày từ bộ sưu tập của mình và bạn muốn có đôi màu xanh yêu thích của mình. Điều đầu tiên bạn phải làm là tìm kiếm trong bộ sưu tập của mình và giải nén bất cứ thứ gì bạn có ở đó.

Việc phá hủy bây giờ giống như cách tiếp cận mà bạn đã thực hiện khi tìm kiếm đôi giày của mình. Phá hủy là hành động giải nén các phần tử trong một mảng hoặc đối tượng.

Việc hủy cấu trúc không chỉ cho phép chúng tôi giải nén các phần tử, nó còn cung cấp cho bạn khả năng thao tác và chuyển đổi các phần tử bạn đã giải nén tùy thuộc vào loại thao tác bạn muốn thực hiện.

Bây giờ chúng ta hãy xem cách phá hủy hoạt động trong mảng và đối tượng.

Phá hủy trong mảng

Để hủy cấu trúc một mảng trong JavaScript, chúng tôi sử dụng dấu ngoặc vuông [] để lưu trữ tên biến sẽ được gán cho tên của mảng lưu trữ phần tử.

const [var1, var2, ...] = arrayName;

Các hình elip ngay sau var2 được khai báo ở trên đơn giản có nghĩa là chúng ta có thể tạo nhiều biến hơn tùy thuộc vào số lượng mục chúng ta muốn xóa khỏi mảng.

Cách gán biến với hủy cấu trúc

Bây giờ, giả sử chúng ta có một mảng gồm 6 màu nhưng chúng ta chỉ muốn lấy 2 màu đầu tiên trong mảng. Chúng ta có thể sử dụng phá hủy để có được những gì chúng ta muốn.

Bây giờ chúng ta hãy xem nó:

const colorArr = ["red", "yellow", "blue", "green", "white", "black"];

const [first, second] = colorArr;
console.log(first, second);

// red, yellow
đầu tiên

Khi chúng tôi chạy đoạn mã trên, chúng tôi sẽ đăng nhập màu đỏ và màu vàng vào bảng điều khiển. Thật tuyệt vời!

Đọc thêm  Cách kiểm tra xem một mảng JavaScript có trống hay không với .length

Cách hoán đổi biến với hủy cấu trúc

Bây giờ bạn đã biết cách gán biến với phép hủy, hãy xem cách bạn có thể sử dụng phép hủy để nhanh chóng hoán đổi các giá trị của biến.

Giả sử chúng ta có một mảng gồm hai phần tử, "food""fruits"và chúng tôi sử dụng hàm hủy để gán các giá trị đó cho các biến positionOnepositionTwo:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
console.log(positionOne, positionTwo);

// food, fruits

Nếu sau này chúng ta muốn hoán đổi các giá trị của positionOnepositionTwo nếu không phá hủy, chúng ta sẽ cần sử dụng một biến khác để tạm thời giữ giá trị của một trong các biến hiện tại, sau đó thực hiện hoán đổi.

Ví dụ:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
const temp = positionOne;

positionOne = positionTwo;
positionTwo = temp;
console.log(positionOne, positionTwo);

// fruits, food

Nhưng với việc phá hủy, chúng ta có thể hoán đổi các giá trị của positionOnepositionTwo thực sự dễ dàng mà không cần phải sử dụng một biến tạm thời:

const edibles = ["food", "fruits"];

let [positionOne, positionTwo] = edibles;
[positionOne, positionTwo] = [positionTwo, positionOne];
console.log(positionOne, positionTwo);

// fruits, food
thứ hai

Lưu ý rằng phương pháp hoán đổi biến này không làm thay đổi mảng ban đầu. nếu bạn đăng nhập edibles vào bảng điều khiển, bạn sẽ thấy rằng giá trị của nó vẫn còn ["food", "fruits"].

Cách thay đổi mảng bằng cách hủy cấu trúc

Đột biến có nghĩa là thay đổi hình thức hoặc giá trị của một phần tử. Một giá trị được cho là có thể thay đổi nếu nó có thể thay đổi được. Với sự trợ giúp của việc hủy trong mảng, chúng ta có thể tự biến mảng.

Nói rằng chúng ta có cùng edibles mảng và chúng tôi muốn thay đổi mảng bằng cách hoán đổi thứ tự của "food""fruits".

Chúng ta có thể làm điều đó với phép hủy, tương tự như cách chúng ta hoán đổi giá trị của hai biến trước đây:

const edibles = ["food", "fruits"];

[edibles[0], edibles[1]] = [edibles[1], edibles[0]];
console.log(edibles);

// ["fruits", "food"]

Phá hủy trong các đối tượng

Khi hủy đối tượng, chúng ta sử dụng dấu ngoặc nhọn với tên chính xác của những gì chúng ta có trong đối tượng. Không giống như trong các mảng nơi chúng ta có thể sử dụng bất kỳ tên biến nào để giải nén phần tử, các đối tượng chỉ cho phép sử dụng tên của dữ liệu được lưu trữ.

Đọc thêm  Cách tìm nghịch đảo cộng của mỗi số trong JavaScript [CodeWars Challenge Solved]

Điều thú vị là chúng ta có thể thao tác và gán tên biến cho dữ liệu mà chúng ta muốn lấy từ đối tượng. Bây giờ chúng ta hãy xem tất cả những điều đó trong mã.

const freeCodeCamp = {
  frontend: "React",
  backend: "Node",
  database: "MongoDB",
};

const { frontend, backend } = freeCodeCamp;
console.log(frontend, backend);

// React, Node
3-4

Ghi nhật ký những gì chúng ta có vào bảng điều khiển sẽ hiển thị giá trị của giao diện người dùng và phụ trợ. Bây giờ hãy xem cách gán tên biến cho đối tượng mà chúng ta muốn giải nén.

const freeCodeCamp = {
  frontend: "React",
  backend: "Node",
  database: "MongoDB",
};

const { frontend: courseOne, backend: courseTwo } = freeCodeCamp;
console.log(courseOne, courseTwo);

// React, Node
4-2

Như bạn có thể thấy, chúng tôi có courseOnecourseTwo làm tên của dữ liệu chúng tôi muốn giải nén.

Việc gán một tên biến sẽ luôn giúp chúng ta giữ cho mã của mình sạch sẽ, đặc biệt là khi làm việc với dữ liệu ngoài khi chúng ta muốn giải nén và sử dụng lại nó trong mã của mình.

kết thúc

Bây giờ bạn đã học cách làm việc với việc hủy trong mảng và đối tượng. Bạn cũng đã học cách hoán đổi vị trí các phần tử trong mảng.

Vì vậy, những gì tiếp theo? Hãy thử luyện tập và đưa khả năng hủy diệt của bạn lên một tầm cao mới.



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status