Javascript multidimensional array (create, add and romove items, list)

The definition of javascript array has been introduced in the previous article. The article name is "Javascript array usage", which introduces the definition, initialization, addition, modification, deletion of elements, sorting, array interception and merge and escape characters. This article continues to introduce the definition, initialization and application of javascript multidimensional array.

One-dimensional array use the same methods for adding, deleting, and sorting elements as multidimensional array in javascript, except that multidimensional arrays treat an object (a record) as an element. For method descriptions, please refer to the article " Javascript array usage(multiple examples, with hidden define, add a property,delete,sort and concat) ". In addition, javascript does not have a list like C#, but you can use a multi-dimensional array to achieve the same function as list. The article will explain with specific examples, starting with the definition of Javascript multidimensional array.

I. Create multidimensional array in javascript

Define a one-dimensional array, and then use it as an element of another one-dimensional array. This array that takes the array as an element is a multi-dimensional array (Array matrix), that is, a multi-dimensional array is a combination of multiple one-dimensional arrays. The following is an example of a javascript multidimensional array definition:

var arrays = new Array();
       arrays[0] = new Array("user1", "00001", "2014-5-15");
       arrays[1] = new Array("user2", "00002", "2014-5-13");
       arrays[2] = new Array("user3", "00003", "2014-5-10");

Or

var arrays = [
              ["user1", "00001", "2020-5-15"],
              ["user2", "00002", "2020-5-13"],
              ["user3", "00003", "2020-5-10"]
       ];

Javascript create multidimensional array dynamically:

var arrays = new Array();
       for (var i = 0; i < 10; i++) {
              arrays[i] = new Array("user" + i, "0000" + i, "2014-5-15");
       }

II. Javascript multidimensional array to add elements

1. Add a record (items) after the end of array (Javascript multidimensional array push)

arrays.push(["user4","00004", "2020-5-16"]);

Output the corresponding element at the intersection of the first column and the third row:

document.write(arrays[3][1]);//Result: 00004

2. Add a record (items) after the beginning of array (Javascript multidimensional array push)

arrays.unshift(["user4","00004", "2020-5-16"]);//Add elements (item) before the first line

Output all elements:

for (var i = 0; i < arrays.length; i++) {
              for (var j = 0; j < arrays[i].length; j++){
                     document.write(arrays[i][j]);
                     if (j < arrays[i].length - 1){
                            document.write(", ");
                     }
              }
              document.write("<br />");
       }

Result:

user4, 00004, 2020-5-16
       user1, 00001, 2020-5-15
       user2, 00002, 2020-5-13
       user3, 00003, 2020-5-10

3. Add elements after existing lines (Javascript multidimensional array push)

arrays[1].push(["user4","00004", "2020-5-16"]);//Add elements after the first line

Output all elements as (see above for output method):

user1, 00001, 2020-5-15
       user2, 00002, 2020-5-13, user4,00004,2020-5-16
       user3, 00003, 2020-5-10

4. Delete two records(items) from the specified position and then insert a record

arrays.splice(1,2,["user4","00004", "2020-5-16"]);//Delete two records(items) from the second record and insert one record

Output all elements as (see above for output method):

user1, 00001, 2020-5-15
       user4, 00004, 2020-5-16

III. How to remove element from multidimensional array javascript

1. Delete the last element of specified line

arrays[1].pop();//Deletee the last element of second line

The output is:

user1, 00001, 2020-5-15
       user2, 00002
       user3, 00003, 2020-5-10

2. Delete the last record in the array

arrays.pop();

The output is:

user1, 00001, 2020-5-15
       user2, 00002, 2020-5-1

3. Delete the first element of specified line

arrays[1].pop();//Delete the first element of second line

The output is:

user1, 00001, 2020-5-15
       00002, 2020-5-13
       user3, 00003, 2020-5-10

4. Remove the first record(item) in the array

arrays.shift();

The output is:

user2, 00002, 2020-5-13
       user3, 00003, 2020-5-10

5. Remove the specified record(item) from the specified position

arrays.splice(1,2);//Remove 2 records from the second record(item)

The output is:

user1, 00001, 2020-5-15

IV. Javascript sort multidimensional array

1. Ascending order

arrays.sort();

The output is:

user1, 00001, 2020-5-15
       user2, 00002, 2020-5-13
       user3, 00003, 2020-5-10

2. Descending

arrays.reverse();

The output is:

user3, 00003, 2020-5-10
       user2, 00002, 2020-5-13
       user1, 00001, 2020-5-15

V. The application of javascript multidimensional array

During website development, product categories and regions are often displayed. Product categories have attributes such as "number, name, and parent type", and regions also have "number, name, and parent number". Each record has multiple attributes (multiple records is a list), which cannot be realized with a one-dimensional array, and needs to be realized with a multi-dimensional array. The following takes the realization of product classification as an example:

Array definition:

var lists = new Array();
       for (var i = 0; i < 100; i++) {
              lists[i] = new Array("Category number" + i, "Category Name" + i, "Parent number");
       }

Read array elements:

Take the Category number of third record: lists[2][0];lists[2][0];

Take the Category name of third record: lists[2][1];

Get the field attributes of other records, and so on. Note that the starting index (subscript) of array is 0.

The list in C# can be a class (that is, the field attributes can be of different types). The elements of javascript array need to be of the same type. When the field attributes are different (such as int, string), all int can be defined as an array, all strings are defined as another array; or the array element is a custom class object.