Sự khác biệt giữa {} và [] trong JavaScript là gì?

Đối tượng (viết hoa) mô tả các thuộc tính chung cho tất cả các đối tượng JavaScript. Nó được định nghĩa trong lib. es5. d. ts đi kèm với thư viện TypeScript

Như bạn có thể thấy, nó bao gồm một số thuộc tính phổ biến như

for (variable of iterable)
  statement
9,
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
00, v.v.

Đây có phải là kết thúc không?

Bởi vì nó chỉ nhấn mạnh những thuộc tính phổ biến đối với các đối tượng JavaScript. Vì vậy, bạn có thể gán các đối tượng có thể đóng hộp như

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
01,
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
02,
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
03,
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
04,
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
05 cho nó, nhưng không phải theo cách khác

{}

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
06 mô tả một đối tượng không có thành viên nào của riêng nó, điều đó có nghĩa là TypeScript sẽ phàn nàn nếu bạn cố truy cập vào các thành viên thuộc tính của nó

Từ ví dụ mã trên, chúng ta có thể thấy rằng

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
06 và
for (variable of iterable)
  statement
90 (viết hoa) có các tính năng giống nhau. Nghĩa là, nó chỉ có thể truy cập những thuộc tính phổ biến (ngay cả khi logic mã JavaScript là chính xác), tất cả các đối tượng có thể đóng hộp có thể được gán cho nó, v.v.

Điều này là do loại

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
06 có thể truy cập các thuộc tính chung đó thông qua chuỗi nguyên mẫu và nó cũng không có thuộc tính riêng. Vì vậy, nó hoạt động giống như loại
for (variable of iterable)
  statement
90 (viết hoa). Nhưng họ đại diện cho các khái niệm khác nhau

đối tượng (chữ thường)

đối tượng (chữ thường) có nghĩa là bất kỳ loại không nguyên thủy nào, được thể hiện bằng mã như thế này

type PrimitiveType =
| undefined
| null
| string
| number
| boolean
| bigint
| symbol;
type NonPrimitiveType = object;

Điều này có nghĩa là tất cả các loại không nguyên thủy đều không thể gán cho nó và ngược lại

Snack: Record

Trong mã nguồn của nhiều thư viện phổ biến, chúng ta có thể thấy

for (variable of iterable)
  statement
93 đại diện cho các loại không nguyên thủy. Nó có tác dụng tương tự như đối tượng (chữ thường), nhưng nó có nhiều ngữ nghĩa hơn

Để biết các loại tiện ích nâng cao hơn, hãy xem bài viết trước của tôi

7 loại tiện ích tích hợp TypeScript bạn phải biết

Nâng cao hiểu biết của bạn về các loại tích hợp

jav. tiếng Anh đơn giản. io

Cảm ơn vì đã đọc. Nếu bạn thích những câu chuyện như vậy và muốn ủng hộ tôi, hãy cân nhắc trở thành thành viên của Medium. Nó có giá 5 đô la mỗi tháng và cung cấp cho bạn quyền truy cập không giới hạn vào nội dung Phương tiện. Tôi sẽ nhận được một ít hoa hồng nếu bạn đăng ký qua liên kết của tôi

Câu lệnh

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 thực thi một vòng lặp hoạt động trên một chuỗi các giá trị có nguồn gốc từ một đối tượng có thể lặp lại. Các đối tượng có thể lặp lại bao gồm các phiên bản tích hợp sẵn như
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
8,
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
9,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
0,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
1,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
2,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
3 (và các bộ sưu tập DOM khác), cũng như đối tượng
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
4, trình tạo được tạo bởi các hàm trình tạo và các trình lặp do người dùng định nghĩa

Thử nó

cú pháp

for (variable of iterable)
  statement

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
5

Nhận một giá trị từ chuỗi trên mỗi lần lặp. Có thể là một khai báo với

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
6,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
7 hoặc
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
8 hoặc một mục tiêu chuyển nhượng (e. g. một biến được khai báo trước đó hoặc một thuộc tính đối tượng)

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
9

Một đối tượng có thể lặp lại. Nguồn của chuỗi giá trị mà vòng lặp hoạt động

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
50

