函数
function（关键字），是被设计为执行特定任务的代码块
说明：
函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势是有利于精简代码方便复用。
函数使用
函数声明
/*
function 函数名() {
函数体
}
*/
function getName() {
document.write(`艾弗森<br/>`)
}
函数命名规范
-
和变量命名基本一致
-
尽量小驼峰式命名法
-
前缀应该为动词
-
命名建议：常用动词约定
函数调用
语法
//函数名()
案例
function getName() {
document.write(`艾弗森<br/>`)
}
//函数的调用
getName()
函数体
函数体是函数的构成部分，它负责将相同或相似代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中
封装九九乘法表案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
span {
border: 1px solid #000;
padding: 10px 0;
width: 100px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<script>
function getNum() {
for (let index = 1; index <= 9; index++) {
for (let index1 = 1; index1 <= index; index1++) {
let num = index1 * index;
document.write(`<span> ${index1} * ${index} = ${num} </span>`);
}
document.write('<br/>');
}
}
getNum();
</script>
</body>
</html>
函数传参
声明语法
// function 函数名(参数列表) {
// 函数体
// }
参数列表
-
传入数据列表
-
声明这个函数需要传入几个数据
-
多个数据用逗号隔开
单个参数
function getNum(num1) {
num = num1 * num1;
document.write(num);
}
多个参数
function getNum(num1, num2) {
num = num1 * num2
document.write(num);
}
调用函数
调用函数时，需要传入几个数据就写几个，用逗号隔开。
语法
//函数名(参数列表)
案例
function getNum(num1, num2) {
num = num1 * num2
document.write(num);
}
//函数名(参数列表)
getNum(8, 9)
形参和实参
-
形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
-
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
-
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
-
开发中尽量保持形参和实参个数一致
-
我们曾经使用过的 alert('打印'), parseInt('11'), Number('11') 本质上都是函数调用的传参
注意
| 参数个数 | 说明 |
|---|---|
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数大于形参个数 | 只取到形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为undefined，结果为NaN |
function getSum(num1, num2) {
console.log(num1 + num2);
}
//1.如果实参的个数和形参的个数一致 则正常输出结果
getSum(1, 2);
//2.如果是惨的个数多于形参的个数 会取到形参的个数
getSum(1, 2, 3);
//3.如果实参的个数小于形参的个数 多余的形参定义为undefined 最终的结果解释NaN
//形参可以看做是不用声明的变量 num2是一个变量但是没有接受值 结果就是undefined
getSum(1); //NaN
//尽量让实参的个数和形参相匹配
函数封装-求学生总分
function getNum(num) {
let score = 0;
for (let i = 0; i < num.length; i++) {
score += num[i]
}
console.log(score);
}
let num1 = [60, 70, 80, 90];
getNum(num1)
函数返回值
return返回数据
//函数的返回值格式
// function 函数名() {
// return 需要返回的结果;
// }
//函数名();
//a.我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return实现的
//b.只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果
//代码验证
function getResult() {
return 666;
}
getResult(); //getResult()=666
console.log(getResult());
细节：
-
在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
-
函数内部只能出现 1 次 return，并且 return 后面代码不会再被执行，所以 return 后面的数据不要换行写 。
-
return会立即结束当前函数
-
函数可以没有 return，这种情况函数默认返回值为 undefined
求最大值并返回这个最大值案例
function getMax(arr) {
let arr2 = arr[0]
for (let i = 0; i < arr.length; i++) {
if (arr2 < arr[i]) {
arr2 = arr[i]
}
}
return arr2
}
let arr1 = [1, 30, 40, 60, 60, 77, 54]
console.log(getMax(arr1));
作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这 个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
变量的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>18-作用域的简单演示.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
// script标签内的运行环境就是全局作用域
let num = 100; // 全局作用域
function getMax() {
// 这个区域内就不属于全局作用域
// 局部作用域 或者 也叫做 函数作用域
let num2 = 200;
}
// 块级作用域
for (let index = 0; index < 4; index++) {
}
// 块级作用域
while (true) {
}
// 块级作用域
if (true) {
}
</script>
</body>
</html>
从执行效率来看全局变量和局部变量
(1)全局变量：只有浏览器关闭的时候才会销毁，比较占内存资源
(2)局部变量：当我们程序执行完毕就会销毁，比较节约内存资源
特殊情况：
如果函数内部或者块级作用域内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐。
但是有一种情况，函数内部的形参可以看做是局部变量。
作用域链
采取就近原则的方式来查找变量最终的值
-
只要是代码，就至少有一个作用域
-
写在函数内部的局部作用域
-
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
-
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链
// let num = 100;
// function func1() {
// let num = 200;
// fun2();
// }
// function fun2() {
// let num = 300;
// console.log(num); // 300
// }
// func1();
// 判断当前变量 输出是什么
// 就近原则 判断是要根据 函数的定义 来判断 而不是函数的调用
// 函数的定义 代码位置来判断 100 这个！！
匿名函数
将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式
自执行函数
就是一次性函数，写法就是两个括号，然后再第一个括号把匿名函数丢进去，写法如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>31-自执行函数-了解.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<script>
/*
自执行函数 = 匿名函数一起出现 通用的功能是 防止变量污染
函数在定义的同时 直接就执行了
用在哪里呢
适合做一次性的任务- 不希望这个函数可以得到复用！！！
函数包装多段代码 让程序比较简洁
1 页面打开时候
1 设置 页面的标题 = 月薪过万
2 设置 页面的背景颜色 = 黄色
*/
// 匿名函数
// function () {
// // 设置 页面的标题 = 月薪过万
// document.title = '月薪过万';
// // 设置 页面的背景颜色 = 黄色
// document.body.style.backgroundColor = 'yellow';
// }
// let msg = 123;
// // 自执行函数
// (function () {
// let msg = 123;
// // 设置 页面的标题 = 月薪过万
// document.title = '月薪过万';
// // 设置 页面的背景颜色 = 黄色
// document.body.style.backgroundColor = 'yellow';
// })();
// console.log(msg);
</script>
</body>
</html>
补充（函数分类）：
