【函数（上）（双重for循环）】

1、循环

1、双重for循环

**概述：**循环嵌套是指在一个循环语句中再定义一个循环语法结构，

例如：嵌套一个for循环，这样for循环语句我们称之为双重for循环

双重for循环语法

for(外循环的初始；外循环的条件；外循环的表达式){
    for(内循环的初始；内循环的条件；内循环的表达式){
        
    }
}

• 内层循环可以看作是外层循环的循环体语句
• 外层循环执行一次，内层循环要执行完有的次数
• 外层循环控制行数，内层循环控制每行个数
• 循环的总个数=外层循环的次数*内层循环的次数
• 内层循环执行的顺序也要遵循for循环的执行顺序

示例：打印五行五列星星

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循环小结：

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

2、循环控制

循环控制：在满足某个条件下，终止循环或者控制循环

1、BREAK 终止循环

终止本层循环，不再循环

在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环

比如：我要吃五个包子，吃到三个的时候，不能在吃了，我就停止吃包子这个事情

要终止循环，就可以直接使用break关键字

<script>
    //示例中止单层循环
for (var i = 1; i <= 5; i++) {
      
        
    // 没循环一次，吃一个包子  
    console.log('我吃了一个包子')  
    // 当 i 的值为 3 的时候，条件为 true，执行 {} 里面的代码终止循环  
    // 循环就不会继续向下执行了，也就没有 4 和 5 了  
    if (i === 3) {
      
         
        break  
    }
}
</script>

2、CONTINUE结束本次循环

在循环中，把循环的本次跳过去，继续执行后续的循环

比如：吃五个包子，到第三个的时候，第三个掉地下了，不吃了，跳过第三个，继续吃第四个和第五个

跳过本次循环，就可以使用continue关键字

注意：需要将continue放在输出语句之前

<script>
    for (var i = 1; i <= 5; i++) {
      
       
        // 当 i 的值为 3 的时候，执行 {} 里面的代码 
        // {} 里面有 continue，那么本次循环后面的代码就都不执行了         
        // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了  
        if (i === 3) {
      
          
            console.log('这个是第三个包子，掉地下了，我不吃了')             continue  
        } 
        console.log('我吃了一个包子')
    }
</script>

3、函数(上)

函数可以解决代码冗余

认识函数：在js中，有很对地方实现相同的功能，封装成函数，调用的时候可以执行

特点：函数内部定义的变量，函数外部访问不到

函数的概念

• 对于 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 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)

2、行参比实参多

因为是按照顺序一一对应的

所以多出来的行参就是没有值的，就是 undefined

function fn(num1, num2, num3) {
// 函数内部可以使用 num1 num2 和 num3
}
// 本次调用的时候，传递了两个实参，100 和 200
// 就分别对应了 num1 和 num2
// 而 num3 没有实参和其对应，那么 num3 的值就是 undefined
fn(100, 200)

函数的return（重点）

函数调用的结果就是一个值（return后的值）

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

特点： 返回函数的运算结果

​ 终止函数的执行

​ 任何函数都有return，（如果用户不写，函数内部的最低端默认有一行return undefind）

示例：

<script>
    function printNum(){
      
      
        conole.log(1)
    }
    //printNum();  //1、只是调用函数
    console.log(printNum());//1、调用函数 2、把printNum()当成一个值来输出（return后得值）
    //一般情况下，有return，需要输出才能调用，没有return可以直接调用
</script>

终断函数

• 当我开始执行函数以后，函数内部的代码就会从上到下的依次执行
• 必须要等到函数内的代码执行完毕
• 而 return 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行

function fn() {
console.log(1)
console.log(2)
console.log(3)
// 写了 return 以后，后面的 4 和 5 就不会继续执行了
return
console.log(4)
console.log(5)
}
// 函数调用
fn()

返回值

带返回值的函数：函数调用的结果就是return后的结果

带返回值（return）：得到和，个数，最大值等一个具体的数字；

不带返回值（return）：输出所有的数字，打印图形

• 函数调用本身也是一个表达式，表达式就应该有一个值出现

• 现在的函数执行完毕之后，是不会有结果出现的

  <script>
  // 比如 1 + 2 是一个表达式，那么 这个表达式的结果就是 3
  console.log(1 + 2) // 3
  function fn() {
          
          
  // 执行代码
  }
  // fn() 也是一个表达式，这个表达式就没有结果出现
  console.log(fn()) // undefined
  </script>
  

• return 关键字就是可以给函数执行完毕一个结果

  function fn() {
  // 执行代码
  return 100
  }
  // 此时，fn() 这个表达式执行完毕之后就有结果出现了
  console.log(fn()) // 100
  
  

  我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

函数的优点

• 函数就是对一段代码的封装，在我们想调用的时候调用
• 函数的几个优点

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