ECMAScript part of JavaScript learning (arrays and functions)

Record the basic knowledge of arrays and functions, and summarize and record each method separately.

array

1 The concept of an array.
Arrays can store a group of related data together and provide convenient access (acquisition) methods.
To put it simply, it is a collection of many data. When they are collected together, each data in it is called an element, and the type of each element can be 任意类型.

2 Create an array.
In JavaScript, we create arrays in two ways:

Use new to create arrays:

var 数组名 = new Array() ； //注意 Array () ，A 要大写  
var arr = new Array();   // 创建一个新的空数组

Use array literals to create arrays (commonly used):

//1. 使用数组字面量方式创建空的数组
var  数组名 = []；
//2. 使用数组字面量方式创建带初始值的数组
var  数组名 = ['小白',12,true,28.9];
//数组中可以存放任意类型的数据，例如字符串，数字，布尔值等。

The literal value of the array is square brackets [ ]
to declare the array and assign a value called the initialization of the array

3 Get the elements in the array.
We get elements by their index.
Index (subscript): The serial number used to access the array element (the array subscript starts from 0).
insert image description here
The elements in the array can be obtained in the form of "array name [index]", and the corresponding array elements can also be accessed, set, and modified through the index.

// 定义数组
var arrStus = [1,2,3];
// 获取数组中的第2个元素
alert(arrStus[1]);    
//修改数组
arrStus[0] = a; // arrStus = [a,2,3];

Note: If the array does not have an element corresponding to the index value when accessed, the resulting value is undefined

4 Iterates through the array.

We want to visit each element in the array once from the beginning to the end (similar to the roll call of students), and we can use the for loop index to traverse each item in the array.

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    
    
    console.log(arrStus[i]);
}

When we want to get the length of the array:
use "array name.length" to access the number of array elements (array length).

var arrStus = [1,2,3];
alert(arrStus.length);  // 3

Note :

The length of the array here is the number of array elements, not to be confused with the index number of the array.
When the number of elements in our array changes, the length property changes with it
The length property of an array can be modified:
If the set length attribute value is greater than the number of elements in the array, blank elements will appear at the end of the array;
If the set length attribute value is less than the number of elements in the array, the array elements exceeding this value will be deleted

5 New elements are added to the array.
We want to add new elements after the array, we can use 数组[ 数组.length ] = 新数据;this way.
Because the index of the array starts from 0, but the length of the array starts from 1, so there will be a difference between the two. For example, there are three numbers in the array, and the corresponding indexes are 0, 1, 2 but the length will be 3 so using the formula above, you can insert a new value at the end of the array.

var arr = [1,2,3]
arr[arr.length] = 4; // arr = [1,2,3,4]

function

1 The concept of function.
Function: It encapsulates a block of code that can be called and executed repeatedly . This code block enables the reuse of a large amount of code .

2 Use of functions.

Declare the function:

// 声明函数
function 函数名() {
    
    
    //函数体代码
}

Call functions:

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

We declare that the function itself will not execute the code, only the function body code will be executed when the function is called. Don't forget to add parentheses when calling.

Function encapsulation:
Function encapsulation is to encapsulate one or more functions through functions, and only provide a simple function interface to the outside world.
To put it simply, it is like integrating and assembling computer accessories into the case.

封装计算1-100累加和
/* 
   计算1-100之间值的函数
*/
// 声明函数
function getSum(){
    
    
  var sumNum = 0;// 准备一个变量，保存数字和
  for (var i = 1; i <= 100; i++) {
    
    
    sumNum += i;// 把每个数值 都累加 到变量中
  }
  alert(sumNum);
}
// 调用函数
getSum();

3 parameters of the function.
insert image description here
Some values cannot be fixed inside the function, we can pass different values into it through parameters when calling the function.

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) {
    
     // 可以定义任意多的参数，用逗号分隔
  // 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

When calling, the actual parameter value is passed to the formal parameter, and there is a one-to-one correspondence
Formal parameters are simply understood as: variables that do not need to be declared
Multiple parameters of actual parameters and formal parameters are separated by commas (,)

When the function parameters and actual parameters do not match:
insert image description here
Summary:

Functions can take parameters or not
When declaring a function, the parameters in the parentheses of the function name are formal parameters, and the default value of the formal parameters is undefined
When calling a function, the parameters in the parentheses of the function name are the actual parameters.
Separate multiple parameters with commas
The number of formal parameters may not match the number of actual parameters, but the result is unpredictable, we try to match

4 The return value of the function.
After the function is executed, we may need to get some results, so we need to use the return value.
Return value: the data represented by the function call as a whole; after the function is executed, the specified data can be returned through the return statement.

// 声明函数
function 函数名（）{
    
    
    ...
    return  需要返回的值；
}
// 调用函数
函数名();    // 此时调用函数就可以得到函数体内return 后面的值

Notice:

When using the return statement, the function will stop executing and return the specified value
If the function does not return, the returned value is undefined

The difference between break, continue, and return:

break: end the current loop body (such as for, while)
continue: Jump out of this loop and continue to execute the next loop (such as for, while)
return: Not only can exit the loop, but also return the value in the return statement, and at the same time end the code in the current function body

5 arguments are used.
We may not be sure how many parameters to pass in, so we can't determine how many formal parameters, but we need to use parameters, so we can use them arguments.
In JavaScript, arguments is actually a built-in object of the current function. All functions have a built-in arguments object, which stores all the actual parameters passed. The arguments display form is a pseudo-array, so it can be traversed. Pseudo-arrays have the following characteristics:

has a length attribute
Store data by index
Methods such as push and pop that do not have an array

Note: Use this object inside the function, and use this object to obtain the actual parameters passed when the function is called.

6 Two ways to declare the function.
User-defined function mode (named function):
Use the function keyword function to customize the function mode.

// 声明定义方式
function fn() {
    
    ...}
// 调用  
fn();

Because it has a name, it is also called a named function
The code for calling a function can be placed either before the function declaration or after the function declaration

Function expression mode (anonymous function):

// 这是函数表达式写法，匿名函数后面跟分号结束
var fn = function(){
    
    ...}；
// 调用的方式，函数调用必须写到函数体下面
fn();

Because the function has no name, it is also called an anonymous function
This fn stores a function
The principle of function expression method is consistent with the way of declaring variables
The code of the function call must be written after the function body