Nếu bạn đang sử dụng ES2015 và bạn muốn xác định đối tượng của riêng mình lặp lại như mảng 2 chiều, bạn có thể triển khai giao thức Iterator bằng cách:
- Xác định hàm @@ iterator gọi là
3 trả về ...function Cubes[] { this.cubes = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], ]; this.numRows = this.cubes.length; this.numCols = this.cubes[0].length; // assumes all rows have same length this[Symbol.iterator] = function [] { var row = -1; var self = this; // create a closure that returns an iterator // on the captured row index function createColIterator[currentRow] { var col = -1; var colIterator = {} // column iterator implements iterable protocol colIterator[Symbol.iterator] = function[] { return {next: function[] { col++; if [col < self.numCols] { // return raw value return { value: self.cubes[currentRow][col], done: false }; } return {done: true}; }}; } return colIterator; } return {next: function[] { row++; if [row < self.numRows] { // instead of a value, return another iterator return { value: createColIterator[row], done: false }; } return {done: true} }}; }; }
- ... một đối tượng có chức năng
4 trả về ...function Cubes[] { this.cubes = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], ]; this.numRows = this.cubes.length; this.numCols = this.cubes[0].length; // assumes all rows have same length this[Symbol.iterator] = function [] { var row = -1; var self = this; // create a closure that returns an iterator // on the captured row index function createColIterator[currentRow] { var col = -1; var colIterator = {} // column iterator implements iterable protocol colIterator[Symbol.iterator] = function[] { return {next: function[] { col++; if [col < self.numCols] { // return raw value return { value: self.cubes[currentRow][col], done: false }; } return {done: true}; }}; } return colIterator; } return {next: function[] { row++; if [row < self.numRows] { // instead of a value, return another iterator return { value: createColIterator[row], done: false }; } return {done: true} }}; }; }
- ... Một đối tượng có một hoặc hai thuộc tính: một
5 tùy chọn với giá trị tiếp theo [nếu có một] và booleanfunction Cubes[] { this.cubes = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], ]; this.numRows = this.cubes.length; this.numCols = this.cubes[0].length; // assumes all rows have same length this[Symbol.iterator] = function [] { var row = -1; var self = this; // create a closure that returns an iterator // on the captured row index function createColIterator[currentRow] { var col = -1; var colIterator = {} // column iterator implements iterable protocol colIterator[Symbol.iterator] = function[] { return {next: function[] { col++; if [col < self.numCols] { // return raw value return { value: self.cubes[currentRow][col], done: false }; } return {done: true}; }}; } return colIterator; } return {next: function[] { row++; if [row < self.numRows] { // instead of a value, return another iterator return { value: createColIterator[row], done: false }; } return {done: true} }}; }; }
6 là đúng nếu chúng ta thực hiện lặp lại.function Cubes[] { this.cubes = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], ]; this.numRows = this.cubes.length; this.numCols = this.cubes[0].length; // assumes all rows have same length this[Symbol.iterator] = function [] { var row = -1; var self = this; // create a closure that returns an iterator // on the captured row index function createColIterator[currentRow] { var col = -1; var colIterator = {} // column iterator implements iterable protocol colIterator[Symbol.iterator] = function[] { return {next: function[] { col++; if [col < self.numCols] { // return raw value return { value: self.cubes[currentRow][col], done: false }; } return {done: true}; }}; } return colIterator; } return {next: function[] { row++; if [row < self.numRows] { // instead of a value, return another iterator return { value: createColIterator[row], done: false }; } return {done: true} }}; }; }
Chức năng lặp mảng một chiều sẽ trông như thế này:
// our custom Cubes object which implements the iterable protocol
function Cubes[] {
this.cubes = [1, 2, 3, 4];
this.numVals = this.cubes.length;
// assign a function to the property Symbol.iterator
// which is a special property that the spread operator
// and for..of construct both search for
this[Symbol.iterator] = function [] { // can't take args
var index = -1; // keep an internal count of our index
var self = this; // access vars/methods in object scope
// the @@iterator method must return an object
// with a "next[]" property, which will be called
// implicitly to get the next value
return {
// next[] must return an object with a "done"
// [and optionally also a "value"] property
next: function[] {
index++;
// if there's still some values, return next one
if [index < self.numVals] {
return {
value: self.cubes[index],
done: false
};
}
// else there's no more values left, so we're done
// IF YOU FORGET THIS YOU WILL LOOP FOREVER!
return {done: true}
}
};
};
}
Bây giờ, chúng ta có thể coi đối tượng
function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
7 của chúng ta như một điều không thể sử dụng được:var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
Để tạo ra 2-D có thể lặp lại, thay vì trả về một giá trị trong hàm
function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
4 của chúng tôi, chúng tôi có thể trả về một điều khác có thể sử dụng được:function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
Bây giờ, chúng ta có thể sử dụng lặp lại lồng nhau:
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
Lưu ý rằng có thể điều chỉnh tùy chỉnh của chúng tôi sẽ không hoạt động như một mảng 2 chiều trong mọi trường hợp; Ví dụ: chúng tôi chưa thực hiện chức năng
function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
9. Câu trả lời này cho thấy cách bạn có thể triển khai chức năng bản đồ máy phát [xem ở đây để biết sự khác biệt giữa trình lặp và máy phát điện; Ngoài ra, trình tạo là một tính năng ES2016, không phải ES2015, vì vậy bạn sẽ cần thay đổi cài đặt trước Babel nếu bạn biên dịch với Babel ]. Tóm tắt: Trong hướng dẫn này, bạn sẽ học cách làm việc với một mảng đa chiều JavaScript và thao tác các yếu tố của nó một cách hiệu quả.: in this tutorial, you will learn how to work with a JavaScript multidimensional array and manipulate its elements effectively.
Giới thiệu về mảng đa chiều JavaScript
JavaScript không cung cấp mảng đa chiều nguyên bản. Tuy nhiên, bạn có thể tạo một mảng đa chiều bằng cách xác định một mảng các phần tử, trong đó mỗi phần tử cũng là một mảng khác.
Vì lý do này, chúng ta có thể nói rằng một mảng đa chiều JavaScript là một mảng mảng. Cách dễ nhất để xác định một mảng đa chiều là sử dụng ký hiệu nghĩa đen của mảng.
Để khai báo một mảng đa chiều trống, bạn sử dụng cùng một cú pháp như khai báo mảng một chiều:
let activities = [];
Code language: JavaScript [javascript]
Ví dụ sau đây xác định một mảng hai chiều có tên
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
0:Code language: JavaScript [javascript]
let activities = [ ['Work', 9], ['Eat', 1], ['Commute', 2], ['Play Game', 1], ['Sleep', 7] ];
Trong mảng
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
0, chiều thứ nhất đại diện cho hoạt động và lần thứ hai cho thấy số giờ dành mỗi ngày cho mỗi lần.Để hiển thị mảng
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
0 trong bảng điều khiển, bạn sử dụng phương thức var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
3 như sau:Code language: JavaScript [javascript]
console.table[activities];
Sau đây minh họa đầu ra:
Code language: plaintext [plaintext]
┌─────────┬─────────────┬───┐ │ [index] │ 0 │ 1 │ ├─────────┼─────────────┼───┤ │ 0 │ 'Work' │ 9 │ │ 1 │ 'Eat' │ 1 │ │ 2 │ 'Commute' │ 2 │ │ 3 │ 'Play Game' │ 1 │ │ 4 │ 'Sleep' │ 7 │ └─────────┴─────────────┴───┘
Lưu ý rằng cột
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
4 là cho hình minh họa cho biết các chỉ số của mảng bên trong.Để 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.
Ví dụ sau trả về phần tử thứ hai của mảng bên trong đầu tiên trong mảng
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
0 ở trên:Code language: JavaScript [javascript]
console.log[activities[0][1]]; // 9
Thêm các phần tử vào mảng đa chiều JavaScript
Bạn có thể sử dụng các phương thức mảng như
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
6 và var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
7 để thao tác các phần tử của một mảng đa chiều.Ví dụ: để thêm một phần tử mới ở cuối mảng đa chiều, bạn sử dụng phương thức
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
6 như sau:Code language: CSS [css]
activities.push[['Study',2]]; console.table[activities];
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
0Để chèn một phần tử ở giữa mảng, bạn sử dụng phương thức
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
7. Các phần sau chèn một phần tử ở vị trí thứ hai của mảng hoạt động:var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
1Đây là đầu ra:
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
2Ví dụ này tính toán tỷ lệ phần trăm của số giờ dành cho mỗi hoạt động và cộng đồng tỷ lệ phần trăm vào mảng bên trong.
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
3Sau đây cho thấy đầu ra trong bảng điều khiển:
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
4Loại bỏ các yếu tố khỏi mảng đa chiều JavaScript & nbsp;
Để loại bỏ một phần tử khỏi một mảng, bạn sử dụng phương thức
0 hoặcCode language: JavaScript [javascript]
let activities = [];
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
7.Ví dụ: câu lệnh sau đây loại bỏ phần tử cuối cùng của mảng
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
0.var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
5Output:
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
6Tương tự, bạn có thể loại bỏ các phần tử khỏi mảng bên trong của mảng đa chiều bằng cách sử dụng phương thức
0. Ví dụ sau đây loại bỏ phần trăm phần trăm khỏi các mảng bên trong của mảngCode language: JavaScript [javascript]
let activities = [];
var cube = new Cubes[];
// spread operator returns list of iterators,
// each of which can be spread to get values
var rows = [...cube];
console.log[[...rows[0]]];
console.log[[...rows[1]]];
console.log[[...rows[2]]];
// use map to apply spread operator to each iterable
console.log[[...cube].map[function[iterator] {
return [...iterator];
}]];
for [var row of cube] {
for [var value of row] {
console.log[value];
}
}
0.var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
7Output:
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
8Lặp lại các yếu tố của mảng đa chiều JavaScript
Để lặp lại một mảng đa chiều, bạn sử dụng một vòng được lồng cho vòng lặp như trong ví dụ sau.
var cube = new Cubes[]; // construct our cube object
// both call Symbol.iterator function implicitly:
console.log[[...cube]]; // spread operator
for [var value of cube] { // for..of construct
console.log[value];
}
9Vòng lặp đầu tiên lặp lại trên các phần tử của mảng bên ngoài và vòng lặp lồng nhau lặp lại trên các phần tử của mảng bên trong.
Sau đây cho thấy đầu ra của tập lệnh trong bảng điều khiển:
function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
0Hoặc bạn có thể sử dụng phương pháp
5 hai lần:Code language: JavaScript [javascript]
let activities = [];
function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
1Output:
function Cubes[] {
this.cubes = [
[1, 2, 3, 4],
[5, 6, 7, 8],
[9, 10, 11, 12],
];
this.numRows = this.cubes.length;
this.numCols = this.cubes[0].length; // assumes all rows have same length
this[Symbol.iterator] = function [] {
var row = -1;
var self = this;
// create a closure that returns an iterator
// on the captured row index
function createColIterator[currentRow] {
var col = -1;
var colIterator = {}
// column iterator implements iterable protocol
colIterator[Symbol.iterator] = function[] {
return {next: function[] {
col++;
if [col < self.numCols] {
// return raw value
return {
value: self.cubes[currentRow][col],
done: false
};
}
return {done: true};
}};
}
return colIterator;
}
return {next: function[] {
row++;
if [row < self.numRows] {
// instead of a value, return another iterator
return {
value: createColIterator[row],
done: false
};
}
return {done: true}
}};
};
}
2Trong hướng dẫn này, bạn đã học được cách sử dụng một mảng mảng để tạo ra một mảng đa chiều JavaScript.
Hướng dẫn này có hữu ích không?