JavaScript 基础(4) - 笔记

理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。

理解函数的封装的特征
掌握函数声明的语法
理解什么是函数的返回值
知道并能使用常见的内置函数

1 函数

理解函数的封装特性，掌握函数的语法规则

1.1 声明和调用

函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。

1.1.1 声明（定义）

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

函数名命名规范
- 和变量命名基本一致。
- 尽量小驼峰式命名法。
- 前缀应该为动词。
- 命名建议：常用动词约定。

function getName() {
   
   }
function addSquares() {
   
   }

动词	含义
can	判断是否可执行某个动作
has	判断是否含义某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

1.1.2 调用

函数的调用语法：

// 函数调用，这些函数体内的代码逻辑会被执行
函数名()

声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数。

函数体：

函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能diamagnetic都要写在函数体当中。

// 打招呼
function sayHi() {
   
   
    console.log('嗨~')
}
sayHi()

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和调用</title>
</head>
<body>
  <script>
    // 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
    function sayHi() {
    
    
      console.log('嗨~')
    }
    // 函数调用，这些函数体内的代码逻辑会被执行
    // 函数名()

    sayHi()
    // 可以重复被调用，多少次都可以
    sayHi()
  </script>
</body>
</html>

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

案例：函数封装

需求：

封装一个函数，计算两个数的和。
封装一个函数，计算1-100之间所有数的和。

// 1.求2个数的和
// function getSum() {
   
   
//     let num1 = +prompt('请输入第一个数')
//     let num2 = +prompt('请输入第二个数')
//     console.log(num1 + num2)
// }
// getSum()
// 2.求1~100 累加和
function getSum100() {
   
   
    let sum = 0
    for (let i = 1; i <= 100; i++) {
   
   
        sum += i
    }
    console.log(sum)
}
getSum100()

案例：小星星

<script>
        // 函数声明
        function sayHi() {
   
   
            // document.write('hai~')
            document.write(`*<br>`)
            document.write(`**<br>`)
            document.write(`***<br>`)
            document.write(`****<br>`)
            document.write(`*****<br>`)
            document.write(`******<br>`)
            document.write(`*******<br>`)
            document.write(`********<br>`)
            document.write(`*********<br>`)
        }
        // 函数调用
        sayHi()
        sayHi()
        sayHi()
        sayHi()
        sayHi()
    </script>

1.2 函数参数

通过向函数传递参数，可以让函数更加灵活多变，参数可以理解成是一个变量。

声明（定义）一个功能为打招呼的函数。

声明语法：

function 函数名(参数列表) {
   
   
    函数体
}

参数列表：

传入数据列表
声明这个函数需要传入几个数据
多个数据用逗号隔开

调用语法：

函数名(传递的参数列表)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>

  <script>
    // 声明（定义）一个功能为打招呼的函数
    // function sayHi() {
    
    
    //   console.log('嗨~')
    // }
    // 调用函数
    // sayHi()


    // 这个函数似乎没有什么价值，除非能够向不同的人打招呼
    // 这就需要借助参数来实现了
    function sayHi(name) {
    
    
      // 参数 name 可以被理解成是一个变量
      console.log(name)
      console.log('嗨~' + name)
    }

    // 调用 sayHi 函数，括号中多了 '小明'
    // 这时相当于为参数 name 赋值了
    sayHi('小明')// 结果为 小明

    // 再次调用 sayHi 函数，括号中多了 '小红'
    // 这时相当于为参数 name 赋值了
    sayHi('小红') // 结果为 小红
  </script>
</body>
</html>

总结：

声明（定义）函数时的形参没有数量限制，当有多个形参时使用 , 分隔。
调用函数传递的实参要与形参的顺序一致。

1.2.1 形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）。

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）。

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值。

开发中尽量保持形参和实参个数一致。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>
  <script>
    // 声明（定义）一个计算任意两数字和的函数
    // 形参 x 和 y 分别表示任意两个数字，它们是两个变量
    function count(x, y) {
    
    
      console.log(x + y);
    }
    // 调用函数，传入两个具体的数字做为实参
    // 此时 10 赋值给了形参 x
    // 此时 5  赋值给了形参 y
    count(10, 5); // 结果为 15
  </script>