Một câu lệnh được thực hiện trên mỗi lần lặp. Có thể tham khảo

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
5. Bạn có thể sử dụng một câu lệnh khối để thực thi nhiều câu lệnh

Sự miêu tả

Một vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 hoạt động trên các giá trị có nguồn gốc từ một lần lặp từng cái một theo thứ tự tuần tự. Mỗi hoạt động của vòng lặp trên một giá trị được gọi là một lần lặp và vòng lặp được gọi là lặp qua lần lặp. Mỗi lần lặp thực hiện các câu lệnh có thể tham chiếu đến giá trị chuỗi hiện tại

Khi vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 lặp lại trên một vòng lặp có thể lặp lại, trước tiên, vòng lặp đó gọi phương thức
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
54 của vòng lặp đó, phương thức này trả về một trình vòng lặp, sau đó gọi liên tục phương thức
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
55 của trình vòng lặp kết quả để tạo ra chuỗi giá trị được gán cho
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
5

Một vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 thoát khi trình vòng lặp hoàn thành (phương thức
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
55 của trình lặp trả về một đối tượng chứa
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
59). Bạn cũng có thể sử dụng các câu lệnh luồng điều khiển để thay đổi luồng điều khiển thông thường.
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
50 thoát khỏi vòng lặp và chuyển đến câu lệnh đầu tiên sau thân vòng lặp, trong khi
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
51 bỏ qua phần còn lại của các câu lệnh của lần lặp hiện tại và tiếp tục với lần lặp tiếp theo

Nếu vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 thoát sớm (e. g. một câu lệnh
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
50 hoặc một lỗi được đưa ra), phương thức
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
54 của trình vòng lặp được gọi để thực hiện bất kỳ thao tác dọn dẹp nào

Phần

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
5 của
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 chấp nhận mọi thứ có thể đến trước toán tử
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
57. Bạn có thể sử dụng
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
6 để khai báo biến miễn là nó không được gán lại trong thân vòng lặp (nó có thể thay đổi giữa các lần lặp, vì đó là hai biến riêng biệt). Nếu không, bạn có thể sử dụng
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
7

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

Ghi chú. Mỗi lần lặp tạo ra một biến mới. Việc gán lại biến bên trong thân vòng lặp không ảnh hưởng đến giá trị ban đầu trong lần lặp (trong trường hợp này là một mảng)

Bạn cũng có thể sử dụng cấu trúc hủy hoặc thuộc tính đối tượng như

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
60

Tuy nhiên, một quy tắc đặc biệt cấm sử dụng

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
61 làm tên biến. Đây là cú pháp không hợp lệ

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.

Điều này là để tránh sự mơ hồ về cú pháp với mã hợp lệ

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
62, là một vòng lặp
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
63

ví dụ

Lặp lại trên một mảng

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
5

Lặp qua một chuỗi

Các chuỗi được lặp lại bằng các điểm mã Unicode

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
5

Lặp lại trên một TypedArray

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
6

Lặp lại trên Bản đồ

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
4

Lặp lại một Set

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
5

Lặp lại đối tượng đối số

Bạn có thể lặp lại đối tượng

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
4 để kiểm tra tất cả các tham số được truyền vào một hàm

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
7

Lặp lại trên một NodeList

Ví dụ sau đây thêm một lớp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
65 vào các đoạn văn là hậu duệ trực tiếp của phần tử
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
66 bằng cách lặp qua bộ sưu tập DOM
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
3

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
1

Lặp lại qua một lần lặp do người dùng xác định

Lặp lại một đối tượng bằng phương thức

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
68 trả về một trình vòng lặp tùy chỉnh

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
0

Lặp lại một đối tượng bằng phương pháp trình tạo

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
68

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
1

Trình vòng lặp có thể lặp lại (bộ lặp có phương thức

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
54 trả về
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
41) là một kỹ thuật khá phổ biến để làm cho trình vòng lặp có thể sử dụng được trong các cú pháp mong đợi có thể lặp lại, chẳng hạn như
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
2

Lặp lại trên một trình tạo

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
3

