前端三剑客之JavaScript——JavaScript循环语句、函数基础

JavaScript的循环语句

1、while循环

语法：

while（条件判断）{重复执行的代码}

意义：

• 根据初始值进行条件判断
• 如果为true，就执行{}里面的代码
• 执行完{}里面的代码以后，再次进行条件判断
• 直到某一次条件判断为false的时候，不再执行{}里面的代码
• 循环结束

注意：

• 写循环，自身改变必须要写
• 初始值，条件判断，初始值改变，都能决定你的循环次数
• 循环内和循环外的值不一样
  • 循环内部的时候，我们的变量是根据初始值改变来依次变成每一个值
  • 循环外部的时候，变量一定是超出条件的那一个值

2、do while循环

相同点：在条件都满足的时候while和do while是一样的

不同点：在条件不满足的时候，while是没有任何执行结果的，但是do while会有执行结果的

原因：

while循环先进行判断，再开始决定是不是执行{}

do while循环是先进行{}执行一遍，再开始进行条件判断，决定后面的还要不要再次执行{}里面的代码

语法：

do{重复执行的代码}while（条件判断）

3、for循环

for（初始值；条件判断；初始值改变）{重复执行的代码}

注意点：

• 小括号里面书写了三个内容
  • 初始值
  • 条件判断
  • 修改初始值
  • 三个内容中间需要分号
• 大括号里面主要书写重复执行的代码就可以了

循环控制语句

在循环的过程中，根据设置的条件来决定循环结束的时候，本次循环是否进行。

1、打断循环

break，打断循环，当代码执行到break的时候，会直接结束当前循环，不管后面还有多少次。

使用场景：只能出现在循环体内，在循环体中表示结束break所在层的循环。

2、继续执行

continue，结束循环的本次，继续执行下一次循环，本次循环中写在continue后面的代码不执行了

使用场景：只能出现在循环体内

函数基础

代码里面的函数和上学学习的三角函数、二次函数之类的不是一个东西，所以大家不要紧张。

1、函数的概念

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

当想要让这段代码执行的时候，直接执行这个 盒子 里面的代码就行，这就是函数的调用；

2、函数定义阶段

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

2、声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

3、有两种定义方式 声明式 和 赋值式

4、函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。

2-1、声明式函数

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

语法：

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

2-2、赋值式函数

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

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

语法：

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

3、函数的调用阶段

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

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

3-1、调用一个函数

函数调用就是直接写 函数名（） 就可以了

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

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

3-2、调用上的区别

虽然调用的方式是一样的，但是还是有一些区别的

声明式函数：调用可以在 定义之前或者定义之后

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

赋值式函数：调用只能在定义之后

// 会报错 fn() 
// 赋值式函数 
var fn = function () {
    console.log('我是 fn 函数')
} 
// 可以调用 fn()

4、函数的参数（重点）

函数是 js 数据类型中的一种复杂数据类型也叫引用数据类型

定义函数和调用函数的时候 ，()里面就是放参数的位置

参数分为两种 形参 和 实参

声明（定义）函数时括号中的变量叫做形参，调用函数时括号中的数据为实参，实参是专门为形参赋值的。

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

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

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

实参：

在函数调用的时候给形参赋值的

函数内部的形参的值，由函数调用的时候传递的实参决定

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)

4-2、参数个数的关系

形参比实参少

因为是按照顺序一一对应的，形参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值

形参比实参多

因为是按照顺序一一对应的，所以多出来的形参就是没有值的，就是 undefined

4-3、扩展：函数自带的参数arguments

函数天生自带一个形参就是arguments

这个arguments是一个实参对应的集合，这个呈现的形式是一个数组的形式，是一个伪数组。

对于arguments的操作：

1、拿到arguments中有多个数据

这个就是对arguments中有一个属性length的操作

语法：arguments.length

2、可以读取/修改arguments中存储的每个数据

默认情况下，arguments中的一些数据存储的时候，是带有小标号的，这个小标号专业术语叫做下标（索引），这个索引是从0开始的，依次+1，所以想要读取arguments中的一些数据，直接利用索引进行读取。

读取对应的数据 语法：arguments[索引值]

修改对应的数据 语法：arguments[索引值] = 修改的值

function fn2(){ 
    console.log(arguments) 
    for (var i = 0;i < arguments.length;i++){
        console.log(arguments[i]) 
} 
//利用for循环依次读取这个arguments中的数据的过程，叫做遍历 
}

5、函数的return（重点）

return 返回的意思，作用是给函数一个返回值和终断函数

定义：函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值

5-1、终断函数

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

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

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

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

// 需求: 求任意两个数的和 
// 声明一个函数 , 定义两个形参 
function f1(a, b) { 
    // 计算求和的结果,赋值给res 
    // res就是我们要求的任意的两个数的和 
    var res = a + b 
    // console.log(res); 
    // 返回我们的结果,这样我们才可以在函数的外面拿到这个结果 
    return res
} 
// 调用我们的函数 传递实参 
// 函数调用就获取到了我们的结果 
// 我们把这个结果赋值给了sum 
var sum = f1(10, 20) 
console.log(sum);

6、函数的优点

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

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