Fundamentals of JavaScript -- Super detail (arrays and functions)

cjh_ code 2021-11-25 15:14:54

JavaScript Basics -- Hyperdetail ( Process control )_m0_48651355 The blog of -CSDN Blog

Catalog

4.1 Array

4.1.1 Array concept

4.1.2 Create array

4.1.4 Traversal array  

4.1.5 New elements in the array  

 4.2 function

4.2.1 Concept

4.2.2 Use of functions

 4.2.3 The parameters of the function

 4.2.4 Function return value

 4.2.5 break ,continue ,return The difference between

4.2.6 arguments Use

expand ( Function declaration ):


4.1 Array

4.1.1 Array concept

  • Arrays can store a set of related data together , And provide convenient access ( obtain ) The way .
  • An array is a collection of data , Each of these data is called an element , Any type of element can be stored in the array . Arrays are an elegant way to store a set of data under a single variable name .

4.1.2 Create array

1、 utilize new Create array

var Array name = new Array() ;
var arr = new Array(); // Create a new empty array 

Be careful :Array () ,A Use capital letters .

2、 Create an array using array literals

//1. Create an empty array using array literal
var Array name = [];
//2. Create an array with an initial value using array literal
var Array name = [' Zhang San ',' Li Si ',' Wang Wu ',' page '];
  • The literal of the array is square brackets [ ]
  • Declaring an array and assigning values is called array initialization
  • This literal way is also the way we use most in the future

The type of array element :

         Array can store any type of data , Like strings , Numbers , Boolean value, etc .

var arrStus = [' The small white ',12,true,28.9];// Xiaobai is a string 、12 It's the number. 、true It's bull 、28.9 It's floating point 

 4.1.3 Get the elements in the array

Indexes ( Subscript ) : The ordinal number used to access an array element ( Array index from 0 Start ).

         Arrays can be accessed by index 、 Set up 、 Modify the corresponding array element , Can pass “ Array name [ Indexes ]” To get the elements in the array .

// Define an array
var arrStus = [1,2,3];
// Gets the number... In the array 2 Elements
alert(arrStus[1]); // Output is 2

Be careful : If the array does not have an element corresponding to the index value when accessing , Then the value is undefined

4.1.4 Traversal array  

Array traversal

         Access every element in the array from beginning to end ( Similar to the roll call of students ), Can pass for The circular index traverses each item in the array

var arr = ['red','green', 'blue']; // The length of the array is 3, therefore arr.length The value of is 3
// Because you have to traverse all the elements , The first index value of the array ( That is, the subscript is 0), therefore i The value of is 0
for(var i = 0; i < arr.length; i++){
console.log(arrStus[i]);
}
// Take... In turn arrStus[0]、arrStus[1]、arrStus[2]; In turn, print red,green,blue

The length of the array

         Length of array : By default, it indicates the number of elements in the array , Use “ Array name .length” The number of array elements that can be accessed ( The length of the array ).

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

Be careful

  • Here, the length of the array is the number of array elements , Don't confuse it with the index number of the array .
  • When the number of elements in our array changes , This length Properties change with each other
  • Array of length Properties can be modified :
  • If the length The attribute value is greater than the number of elements of the array , Then a blank element will appear at the end of the array ;
  • If the length The attribute value is less than the number of elements of the array , The array elements exceeding this value will be deleted

4.1.5 New elements in the array  

You can insert a new element at the end of the array in the following ways :

// Array [ Array .length ] = The new data ;
var arr = [1,2,3] // At this time, the length of the array is 3
arr[3] = 4;
console.log(arr) // The result is [1,2,3,4]
// expand
var new_arr = [1,2,3]
new_arr.push(4) //push() The method is to add elements after the array
new_arr.unshift(0) //unshift() The method is to add elements in front of the array
console.log(new_arr) // The result is [0,1,2,3,4]

 4.2 function

4.2.1 Concept

         stay JS Inside , You may define a lot of the same code or code with similar functions , This code may need a lot of reuse . although for Circular statements can also achieve some simple repetitive operations , But it has limitations , Now we can use JS The function in .

  function : Namely Encapsulates a block of code that can be repeatedly called and executed . With this code block, you can Realize the reuse of a large amount of code .

4.2.2 Use of functions

Declare functions ( Because it is the foundation , There is only one kind of )