xuất cảnh sớm

Việc thực thi câu lệnh

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
50 trong vòng lặp đầu tiên khiến nó thoát sớm. Vòng lặp vẫn chưa kết thúc, vì vậy vòng lặp thứ hai sẽ tiếp tục từ nơi vòng lặp đầu tiên dừng lại ở

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
4

Trình tạo triển khai phương thức

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
54, khiến hàm trình tạo quay trở lại sớm khi thoát khỏi vòng lặp. Điều này làm cho các trình tạo không thể tái sử dụng giữa các vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
5

sự khác biệt giữa cho. của và cho. Trong

Cả hai câu lệnh

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
45 và
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 đều lặp lại một cái gì đó. Sự khác biệt chính giữa chúng là ở những gì chúng lặp đi lặp lại

Câu lệnh

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
45 lặp qua vô số thuộc tính chuỗi của một đối tượng, trong khi câu lệnh
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 lặp lại các giá trị mà đối tượng có thể lặp xác định sẽ được lặp lại

Ví dụ sau đây cho thấy sự khác biệt giữa vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 và vòng lặp
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
45 khi được sử dụng với vòng lặp
const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
8

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
6

Đối tượng

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
9 kế thừa các thuộc tính
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
53 và
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
54 vì nó chứa cả
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
55 và
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
56 trong chuỗi nguyên mẫu của nó

Vòng lặp

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
45 chỉ ghi lại vô số thuộc tính của đối tượng
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
9. Nó không ghi nhật ký các phần tử mảng
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
59,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
70,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
71 hoặc
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
72 vì đó không phải là thuộc tính — chúng là giá trị. Nó ghi lại các chỉ mục mảng cũng như
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
54 và
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
53, là các thuộc tính thực tế. Nếu bạn không chắc tại sao các thuộc tính này được lặp đi lặp lại, thì sẽ có giải thích kỹ lưỡng hơn về cách hoạt động của phép lặp mảng và
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
45

Vòng lặp thứ hai tương tự như vòng lặp đầu tiên, nhưng nó sử dụng

let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
76 để kiểm tra xem thuộc tính liệt kê được tìm thấy có phải là của riêng đối tượng hay không. e. không được thừa kế. Nếu có, thuộc tính được ghi lại. Thuộc tính
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
77,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
78,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
79 và
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
10 được ghi lại vì chúng là thuộc tính riêng. Thuộc tính
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
54 và
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
53 không được ghi lại vì chúng được kế thừa

Vòng lặp

const iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31
7 lặp lại và ghi lại các giá trị mà
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
9, dưới dạng một mảng (có thể lặp lại), xác định sẽ được lặp lại. Các phần tử của đối tượng
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
59,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
70,
let async;
for (async of [1, 2, 3]); // SyntaxError: The left-hand side of a for-of loop may not be 'async'.
71 được hiển thị, nhưng không có thuộc tính nào của đối tượng được hiển thị

Sự khác biệt giữa {} so với [] trong JavaScript là gì?

{} là cách viết tắt để tạo một đối tượng trống . Có thể coi đây là cơ sở cho các loại đối tượng khác. Đối tượng cung cấp liên kết cuối cùng trong chuỗi nguyên mẫu có thể được sử dụng bởi tất cả các đối tượng khác, chẳng hạn như Mảng. [] là cách viết tắt để tạo một mảng trống.

{} nghĩa là gì trong JavaScript?

Đó là một cách gán giá trị mặc định cho một biến trong JavaScript.

Tại sao [] == [] sai trong JavaScript?

Vì [] tạo một mảng mới nên bạn đang so sánh một đối tượng mảng này với một đối tượng mảng khác . Nó không phải là nội dung của các mảng được so sánh, các tham chiếu đối tượng được so sánh. Chúng không bằng nhau vì nó không phải là cùng một đối tượng.

Sự khác biệt giữa mảng và đối tượng trong JavaScript là gì?

Bạn nên sử dụng đối tượng khi muốn tên phần tử là chuỗi (văn bản). Bạn nên sử dụng mảng khi muốn tên phần tử là số .