[JavaScript] day 4 [for double loop] [function]

Double for loop

  • Dual for loop overview

     Loop nesting refers to defining the syntax structure of a loop statement in a loop statement, such as for In a loop statement, you can nest another one for Loop, like this for Loop statements are called
     double for Cycle.
    
  • Double for loop syntax

for(Initial of external circulation;Conditions of external circulation;Operation expression of outer loop){
     for(Initial of internal circulation;Conditions of internal circulation;Inner loop operation expression){
     }
   }
1.The inner loop can be regarded as the loop statement of the outer loop
2.The order of inner loop execution should also be followed for Execution sequence of the loop
3.The outer loop is executed once, and the inner loop is executed all times
  • Print five rows and five columns of stars
var star ='*';
for (var j = 1; j <= 5; j++){
     for(var i = 1; i <=5; i++){
       document.write(star)
       }
       //Add a line break every time you have 5 stars
       document.write('<br>')
}

Core logic
1. The inner loop is responsible for printing five stars in one line
2. The outer loop is responsible for printing five lines

  • for loop summary

    1.for Loops can repeat some of the same code
    2.for Loops can repeat a little different code because we have calculators
    3.for Loops can repeat certain operations, such as arithmetic operators and addition operations
    4.As demand increases, double for Circulation can do more and better results
    5.double for Cycle, outer cycle once, inner cycle for Cycle all execution
    6.for A loop is a loop whose condition is directly related to the number
    

BREAK terminates the loop

  • When the cycle is not completed, the cycle is terminated in advance because the field I set is satisfied
  • For example: I want to eat five steamed stuffed buns. When I eat three, I can't eat any more. I'll stop eating steamed stuffed buns
  • To terminate the loop, you can use the break keyword directly
for( var i = 1;i<=5;i++){
   //Don't cycle once, eat a steamed stuffed bun
   console.log('I ate a steamed stuffed bun')
   //When the value of i is 3 and the condition is true, execute the code in {} to terminate the loop
   //The loop will not continue down, and there will be no 4 and 5
   if(i == 3){
     break
  }
}

CONTINUE ends this cycle

  • In the loop, skip this time of the loop and continue to execute subsequent loops
  • For example, when you eat five steamed stuffed buns, the third one falls to the ground and stops eating. Skip the third one and continue to eat the fourth and fifth
  • Skip this loop and use the continue keyword
for(var i = 1; i <= 5; i++){
    //When the value of i is 3, execute the code in {}
    //If there is continue in {}, the code behind this loop will not be executed
    //This time when i is automatically calculated as 3 is over, and i continue to execute the cycle with i = 4
    if (i == 3){
        console.log('This is the third steamed stuffed bun. It fell on the ground. I won't eat it')
        continue
      }
      console.log('I ate a steamed stuffed bun')
}

Function (top)

  • The functions in our code are not the same as the trigonometric functions and quadratic functions we learned at school

Concept of function

  • For js, a function is to put any piece of code in a box
  • When I want this code to execute, just execute the code in this box
  • Let's look at a piece of code first
//for(var i = 0;i < 10; i++){
   console.log(i)
}

//Function, this {} is the "box"
function fn() {
   //This function is the code we wrote before
   for (var i = 0; i < 10; i++){
       console.log(i)
    }
 }

Two stages of function (focus)

  • According to what we just said, the two stages are putting in the box and letting the code in the box execute

Function definition stage

  • The definition phase is when we put the code in a box
  • We just have to learn how to put it in, that is, write a function
  • We have two ways to define declarative and assignment

Declarative

  • Use the keyword function to declare a function
  • grammar
function fn(){
  //A piece of code
}
//Function: the keyword that declares the function, indicating that there is a function next
//fn: the name of the function is defined by ourselves (following the naming rules and naming conventions of variable names)
//(): must be written. It is used to place parameters (we'll talk later)
//{}: that's where we put a piece of code (that's what we just called "box")

Assignment formula

  • In fact, it is the same reason that we use var keyword
  • First, use var to define a variable, and assign a function as a value to the variable directly
  • Syntax:
var fn = function () {
    //A piece of code
}
//There is no need to write the name of the function after the function, because there is already a function before it

Function call phase

  • Just let the code in the box execute
  • Let the function execute
  • The two methods of defining functions are different, but the way of calling functions is the same
Call a function
  • The function call is to write the function name () directly
// Declarative function
function fn() {
   console.log("I am fn function")
}

// Call function
fn()

//Assignment function
var fn2 = function () {
   console.log(" I am fn2 function")
}

// Call function
fn()
  • Note: after defining a function, if there is no function call, the code written in {} is meaningless and will be executed only after the call
Call difference
  • Although the calls of the two definitions are the same, there are still some differences
  • Declarative function: the call can be before or after definition
//Can call
fn()

//Declarative function
function fn() {
   console.log('I am fn function')
}

//Can call
fn()
  • Assignment function: call can only be made before definition
// Will report an error 
fn() 

// Assignment function 
var fn = function () {
  console.log('I am fn function') 
}

// Can call 
fn()

