This is the 10th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Hello everyone, I am the prosperity of the other shore 🌸, a front-end 👨🏻💻 that firmly believes that hard work can change destiny. If I have the honor to write an article that can get your favor, I am very lucky ~

This series of articles was first published in nuggets

Writing in the front

In this article, you’ll learn about arrays in JavaScript. What can I learn from this article? As shown in the figure below:

Some of the concepts

What is an array

In JavaScript, an Array is an ordered collection of data. You can access the contents of the Array through an index. Each item in an array can store any type of data, that is, an array can store different types of data.

Note: An array object in JavaScript is not really an array, but rather an array that is simulated by the key and value pairs of the object.

The following code defines an array in JavaScript:

var arr = ['This is a test.'.100.true]
Copy the code

In JavaScript, there is no explicit Array type, but an Array object is provided. In other words, JavaScript manipulates arrays primarily through the properties and methods provided by the Array object.

Description: The Array knowledge, will be explained in the reference types section.

Arrays in JavaScript are dynamically tunable, meaning that new data can be added to an array, or specific data can be removed from the array dynamically. Of course, there are many more complex operations involved.

In addition, each data content stored in an array is located in a unique location. In this way, we can easily access the data content from where it is located.

The length of the array

The JavaScript language provides an Array object that provides a length property that can be used to indicate the length of the Array. The length of an array is simply how much data can be stored in the array.

Description: The knowledge about objects and properties will be explained in the object article

The example code is as follows:

var arr = ['This is a test.'.100.true]

console.log(arr.length) / / 3
Copy the code

As shown in the result of the code above, we can see that there are three data contents stored in the ARR array and that the length attribute of the ARR array has a value of 3. Note The length of the index array is equal to the number of data stored.

Create an array

There are three ways to create an array in JavaScript:

  • Create arrays as literals

  • The Array() function creates an Array

  • Create an array as a constructor

Create arrays as literals

Creating arrays using literals is the JavaScript standard specification that summarizes the structure of an array to create an array. Its grammatical structure is as follows:

[elements1Elements,2Elements,3Element, N]Copy the code

This use of square brackets ([]) is called literal or direct. This way of creating an array is more convenient than other ways of creating an array, and is usually the first way to create an array.

If you create an array this way without declaring any of the array elements, it is called an empty array. An empty array is an exponential array that contains no data. As shown in the following example code:

[]
Copy the code

It is worth noting that while this approach is similar to the previous primitive type variable declarations, since only Array objects are provided in JavaScript, no data types are provided for arrays. Therefore, the data type of the array is Object, as shown in the following example code:

var arr = ['This is a test.'.100.true]
console.log(typeof arr) // object
Copy the code

As shown in the figure above, we can see that typeof ARR ends up as object. This is because in JavaScript Object is the parent of all objects. In JavaScript there is no array type, but an array Object.

We can also use the instanceof operator again, as shown in the following example:

var arr = ['This is a test.'.100.true]
console.log(arr instanceof Array) // true
Copy the code

Note: The instanceof operator will be learned later

The Array() function creates an Array

JavaScript provides an Array() function that can be used to create an Array. The syntax looks like this:

Array(element1Elements,2Elements,3Element, N)Copy the code

The following example code shows how to create an Array using the Array() function:

var arr = Array('This is a test.'.100.true)
console.log(arr) // [' this is a test.', 100, true]
Copy the code

Note that the Array() function creates an Array this way, and if it passes only one argument with a numeric value, it creates an empty Array of the length of that numeric value. As shown in the following example code:

// Sparse arrays
var arr = Array(10)
console.log(arr) // [ <10 empty items> ]
Copy the code

The array created above is called a sparse array.

Create an array as a constructor

JavaScript provides an Array object, which is actually operated on by the properties and methods provided by the object, such as the length property. Not only that, we can also create arrays by creating objects, called constructor-style array creation. Its grammatical structure is as follows:

new Array(element1Elements,2Elements,3Element, N)Copy the code

It is worth noting that the constructor method differs from the Array() method by only one new in syntax, but the meaning is completely different. Because using the new keyword means creating an object in the JavaScript language. So, this means that an array object is created. As shown in the following example code:

var arr = new Array('This is a test.'.100.true)
console.log(arr) // [' this is a test.', 100, true]
Copy the code

Similar to the Array() function, if the constructor has only one argument and a numeric value, an empty Array of the length of that numeric value is created.

An array of operating

Arrays in JavaScript are used to store the contents of data similar to variables. The difference is that the variable can only store one data content at a time, after the update will overwrite the previously stored data content; Arrays, on the other hand, allow you to store more than one piece of data at a time, and there is no requirement on the type of data.

So, in addition to creating an array, there are several other operations on an array:

  • Access the data in an array

  • Modify the data in the array

  • Delete the data from the array

Access the data in an array

After using an array to store the data content, we need to access the specific data content stored in the array. The specific access mode is through the array index value to access the data stored at a certain location in the array. As shown in the following example code:

var arr = ['This is a test.'.100.true]
console.log(arr[0]) // This is a test.
Copy the code

Modify the data in the array

Modifying data in an array is similar to accessing data in data, in that you find the data at the corresponding position in the array by using the index value. The difference is that access simply reads out the data content, while modification overwrites the old data content with new data content. As shown in the following example code:

var arr = ['This is a test.'.100.true]
arr[0] = 'That's another test.'

console.log(arr) // [' this is another test.', 100, true]
Copy the code

As shown in the figure above, we can see that the data content at arR array 0 has been updated.

Delete the data from the array

Deleting an array of data is to delete the data stored in the array by the specific index value. Delete operation needs to use the delete operator to complete. As shown in the following example code:

var arr = ['This is a test.'.100.true]
delete arr[0] // [ <1 empty item>, 100, true ]

console.log(arr)
console.log('The length of arr array is:' + arr.length) // The length of the arr array is 3
Copy the code

As shown in the figure above, it is worth noting that when deleting the contents of an array at the specified index through the delete operator, the length of the array does not change, but only the contents at the specified position are deleted.

Through the array

Since an array can hold multiple data contents, sometimes we need to read all of the data contents in the array by traversing the array to do this. Traversing the array can be done through any of the loop statements, as shown in the following example code:

While statement

var arr = ['This is a test.'.100.true]
var i = 0;
while (i < arr.length) {
  console.log(arr[i])
  i++
}
Copy the code

do… While statement

var arr = ['This is a test.'.100.true]
var i = 0;
do {
  console.log(arr[i])
  i++
}
while (i < arr.length) 
Copy the code

For statement

var arr = ['This is a test.'.100.true]
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
Copy the code

for... instatements

for… The in statement loops through an object’s enumerable properties through a variable. The grammatical structure is as follows:

for (varvariableinIterable object) {statement block}Copy the code

Objects, enumerable properties will be learned later, just remember for… In statement, the variable of the loop is the value of each item

As shown in the following example code:

var arr = ['This is a test.'.100.true]
for (var i in arr) {
  console.log(arr[i])
}
Copy the code

New ECMAScript features include a number of new methods for iterating over arrays, such as for… Of statement, forEach method, etc.

conclusion

Preview: We’ll look at functions in JavaScript in the next article

Excellent articles

07- Learn to loop in JavaScript

06- This time I learned conditionals in JavaScript

【 原 文 】 【 原 文 】 a detailed explanation of 35 operators in JavaScript

04- Understand basic data types in JavaScript

03- This time I figured out variables in JavaScript