JavaScript基础 ,更新函数部分

本文详细介绍了JavaScript的基础知识,包括变量的定义与命名规则、数据类型,特别是基本数据类型和数据类型判断,以及各种数据类型转换。接着讲解了运算符的使用,如数学运算符、赋值运算符、比较运算符和逻辑运算符。此外,还涵盖了分支结构,如IF条件分支结构、SWITCH条件分支结构和三元运算,以及循环结构,包括WHILE、DO WHILE和FOR循环。最后,文章讨论了函数的概念,包括定义阶段的声明式和赋值式,函数调用,参数和返回值,以及函数在JavaScript代码中的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

JS应用位置

  • 内嵌式
<script type="text/javascript">
       alert('弹出')
</script>
<!--
    注:script 标签可以放在 head 里面也可以放在 body 里面
-->
  • 行内式
<a href="javascript:alert('tanchuceng')">check</a>
<div onclick="alert('弹出层')">box</div>
  • 外链式
//  一个index.js 文件
alert('一个弹出层')

// 通过 script 标签的 src 属性,把写好的 js 文件引入页面
// 一个页面可以引入多个 js 文件
<script src="index.js"></script> 标签中间一定不能有内容 一但写上内容就认定是内联  src失去作用
<!-- 不需要任何行为去触发 打开页面自动执行 -->
<!-- 可以写在head 后边 也可以写在body后边 -->
<!-- 绝对路径和相对路径  -->

JS中的注释

单行注释

  • 可以直接写两个 /,也可以按ctrl+/

    // 我是一个单行注释
    
    // 下面代码表示在浏览器里面出现一个弹出层
    alert('我是一个弹出层')
    

多行注释

  • 可以直接写/**/ 然后在两个星号中间写注释
  • 各个编辑器的快捷键不一样,vscodectrl + shift + a
/*
    多行注释
*/

变量(重点)

  • 变量指的是在程序中保存数据的一个容器
  • 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
  • 也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他
  • 语法: var 变量名 = 值

定义变量及赋值

// 定义一个变量
var num;

// 给一个变量赋值
num = 100;

// 定义一个变量的同时给其赋值
var num2 = 200;
  • 注意:
    1. 一个变量名只能存储一个值
    2. 当再次给一个变量赋值的时候,前面一次的值就没有了
    3. 变量名称区分大小写(JS 严格区分大小写)

变量的命名规则和命名规范

  • 规则: 必须遵守的,不遵守就是错

    1. 一个变量名称可以由 数字字母英文下划线(_)美元符号($) 组成
    2. 严格区分大小写
    3. 不能由数字开头
    4. 不能是 保留字 或者 关键字
    5. 不要出现空格
  • 规范: 建议遵守的(开发者默认),不遵守不会报错

    1. 变量名尽量有意义(语义化)
    2. 遵循驼峰命名规则,由多个单词组成的时候,从第二个单词开始首字母大写
    3. 不要使用中文

数据类型(重点)

  • 是指我们存储在内存中的数据的类型
  • 我们通常分为两大类 基本数据类型复杂数据类型

基本数据类型

  1. 数值类型(number)
    • 100e5(100的5次方)
    • Infinity (正无穷)
    • -Infinity (负无穷)
    • 一切数字都是数值类型(包括二进制,十进制,十六进制等)
    • NaN(not a number),一个非数字
  2. 字符串类型(string)
    • 被引号包裹的所有内容(可以是单引号也可以是双引号)
    • 字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串长度。
