JavaScript 学习笔记（Day4）

「写在前面」

本文为 b 站黑马程序员 pink 老师 JavaScript 教程的学习笔记。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。推荐先按顺序阅读往期内容：
1. JavaScript 学习笔记（Day1）
2. JavaScript 学习笔记（Day2）
3. JavaScript 学习笔记（Day3）

---

目录

• 1 函数
• 2 综合案例
• 3 逻辑中断

1 函数

1.1 为什么需要函数

P50：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=50

函数(function)：是被设计为执行特定任务的代码块

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

比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的 。

1.2 函数使用

函数的声明语法:

function 函数名() {
  函数体
}

例：

function sayHi() {
  document.write('hai~~')
}

函数名命名规范:

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

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

函数的调用语法:

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

例：

// 函数一次声明可以多次调用，每一次函数调用函数体里面的代码会重新执行一次
sayHi()
sayHi()

1.3 函数传参

P51：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=51

声明语法：

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

• 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
• 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

例:

function getSum(x = 0, y = 0) {
  document.write(x + y)
}
getsum() // 0
getsum(10, 20) // 30

P52：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=52

1.4 函数返回值

P53：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=53

语法：

return 数据

例：

function getSum(x, y) {
  return x + y
}
let num = getSum(10, 30)
document.write(num)

P54：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=54

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

P55：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=55

P56：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=56

1.5 作用域

P57：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=57

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

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

变量的访问原则:

P58：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=58

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

1.6 匿名函数

P59：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=59

函数可以分为：

匿名函数使用方式：

• 函数表达式
• 立即执行函数

1. 函数表达式

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

语法：

let fn = function () {
  // 函数体
}

// 调用
fn()

例：

// 1.函数表达式,必须先声明函数表达式，后调用
fn(1, 2) //错误
let fn = function (x, y) {
  console.log(x + y)
}

// 2.具名函数可以在任何位置调用
fun() // 正确
function fun() {
  console.log(1)
}

2. 立即执行函数

P60：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=60

立即执行函数避免全局变量之间的污染

多个立即执行函数要用 ; 隔开，要不然会报错

语法：

// 方式1
(function () {函数体})();

// 方式2
(function () {函数体}());

例：

// 方式1
(function (x, y){
  console.log(x + y)
})(1, 2);

// 方式2
(function (x, y) {
  console.log(x + y)
}(1, 2));

2 综合案例

P61：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=61

3 逻辑中断

3.1 逻辑运算符里的短路

P62：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=62

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

符号	短路条件
&&	左边为false就短路
||	左边为true就短路

console.log(false && 22) // false
console.log(true && 22) // 22
console.log(false || 22) // 22
console.log(11 || 22) // 11

3.2 转换为Boolean型

P63：https://www.bilibili.com/video/BV1Y84y1L7Nn?p=63

显示转换：

‘’、0、undefined、null、false、NaN 转换为布尔值后都是 false, 其余则为 true

<script>
  console.log(Boolean('pink')) // true
  console.log(Boolean(90)) // true
  console.log(Boolean(-1)) // true
  console.log(Boolean('')) // false
  console.log(Boolean(0)) // false
  console.log(Boolean(undefined)) // false
  console.log(Boolean(null)) // false
  console.log(Boolean(false)) // false
  console.log(Boolean(NaN)) // false
script>

console.log(false && 20) // false
console.log(5 < 3 && 20) // false
console.log(undefined && 20) // undefined
console.log(nul1 && 20) // null
console.log(0 && 20) // 0
console.log(10 && 20) // 20

console.log(false || 20) // 20
console.log(5 < 3 || 20) // 20
console.log(undefined || 20) // 20
console.log(null || 20) // 20
console.log(0 || 20) // 20
console.log(10 || 20) // 10

隐式转换：

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

console.log('' - 1) // -1
console.log('pink老师’- 1) // NaN
console.log(null + 1) // 1
console.log(undefined + 1) // NaN
console.log(NaN + 1) // NaN

「结束」

本文由 mdnice 多平台发布