Khóa đối tượng lặp javascript, giá trị

Question

Lặp lại các khóa và giá trị trong một đối tượng là một hoạt động phổ biến khó viết một cách đáng ngạc nhiên nếu không có các xác nhận kiểu trong TypeScript. Độ khó bắt nguồn từ sự kết hợp giữa các đặc điểm của các đối tượng JavaScript và cách gõ vịt. Đọc qua mục này một lần nữa, tôi muốn nói thêm rằng đây là lý do chính đáng để xem xét sử dụng ES6

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

5 thay vì một đối tượng để lưu trữ các cặp khóa/giá trị

Nội dung chính Show

Làm cách nào để lặp lại giá trị khóa đối tượng trong JavaScript?
Chúng ta có thể lặp một đối tượng giống như các cặp giá trị chính không?
Làm cách nào để lấy giá trị khóa từ đối tượng trong JavaScript?
Chúng ta có thể lặp lại đối tượng JavaScript không?

Mã này chạy tốt, nhưng TypeScript lại báo lỗi trong đó. Tại sao?

const obj = {
  one: 'uno',
  two: 'dos',
  three: 'tres',
};
for (const k in obj) {
  const v = obj[k];
         // ~~~~~~ Element implicitly has an 'any' type
         //        because type .. has no index signature
}

Kiểm tra các biểu tượng

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

6 và

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

0 sẽ cho manh mối

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

Loại của

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

0 là

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

2, nhưng bạn đang cố lập chỉ mục cho một đối tượng có loại chỉ có ba khóa cụ thể.

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

3,

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

4 và

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

5. Có những chuỗi khác ngoài ba chuỗi này, vì vậy điều này phải thất bại

Cắm một khai báo loại hẹp hơn cho

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

0 khắc phục sự cố

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

Vì vậy, câu hỏi thực sự là. tại sao loại

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

0 trong ví dụ đầu tiên được suy ra là

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

2 thay vì

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

9?

Để hiểu, hãy xem một ví dụ hơi khác liên quan đến giao diện và chức năng

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

3

Đó là lỗi tương tự như trước đây. Và bạn có thể "sửa chữa" nó bằng cách sử dụng cùng một loại khai báo (

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

0). Nhưng trong trường hợp này, TypeScript có quyền phàn nàn. Đây là lý do tại sao

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

5

Có thể gọi hàm

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

1 với bất kỳ giá trị nào có thể gán cho

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

2, không chỉ giá trị có thuộc tính "a," "b" và "c". Hoàn toàn có khả năng là giá trị cũng sẽ có các thuộc tính khác (xem Mục 4. Cảm thấy thoải mái với kiểu gõ cấu trúc). Để cho phép điều này, TypeScript cung cấp cho

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

0 loại duy nhất mà nó có thể tin tưởng, cụ thể là,

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

2

Sử dụng khai báo

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

5 sẽ có một nhược điểm khác ở đây

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

1

Nếu

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

6 quá hẹp đối với

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

0, thì chắc chắn

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

8 quá hẹp đối với

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

9. Trong ví dụ trước, một trong các giá trị là

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

30, nhưng nó có thể là bất kỳ giá trị nào. Các loại ở đây mang lại cảm giác chắc chắn sai lầm có thể dẫn đến sự hỗn loạn trong thời gian chạy

Vậy nếu bạn chỉ muốn lặp lại các khóa và giá trị của đối tượng mà không có lỗi kiểu thì sao?

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

8

Mặc dù những loại này có thể khó làm việc nhưng ít nhất chúng cũng trung thực.

Bạn cũng nên lưu ý về khả năng ô nhiễm nguyên mẫu. Ngay cả trong trường hợp đối tượng theo nghĩa đen mà bạn xác định, for-in có thể tạo ra các khóa bổ sung

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

9

Hy vọng rằng điều này không xảy ra trong môi trường không có đối thủ (bạn không bao giờ nên thêm các thuộc tính có thể đếm được vào

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

32), nhưng đó là một lý do khác khiến for-in tạo ra các khóa

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

2 ngay cả đối với các đối tượng bằng chữ

Nếu bạn muốn lặp lại các khóa và giá trị trong một đối tượng, hãy sử dụng khai báo

let k: keyof typeof obj;  // Type is "one" | "two" | "three"
for (k in obj) {
  const v = obj[k];  // OK
}

5 (

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

35) hoặc

const obj = { /* .. */ };
// const obj: {
//     one: string;
//     two: string;
//     three: string;
// }
for (const k in obj) {  // const k: string
  // ...
}

31. Cái trước phù hợp với các hằng số hoặc các tình huống khác mà bạn biết rằng đối tượng sẽ không có khóa bổ sung và bạn muốn các loại chính xác. Cái sau thường phù hợp hơn, mặc dù các loại khóa và giá trị khó làm việc hơn

Làm cách nào để lặp lại giá trị khóa đối tượng trong JavaScript?

Bạn phải chuyển đối tượng bạn muốn lặp lại và Đối tượng JavaScript. keys() sẽ trả về một mảng bao gồm tất cả các khóa hoặc tên thuộc tính. Sau đó, bạn có thể lặp qua mảng đó và tìm nạp giá trị của từng thuộc tính bằng cách sử dụng phương thức lặp mảng, chẳng hạn như vòng lặp JavaScript forEach()

Chúng ta có thể lặp một đối tượng giống như các cặp giá trị chính không?

đối tượng. phương thức entry() trả về một mảng gồm các cặp khóa/giá trị của một đối tượng đã cho. cho. of loop được sử dụng để lặp qua một mảng

Làm cách nào để lấy giá trị khóa từ đối tượng trong JavaScript?

Làm cách nào để lấy Khóa, Giá trị và Mục nhập trong Đối tượng JavaScript? .

Vật. keys(obj) – trả về tất cả các khóa của đối tượng dưới dạng mảng

Vật. giá trị (obj) – trả về tất cả các giá trị của đối tượng dưới dạng mảng

Vật. entry(obj) – trả về một mảng [key, value]

Chúng ta có thể lặp lại đối tượng JavaScript không?

Trong JavaScript, khi bạn nghe thuật ngữ "vòng lặp", bạn có thể nghĩ đến việc sử dụng các phương thức vòng lặp khác nhau như vòng lặp for, forEach(), map() và các phương thức khác. Nhưng trong trường hợp đối tượng, thật không may, các phương thức này không hoạt động vì đối tượng không thể lặp lại .

programming javascript