</body>
</html>

案例：函数封装-求学生总分

需求：学生的分数是一个数组，计算每个学生的总分。

分析：
①：封装一个求和函数。
②：传递过去的参数是一个数组。
③：函数内部遍历数组求和。

// 1.封装一个求和函数
// 给一个参数的默认值
function getArrSum(arr = []) {
   
   
    // console.log(arr)
    let sum = 0
    for (let i = 0; i < arr.length; i++) {
   
   
        sum += arr[i]
    }
    console.log(sum)
}
getArrSum([1, 2, 3, 4, 5])
getArrSum([11, 22, 33])
getArrSum()

1.3 函数返回值

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

语法：

return 数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数返回值</title>
</head>
<body>

  <script>
    // 定义求和函数
    function count(a, b) {
    
    
      let s = a + b
      // s 即为 a + b 的结果
      // 通过 return 将 s 传递到外部
      return s
    }

    // 调用函数，如果一个函数有返回值
    // 那么可将这个返回值赋值给外部的任意变量
    let total = count(5, 12)
  </script>
</body>
</html>

总结：

在函数体中使用return 关键字能将内部的执行结果交给函数外部使用。
函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写。
return会立即结束当前函数。
函数可以没有return，这种情况默认返回值为 undefined 。

练习：函数返回值

1.求任意2个数中的最大值，并返回。
2.求任意数组中的最大值并返回这个最大值。
3.求任意数组中的最小值并返回这个最小值。

// 1.求最大值函数
// function getMax(x, y) {
   
   
//     return x > y ? x : y
// }
// let max = getMax(11, 234)
// console.log(max)

// // 2.求任意数组的最大值，并且返回
// function getArrValue(arr = []) {
   
   
//     // （1）先准备一个max变量存放数组的第一个值
//     let max = arr[0]
//     // （2）遍历比较
//     for (let i = 1; i < arr.length; i++) {
   
   
//         if (max < arr[i]) {
   
   
//             max = arr[i]
//         }
//     }
//     // （3）返回值
//     return max
// }

// // let max = getArrValue([1, 3, 57, 9])
// let num = prompt('请输入')
// let max = getArrValue([11, 3, 55, 7, 29])
// console.log(max)

// 3.求任意数组的最大值和最小值，并且返回
function getArrValue(arr = []) {
   
   
    // （1）先准备一个max变量存放数组的第一个值
    let max = arr[0]  // 最大值
    let min = arr[0]  // 最小值
    // （2）遍历比较
    for (let i = 1; i < arr.length; i++) {
   
   
        // 最大值
        if (max < arr[i]) {
   
   
            max = arr[i]
        }
        // 最小值
        if (min > arr[i]) {
   
   
            min = arr[i]
        }
    }
    // （3）返回值  返回的是数组
    return [max, min]
}

let newArr = getArrValue([11, 3, 55, 7, 29])
// console.log(newArr)
console.log(`数组的最大值是：${
     
     newArr[0]}`);
console.log(`数组的最小值是：${
     
     newArr[1]}`);

1.4 函数细节补充

两个相同的函数后面的会覆盖前面的函数
在Javascript中实参的个数和形参的个数可以不一致
- 如果形参过多会自动填上undefined(了解即可)
- 如果实参过多那么多余的实参会被忽略（函数内部有一个arguments,里面装着所有的实参）
函数一旦碰到return就不会在往下执行了函数的结束用return

1.5 作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

1.5.1 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

处于全局作用域内的变量，称为全局变量。

1.5.2 局部作用域

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

处于局部作用域内的变量称为局部变量。

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

1.5.3 变量的访问原则

只要是代码，就至少有一个作用域。
写在函数内部的局部作用域。
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域。
访问原则：在能够访问到的情况下先局部，局部没有在找全局。

作用域链：采取就近原则的方式来查找变量最终的值。

1.6 匿名函数

函数可以分为具名函数和匿名函数。

匿名函数：没有名字的函数,无法直接使用。

1.6.1 函数表达式

将匿名函数赋给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式。

