Hướng dẫn basic javascript / accessing nested arrays - javascript cơ bản / truy cập các mảng lồng nhau

Permalink

Không thể lấy lại những người đóng góp tại thời điểm này

Như chúng ta đã thấy trong các ví dụ trước đó,

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
4 có thể chứa cả
// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
5 và
// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
6. Tương tự như truy cập
// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
5,
// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
8
// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
9 có thể được xích để truy cập các mảng lồng nhau.

Dưới đây là một ví dụ về cách truy cập một mảng lồng nhau:

var ourPets = [
  {
    animalType: "cat",
    names: [
      "Meowzer",
      "Fluffy",
      "Kit-Cat"
    ]
  },
  {
    animalType: "dog",
    names: [
      "Spot",
      "Bowser",
      "Frankie"
    ]
  }
];
ourPets[0].names[1]; // "Fluffy"
ourPets[1].names[0]; // "Spot"

Hướng dẫn

  • Lấy cây thứ hai từ biến
    {key: value, key: value, ...}
    
    0 bằng cách sử dụng
    {key: value, key: value, ...}
    
    1
    {key: value, key: value, ...}
    
    2 và
    {key: value, key: value, ...}
    
    3.

Trước

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line

Câu trả lời

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line

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

{key: value, key: value, ...}
4. Các phím trong một mảng phải là số, trong khi bất kỳ chuỗi nào cũng có thể được sử dụng làm khóa trong các đối tượng. Các cặp giá trị khóa cũng được gọi là "thuộc tính"."properties".

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

{key: value, key: value, ...}
5 của mục thứ hai.

Đâ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

{key: value, key: value, ...}
6 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
{key: value, key: value, ...}
7 được truy cập như sau:

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:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
0

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

{key: value, key: value, ...}
5. Vì vậy, cuối cùng chúng tôi nhận được:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
1

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:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
2

Tôi đang cố gắng truy cập một tài sản nhưng tôi chỉ nhận lại {key: value, key: value, ...} 9?

Hầu hết thời gian khi bạn nhận được

{key: value, key: value, ...}
9, đối tượng/mảng đơn giản là không có thuộc tính có tên đó.

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
3

Sử dụng

[value, value, ...]
1 hoặc
[value, value, ...]
2 và kiểm tra cấu trúc của đối tượng / mảng. Thuộc tính bạn đang cố gắng truy cập có thể thực sự được xác định trên một đối tượng / mảng lồng nhau.

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
4

Đ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

[value, value, ...]
3 [MDN] cho các đối tượng và vòng lặp
[value, value, ...]
4 [MDN] cho các mảng để lặp lại tất cả các thuộc tính / phần tử.

Các đối tượng

Để lặp lại tất cả các thuộc tính của

{key: value, key: value, ...}
6, chúng ta có thể lặp lại đối tượng như vậy:object like so:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
5

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

[value, value, ...]
6 [MDN].

Thay thế cho

[value, value, ...]
3 với
[value, value, ...]
8, bạn có thể sử dụng
[value, value, ...]
9 [MDN] để có được một mảng tên thuộc tính:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
6

Mảng

Để lặp lại tất cả các yếu tố của mảng

const value = obj.someProperty;
0, chúng tôi sử dụng vòng lặp
[value, value, ...]
4:array, we use a
[value, value, ...]
4 loop:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
7

Người ta cũng có thể sử dụng

[value, value, ...]
3 để lặp lại các mảng, nhưng có những lý do tại sao điều này nên tránh: Tại sao 'cho (mục VAR trong danh sách)' với các mảng được coi là thực hành xấu trong JavaScript ?.

Với sự hỗ trợ của trình duyệt ngày càng tăng của Ecmascript 5, phương pháp mảng

const value = obj.someProperty;
3 [MDN] cũng trở thành một sự thay thế thú vị:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
8

Trong các môi trường hỗ trợ ES2015 (ES6), bạn cũng có thể sử dụng vòng lặp

const value = obj.someProperty;
4 [MDN], không chỉ hoạt động cho các mảng, mà đối với bất kỳ điều gì có thể lặp lại:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = ""; // Change this line
9

Trong mỗi lần lặp,

