Java教程

【JavaScript】学习第四天【for双重循环】【函数(上)】

本文主要是介绍【JavaScript】学习第四天【for双重循环】【函数(上)】,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

双重for循环

  • 双重for循环概述

     循环嵌套是指在一个循环语句中在定义一个循环语句的语法结构,例如在for循环语句中,可以再嵌套一个for循环,这样的for循环语句我们称之为
     双重for循环。
    
  • 双重 for 循环语法

for(外循环的初始;外循环的条件;外循环的操作表达式){
     for(内循环的初始;内循环的条件;内循环的操作表达式){
     }
   }
1.内层循环可以看做外层循环的循环语句
2.内层循环执行的顺序也要遵循 for 循环的执行顺序
3.外层循环执行一次,内层循环要执行全部次数
  • 打印五行五列星星
var star ='*';
for (var j = 1; j <= 5; j++){
     for(var i = 1; i <=5; i++){
       document.write(star)
       }
       //每次满 5个星星 就 加一次换行
       document.write('<br>')
}

核心逻辑
1.内层循环负责一行打印五个星星
2.外层循环负责打印五行

  • for 循环小结

    1.for循环可以重复执行某些相同的代码
    2.for循环可以重复执行些许不同的代码,因为我们有计算器
    3.for循环可以重复执行某些操作,比如算术运算符加法操作
    4.随着需求增加,双重for循环可以做更多、更好看的效果
    5.双重for循环,外层循环一次,内层for循环全部执行
    6.for循环是循环条件和数字直接相关的循环
    

BREAK终止循环

  • 在循环没有进行完毕的时候,因为我设置的田间满足,提前终止循环
  • 比如:我要吃五个包子,吃到三个的时候,不能再吃了,我就停止吃包子这个事情
  • 要终止循环,就可以直接使用 break 关键字
for( var i = 1;i<=5;i++){
   //没循环一次,吃一个包子
   console.log('我吃了一个包子')
   //当 i 的值为3的时候,条件为true,执行{}里面的代码终止循环
   //循环就不会继续向下执行了,也就没有 4 和 5 了
   if(i == 3){
     break
  }
}

CONTINUE结束本次循环

  • 在循环中,把循环的本次跳过去,继续执行后续的循环
  • 比如:吃五个包子,到第三个的时候,第三个掉地上了,不吃了,跳过第三个,继续吃第四个和第五个
  • 跳过本次循环,就可以使用 continue 关键字
for(var i = 1; i <= 5; i++){
    //当 i 的值为 3 的时候,执行 {} 里面的代码
    //{} 里面有 continue,那么本次循环后面的代码就都不执行了
    //自动算作 i 为 3 的这一次结束了,去继续执行 i = 4 的那次循环了
    if (i == 3){
        console.log('这个是第三个包子,掉地上了,我不吃了')
        continue
      }
      console.log('我吃了一个包子')
}

函数(上)

  • 我们代码里面所说的函数和我们上学的时候学习的什么三角函数、二次函数之类的不是一个东西

函数的概念

  • 对于 js 来说,函数就是把任意一段代码放在一个 盒子 里面
  • 在我想要让这段代码执行的时候,直接执行这个 盒子 里面的代码就行
  • 先看一段代码
//for(var i = 0;i < 10; i++){
   console.log(i)
}

//函数,这个 {} 就是那个 “盒子”
function fn() {
   //这个函数就是我们以前写的代码
   for (var i = 0; i < 10; i++){
       console.log(i)
    }
 }

函数的两个阶段(重点)

  • 按照我们刚才的说法,两个阶段就是 放在盒子里面让盒子里面的代码执行

函数定义阶段

  • 定义阶段就是我们把代码 放在盒子里面
  • 我么就是要学习怎么 放进去,也就是书写一个函数
  • 我们有两种定义方式 声明式赋值式

声明式

  • 使用 function 这个关键字来声明一个函数
  • 语法
function fn(){
  //一段代码
}
//function:声明函数的关键字,表示接下来就是一个函数了
//fn: 函数的名字,我们自己定义的(遵循变量名的命名规则和命名规范)
//(): 必须写,是用来放参数的位置(一会我们再聊)
//{}: 就是我们用来放一段代码的位置(也就是我们刚才说的 “盒子”)

赋值式

  • 其实就是和我们使用 var 关键字是一个道理了
  • 首先使用var 定义一个变量,把一个函数当作值直接赋值给这个变量就可以了
  • 语法:
var fn = function () {
    //一段代码
}
//不需要在 function 后面书写函数的名字了,因为在前面已经有了

函数调用阶段

  • 就是让 盒子 里面 的代码执行一下
  • 让函数执行
  • 两种定义函数的方式不同,但是调用函数的方式都以一样的
调用一个函数
  • 函数调用就是直接写 函数名() 就可以了
// 声明式函数
function fn() {
   console.log("我是 fn 函数")
}

// 调用函数
fn()

//赋值式函数
var fn2 = function () {
   console.log(" 我是 fn2 函数")
}

// 调用函数
fn()
  • 注意: 定义完一个函数以后,如果没有函数调用,那么写在 {} 里面的代码没有意义,只有调用以后才会执行
调用上的区别
  • 虽然两种定义方式的调用都是一样的,但是还是有一些区别的
  • 声明式函数: 调用可以在 定义之前或者定义之后
//可以调用
fn()

//声明式函数
function fn() {
   console.log('我是 fn 函数')
}

//可以调用
fn()
  • 赋值式函数: 调用只能在 定义之前
// 会报错 
fn() 

// 赋值式函数 
var fn = function () {
  console.log('我是 fn 函数') 
}