// 声明
let fn = function() {
   
    
   console.log('函数表达式')
}
// 调用
fn()

1.6.2 立即执行函数

(function(){
   
    xxx  })();
(function(){
   
   xxxx}());

// 1.第一种写法
(function (x, y) {
   
   
    console.log(x + y)
})(1, 2);
// 2.第二种写法
(function (x, y) {
   
   
    console.log(x + y)
}(1, 3));

无需调用，立即执行，其实本质已经调用了

多个立即执行函数之间用分号隔开

案例：转换时间

需求：用户输入秒数，可以自动转换为时分秒。

分析：
①：用户输入总秒数（注意默认值)

②：计算时分秒（封装函数) 里面包含数字补0

③：打印输出

计算公式：计算时分秒

小时：h = parseInt(t / 60 / 60 % 24)

分钟：m = parseInt(t / 60 % 60)

秒数：s = parseInt(t % 60)

 // 1.用戶輸入
let scound = +prompt('请输入秒数：')
// 2.封装函数
function getTime(t) {
   
   
    console.log(t)  // 总的秒数
    // 3.转换
    // 小时：h = parseInt(t / 60 / 60 % 24)
    // 分钟：m = parseInt(t / 60 % 60)
    // 秒数：s = parseInt(t % 60)
    let h = parseInt(t / 60 / 60 % 24)
    let m = parseInt(t / 60 % 60)
    let s = parseInt(t % 60)
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    s = s < 10 ? '0' + s : s
    // console.log(h, m, s);
    return `转换完毕之后是${h}小时${m}分${
     
     s}秒`
}
let str = getTime(scound)
document.write(str)

1.7 逻辑中断

1.7.1 逻辑运算符里的短路

短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行。

| 符号 | 短路条件 |
| ---------- | ----------------- |
| && | 左边为false就短路 |
| \|\| | 右边为true就短路 |
原因：通过左边能得到整个式子的结果，因此没必要再判断右边。
运算结果：无论 && 还是 ||，运算结果都是最后被执行的表达式值，一般用在变量赋值。

(function flexible(window, document) {
   
   
    //window.devicePixelRatio 获取当前设备的 dpr
    //获取不到，则默认取值为如
    //移动端 获取为2，则执行2
    var dpr = window.devicePixelRatio || 1
}(window, document))

1.7.2 转换为Boolean型

显示转换：

1.Boolean(内容)

记忆："、0、undefined、null、false、NaN 转换为布尔值后都是false,其余则为 true。

隐式转换：

有字符串的加法 "" + 1，结果是 "1"
减法 -（像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
null 经过数字转换之后回变为 0
undefined 经过数字转换之后会变为 NaN

JavaScript 基础(4) - 笔记

JavaScript 基础(4) - 笔记

1 函数

1.1 声明和调用

1.1.1 声明（定义）

1.1.2 调用

案例：函数封装

案例：小星星

1.2 函数参数

1.2.1 形参和实参

案例：函数封装-求学生总分

1.3 函数返回值

练习：函数返回值

1.4 函数细节补充

1.5 作用域

1.5.1 全局作用域

1.5.2 局部作用域

1.5.3 变量的访问原则

1.6 匿名函数

1.6.1 函数表达式

1.6.2 立即执行函数

案例：转换时间

1.7 逻辑中断

1.7.1 逻辑运算符里的短路

1.7.2 转换为Boolean型

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaScript 基础(4) - 笔记

JavaScript 基础(4) - 笔记

1 函数

1.1 声明和调用

1.1.1 声明（定义）

1.1.2 调用

案例：函数封装

案例：小星星

1.2 函数参数

1.2.1 形参和实参

案例：函数封装-求学生总分

1.3 函数返回值

练习：函数返回值

1.4 函数细节补充

1.5 作用域

1.5.1 全局作用域

1.5.2 局部作用域

1.5.3 变量的访问原则

1.6 匿名函数

1.6.1 函数表达式

1.6.2 立即执行函数

案例：转换时间

1.7 逻辑中断

1.7.1 逻辑运算符里的短路

1.7.2 转换为Boolean型

热门文章

最新文章

相关课程

相关电子书

相关实验场景