函数的概念

• 什么是函数？
  • 首先明确一点，和我们数学中的函数是两个概念
  • 在 JS 中，函数可以理解为将一段在程序中多次出现的代码封装起来的盒子，以便在多个地方调用执行
  • 换句话说：函数就是一个内部封装了部分代码的盒子，可以在多个位置被调用
• 函数的使用
  • 创建函数（定义函数）
  • 调用函数

函数的定义

• 声明式定义

function fn() {
    
}
/**
 * 分析：
 *      function：声明函数的关键字，代表接下来这段代码是一个函数
 *      fn：函数名，调用函数时需要使用，函数名自定义，符合命名规范和见名知意即可（!** 匿名函数时可以不写）
 *      ()：小括号内存放函数的参数（后续讲解）
 *      {}：存放函数代码，调用函数时，想执行的代码都写在内部
*/

• 赋值式定义

var fn = function () {

}

函数的调用

function fn1() {
    
}
var fn2 = function () {

}

fn1()
fn2()

声明式与赋值式的区别

• 书写区别
• 调用区别

// 声明式
fn1()  // 可以执行
function fn1(){
    // 函数代码。。。。。。
}
fn1()  // 可以执行


fn2()   // 不可以执行（!**  声明时编程，其实就是相当于将一个函数赋值给一个变量，会有变量的声明提升，所以在变量声明前调用时，根据变量声明提升的规则，此时变量为 undefined ，所以不能被调用）
var fn2 = function () {
    // 函数代码。。。。。。。。。
}
fn2()   // 可以执行

函数的参数

• 参数是什么？
  • 如果没有参数，那么函数的执行功能是固定的，写好函数后内部内容将不会变
  • 比如：函数内部的代码为 1 + 1，那么始终执行时始终都是 1 + 1，如果此时想要计算 1 + 2 的值，需要重新封装一个 1+2 的函数
• 参数在哪里？如何使用
  • 书写函数时有一个 () 内部就是书写参数的，函数分为两种，形参---实参
• 形参和实参的区别
  • 形参：在函数声明时 function 后边的（）内书写，每写一个参数，就相当于在函数内部创建一个变量，其值为函数调用时传递的值，只能在函数内部使用，不能在外部使用
  • 实参：顾名思义，实际的参数，也就是函数在调用时传递的参数

function num () {
    console.log(1 + 1)
}
num()   // 打印值为 1+1

function num (a, b) {   // 此处 a b 为形参
    console.log(a + b)
}
num(1, 1)   // 此处为 实参，分别传递给 a  和  b
num(1, 2)   // 此处打印值为 1 + 2

• 注意
  • 函数的形参与实参是按照从左到右的顺序一一对应的

// 少传参数
function num1(a, b, c, d) {
    console.log(a,b,c,d)
}
num1(1, 2, 3, 4)    // 打印1，2，3，4
num1(1, 2, 4) // 打印1，2，4，undefined
num1(4) // 打印4，undefined，undefined，undefined
// 多传参数
function num2 (a) {
    console.log(a)
}
num2(1, 2)  // 打印 1
num2(1)  // 打印 1

函数的返回值

• 返回值是什么？有什么作用
  • 函数内部默认有一个 return 他的值就是函数的返回值，如果函数内部不写 return 那么函数默认在函数体内部最底部返回一个 undefined
  • 如果不想返回 undefined 需要手动在函数内部写上 return 并且跟上需要返回的值
  • 可以中断函数（后续通过代码演示）

function num (a, b) {
    a+b
}
var ab = num(1,2)
console.log(ab)

function num (a, b) {
    // return a + b
    console.log('函数内部执行的 a + b =',a+b)
}
var ab = num(1,2)
console.log('函数外部执行的 a + b =',ab)

函数的优点

• 函数其实就是将一段需要多次调用的代码抽离出来封装到一个盒子内部，方便在多个地方调用时简单化代码
  • 抽离公共代码，项目代码整体更加简洁
  • 方便（复用），在需要的地方直接 函数名 + 小括号 调用即可

函数的预解析

• 什么是预解析
  • 在代码运行前，先全部分析一遍代码，这个行为叫做预解析（预解释）
• 预解析的内容
  • 声明式函数定义
  • var 声明变量

// 正常书写代码
fn()
console.log(a)

function fn() {
    console.log(100)
}
var a = 100

// 预解析后可以理解为
function fn() {
    console.log(100)
}
var a

fn()
console.log(a)

a = 100

循环语句

• 什么是循环语句
  • 根据某些给出的条件,重复执行同一段代码
• 循环必须要有某些固定的内容组成
  • 初始化
  • 条件判断
  • 要执行的代码
  • 自身改变

while 循环语句

• while，中文叫 当…时，其实就是当条件满足时就执行代码，一旦不满足了就不执行了
• 语法 while (条件) { 满足条件就会执行 }
• 因为满足条件就执行, 所以我们写的时候一定要注意, 就是设定一个边界值, 不然就一直循环下去了, 简称: 死循环, 电脑卡死的时间根据电脑性能有所不同, 建议不要尝试

// 1. 初始化条件
var num = 0
// 条件判断
while (num < 10) {
    // 3. 要执行的代码
    console.log('当前 num 的值是: ', num)
    // 4. 自身改变
    num += 1    // 如果没有这行代码, 那么自身就没有改变, 条件将会一直满足, 代码也就会一直执行
}

do...while 循环语句

• 是一个和 while 循环类似的循环
• while 会先进行条件判断, 满足就执行, 不满足就直接不执行了
• do...while 的循环是 先不管条件, 先执行一次, 然后再开始进行条件判断
• 语法: do { 要执行的代码 } while (条件)

// 1. 初始化
var num = 10;
do {
    // 3. 要执行的代码
    console.log('我执行了一次')
    // 4. 自身改变
    num += 1
// 2. 条件判断
} while (num < 10)

for 循环语句

• 和 while do while 循环都不太一样的一种循环结构
• 但道理是和其他两种一样的, 都是循环执行代码的
• 语法: for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化, 条件判断, 自身改变, 都统一写在了一起
for (var i = 1; i <= 10; i++) {
    console.log(i)  // 会打印 1~10
}
// 初次使用时会觉得有一点繁琐与不习惯, 但是用起来比较好用

流程控制语句

• 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('我吃了一个包子')
}

循环嵌套的书写

• 循环嵌套其实就是一个循环内部又写了一个循环

for (var i = 0; i < 3; i++) {   // 这个循环称为 外层循环
    for (var k = 1; k < 4; k++) {   // 这个循环称为 内层循环
        /**
         * 重点!!!
         *          两个循环的循环变量不能相同, 会有冲突
        */
    }
}