循环结构与函数

5、循环结构

循环结构，就是根据某些给出的条件，重复执行同一段代码

循环必须要有某些固定的内容组成

1.初始化变量

2.条件判断

3.循环体（要执行的代码）

4.自身改变（自增或自减）

5.1while循环

• while，中文叫 当...时，意思为：当条件满足时就执行代码，不满足就不执行

• 语法：while（条件判断）{

循环体（满足条件就执行）

}

• 因为满足条件就执行，所以需要设定一个边界值，不然就会一直循环下去（死循环）

// 1. 初始化条件 
var num = 0; 
// 2. 条件判断 
while (num < 10) { 
    // 3. 要执行的代码 
    console.log('当前的 num 的值是 ' + num) 
    // 4. 自身改变 
    num = num + 1 
}

如果没有自身改变，就会陷入死循环。

5.2DO WHILE 循环

• 是一个和 while 循环类似的循环

• while 会先进行条件判断，满足就执行，不满足直接就不执行了

• 但是 do while 循环是，先不管条件，先执行一回，然后在开始进行条件判断

• 语法： do { 要执行的代码 } while (条件)

// 下面这个代码，条件一开始就不满足，但是依旧会执行一次 do 后面 {} 内部的代码 
var num = 10 
do { 
console.log('我执行了一次') 
num = num + 1 
} while (num < 10)

5.3FOR 循环

• 和 while 和 do while 循环都不太一样的一种循环结构

• 道理是和其他两种一样的，都是循环执行代码的

• 语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

// 把初始化，条件判断，自身改变，写在了一起
for (var i = 1; i <= 10; i++) {
// 这里写的是要执行的代码
console.log(i)
}
// 控制台会依次输出 1 ~ 10

5.4BREAK 终止循环

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

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

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

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

5.5CONTINUE 结束本次循环

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

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

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

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

5.6双重for循环

• 双重 for 循环概述

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

• 双重 for 循环语法

for (外循环的初始; 外循环的条件; 外循环的操作表达式) {
for (内循环的初始; 内循环的条件; 内循环的操作表达式) {
需执行的代码;
}
}

• 内层循环可以看做外层循环的循环体语句

• 内层循环执行的顺序也要遵循 for 循环的执行顺序

• 外层循环执行一次，内层循环要执行全部次数

案例：打印五行五列星星

var star = '';
for (var j = 1; j <= 3; j++) {
for (var i = 1; i <= 3; i++) {
document.write(i)
}
// 每次满 5个星星 就 加一次换行
document.write('<br>')
}

核心逻辑：

1.内层循环负责一行打印五个星星

2.外层循环负责打印五行

5.7for 循环小结

• for 循环可以重复执行某些相同代码

• for 循环可以重复执行些许不同的代码，因为我们有计数器

• for 循环可以重复执行某些操作，比如算术运算符加法操作

• 随着需求增加，双重for循环可以做更多、更好看的效果

• 双重 for 循环，外层循环一次，内层 for 循环全部执行

• for 循环是循环条件和数字直接相关的循环

5、函数

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

5.1函数的概念

• 对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面

• 在我想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行

• 先看一段代码

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

5.2函数的两个阶段（重点）

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

5.2.1函数定义阶段

• 定义阶段就是我们把代码 放在盒子里面

• 我们就要学习怎么 放进去，也就是书写一个函数

• 我们有两种定义方式 声明式 和 赋值式

5.2.2声明式

• 使用 function 这个关键字来声明一个函数

• 语法：

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

5.2.3赋值式

• 其实就是和我们使用 var 关键字是一个道理了

• 首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量就可以了

• 语法：

var fn = function () {
// 一段代码
}
// 不需要在 function 后面书写函数的名字了，因为在前面已经有了
​

5.2.4函数调用阶段

• 就是让 盒子里面 的代码执行一下

• 让函数执行

• 两种定义函数的方式不同，但是调用函数的方式都以一样的

调用一个函数

函数调用就是直接写 函数名() 就可以了

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

注意： 定义完一个函数以后，如果没有函数调用，那么写在 {} 里面的代码没有意义，只有调 用以后才会执行

5.3函数的参数（重点）

• 我们在定义函数和调用函数的时候都出现过 ()

• 现在我们就来说一下这个 () 的作用

• 就是用来放参数的位置

• 参数分为两种 行参 和 实参

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

5.4行参和实参的作用

5.4.1行参

• 就是在函数内部可以使用的变量，在函数外部不能使用

• 每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命 名规范）

• 多个单词之间以 , 分隔

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

• 如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是 undefined

• 行参的值是在函数调用的时候由实参决定的

5.4.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)
​

5.5函数的return（重点）

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

5.5.1终断函数

• 当我开始执行函数以后，函数内部的代码就会从上到下的依次执行

• 必须要等到函数内的代码执行完毕

• 而 return 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行

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

5.5.2返回值

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

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

// 比如 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 关键把任何内容当作这个函数运行后的结果

5.6函数的优点

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

函数的几个优点

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