//1,检测获取字符串的长度 length
var str = 'my name is andy';
console.log(str.lengh);
//2.字符串的拼接 +
console.log('沙漠' + '骆驼');//只要和字符串拼接都会变成字符串

  1. 布尔类型(boolean)
    • 只有两个(true 或者 false
    • 布尔型和数字型相加的时候,true的值为 1,false的值为 0
    • 0 0.0 null undefined 空字符串 的时候都为 false
console.log(true + 1); // 2
console.log(false + 1); // 1
  1. null 数据类型为 (object)
    • 只有一个,就是 null,表示空的意思
  2. undefined类型(undefined)
    • 只有一个,就是 undefined,表示没有值的意思

判断数据类型

  • 既然已经把数据分开了类型,那么我们就要知道我们存储的数据是一个什么类型的数据
  • 使用 typeof 关键字来进行判断
// 第一种使用方式
var n1 = 100;
console.log(typeof n1);

// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));

判断一个变量是不是数字

  • 可以使用 isNaN 这个方法来判断一个变量是不是数字
  • isNaNis not a number
// 如果变量是一个数字
var n1 = 100;
console.log(isNaN(n1)); //=> false

// 如果变量不是一个数字
var s1 = 'Jack'
console.log(isNaN(s1)); //=> true

数据类型转换

  • 数据类型之间的转换,比如数字转成字符串,字符串转成布尔,布尔转成数字等

其他数据类型转成数值

  1. Number(变量)

    可以把一个变量强制转换成数值类型

    可以转换小数,会保留小数

    可以转换布尔值

    遇到不可转换的都会返回 NaN

  2. parseInt(变量)

    从第一位开始检查,是数字就转换,知道一个不是数字的内容

    开头就不是数字,那么直接返回 NaN

    不认识小数点,只能保留整数

  3. parseFloat(变量)

    从第一位开始检查,是数字就转换,知道一个不是数字的内容

    开头就不是数字,那么直接返回 NaN

    认识一次小数点

  4. 除了加法以外的数学运算

    运算符两边都是可运算数字才行

    如果运算符任何一边不是一个可运算数字,那么就会返回 NaN

    加法不可以用

其他数据类型转成字符串

  1. 变量.toString()

    有一些数据类型不能使用 toString() 方法,比如 undefinednull

  2. String(变量)

    所有数据类型都可以

  3. 使用加法运算

    在 JS 里面,+ 由两个含义

    字符串拼接: 只要 + 任意一边是字符串,就会进行字符串拼接

    加法运算:只有 + 两边都是数字的时候,才会进行数学运算

其他数据类型转成布尔

  1. Boolean(变量)

    在 js 中,只有 ''0nullundefinedNaN,这些是 false

    其余都是 true

运算符

  • 就是在代码里面进行运算的时候使用的符号,不光只是数学运算,我们在 js 里面还有很多的运算方式

数学运算符

  1. +

    只有符号两边都是数字的时候才会进行加法运算

    只要符号任意一边是字符串类型,就会进行字符串拼接

  2. -

    会执行减法运算

    会自动把两边都转换成数字进行运算

  3. *

    会执行乘法运算

    会自动把两边都转换成数字进行运算

  4. /

    会执行除法运算

    会自动把两边都转换成数字进行运算

  5. %

    会执行取余运算

    会自动把两边都转换成数字进行运算

赋值运算符

  1. =

    就是把 = 右边的赋值给等号左边的变量名

    var num = 100

    就是把 100 赋值给 num 变量

    那么 num 变量的值就是 100

  2. +=

    var a = 10;
    a += 10;
    console.log(a); //=> 20
    

    a += 10 等价于 a = a + 10

  3. -=

    var a = 10;

    a -= 10;
    console.log(a); //=> 0
    

    a -= 10 等价于 a = a - 10

  4. *=

    var a = 10;
    a *= 10;
    console.log(a); //=> 100
    

    a *= 10 等价于 a = a * 10

  5. /=

    var a = 10;
    a /= 10;
    console.log(a); //=> 1
    

    a /= 10 等价于 a = a / 10

  6. %=

    var a = 10;
    a %= 10;
    console.log(a); //=> 0
    

    a %= 10 等价于 a = a % 10

比较运算符

  1. ==

    • 比较符号两边的值是否相等,不管数据类型 >

      1 == '1'

      两个的值是一样的,所以得到 true

  2. ===

    • 比较符号两边的值和数据类型是否都相等 >

      1 === '1'

      两个值虽然一样,但是因为数据类型不一样,所以得到 false

  3. !=

    • 比较符号两边的值是否不等 >

      1 != '1'

      因为两边的值是相等的,所以比较他们不等的时候得到 false

  4. !==

    • 比较符号两边的数据类型和值是否不等 >

      1 !== '1'

      因为两边的数据类型确实不一样,所以得到 true

  5. >=

    • 比较左边的值是否

      大于或等于

      右边的值 >

      1 >= 1 结果是 true

      1 >= 0 结果是 true

      1 >= 2 结果是 false

  6. <=

    • 比较左边的值是否

      小于或等于

      右边的值 >

      1 <= 2 结果是 true

      1 <= 1 结果是 true

      1 <= 0 结果是 false

  7. >

    • 比较左边的值是否

      大于

      右边的值 >

      1 > 0 结果是 true

      1 > 1 结果是 false

      1 > 2 结果是 false

  8. <

    • 比较左边的值是否

      小于

      右边的值 >

      1 < 2 结果是 true

      1 < 1 结果是 false

      1 < 0 结果是 false

逻辑运算符

逻辑运算符优先级从高到低 !> && > ||

  1. &&

    • 进行 且 (and)的运算 >

      符号左边必须为 true 并且右边也是 true,才会返回 true

      只要有一边不是 true,那么就会返回 false

      true && true 结果是 true

      true && false 结果是 false

      false && true 结果是 false

      false && false 结果是 false

  2. ||

    • 进行 或 (or)的运算 >

      符号的左边为 true 或者右边为 true,都会返回 true

      只有两边都是 false 的时候才会返回 false

      true || true 结果是 true

      true || false 结果是 true

      false || true 结果是 true

      false || false 结果是 false

  3. !

    • 进行 取反 运算 >

      本身是 true 的,会变成 false

      本身是 false 的,会变成 true

      !true 结果是 false

      !false 结果是 true

自增自减运算符(一元运算符)

  1. ++

    • 进行自增运算

    • 分成两种,前置++后置++

    • 前置++,会先把值自动 +1,在返回

      var a = 10;
      console.log(++a);
      // 会返回 11,并且把 a 的值变成 11
      
    • 后置++,会先把值返回,在自动+1

      var a = 10;
      console.log(a++);
      // 会返回 10,然后把 a 的值变成 11
      
  2. --

    • 进行自减运算
    • 分成两种,前置–后置–
    • ++ 运算符道理一样

分支结构

  • 我们的 js 代码都是顺序执行的(从上到下)
  • 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码

IF 条件分支结构(重点)

if 语句

  • 通过一个 if 语句来决定代码是否执行

  • 语法: if (条件) { 要执行的代码 }

  • 通过 () 里面的条件是否成立来决定 {} 里面的代码是否执行

    // 条件为 true 的时候执行 {} 里面的代码
    if (true) {
      alert('因为条件是 true,我会执行')
    }
    
    // 条件为 false 的时候不执行 {} 里面的代码
    if (false) {
        alert('因为条件是 false,我不会执行')    
    }
    

if else 语句

  • 通过 if 条件来决定,执行哪一个 {} 里面的代码

  • 语法: if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }

  • 两个 {} 内的代码一定有一个会执行

    // 条件为 true 的时候,会执行 if 后面的 {} 
    if (true) {
      alert('因为条件是 true,我会执行')
    } else {
      alert('因为条件是 true,我不会执行')
    }
    
    // 条件为 false 的时候,会执行 else 后面的 {}
    if (false) {
      alert('因为条件为 false,我不会执行')
    } else {
      alert('因为条件为 false,我会执行')
    }
    

