“This is the 12th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Hello everyone, I am brother Yang, today to introduce you to the basic operation of JavaScript array

First introduction to arrays

Array composition: An array consists of one or more array elements separated by commas (,).

Array elements: Each array element consists of subscripts and values.

Subscript: also known as index, represented by a number, ascending from 0 by default, used to identify elements.

Value: The content of an element, which can be any type of data, such as numeric, character, array, object, etc.

 

Arrays can also be divided into one-dimensional arrays, two-dimensional arrays, three-dimensional arrays and other multidimensional arrays according to their dimensions.

One-dimensional arrays: The values of an exponential group are non-array data, as shown in the figure above.

Two-dimensional array: The “values” of the elements of the exponential group are a one-dimensional array, as shown below.

 

Arrays can also be divided into one-dimensional arrays, two-dimensional arrays, three-dimensional arrays and other multidimensional arrays according to their dimensions.

Multidimensional arrays: A multidimensional array can be formed when the value of an array is another array. It is usually used to describe some information.

For example: save a class student information, each array element represents a student, and each student uses a one-dimensional array to represent their name, student number, age and other information, so that through a variable can be regularly saved all the student information of a class, convenient for development processing.

 

  

Create an array

How arrays are created in JavaScript:

  • How to instantiate an Array object.
  • Use “[]” directly.

Create an Array using the Array object

An Array is created by instantiating an Array object with the new keyword.

 

 

Use “[]” to create an array

The direct method “[]” works in a similar way to the Array() object, simply replacing new Array() with [].

  • When creating an array, the comma after the last element can be present or omitted.
  • The difference between the direct method “[]” and the Array() object when creating arrays is that the former can create arrays containing empty storage locations, while the latter cannot.

 

 

Basic operations on arrays

Get the array length

The length property provided by the Array object gets the length of the Array. The value is the maximum index of the Array element plus 1.

 

Array elements with no values in arR2 occupy empty storage space.

Therefore, the index of the array will still increase. So arR2 calls the length property and the output is 6.

 

The length property of an array can be used not only to get the array length, but also to modify it.

When using the length attribute to specify the length of an array, there are three cases:

 

  • If the value of length is greater than the original number of elements in the array, the array element with no value will occupy empty storage space.

 

  • If length is equal to the original number of elements in the array, the array length remains the same.


  • If length is less than the number of elements in the array, the extra elements are discarded.

 

 

In addition, when creating an Array as an Array object, you can specify the length of the Array.

 

 

Pay attention to

Specifying the length of an array in JavaScript does not affect the addition of elements to the array, and the length property of the array changes accordingly.

 

Accessing an array element

Array element access: array name [subscript].

Concept: A traversal array is an operation that accesses all elements of an array in turn.

  • Traversing groups of numbers with subscripts can be used: for (learned).
  • Traversing numbers with subscripts can be used: for… In statement.

  • The for… Variable in refers to the array subscript.
  • The for… Object in represents the variable name of the array.
  • Also, if object is an object, for… In can also be used for traversal of objects.

 

Pay attention to

In ES6, a new for… The of syntax makes it easier to iterate through an array.

  • Variable value: represents the value of the array element corresponding to each traverse.
  • The variable arr: represents the array to be traversed.
  • Result: Outputs 1, 2, and 3 in sequence in the console.

 

 

Element addition and modification

How to add and modify elements: array name [subscript].

Tip: Same as accessing elements in an array.

 

Add elements

  • Add an array element: array name [subscript] = value.
  • Elements that allow subscripts to be added consecutively without numeric order, without a specific value, will exist as empty storage locations.
  • The order in which elements are stored in an array is dependent on subscripts, not on the order in which they are added.

 

Modify the element

Modifying an element is used in the same way as adding an element, except that modifying an element reassigns an element that already contains a value.

 

Deletion of elements

After creating an array, it is sometimes necessary to remove an element value from the array.

For example, if one of the students in the class has transferred to another school, the student needs to be deleted from the array.

At this point, you can delete the value of the array element using the DELETE keyword.

 

The delete keyword can only delete the specified element in the array, which will still occupy an empty storage space.

 

 

Deconstruction assignment

In addition to the variable declaration and assignment methods we learned earlier, ES6 provides another way to destruct assignment. For example, if you assign elements of an array [1,2,3] to a, b, and c, it is traditional to declare and assign variables separately.

  • When the number of variables on the left is less than the number of elements on the right, the extra elements are ignored.
  • When the number of variables on the left is greater than the number of elements on the right, the extra variables are initialized as undefined.


  • The right hand side of a deconstructed assignment can also be a variable.
  • Exchange the values of the two variables by destructing the assignment.

 

Multiplication table code implementation

<! DOCTYPE HTML > < HTML > <head> <meta charset=" utF-8 "> <title> </title> <style> table{border-collapse:collapse; } table td{border:2px solid #ccc; padding:3px 6px; } </style> </head> <body> <table> <script> for (var i = 1; i < 10; ++ I) {document.write('<tr>'); for (var j = 1; j <= i; + + j) {/ / traverse columns within each row / / stitching cell document. Write (" < td > "); document.write(j); Document. The write (' * '); document.write(i); document.write('='); document.write(j * i); document.write('</td>'); } document.write('</tr>'); } </script> </table> </body> </html>Copy the code