Several methods of defining javascript arrays (graphic tutorial)

This article mainly introduces several methods of defining JavaScript arrays. Generally speaking, they are divided into implicit creation, direct instantiation, creating an array and specifying the length. Later, for convenience, you can directly use the json format to define the array. Friends who need it can For reference

1. What is an array

An array is a collection of data
Its expression is a continuous memory address in the memory
The array name is actually the first address of the continuous memory address

2. About the characteristics of arrays in js

There is no need to specify the data type when defining an array
You can when defining an array There is no need to specify the array length
Arrays can store data of any data type (for example, one element stores integer type, and one element stores string type. This is possible in JS)

Create array Syntax:

var arr=[value 1, value 2, value 3]; //Implicitly created

var arr=new Array(value 1, value 2, value 3); //Direct instantiation

var array=new Array(size); //Create an array and specify the length

//方法一
var arr1 = [1,3,5,7,9];
document.write(arr1[2] + &#39;<br>&#39;);
 
//方法二
var arr2 = new Array(2,4,6,8,10);
document.write(arr2[3] + &#39;<br>&#39;);
 
//方法三
var arr3 = new Array(3);//固定数组长度为3
arr3[0] = 1;
arr3[1] = 2;
arr3[2] = 3;
document.write(arr3[2] + &#39;<br>&#39;);

The meaning of symbols in JS:

() means function execution
[] means syntax simulation, means simulates an instance of the Array class (=new Array())
{} means syntax simulation, means simulates an instance of the Object class (=new Object ())
//Indicates syntax simulation (regular object), which means simulating instances of the RegExp class (=new RegExp())

3. About the array length

Array object.length

In js, each array object can call the length attribute, which indicates how many array elements there are under the array object

Example:

var row = ['zhangsan','lisi','wangwu'];
doucument.write(&#39;共有&#39;+row.length+&#39;个人<br>&#39;);

var length = row.length;//对数组进行遍历
for (var i=0;i<length;i++){
doucument.write(row[i]+&#39;<br>&#39;);
}

4. for...in statement

In js, the array is not a data type. The data type of the array is actually the object

For... in Js The ..in statement can traverse all attributes of an object

You can also use the for...in statement to traverse all elements of an array

Syntax:

for( var i in array ){

}

Principle: There are several elements in the array, and the for..in statement will be executed in a loop as many times as possible

Each time When executed, the subscript of the current array element is stored in variable i

var row = ['zhangsan','lisi','wangwu','xiaoqiang'];
for (var i in row){
 document.write(i + &#39;:&#39; + row[i] + &#39;<br>&#39;);
}

Result:

　0:zhangsan
　1:lisi
　2:wangwu
　3: xiaoqiang

5. Text subscript

format:

arr['key'] = value;

in js , the array elements with text subscripts are not included in the array length

Added to the array in the form of text subscripts, but actually added to the array object in the form of attributes

var arr = [1,2,3];
arr['first'] = 'zhangsan';
arr['second'] = 'lisi';

document.write(arr.length + &#39;<br>&#39;);
document.write(arr.first + &#39;<br>&#39;);
document.write(arr.second + &#39;<br>&#39;);

Result:

　3
　zhangsan
　lisi

Traverse the array with text subscripts:

var arr = [1,2,3];
arr['first'] = 'zhangsan';
arr['second'] = 'lisi';

for(var i in arr){
 document.write(i + &#39;:&#39; + arr[i] + &#39;<br>&#39;);
}

Result:

　0:1
　1:2
　2:3
　First:zhangsan
　Second:lisi

6. Multi-dimensional array

var arr = [
  [10,'zhangsan','male'],
  [11,'lisi','female'],
  [12,'wangwu','male']
 ];
for (var i in arr){
 for(var j in arr[i]){
  document.write(arr[i][j]);
 }
 document.write(&#39;<br>&#39;);
}

7. Define first and then assign value

var myArray1 = new Array(); //不定义元素个数
  myArray1[0] = "P";
  myArray1[1] = "H";
  myArray1[2] = "P";
var myArray2 = new Array(4); //定义元素的个数
  myArray1[0] = "P";
  myArray1[1] = "H";
  myArray1[2] = "P";

8. Assign values ​​when defining an array

var　myArray3 = new Array("P","H","P");

//You need to specify a numerical or logical value in the array, then the variable type should be a numerical variable or a Boolean variable, not a character variable

9. Definition of json format

var myArray4 = [
   {"num":"1001","name":"jack","age":16},
   {"num":"1002","name":"Mary","age":17},
   {"num":"1003","name":"Tom","age":19}
   ];
//注意中括号和大括号的位置

Students who don’t understand can check this article: http://www.jb51.net/article/20688.htm

The difference between Json definition usage and array

Json: It is a method used to store data in javascript.
Json format: var Json={a:1, b:2, c:3};
Array format: var arr=[1,2,3];

Json The difference between two arrays:

1. The subscript of Json is a string. For example, when calling the first data, use: Json.a. The subscript of the array is a number such as arr[0]
2. Json does not have length, and the array has lengtht

Use Json to store data. If you need to loop, you need to use for (element variable in variable name) {}; Because Json does not have a length, a for in loop must be used. The for in loop can be used for Json and arrays

for(i in Json){
Statement
};

When to use for loop and when to use for in loop?
Array: Use for loop for(i=0,iJson: Use for in loop for(i in Json){};

10. Note

· Arrays only have one attribute: array length
· If no value is assigned to the array, the result is undefined, and the print value is ""
· If the array length is not long enough, it can be automatically expanded and does not exist Cross-border issues

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles: Detailed explanation of the use of key-value pairs stored in

js

NodeJS parent process Detailed explanation of resource sharing steps with child processes

Concept and usage instructions of JS anonymous self-executing function

The above is the detailed content of Several methods of defining javascript arrays (graphic tutorial). For more information, please follow other related articles on the PHP Chinese website!