JavaScript （06） 基础
函数
- function ， 是被设计为执行特定任务的代码块
函数的使用
- 函数的声明语法
- 函数命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
<script>
//function 函数名（）{
// 函数体
// }
//函数的声明
function getHllo(){
console.log('你好');
console.log('你真好');
console.log('你真真好');
}
//函数调用
// 函数一次声明可以多次调用 ，每一次函数调用函数体里面的代码会重新执行一次
getHllo()
getHllo()
getHllo()
</script>
函数案例
- 把99乘法表封装到函数里面 ，重复调用3次
<script>
function getNum(){
for (let index = 0; index < 9;index++){
for(let index1 = 1;index1 < index ; index++){
document.write(`${index1} x ${index} = ${index1 * index}`)
}
document.write(`<br/>`)
}
}
getNum()
getNum()
getNum()
</script>
函数传参
- 函数完成功能需要调用者传入数据 ，那么就需要用参数的函数
- 这样可以极大提高函数的灵活性
<script>
//函数声明
//函数声明时，小括号里面的是形参 ，形式上的参数
function getNum(num1,num2) {
document.write(num1 + num2)
}
//函数调用时 ，小括号里面的是实参 ，实际的参数
// 参数之间要用逗号隔开
getNum(300,500)
</script>
形参和实参
- 形参 ：声明函数时写在函数名右边小括号里的叫形参
- 实参 ：调用函数时写在函数名右边小括号里的叫实参
- 形参可以理解为是在这个函数内声明的变量（比如 num1=10）实参可以理解为是给这个变量赋值
- 开发中 尽量保持形参和实参个数一致
案例
计算总分案例
-
需求：学生的分数是一个数组,计算每个学生的总分
①： 封装一个求和函数
②： 传递过去的参数是一个数组
③： 函数内部遍历数组求和
<script>
let arr1 = [99,100,60,85,98,65,66]
let arr2 = [45,65,44,88,55,254,66]
function getNnm(arr){
let num = arr[0]
for (let index = 0; index < arr.length; index++) {
num +=arr[index]
}
console.log(num);
}
getNnm(arr1)
getNnm(arr2)
</script>
2.找到数组里面的奇数求和
<script>
let arr1=[4,52,63,5,5,5,455,5456,45,54,]
let arr2 = 0
function getNum(arr) {
for (let index = 0; index < arr.length; index++) {
if (arr[index]%2 !==0) {
arr2 +=arr1[index]
}
}
console.log(arr2);
}
getNum(arr1)
</script>
函数的返回值
-
用return 返回数据
-
当函数需要返回数据出去时 ，用return关键字
-
语法
-
<script>
// 函数 参数的最大值
function getMax(n1, n2) {
if (n1 > n2) {
return n1;
} else {
return n2;
}
}
// 通过 console.log 帮我打印
// let num1 = getMax(1, 3);
// console.log(num1);
// let num1 = getMax(1, 3);
console.log(getMax(1, 3));
// 通过 document.write 帮我打印
// let num2 = getMax(2, 4);
document.write(getMax(2, 4));
// 通过 alert 帮我打印
// let num3 = getMax(6, 8);
alert(getMax(6, 8));
</script>
- 不能同时执行多次return 第一个return生效
- 函数内部 如果写了return ，那么它下面的代码就不会执行
- 如果一个函数 没有写return 相当于 写了 return undefined
案例
- 声明一个函数 用来计算 数组的最大值 并且 最大值 返回
<script>
let arr1 =[12,55,454,21,5456,12132,26]
let max = arr1[0]
function getNum(arr) {
for (let index = 0; index < arr.length; index++) {
if (arr[index] > max) {
max =arr[index]
}
}
console.log(max);
}
getNum(arr1)
</script>
作用域
-
作用域概述
- 一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字作用域。作用域的使用提高了程序逻辑的局部性 ，增强了程序的可靠性，减少了名字冲突
-
全局作用域
- 作用于所有代码执行的环境（整个 script 标签内部）或者一个独立的 js文件
-
局部作用域
- 作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。
-
块级作用域
- 块作用域由{} 包括 ， if 语句 和 for 语句里面的 {} 等
<script>
// script标签内的运行环境就是全局作用域
let num = 100; // 全局作用域
function getMax() {
// 这个区域内就不属于全局作用域
// 局部作用域 或者 也叫做 函数作用域
let num2 = 200;
}
for (let index = 0; index < 4; index++) {
// 块级作用域
}
while (true) {
// 块级作用域
}
if (true) {
// 块级作用域
}
</script>
- 全局变量
- 全局变量在变量定义之后区域 可以访问和修改
- 函数外部的let的变量
<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>
- 局部变量
- 函数内部let 变量
- 局部变量只能在当前函数内部反问和修改
<script>
// 局部变量
// 如果是在函数内部定义的变量 就叫做局部变量
// 局部变量 不能在 它的大括号之外使用的，否则就会报错！！
let msg = 10000; // 全局变量
// 局部变量 函数内部 声明的变量
function getMax() {
// 声明一个数字
let num = 200; // 局部变量
}
// 局部变量 不能在 超出它的大括号来使用
console.log(num); // 会报错
</script>
- 块级变量
- {} 内部的let变量
- let定义的变量 ，只能在块作用域里访问 ，不能跨块访问，也不能跨函数访问
<script>
// 块级变量 就是我们在块级作用域内 定义的变量
// 块级变量 类似局部变量，也是超出了自身的大括号 不能使用
for (let index = 0; index < 2; index++) {
// num 块级变量
let num = 100;
}
console.log(num);// 使用块级变量 出错！！
{
let num =10;
}
{
console.log(num);
}
</script>
小结
- 全局变量
- 直接放在 script 标签内的变量
- 局部变量 用大括号包起来的变量
- 函数内部变量
- 块级变量
匿名函数
- 函数按照有没有名字 分两种
- 有名字 具名函数
- 没有名字 匿名函数
<script>
// 具名函数 函数名称 func1
// function func1() {
// }
// 匿名函数 = function () {}; 匿名函数 了解即可
// let func2 = function () {}; 叫做 函数表达式
// 表达式 可以表示结果的一段代码 函数表达式 了解
let func2 = function () {
console.log("123");
};
// 调用
func2();
</script>
- 自执行函数
- 自执行函数 = 匿名函数一起出现 通用的功能是 防止变量污染
- 函数在定义的同时 就直接执行了
<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>