const value = obj.someProperty;
4 trực tiếp cung cấp cho chúng ta yếu tố tiếp theo của điều đó, không có "chỉ mục" nào để truy cập hoặc sử dụng.


Điều gì sẽ xảy ra nếu "độ sâu" của cấu trúc dữ liệu không biết đối với tôi?

Ngoài các khóa không xác định, "độ sâu" của cấu trúc dữ liệu (nghĩa là nó cũng có bao nhiêu đối tượng lồng nhau). Cách truy cập các thuộc tính lồng nhau sâu thường phụ thuộc vào cấu trúc dữ liệu chính xác.

Nhưng nếu cấu trúc dữ liệu chứa các mẫu lặp lại, ví dụ: Biểu diễn của một cây nhị phân, giải pháp thường bao gồm để đệ quy [Wikipedia] truy cập từng cấp độ của cấu trúc dữ liệu.recursively [Wikipedia] access each level of the data structure.

Dưới đây là một ví dụ để có được nút lá đầu tiên của một cây nhị phân:

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
0

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 = obj.someProperty;
6 trên giá trị đó (cuộc gọi đệ quy).

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
1

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.

[value, value, ...]
1 [MDN] và
[value, value, ...]
2 [MDN] giúp chúng tôi làm điều này. Ví dụ: đầu ra của bảng điều khiển Chrome):

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
2

Ở đây chúng ta thấy rằng

const value = obj.someProperty;
0 là một mảng với hai yếu tố cả hai đều là đối tượng. Trong bảng điều khiển Chrome, các đối tượng thậm chí có thể được mở rộng và kiểm tra ngay lập tức.

// Setup
var myPlants = [
  {
    type: "flowers",
    list: [
      "rose",
      "tulip",
      "dandelion"
    ]
  },
  {
    type: "trees",
    list: [
      "fir",
      "pine",
      "birch"
    ]
  }
];

// Only change code below this line

var secondTree = myPlants[1].list[1]; // Change this line
3

Điều này cho chúng ta biết 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];
0 là một đối tượng và sau khi mở rộng nó, chúng ta thấy rằng nó có ba thuộc tính,
// 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];
1,
{key: value, key: value, ...}
5 và
// 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];
3. Cái sau là một thuộc tính bên trong được sử dụng cho chuỗi nguyên mẫu của đối tượng. Tuy nhiên, chuỗi nguyên mẫu và kế thừa nằm ngoài phạm vi cho câu trả lời này.

Làm cách nào để truy cập mảng 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. Dưới đây là một ví dụ: const data = {code: 42, các mục: [{id: 1, tên: 'foo'}, {id: 2, name: 'Bar'}]};consecutively applying dot or bracket notation. Here is an example: const data = { code: 42, items: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }] };

Bạn có thể có các mảng lồng trong JavaScript không?

Mảng lồng trong JavaScript được định nghĩa là mảng (mảng ngoài) trong một mảng khác (mảng bên trong).Một mảng có thể có một hoặc nhiều mảng bên trong.Các mảng lồng nhau này (mảng bên trong) nằm trong phạm vi của mảng bên ngoài có nghĩa là chúng ta có thể truy cập vào các phần tử mảng bên trong này dựa trên tên đối tượng mảng bên ngoài.. An Array can have one or more inner Arrays. These nested array (inner arrays) are under the scope of outer array means we can access these inner array elements based on outer array object name.

Làm thế nào để các mảng lồng nhau hoạt động trong JavaScript?

Sau khi tạo ra một mảng lồng nhau của JavaScript, bạn có thể sử dụng phương thức Push Push () và SPL SPLICE () để thêm các phần tử, phương thức For For Loop và và For Foreach () để lặp lại các phần tử của các mảng bên trong, phẳng phẳng.

Làm thế nào để bạn truy cập một mảng bên trong một mảng?

Để truy cập một phần tử của mảng đa chiều, trước tiên bạn sử dụng dấu ngoặc vuông để truy cập một phần tử của mảng bên ngoài trả về một mảng bên trong;và sau đó sử dụng một khung vuông khác để truy cập phần tử của mảng bên trong.use another square bracket to access the element of the inner array.