Introduction and use of array

Time:2021-4-29

Arrays in JavaScript are often used to store multiple values in a single variable. An array is a collection of data, represented as a continuous memory address (stored in heap memory) in memory. The purpose of creating an array is to save more data.

Array concept and syntax

Concept: an array is a special variable that can hold multiple values at a time.

Features: sequence and length.

Function: use a separate variable name to store a series of values.

The syntax is as follows:

var array_name = [item, item2, item3, ...];

amongarray_nameIs the array name, is actually the variable name, and all the elements in the array are surrounded by brackets[]Elements are separated by commas. The elements in an array can be of any type, and the types can be different.

Create array

In JavaScript, the most common way to create an array is to use literal quantity.

Example:

Create a simple array named:

var array1 = ["HTML", "VUE", "JAVASCRIPT", "CSS"];

Spaces and newlines in code are not important. When declaring multiple values, we can also span multiple lines

var array2 = [
    "HTML",
    "VUE",
    "JAVASCRIPT",
    "CSS"
];

In addition, we can use the keyword new to create arrays:

var array3 = new Array();
arrs[0] = 1;
arrs[1] = 2;
arrs[2] = 3;
console.log(array3);
//Output: [1, 2, 3]

There is another simple way to write in this way, which is directly in theArrayAdd a value in the following parentheses:

var array4 = new Array("xkd", "summer", "jack");
console.log(array4);

//Output: ['xkd ',' summer ',' Jack ']

Access array

We can access the elements in the array through the array name and array subscript. Because an array is ordered, it should have its own serial number, which is the subscript (also called index) of each element. The subscript of an array starts from zero and ends with the length of the array minus one. For example, the index of the first element in an array is 0, the second is 1, and so on.

Example:

Access arraynameAnd output this value:

var username = ["Iven", "Eric", "Tony", "Hter", "John"];

Console.log ("the output result of characters with array subscript 0 is" + username [0]);   

//Output: iven

Access the last element in the array and output this value:

var name = ["Iven", "Eric", "Tony", "Hter", "John"];
var last = name[name.length - 1];
console.log(last);

//Output: John

Array length

Arrays have the same length as stringslengthProperty to get the length of the array. The length of the array refers to the number of elements stored in the array. And the length of the array is always greater than the highest index of the array.

Example:

Define a string and an array respectively, and then output the length of the string and the array:

Var Arr1 ='the new version of Xiake island will be launched soon ';
Console.log ("length: + Arr1. Length)";       
//Length: 9    

var arr2 = ["Iven", "Eric", "Tony", "Hter", "John"];
Console.log ("length: + arr2. Length)";     
//Length: 5

Array value and assignment

In addition to getting the length of the array, we can also get the value of the element through the subscript index in the format ofArray name [subscript]

Example:

For example, we define an array arr and get the values corresponding to the positions with indexes 0 and 3

Var arr = ["Wang Yuyan", "Duan Yu", "Xiao Feng", "Xu Zhu];
console.log(arr[0]);    //  Wang Yuyan 
console.log(arr[3]);    //  Xuzhu

Because the range of subscript is from 0 to array length minus one (arr.length-1), undefined will be returned if the subscript does not exist.

Example:

For example, the array abovearrIf the maximum subscript value is 3, then we get the value of the element with subscript 4 and output undefined:

console.log(arr[4]);    // undefined

We can also get throughArray name [subscript] = valueIf the specified subscript already has a corresponding value, the original value will be overridden.

Example:

For example, in array arr2, the element whose subscript is 5 is “Yinli”. In this case, we useArr2 [5] = "Golden Lion", the value of “Yin Li” will be overridden:

Var arr2 = ["Zhou Zhiruo", "Zhao Min", "Zhang Wuji", "Song Qingshu", "extinct abbess", "Yin Li];
Arr2 [5] ='Golden Lion King '// Replacing "Yin Li" with "Golden Lion"

If no subscript element is specified in the tuple, an element value will be added to the array

Arr2 [6] = Yang Buhui// A new value of "Yang Buhui" is added to the array
console.log(arr2);

In the browser, execute the code and output the changed arrayarr2
Introduction and use of array

Traversing array elements

In fact, we talked about array traversal when we learned loops before. The most common way to traverse arrays isforCycle.

Example:

First define an array, and then use theforLoop traverses the array as an unordered list

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS_ Xiake Island (9xkd. Com) < / Title >
</head>
<body>
<div id = "xkd">
</div>
<script>
  var lst = ["Iven", "Eric", "Tony", "Hter", "John"];
  name = "<ul>";
  for(i=0; i<lst.length; i++){
    name += "<li>" + lst[i] + "</li>";
  }
  name += "</ul>";
  document.getElementById("xkd").innerHTML = name;
</script>
</body>   
</html>

Open in browser:
Introduction and use of array

In the above code, we insert HTML code into JavaScript code to make the arraylstThe output in the browser is an unordered list style.

Hands on exercises

  1. Define an array to output the length of the array and multiple subscript values.
  2. Put all the odd numbers between 1 and 100 into the array.
  3. Save the number that can be 3 integers between 1-100 into the array.
  4. Find the sum and average of all numbers in a group of numbers.

Link:https://www.9xkd.com/

Recommended Today

Fourth, handwritten SpringMVC framework, business layer – what is coupling/dependency? How to solve

4. Business Layer 4.1 MVC model MVC:Model(Model),View(view),Controller(controller) View layer: an interface for displaying data and interacting with users=>jsp Control layer: It can accept the client's request and forward the request. The specific business function still needs to be completed with the help of the model layer component. CoreServlet  => DispacherServlet + EmpController Model layer: There are […]