Parameters of function (emphasis)

  • We have seen () when defining and calling functions
  • Now let's talk about the function of this ()
  • Is the position where the parameters are placed
  • Parameters are divided into two types: line parameters and actual parameters
// Declarative 
function fn(Line parameters are written here) {
 // A piece of code 
}

fn(The arguments are written here) 

// Assignment function 
var fn = function (Line parameters are written here) {
     // A piece of code 
}
fn(The arguments are written here)

Role of row and argument

1. Line reference

  • Is a variable that can be used inside a function, but not outside a function
  • Each word is equivalent to defining a variable that can be used inside the function (follow the naming rules and naming conventions of variable names)
  • Multiple words are separated by
// Write a parameter 
function fn(num) {
  // The variable num can be used inside the function 
}

var fn1 = function (num) {
  // The variable num can be used inside the function 
}

// Write two parameters 
function fun(num1, num2) {
  // You can use num1 and num2 variables inside the function 
}

var fun1 = function (num1, num2) {
   // You can use num1 and num2 variables inside the function 
}
  • If there are only row parameters, the variables used inside the function have no value, that is, undefined
  • The value of the row parameter is determined by the argument when the function is called

2. Arguments

  • The row parameter is assigned a value when the function is called
  • In other words, the actual content is given when calling
function fn(num) {
   // num can be used inside the function 
}

// For this call of this function, the written argument is 100 
// Then the num inside the function is 100 during this call 
fn(100) 

// For this call of this function, the written argument is 200 
// Then the num inside the function is 200 during this call 
fn(200)
  • The value of the row parameter inside the function is determined by the argument passed when the function is called
  • When there are multiple parameters, they correspond one by one in order
function fn(num1, num2) { 
   // num1 and num2 can be used internally 
}

// When the function is called this time, the written parameters are 100 and 200 
// In this call, num1 inside the function is 100 and num2 is 200 
fn(100, 200)

Relationship between the number of parameters

1. Row parameters are less than actual parameters

  • Because they correspond one by one in order
  • If there are few row parameters, you will not get the value given by the actual parameter, so there is no way to use this value inside the function
function fn(num1, num2) { 
  // num1 and num2 can be used internally 
}


// In this call, two arguments, 100, 200 and 300, are passed 
// 100 corresponds to num1200 corresponds to num2300, and there is no corresponding variable 
// Therefore, there is no way to rely on variables to use the value 300 inside the function 
fn(100, 200, 300)

1. There are more row parameters than actual parameters

  • Because they correspond one by one in order
  • Therefore, the extra row parameters have no value and are undefined
function fn(num1, num2, num3) {
   // Functions can use num1, num2, and num3 internally 
}
// In this call, two arguments, 100 and 200, are passed 
// It corresponds to num1 and num2 respectively 
// If num3 has no argument corresponding to it, the value of num3 is undefined 
fn(100, 200)

return of function (key)

  • Return means to give a function a return value and a termination function

Final break function

  • When I start executing the function, the code inside the function will be executed from top to bottom
  • You must wait until the code in the function is executed
  • The return keyword can stop in the middle of the function so that the subsequent code will not continue to execute
function fn() {
  console.log(1)
  console.log(2)
  console.log(3) 

   // After writing return, the following 4 and 5 will not continue to execute 
   return 
   console.log(4) 
   console.log(5) 
}

// function call 
fn()

Return value

  • The function call itself is also an expression, and the expression should have a value
  • After the current function is executed, there will be no result
// For example, if 1 + 2 is an expression, the result of this expression is 3 
console.log(1 + 2) // 3 

function fn() { 
   // Execute code
}

// fn() is also an expression, and there is no result in this expression 
console.log(fn()) // undefined
  • The return keyword is a result of the completion of the function
function fn() { 
  // Execute code 
  return 100
}

// At this point, the result will appear after the expression fn() is executed 
console.log(fn()) // 100
  • We can use the return key inside the function to treat anything as the result of the function

Advantages of function

  • Function is the encapsulation of a piece of code, which is called when we want to call it

  • Several advantages of function

    1.Encapsulate the code to make the code more concise
    2.Reuse, just call directly when repeating functions
    3.Code execution time can be executed when we want to execute at any time
    

Pre analysis (key)

  • Pre parsing is actually talking about the compilation and execution of js code
  • js is an interpretive language, which is to read and interpret the code before code execution, and then execute the code
  • In other words, when our js code is running, it will go through two links: interpreting code and executing code

Interpretation code

  • Because it is interpreted before all code is executed, it is called pre parsing (pre interpretation)

  • There are two things to explain

    Declarative function

  • In memory, first declare that a variable name is a function name, and the content represented by this name is a function

  • var

keyword

  • Declare a variable in memory first
  • Look at the following code
fn() 
console.log(num) 

function fn() {
   console.log('I am fn function')
}

var num = 100
  • After pre parsing, it can be deformed into
function fn() {
   console.log('I am fn function')
}
var num

fn() 
console.log(num) 
num = 100
  • The assignment function performs pre parsing according to the rules of var keyword

Tags: Javascript ECMAScript

Posted on Thu, 02 Dec 2021 23:37:23 -0500 by php_gromnie