函数
基础知识
函数使用
代码演示：
<body>
<script>
// 1 函数的声明
function sayHi() {
console.log('你好');
console.log('你真好');
console.log('你真TM好');
}
// 2 函数调用
// sayHi();
// sayHi();
// sayHi();
</script>
</body>
案例：
九九乘法表函数调用
<style>
span {
border: 1px solid #000;
padding: 10px 0;
width: 100px;
text-align: center;
display: inline-block;
}
</style>
</head>
<body>
<script>
// 1 声明函数 - 输出 99乘法表
function calcNum() {
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/>');
}
}
// 2 调用函数
calcNum();
calcNum();
calcNum();
</script>
</body>
函数封装：
函数不调用不会执行
<body>
<script>
function calcSum1() {
let a = 100;
let b = 1;
console.log(a + b);
}
function calcSum3() {
let a = 3;
let b = 2;
console.log(a + b);
}
function calcSum2() {
let sum = 0;
for (let index = 1; index <= 100; index++) {
sum += index;
}
console.log(sum);
}
function calcSum3() {
let sum = 0;
for (let index = 1; index <= 50; index++) {
sum += index;
}
console.log(sum);
}
calcSum1();
calcSum2();
// console.log();
// document.write()
// alert(789);
</script>
</body>
函数传参
传参和实参
函数参数：
<body>
<script>
// 声明函数
function getSum(num1, num2) {
// num1 = 100
// num2 = undefined
console.log(num2);
document.write(num1 + num2);
// 100 + undefined
}
// function getSum(a, b) {
// document.write(a + b);
// }
// getSum(10, 20);
// getSum(100, 200);
</script>
</body>
案例
算总分
代码演示：
<body>
<script>
// 函数的声明
function calcSum(arr) {
let sum = 0;
for (let index = 0; index < arr.length; index++) {
sum += arr[index];
}
console.log(sum);
}
let arr1 = [1, 3, 4, 2, 22];
let arr2 = [3, 2, 22, 41, 3];
calcSum(arr1);
calcSum(arr2);
</script>
</body>
函数和参数：
<body>
<script>
function calcSum(a) {
// 默认a就是一个数组 =[1,2,3] [4,5,6]
let sum = 0;
for (let index = 0; index < a.length; index++) {
sum += a[index];
}
console.log(sum);
}
// 实参和形参有几个
// 函数调用的时候，括号里面有几个数据 就是几个参数
calcSum([1, 2, 3, 4]);
calcSum([1, 33, 23, 43]);
</script>
</body>
计算最大值：
<body>
<script>
function getMax(a) {
// a 就是一个数组
// let arr = [1, 3, 2, 2, 4, 5];
let max = a[0];
for (let index = 0; index < a.length; index++) {
if (a[index] > max) {
max = a[index];
}
}
console.log(max);
}
getMax([1, 3, 11, 1234]); // 1234
getMax([3, 1, 3, 2, 11]); // 11
</script>
</body>
计算数组中的奇数和：
<body>
<script>
// 如何重复写函数的 ？
let arr = [1, 3, 4, 1, 22, 3, 4, 5];
function getSum(arr) {
let sum = 0;
for (let index = 0; index < arr.length; index++) {
// 找到奇数
if (arr[index] % 2 !== 0) {
// 奇数
sum += arr[index];
}
}
console.log(sum);
}
getSum(arr); // 数组中 奇数的总和 1 3 7 9 ... +
</script>
</body>
拓展：
<body>
<script>
function isFloat(num) {
if (num.toString().includes(".")) {
console.log(num, 'num就是小数');
} else {
console.log(num, 'num是整数');
}
}
isFloat(11);
isFloat(11.1);
isFloat(11.3);
isFloat(15);
</script>
</body>
算两个数中的最大值：
<body>
<script>
let num1 = 300;
let num2 = 300;
function getMax(n1, n2) {
if (n1 > n2) {
console.log('最大的是' + n1);
} else {
console.log('最大的是' + n2);
}
}
getMax(num1, num2); // 输出 两个参数中 比较大的那一个值
</script>
</body>
函数的返回值：
代码演示：
<body>
<script>
function getMax() {
return 300;
}
let num1 = getMax();
console.log(num1);
</script>
</body>
案例：
1
<body>
<script>
function getMax(n1, n2) {
if (n1 > n2) {
return n1;
} else {
return n2;
}
}
console.log(getMax(1, 3));
document.write(getMax(2, 4));
alert(getMax(6, 8));
</script>
</body>
2
计算最大值、最小值
<body>
<script>
let arr1 = [1, 3, 4, 33, 22];
// 声明一个函数 用来计算数组的最大值 并且 最大值 返回
function getMax(arr) {
let max = arr[0];
for (let index = 0; index < arr.length; index++) {
if (arr[index] > max) {
max = arr[index];
}
}
return max;
}
let max = getMax(arr1);
console.log(max); // max 该数组的最大值 ！
// 声明一个函数 用来计算数组的最小值
function getMin(arr) {
let min = arr[0];
for (let index = 0; index < arr.length; index++) {
if (arr[index] < min) {
min = arr[index];
}
}
return min;
}
let min = getMin(arr1);
console.log(min); // min 输出数组的最小智
</script>
</body>
补充：
1 不能同时执行多次return 第一个return生效
2 函数内部 如果写了return，那么它下面的代码就不会执行
3 如果一个函数 没有写return 相当于写了 return undefined
代码演示：
<body>
<script>
function getMax() {
return undefined;
}
let num = getMax();
console.log(num);
</script>
</body>
作用域：
全局变量
代码演示：
<body>
<script>
// 直接写在全局作用域下的变量 = 全局变量 在任意的地方来访问
let num = 100; // 全局变量 在任何地方都可以访问
function getMax() {
console.log('函数 访问全局变量', num);
}
getMax();
for (let index = 0; index < 2; index++) {
console.log('for循环内 块级作用域 访问全局变量', num);
}
if(true){
console.log("if语句 也 可以访问全局变量",num);
}
</script>
</body>
局部变量：
局部变量不能在它的大括号之外使用
<body>
<script>
let msg = 10000; // 全局变量
// 局部变量 函数内部 声明的变量
function getMax() {
// 声明一个数字
let num = 200; // 局部变量
}
// 局部变量 不能在 超出它的大括号来使用
console.log(num); // 会报错
</script>
</body>
块级变量：
块级变量 就是我们在块级作用域内 定义的变量
块级变量 类似局部变量，也是超出了自身的大括号 不能使用
代码演示：
<body>
<script>
// for (let index = 0; index < 2; index++) {
// // num 块级变量
// let num = 100;
// }
// console.log(num);// 使用块级变量 出错！！
// {
// let num =10;
// }
// {
// console.log(num);
// }
</script>
</body>
全局作用域
script标签内的运行环境就是全局作用域
==========================================
全局变量在任何地方都可以访问（直接放在 script标签内）
=============================================
局部变量
如果是在函数内部定义的变量 就叫做局部变量
局部变量 不能在它的大括号之外使用的，否则就会报错！！
============================================
块级变量
就是我们在块级作用域内 定义的变量
块级变量 类似局部变量，也是超出了自身的大括号 不能使用
变量的使用
在同一个作用域内 声明两同样的变量 就会出错
就近原则：（判断是要根据 函数的定义 来判断 而不是函数的调用）
寻找变量的时候，优先找自己的作用域
================================================
作用域链
测试1：
判断是要根据 函数的定义 来判断 而不是函数的调用
测试2：
从函数的定义出发 依据 就近原则 来寻找变量即可
输出200
函数嵌套调用
代码：
输出123
全局变量
定义一个变量 没有使用 let 关键字 那么它就是一个全局变量
建议：变量都应该加let
补充
匿名函数
自执行函数
作用：防止变量污染
定义：函数在定义的同时 直接就执行了
合适做一次性的任务 不希望这个函数可以得到服用
函数包装多段代码 让程序比较简洁
1 页面打开的时候
1 设置页面的标题
2 设置 页面的背景颜色