if else if … 语句

  • 可以通过 ifelse if 来设置多个条件进行判断

  • 语法:if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }

  • 会从头开始依次判断条件

    • 如果第一个条件为 true 了,那么就会执行后面的 {} 里面的内容
    • 如果第一个条件为 false,那么就会判断第二个条件,依次类推
  • 多个 {} ,只会有一个被执行,一旦有一个条件为 true 了,后面的就不在判断了

    // 第一个条件为 true,第二个条件为 false,最终会打印 “我是代码段1”
    if (true) {
          alert('我是代码段1')
    } else if (false) {
        alert('我是代码段2')           
    }
    
    // 第一个条件为 true,第二个条件为 true,最终会打印 “我是代码段1”
    // 因为只要前面有一个条件满足了,就不会继续判断了
    if (true) {
          alert('我是代码段1')
    } else if (true) {
          alert('我是代码段2')
    }
    
    // 第一个条件为 false,第二个条件为 true,最终会打印 “我是代码段2”
    // 只有前一个条件为 false 的时候才会继续向后判断
    if (false) {
          alert('我是代码段1')
    } else if (true) {
          alert('我是代码段2')
    }
    
    // 第一个条件为 false,第二个条件为 false,最终什么也不会发生
    // 因为当所有条件都为 false 的时候,两个 {} 里面的代码都不会执行
    if (false) {
          alert('我是代码段1')
    } else if (false) {
          alert('我是代码段2')
    }
    

