函数
大约 18 分钟
JavaScript函数
以下为学习过程中的极简提炼笔记，以供重温巩固学习
准备工作
- 已完成JavaScript前面6节学习
学习目的
掌握JavaScript函数 理解封装的意义，能够通过函数的声明实现逻辑的封装，知道对象数据类型的特征，结合数学对象实现简单计算功能。
- 理解函数的封装的特征
- 掌握函数的语法
- 理解什么是函数的返回值
- 知道并能使用常见的内置函数
函数
函数：(function)是 执行特定任务的代码块
函数机理：函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑
函数目的：1精简代码；2方便复用；实现代码复用，提高开发效率 比如我们前面使用的 alert() 、 prompt() 和 console.log() 都是一些 js 函数，只不过已经封装好了，我们直接使用的
函数的声明/封装与调用
- 声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分
函数的规范
- 函数名的命名，和变量命名基本一致
- 尽量使用小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
- 声明（定义）的函数必须调用才会真正被执行，使用 () 调用函数
- 我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用
- 函数体是函数的构成部分
- 负责将相同或相似代码“包裹”起来
- 函数调用时，函数体内的代码才会被执行
- 函数的功能代码都要写在函数体当中
- 函数的复用代码和循环重复代码有什么不同？
- 循环代码写完即执行，不能很方便控制执行位置
- 随时调用，随时执行，可重复调用
函数的声明/封装与调用语法：
// 函数的声明/封装
function 函数名() {
函数体
}
function即声明关键字 a函数名(name形式参数) {
//大括号内即皆为函数体
let result = "hi~" + name ;
return result;//返回值
}
// 函数的调用
函数名()语法格式案例
函数声明
<body>
<script>
// 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
function sayHi() {
console.log('嗨~')
}
// 函数调用，这些函数体内的代码逻辑会被执行
// 函数名()
sayHi()
// 可以重复被调用，多少次都可以
sayHi()
</script>
</body>语法格式案例
函数声明+调用
<body>
<script>
// 案例1
// 函数声明
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()
// 案例2
// let num = 10
// console.log(num)
// 1. 函数的声明
function sayHi() {
console.log('hi~~~')
}
// 2. 函数调用 函数不调用，自己不执行
sayHi()
sayHi()
sayHi()
</script>
</body>语法格式案例
函数封装+调用
<body>
<script>
// 1. 求2个数的和
// function getSum() {
// let num1 = +prompt('请输入第一个数')
// let num2 = +prompt('请输入第二个数')
// console.log(num1 + num2)
// }
// getSum()
// 2. 求 1~100 累加和
function getSum() {
let sum = 0
for (let i = 1; i <= 100; i++) {
sum += i
}
console.log(sum)
}
getSum()
// 案例2
// 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() // 0
</script>
</body>函数参数/传参与调用
通过向函数传递参数，极大提高函数的灵活性 参数可以理解成是一个变量
参数列表（实际上就是指的形参）
- 传入数据列表
- 声明这个函数需要传入几个数据
- 多个数据用逗号隔开
函数的各部分名词
- 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
- 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
- 形参可以理解为是在这个函数内声明的变量
- 实参可以理解为是给这个变量赋值
- 开发中尽量保持形参和实参个数一致
- 我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
参数注意点
- 声明（定义）函数时的形参没有数量限制，当有多个形参/实参时使用
,分隔 - 调用函数传递的实参要与形参的顺序一致
补充
- 两个相同的函数后面的会覆盖前面的函数
- 在Javascript中 实参的个数和形参的个数可以不一致
- 如果形参过多 会自动填上undefined (了解即可)
- 如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
- (1). 实参多于形参 多余实参自动被忽略，不参与运算
- (2). 实参少于形参 实参被自动补undefined
- 函数一旦碰到return就不会在往下执行了 函数的结束用return
函数的传参与调用语法：
// 函数的传参
function 函数名(形参数列表) {
函数体
}
// 例：单个参数
function getSquare(num1) {
//大括号内即皆为函数体
document.write(num1*num1)
}
// 例：多个参数
function getSum(num1,num2,num3) {
//大括号内即皆为函数体
document.write(num1+num2+num3)
}
// 函数的调用
函数名(实参数列表，传给形参，传入函数里面代入算)
// 例：
getSquare(666)
getSum(233,666,888)语法格式案例
函数传参+调用
<body>
<script>
// 案例1
// 声明（定义）一个功能为打招呼的函数
// function sayHi() {
// console.log('嗨~')
// }
// 调用函数
// sayHi()
// 这个函数似乎没有什么价值，除非能够向不同的人打招呼
// 这就需要借助参数来实现了
function sayHi(name) {
// 参数 name 可以被理解成是一个变量
console.log(name)
console.log('嗨~' + name)
}
// 调用 sayHi 函数，括号中多了 '小明'
// 这时相当于为参数 name 赋值了
sayHi('小明')// 结果为 小明
// 再次调用 sayHi 函数，括号中多了 '小红'
// 这时相当于为参数 name 赋值了
sayHi('小红') // 结果为 小红
// 案例2
// 2. 求 1~100 累加和
// function getSum(end) { // end = 50
// // console.log(end)
// let sum = 0
// for (let i = 1; i <= end; i++) {
// sum += i
// }
// console.log(sum)
// }
// getSum(50) // 1~50
// getSum(100) // 1~100
function getSum(start, end) { // end = 50
// 形参 形式上的参数
// console.log(end)
let sum = 0
for (let i = start; i <= end; i++) {
sum += i
}
console.log(sum)
}
getSum(1, 50) // 调用的小括号里面 实参 - 实际的参数
getSum(100, 200) // 实参 - 实际的参数
// 案例3
// 声明（定义）一个计算任意两数字和的函数
// 形参 x 和 y 分别表示任意两个数字，它们是两个变量
function count(x, y) {
console.log(x + y);
}
// 调用函数，传入两个具体的数字做为实参
// 此时 10 赋值给了形参 x
// 此时 5 赋值给了形参 y
count(10, 5); // 结果为 15
// 案例4，实参可以是变量
// 求 n ~ m 的累加和
function getSum(n = 0, m = 0) {
let sum = 0
for (let i = n; i <= m; i++) {
sum += i
}
console.log(sum)
}
// getSum()
// getSum(1, 2)
let num1 = +prompt('请输入起始值:')
let num2 = +prompt('请输入结束值:')
// 调用函数
getSum(num1, num2) // 实参可以是变量
</script>
</body>函数传参-参数默认值
形参可以看做变量，如果变量不给值，默认是 undefined，例如
function getSum(x, y) { document.write(x + y) } getSum()
如用户不输入实参，函数运算两个参数相加，则出现 undefined + undefined 结果是 NaN
所以，我们可以预先给形参默认值程序更严谨
这个默认值只会在缺少 实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined
形参默认值赋值语法：
function getSum(x=6, y=6) {
document.write(x + y)
}
getSum() //结果为6+6=12
getSum(1，2) //结果为3语法格式案例
函数默认参数
<body>
<script>
// 函数求和
// function getSum(x = 0, y = 0) {
// // x = 1
// // num1 默认的值 undefined
// document.write(x + y)
// }
// getSum(1, 2)
// getSum() // 0
function getSum(start = 0, end = 0) { // end = 50
// 形参 形式上的参数
// console.log(end)
let sum = 0
for (let i = start; i <= end; i++) {
sum += i
}
console.log(sum)
}
getSum(1, 50) // 调用的小括号里面 实参 - 实际的参数
getSum(100, 200) // 实参 - 实际的参数
getSum()
</script>
</body>函数返回值
函数体内的逻辑执行完毕后，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值
有返回值函数的概念：
- 当函数被调用时，会返回一个结果
- 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
- return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
（函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写） - return函数可以没有 return，这种情况函数默认返回值为 undefined
函数返回值语法：
function getSum(x, y) {
return x + y
}
let num = getSum(10,30)
document.write(num)js底层内置的具备返回值的函数案例 let result = prompt("请输入") let result2 = parseInt("666")
js底层内置的没有返回值的函数案例 alert("我是弹框，没有返回值")
语法格式案例
函数返回值
<body>
<script>
// 定义求和函数
function count(a, b) {
let s = a + b
// s 即为 a + b 的结果
// 通过 return 将 s 传递到外部
return s
}
// 调用函数，如果一个函数有返回值
// 那么可将这个返回值赋值给外部的任意变量
let total = count(5, 12)
// 案例2
// 函数的返回值
function fn() {
return 20
}
// fn() 调用者 相当于执行了 fn() = 20
// return 的值返回给调用者
// console.log(fn())
// let num = prompt('请输入数字')
let re = fn()
console.log(re)
// 案例3
// 求和函数的写法
function getTotalPrice(x, y) {
return x + y
// return 后面的代码不会被执行
}
// console.log(getTotalPrice(1, 2))
// console.log(getTotalPrice(1, 2))
let sum = getTotalPrice(1, 2)
console.log(sum)
console.log(sum)
function fn() {
}
let re = fn()
console.log(re) // undefined
</script>
</body>语法格式案例
案例-求最大值函数
<body>
<script>
// 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, 5, 7, 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]
// return min
}
let newArr = getArrValue([11, 3, 55, 7, 29])
console.log(`数组的最大值是: ${newArr[0]}`)
console.log(`数组的最小值是: ${newArr[1]}`)
</script>
</body>函数作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突
补充
- 两个相同的函数后面的会覆盖前面的函数
- 在Javascript中 实参的个数和形参的个数可以不一致
- 如果形参过多 会自动填上undefined
- 如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
- 函数一旦碰到return就不会在往下执行了 函数的结束用return
全局作用域
- 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
- 处于全局作用域内的变量，称为全局变量
局部作用域
- 作用于函数内的代码环境，就是局部作用域
- 因为跟函数有关系，所以也称为函数作用域
- 处于局部作用域内的变量称为局部变量
特殊情况：
如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐 (局部变量或者块级变量 没有let 声明直接赋值的当全局变量看)
但是有一种情况，函数内部的形参可以看做是局部变量
变量的访问原则：
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 变量的访问原则：采取就近原则的方式来查找变量最终的值；在能够访问到的情况下 先局部， 局部没有在找全局
语法格式案例
函数作用域
<body>
<script>
// function getSum(x, y) {
// return x + y
// // 返回值返回给了谁？ 函数的调用者 getSum(1, 2)
// // getSum(1, 2) = 3
// }
// // let result = getSum(1, 2) = 3
// // let num = parseInt('12px')
// let result = getSum(1, 2)
// console.log(result)
// 1. 函数名相同， 后面覆盖前面
// function fn() {
// console.log(1)
// }
// function fn() {
// console.log(2)
// }
// fn()
// 2. 参数不匹配
function fn(a, b) {
console.log(a + b)
}
// (1). 实参多于形参 多余实参自动被忽略，不参与运算
// fn(1, 2, 3)
// (2). 实参少于形参 实参被自动补undefined
fn(1) // 1 + undefined = NaN
// 案例2 作用域
// 1. 全局变量
let num = 10
console.log(num)
function fn() {
console.log(num)
}
fn()
// 2. 局部变量
function fun() {
let str = 'pink'
}
console.log(str) // 错误
// 案例3 变量的特殊情况
// let num = 20
// function fn() {
// num = 10 // 全局变量来看 强烈不允许
// }
// fn()
// console.log(num)
// function fun(x, y) {
// // 形参可以看做是函数的局部变量
// console.log(x)
// }
// fun(1, 2)
// console.log(x) // 错误的
// let num = 10
function fn() {
// let num = 20
function fun() {
// let num = 30
console.log(num)
}
fun()
}
fn()
</script>
</body>匿名函数
函数可以分为具名函数和匿名函数
匿名函数：没有名字的函数，无法直接使用
具名函数：声明：function fn(){} 调用：fn()
匿名函数语法：
function(){}具名函数语法：
// 声明：
function fn(){}
// 调用：
fn()匿名函数的使用方式：
- 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用
- 立即执行函数: 避免全局变量之间的污染
匿名函数通过函数表达式使用，语法：
// 函数表达式
let fn = function(){
函数体
}
// 使用
fn() //函数名()
--------
// 其中函数的形参和实参使用跟具名函数一致
--------
// 声明
let fn = function() {
console.log('函数表达式')
}
// 调用
fn()立即执行函数的使用方式：
- 避免全局变量之间的污染
- 多个立即执行函数要用
;隔开，否则会报错
立即执行函数：无需调用，立即执行，本质已经调用了
立即执行函数的使用，语法：
// 方式1
(function (){ console.log(11) })
();
// 方式2
(function (){ console.log(11) } () );
--------------------------
// 不需要调用，立即执行
(function(){ xxx })();
(function(){xxxx}());语法格式案例
匿名函数-函数表达式
<body>
<script>
// console.log(num)
// let num = 10
// 3 + 4
// num = 10
// 1. 函数表达式
fn(1, 2) //错误
let fn = function (x, y) {
// console.log('我是函数表达式')
console.log(x + y)
}
// 函数表达式和 具名函数的不同 function fn() {}
// 1. 具名函数的调用可以写到任何位置
// 2. 函数表达式，必须先声明函数表达式，后调用
// function fun() {
// console.log(1)
// }
// fun()
</script>
</body>语法格式案例
匿名函数-立即执行函数
<body>
<script>
// let num = 10
// let num = 20
// (function () {
// console.log(11)
// })()
// (function () {
// let num = 10
// })();
// (function () {
// let num = 20
// })();
// 1. 第一种写法
(function (x, y) {
console.log(x + y)
let num = 10
let arr = []
})(1, 2);
// (function(){})();
// 2.第二种写法
// (function () { }());
(function (x, y) {
let arr = []
console.log(x + y)
}(1, 3));
// (function(){})()
// (function(){}())
</script>
</body>语法格式案例
附：综合案例
<body>
<script>
// age = age + 1
// 1. 用户输入
let second = +prompt('请输入秒数:')
// 2.封装函数
function getTime(t) {
// console.log(t) // 总的秒数
// 3. 转换
// 小时： h = parseInt(总秒数 / 60 / 60 % 24)
// 分钟： m = parseInt(总秒数 / 60 % 60)
// 秒数: s = parseInt(总秒数 % 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(second)
document.write(str)
console.log(h)
</script>
</body>逻辑中断
逻辑运算符里的短路
- 短路：只存在于 && 和 || 中，当满足一定条件会让右边代码不执行
| 符号 | 短路条件 |
|---|---|
&& | 左边为false就短路 |
| || | 左边为true就短路 |
- 原因：通过左边能得到整个式子的结果，因此没必要再判断右边
- 运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值
语法格式案例
逻辑中断-运算符短路
<body>
<script>
function fn(x, y) {
x = x || 0
y = y || 0
console.log(x + y)
}
fn(1, 2)
// fn()
// console.log(false && 22)
// console.log(false && 3 + 5)
// let age = 18
// console.log(false && age++) // age++ 不执行 一假则假
// console.log(age)
// console.log(true || age++)
// console.log(age)
// console.log(11 && 22) // 都是真，这返回最后一个真值
// console.log(11 || 22) // 输出第一个真值
</script>
</body>转换为布尔型boolean
显式转换： Boolean(内容)
记忆： ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 true
隐式转换：
- 有字符串的加法 “” + 1 ，结果是 “1”
- 减法 - （像大多数数学运算一样）只能用于数字，它会使空字符串 "" 转换为 0
- null 经过数字转换之后会变为 0
- undefined 经过数字转换之后会变为 NaN
语法格式案例
逻辑中断-类型转换
<body>
<script>
console.log(Boolean('pink'))
console.log(Boolean(''))
console.log(Boolean(0))
console.log(Boolean(90))
console.log(Boolean(-1))
console.log(Boolean(undefined))
console.log(Boolean(null))
console.log(Boolean(NaN))
console.log('--------------------------')
let age
if (age) {
console.log(11)
}
</script>
</body>练习
语法格式案例
练习
<body>
<script>
// function fn() {
// // return 20
// }
// let re = fn()
// console.log(re)
// 目标： 封装一个函数, 可以求任意数组的 和 或 平均值
//要求：
//- 函数可以传递2个参数，比如 handleData(arr, true) handleData 处理数据的意思
//- 参数一： 接受实参传递过来的数组
//- 参数二: 布尔类型 如果是true或者不传递参数 是求和操作， 如果传递过来的参数是 false 则是求平均值
function handleData(arr, flag = true) {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
// flag变量里面存的 布尔值
if (flag) {
// 求和
// 返回值
return sum
} else {
// 求平均值
return sum / arr.length
}
}
console.log(handleData([1, 2, 3, 4, 5], true))
console.log(handleData([1, 2, 3, 4, 5]))
console.log(handleData([1, 2, 3, 4, 5], false))
</script>
</body>