Sơ bộ
JavaScript chỉ có một loại dữ liệu có thể chứa nhiều giá trị: đối tượng. Một mảng là một dạng đặc biệt của đối tượng.Object. An Array is a special form of object.
[Đơn giản] Các đối tượng có biểu mẫu
{key: value, key: value, ...}
Mảng có biểu mẫu
[value, value, ...]
Cả hai mảng và đối tượng hiển thị cấu trúc
const value = obj.someProperty;
Các thuộc tính có thể được truy cập bằng cách sử dụng ký hiệu dấu chấmdot notation
const value = obj.someProperty;
hoặc ký hiệu khung, nếu tên thuộc tính sẽ không phải là tên định danh JavaScript hợp lệ [spec] hoặc tên là giá trị của một biến:bracket notation, if the property name would not be a valid JavaScript identifier name [spec], or the name is the value of a variable:
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
Vì lý do đó, các phần tử mảng chỉ có thể được truy cập bằng ký hiệu khung:
const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variable
const x = 5;
const value = arr[x];
Chờ đã ... còn JSON thì sao?
JSON là một đại diện văn bản của dữ liệu, giống như XML, YAML, CSV và các loại khác. Để làm việc với dữ liệu như vậy, trước tiên nó phải được chuyển đổi thành các loại dữ liệu JavaScript, tức là các mảng và đối tượng [và cách làm việc với chúng chỉ được giải thích]. Làm thế nào để phân tích JSON được giải thích trong câu hỏi Parse Json trong JavaScript? .
Đọc thêm tài liệu
Cách truy cập các mảng và đối tượng là kiến thức JavaScript cơ bản và do đó nên đọc hướng dẫn MDN JavaScript, đặc biệt là các phần
- Làm việc với các đối tượng
- Mảng
- JavaScript hùng hồn - Cấu trúc dữ liệu
Truy cập các cấu trúc dữ liệu lồng nhau
Cấu trúc dữ liệu lồng nhau là một mảng hoặc đối tượng đề cập đến các mảng hoặc đối tượng khác, tức là các giá trị của nó là mảng hoặc đối tượng. Các cấu trúc như vậy có thể được truy cập bằng cách áp dụng liên tiếp ký hiệu dấu chấm hoặc khung.
Đây là một ví dụ:
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};
Giả sử chúng ta muốn truy cập
const value = obj.someProperty;
Đây là cách chúng ta có thể làm điều đó từng bước:
Như chúng ta có thể thấy
const value = obj.someProperty;
const value = obj.someProperty;
data.items
Giá trị là một mảng, để truy cập phần tử thứ hai của nó, chúng ta phải sử dụng ký hiệu khung:
data.items[1]
Giá trị này là một đối tượng và chúng tôi sử dụng ký hiệu DOT một lần nữa để truy cập thuộc tính
const value = obj.someProperty;
const item_name = data.items[1].name;
Ngoài ra, chúng tôi có thể đã sử dụng ký hiệu khung cho bất kỳ thuộc tính nào, đặc biệt là nếu tên chứa các ký tự sẽ làm cho nó không hợp lệ đối với việc sử dụng ký hiệu DOT:
const item_name = data['items'][1]['name'];
Tôi đang cố gắng truy cập một tài sản nhưng tôi chỉ nhận lại được const value = obj.someProperty;
6?
const value = obj.someProperty;
Hầu hết thời gian khi bạn nhận được
const value = obj.someProperty;
[value, value, ...]
Sử dụng
const value = obj.someProperty;
const value = obj.someProperty;
[value, value, ...]
Điều gì sẽ xảy ra nếu tên tài sản năng động và tôi không biết chúng trước?
Nếu tên thuộc tính không rõ hoặc chúng tôi muốn truy cập tất cả các thuộc tính của một đối tượng / phần tử của một mảng, chúng tôi có thể sử dụng vòng lặp
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
Các đối tượng
Để lặp lại tất cả các thuộc tính của
const value = obj.someProperty;
[value, value, ...]
Tùy thuộc vào nơi đối tượng đến từ [và những gì bạn muốn làm], bạn có thể phải kiểm tra trong mỗi lần lặp cho dù tài sản có thực sự là một thuộc tính của đối tượng hay đó là một thuộc tính được kế thừa. Bạn có thể làm điều này với
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
Thay thế cho
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
[value, value, ...]
Mảng
JavaScript hùng hồn - Cấu trúc dữ liệuarray, we use a
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
[value, value, ...]
Truy cập các cấu trúc dữ liệu lồng nhau
Cấu trúc dữ liệu lồng nhau là một mảng hoặc đối tượng đề cập đến các mảng hoặc đối tượng khác, tức là các giá trị của nó là mảng hoặc đối tượng. Các cấu trúc như vậy có thể được truy cập bằng cách áp dụng liên tiếp ký hiệu dấu chấm hoặc khung.
[value, value, ...]
Đây là một ví dụ:
Giả sử chúng ta muốn truy cậpconst value = obj.someProperty;
Đây là cách chúng ta có thể làm điều đó từng bước:
Như chúng ta có thể thấy const value = obj.someProperty;
3 là một đối tượng, do đó chúng ta có thể truy cập các thuộc tính của nó bằng ký hiệu DOT. Thuộc tính const value = obj.someProperty;
4 được truy cập như sau:
const value = obj.someProperty;
const value = obj.someProperty;
Giá trị là một mảng, để truy cập phần tử thứ hai của nó, chúng ta phải sử dụng ký hiệu khung:
Giá trị này là một đối tượng và chúng tôi sử dụng ký hiệu DOT một lần nữa để truy cập thuộc tính
const value = obj.someProperty;
Ngoài ra, chúng tôi có thể đã sử dụng ký hiệu khung cho bất kỳ thuộc tính nào, đặc biệt là nếu tên chứa các ký tự sẽ làm cho nó không hợp lệ đối với việc sử dụng ký hiệu DOT:
[value, value, ...]
Một cách chung chung hơn để truy cập cấu trúc dữ liệu lồng nhau với các khóa và độ sâu không xác định là kiểm tra loại giá trị và hành động phù hợp.
Dưới đây là một ví dụ bổ sung tất cả các giá trị nguyên thủy bên trong cấu trúc dữ liệu lồng nhau vào một mảng [giả sử nó không chứa bất kỳ chức năng nào]. Nếu chúng ta gặp một đối tượng [hoặc mảng], chúng ta chỉ cần gọi lại
const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variable
const x = 5;
const value = arr[x];
[value, value, ...]
Người trợ giúp
Vì cấu trúc của một đối tượng hoặc mảng phức tạp không nhất thiết là rõ ràng, chúng ta có thể kiểm tra giá trị ở mỗi bước để quyết định cách di chuyển xa hơn.
const value = obj.someProperty;
const value = obj.someProperty;
[value, value, ...]
Ở đây chúng ta thấy rằng
// the space is not a valid character in identifier names
const value = obj["some Property"];
// property name as variable
const name = "some Property";
const value = obj[name];
const value = obj.someProperty;
Điều này cho chúng ta biết rằng
const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variable
const x = 5;
const value = arr[x];
const value = arr[5]; // arr.5 would be a syntax error
// property name / index as variable
const x = 5;
const value = arr[x];
const value = obj.someProperty;
const data = {
code: 42,
items: [{
id: 1,
name: 'foo'
}, {
id: 2,
name: 'bar'
}]
};