// Declare functions
function Function name () {
// Function body code
}
  • function Is the key to declare a function , Must be in lowercase
  • Because functions are generally defined to implement a function , So we usually name the function verb , such as getSum

Call function

// Call function
// Function name ();
// Execute the function body code by calling the function name
function fn(){
console.log(1);
}
fn();
  • Don't forget to add parentheses when calling
  • formula : Function does not call , Don't do it yourself

Be careful : Declaring the function itself does not execute code , Function body code is executed only when the function is called .

Encapsulation of functions

  • Function encapsulation is to encapsulate one or more functions through functions , It only provides a simple function interface to the outside world
  • Simple understanding : Packaging is similar to integrating computer accessories into the chassis ( Similar to express packaging )

give an example :

/*
Calculation 1-100 A function of values between
*/
// Declare functions
function getSum(){
var sumNum = 0;// Prepare a variable , Save numbers and
for (var i = 1; i <= 100; i++) {
sumNum += i;// Put each value All add up Into variables
}
alert(sumNum);
}
// Call function
getSum();

 4.2.3 The parameters of the function

Function parameter syntax

  • Shape parameter : When the function is defined, it is set to pass in when receiving the call
  • Actual parameters : When the function is called, the real data in parentheses is passed in

/* Function declaration with arguments
function Function name ( Shape parameter 1, Shape parameter 2 , Shape parameter 3...) { You can define as many parameters as you want , Separate with commas
The body of the function
}
Function call with parameters
Function name ( Actual parameters 1, Actual parameters 2, Actual parameters 3...);*/
var n = 1,m = 2,e = 3;
function sum(a,b,c){
console.log(a+b+c);
}
sum(n,m,e)
//n、m、e Is the argument ;a、b、c It's a parameter 
  • When called, the argument value is passed to the formal parameter
  • Formal parameters are simply understood as : Undeclared variables
  • Multiple parameters of an argument and a formal parameter are separated by commas (,) Separate

When the number of function parameters and arguments does not match :

  Be careful : stay JavaScript in , The default value of a parameter is undefined.

summary :

  • Functions can take parameters or no parameters
  • When you declare a function , In the parentheses of the function name is the formal parameter , The default value of the formal parameter is undefined
  • When you call a function , In the parentheses of the function name is the argument
  • Multiple parameters are separated by commas
  • The number of formal parameters can not match the number of arguments , But the results are unpredictable , We try to match

 4.2.4 Function return value

        return sentence : Return value : The data represented by the function call as a whole ; After the function is executed, you can use return Statement returns the specified data .

// Declare functions
function Function name (){
...
return The value to be returned ;
}
// Call function
Function name (); // At this point, you can call the function to get the function body return Value after 
  • In the use of return When the sentence is , Function will stop executing , And returns the specified value
  • If the function does not return , The value returned is undefined

 4.2.5 break ,continue ,return The difference between

  • break : End the current cycle ( Such as for、while)
  • continue : Jump out of this cycle , Continue with next cycle ( Such as for、while)
  • return : You can not only exit the loop , Can also return return Value in statement , At the same time, you can also end the code in the current function body

4.2.6 arguments Use

         When it is uncertain how many parameters are passed , It can be used arguments To get .JavaScript in ,arguments In fact, it is a built-in object of the current function . All functions have a built-in arguments object ,arguments Object stores all the arguments passed .arguments The display form is a pseudo array , So you can traverse . Pseudo array It has the following characteristics :

  • have length attribute
  • Store data by index
  • Without array push , pop Other methods

Be careful : Use this object inside the function , Use this object to get the arguments passed during the function call .


expand ( Function declaration ):

Custom function mode ( Name the function ): Use function keywords function Custom function mode

// Declaration definition method
function fn() {...}
// call
fn(); 
  • Because there's a name , So it is also called named function
  • The code that calls the function can be placed in front of the declared function , It can also be placed after the declared function  

Function expression mode ( Anonymous functions )

// This is a function expression , Anonymous functions end with a semicolon
var fn = function(){...};
// The way it's called , The function call must be written below the function body
fn();
  • Because the function has no name , So it is also called anonymous function
  • This fn Stored inside is a function
  • The principle of function expression is consistent with that of declaring variables
  • The code of the function call must be written after the function body

JavaScript Basics -- Hyperdetail ( Scope and object )_m0_48651355 The blog of -CSDN Blog

Please bring the original link to reprint ,thank
Similar articles

2021-11-25