if else if … else 语句

  • 和之前的 if else if ... 基本一致,只不过是在所有条件都不满足的时候,执行最后 else 后面的 {}

    // 第一个条件为 false,第二个条件为 false,最终会打印 “我是代码段3”
    // 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
    // 只要前面有一个条件满足了,那么后面的就都不会执行了
    if (false) {
          alert('我是代码段1')
    } else if (false) {
          alert('我是代码段2')
    } else {
          alert('我是代码段3')
    }
    

SWITCH 条件分支结构(重点)

  • 也是条件判断语句的一种

  • 是对于某一个变量的判断

  • 语法:

    switch (要判断的变量) {
      case 情况1:
        情况1要执行的代码
        break
      case 情况2:
        情况2要执行的代码
        break
      case 情况3:
        情况3要执行的代码
        break
      default:
        上述情况都不满足的时候执行的代码
    }
    
    • 要判断某一个变量 等于 某一个值得时候使用
  • 例子: 根据变量给出的数字显示是星期几

    var week = 1
    switch (week) {
      case 1:
        alert('星期一')
        break
      case 2:
        alert('星期二')
        break
      case 3:
        alert('星期三')
        break
      case 4:
        alert('星期四')
        break
      case 5:
        alert('星期五')
        break
      case 6:
        alert('星期六')
        break
      case 7:
        alert('星期日')
        break
      default:
        alert('请输入一个 1 ~ 7 之间的数字')
    }
    

三元运算(扩展)

  • 三元运算,就是用 两个符号 组成一个语句

  • 三元运算只是对 if else 语句的一个简写形式

  • 语法: 条件 ? 条件为 true 的时候执行 : 条件为 false 的时候执行

    var age = 18;
    age >= 18 ? alert('已经成年') : alert('没有成年')
    

循环结构(重点)

  • 循环结构,就是根据某些给出的条件,重复的执行同一段代码
  • 循环必须要有某些固定的内容组成
    1. 初始化
    2. 条件判断
    3. 要执行的代码
    4. 自身改变

WHILE 循环

  • while,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了

  • 语法 while (条件) { 满足条件就执行 }

  • 因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了

    // 1. 初始化条件
    var num = 0;
    // 2. 条件判断
    while (num < 10) {
      // 3. 要执行的代码
      console.log('当前的 num 的值是 ' + num)
      // 4. 自身改变
      num = num + 1
    }
    
    • 如果没有自身改变,那么就会一直循环不停了
编程题构思

1.初始化一个值

2.条件

3.执行的代码

4.自身得变化

DO WHILE 循环

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

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

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

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

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

FOR 循环

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

函数(上)

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

函数的概念

  • 对于 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)
      
  2. 行参比实参多

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

    • 所以多出来的行参就是没有值的,就是 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 关键字的规则进行预解析

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值