// 可以调用 
fn()

函数的参数(重点)

  • 我们在定义函数和调用函数的时候都出现过 ()
  • 现在我们就来说一下这个 () 的作用
  • 就是用来放参数的位置
  • 参数分为两种 行参实参
// 声明式 
function fn(行参写在这里) {
 // 一段代码 
}

fn(实参写在这里) 

// 赋值式函数 
var fn = function (行参写在这里) {
     // 一段代码 
}
fn(实参写在这里)

行参和实参的作用

1.行参

  • 就是在函数内部可以使用的变量,在函数外部不能使用
  • 每写一个单词,就相当于在函数内部定义了一个可以使用的变量(遵循变量名的命名规则和命名规范)
  • 多个单词之间以 , 分隔
// 书写一个参数 
function fn(num) {
  // 在函数内部就可以使用 num 这个变量 
}

var fn1 = function (num) {
  // 在函数内部就可以使用 num 这个变量 
}

// 书写两个参数 
function fun(num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量 
}

var fun1 = function (num1, num2) {
   // 在函数内部就可以使用 num1 和 num2 这两个变量 
}
  • 如果只有行参的话,那么在函数内部使用的值个变量是没有值的,也就是 undefined
  • 行参的值是在函数调用的时候由实参决定的

2.实参

  • 在函数调用的时候给行参赋值的
  • 也就是说,在调用的时候是给一个实际的内容的
function fn(num) {
   // 函数内部可以使用 num 
}

// 这个函数的本次调用,书写的实参是 100 
// 那么本次调用的时候函数内部的 num 就是 100 
fn(100) 

// 这个函数的本次调用,书写的实参是 200 
// 那么本次调用的时候函数内部的 num 就是 200 
fn(200)
  • 函数内部的行参的值,由函数调用的时候传递的实参决定
  • 多个参数的时候,是按照顺序一一对应的
function fn(num1, num2) { 
   // 函数内部可以使用 num1 和 num2 
}

// 函数本次调用的时候,书写的参数是 100 和 200 
// 那么本次调用的时候,函数内部的 num1 就是 100,num2 就是 200 
fn(100, 200)

参数个数的关系

1.行参比实参少

  • 因为是按照顺序一一对应的
  • 行参少就会拿不到实参给的值,所以在函数内部就没有办法用到这个值
function fn(num1, num2) { 
  // 函数内部可以使用 num1 和 num2 
}


// 本次调用的时候,传递了两个实参,100 200 和 300 
// 100 对应了 num1,200 对应了 num2,300 没有对应的变量 
// 所以在函数内部就没有办法依靠变量来使用 300 这个值 
fn(100, 200, 300)

1.行参比实参多

  • 因为是按照顺序一一对应的
  • 所以多出来的行参就是没有值的,就是 undefined
function fn(num1, num2, num3) {
   // 函数内部可以使用 num1 num2 和 num3 
}
// 本次调用的时候,传递了两个实参,100 和 200 
// 就分别对应了 num1 和 num2 
// 而 num3 没有实参和其对应,那么 num3 的值就是 undefined 
fn(100, 200)

函数的return(重点)

  • return 返回的意思,其实就是给函数一个 返回值终断函数

终断函数

  • 当我开始执行函数以后,函数内部的代码就会从上到下的依次执行
  • 必须要等到函数内的代码执行完毕
  • return 关键字就是可以在函数中间的位置停掉,让后面的代码不在继续执行
function fn() {
  console.log(1)
  console.log(2)
  console.log(3) 

   // 写了 return 以后,后面的 4 和 5 就不会继续执行了 
   return 
   console.log(4) 
   console.log(5) 
}

// 函数调用 
fn()

返回值

  • 函数调用本身也是一个表达式,表达式就应该有一个值出现
  • 现在的函数执行完毕之后,是不会有结果出现的
// 比如 1 + 2 是一个表达式,那么 这个表达式的结果就是 3 
console.log(1 + 2) // 3 

function fn() { 
   // 执行代码
}

// fn() 也是一个表达式,这个表达式就没有结果出现 
console.log(fn()) // undefined
  • return 关键字就是可以给函数执行完毕一个结果
function fn() { 
  // 执行代码 
  return 100
}

// 此时,fn() 这个表达式执行完毕之后就有结果出现了 
console.log(fn()) // 100
  • 我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

函数的优点

  • 函数就是对一段代码的封装,在我们想调用的时候调用

  • 函数的几个优点

    1.封装代码 ,使代码更加简洁
    2.复用,在重复功能的时候直接调用就好
    3.代码执行时机,随时可以在我们想要执行的时候执行
    

预解析(重点)

  • 预解析 其实就是聊聊 js 代码的编译和执行
  • js 是一个解释型语言,就是在代码执行之前,先对代码进行通读和解释,然后在执行代码
  • 也就是说,我们的 js 代码在运行的时候,会经历两个环节 解释代码执行代码

解释代码

  • 因为是在所有代码执行之前进行解释,所以叫做 预解析(预解释)

  • 需要解释的内容有两个

    声明式函数

  • 在内存中先声明有一个变量名是函数名,并且这个名字代表的内容是一个函数

  • var

关键字

  • 在内存中先声明有一个变量
  • 看下面一段代码
fn() 
console.log(num) 

function fn() {
   console.log('我是 fn 函数')
}

var num = 100
  • 经过预解析之后可以变形为
function fn() {
   console.log('我是 fn 函数')
}
var num

fn() 
console.log(num) 
num = 100
  • 赋值是函数会按照 var 关键字的规则进行预解析
这篇关于【JavaScript】学习第四天【for双重循环】【函数(上)】的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!