函数的使用 + 函数的表达式 +函数的返回值 + 函数中的细节 + 作用域 + 变量的特殊情况 + 立即执行函数 + 逻辑短路(逻辑中断)
函数:就是封装重复执行的代码块
- function 是声明函数的关键字 必须小写
- 函数命名一般为动词
- 函数声明必须调用否则不生效(调用要加小括号())
- 函数封装就是把 一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的接口 方便多处调用
- 在函数声明时,可以字函数名称后面的小括号里面添加一些参数 这些参数被称为形式上的参数
- 在函数调用时 同样需要传入相应的参数 被称为实参
- 形参:函数定义时设置接收调用时传入的实际参数值,类似一个变量
- 实参:函数调用时 传入小括号内的真实数据
- 参数的作用:函数内部某些值不固定 我们可以通过参数在调用函数时传递不同的值
- 函数参数的运用:
- 调用的时候实参值是传递给形参的
- 形参可以简单的理解为:不用声明的变量
- 实参和形参的多个参数
-
<script> // 2. 求 1~100 累加和 // 需求 让用户输入两个数 封装两个数的和 // 1.函数声明(形参) function getBoth(a, b) { let sum = 0; for (i = a; i <= b; i++) { sum += i; } console.log(sum); } // 2.函数调用(实参)//实参可以有多个(函数调用小括号里面的参数我们称之为实参=》实际的参数)======》
函数的的多次调用互不相干 getBoth(1, 100); getBoth(50, 200); // ===========多个实参 形参 </script>
函数中的默认参数
<script>
// 函数求和 给了形参(可以给默认参数为0(a=0,b=0))//可以让代码啊变得强壮 这样不会返回undefined
function getBoth1(start = 0, end = 0) {
// console.log(start, end);
let sum = 0;
for (i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
getBoth1(20, 50);
getBoth1(1, 10);
getBoth1(100, 200);
getBoth1(); //不给实参 给了形参 返回值时(undefined,undefined)=====》
优化(可以给默认参数为0(a=0,b=0))//可以让代码啊变得强壮 这样不会返回undefined
</script>
函数的实参可以是一个变量
<script>
// 求 n ~ m 的累加和 ====实参也可以是个变量
function getBothSum(start, end) {
let sum = 0;
for (i = start; i <= end; i++) {
sum += i;
}
console.log(sum);
}
let n = +prompt("请输入第一个数据"); //输入的值/是一个变量
let m = +prompt("请输入第二个数据"); //输入的值/是一个变量
getBothSum(1, 50); //给定的实参
getBothSum(10, 50); //给定的实参
getBothSum(n, m); //实参也可以是一个变量
getBothSum(n, m); //实参和形参一一对应打印正常
getBothSum(n, m, b); //实参个数多于形参个数====可以正常显示 多出来的实参不显示 不推荐
getBothSum(n); //实参个数少于形参个数 ===多出来的形参为undefined 返回结果为NaN
小结:
-
函数可以带参数也可以不带参数
-
声明函数的时候,函数名括号里面的是形参,形参的默认值为 undefined
-
调用函数的时候,函数名括号里面的是实参
-
多个参数中间用逗号分隔
-
</script>
函数的返回值
-
-
函数内部只能出现1 次 return,并且 return 下一行代码不会再被执行
-
return会立即结束当前函数,并返回指定的值
-
函数可以没有return,这种情况默认返回值为 undefined
<script>
/*
1.当函数需要返回数据出去时,用return关键字
2. 函数的返回值格式
function 函数名() {
return 需要返回的结果;
}
函数名();
(1) 我们函数只是实现某种功能,最终的结果需要返回给函数的调用者函数名() 通过return 实现的
(2) 只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名() = return后面的结果
(3)返回值多个的时候可以用数组包裹[返回值1, 返回值2]
*/
// 函数的返回值====把return后面的值给到调用者
// function getta(a, b) {
// return a + b;
// }
// let res = getta(1, 2);//函数调用者
// console.log(getta(1, 2));//3
// console.log(res);
// function getta() {
// return 777;
// }
// console.log(getta()); //相当于执行了getta()=777
// =========================
// 需求 求三数之和 并且return 出来了
function getSSum(a, b, c) {
return a + b + c; //6
}
let sum = getSSum(1, 2, 3); //执行了getSSum(1, 2, 3)=6
console.log(sum);
console.log(getSSum(1, 2, 3));
</script>
求函数最大值
<script>
// [1,5,7,8,99,100]返回最大值 数组的默认值给空 arr=[]
function getMax(arr = []) {
// arr=[1,5,7,8,99,100]
let max = arr[0];
let min = arr[0];
for (i = 0; i <= arr.length - 1; i++) {
// console.log(arr[i]);
max = max > arr[i] ? max : arr[i];
min = min < arr[i] ? min : arr[i];
}
// console.log(max);
return [max, min];//多个返回值中括号包裹[]
}
let res = getMax([1, 5, 7, 8, 99, 100]);
console.log(res);
let res1 = getMax([1, 5, 7, 8, 99, 100, 777]);
console.log(res1);
</script>
函数中的细节
<script>
// 1.在同一页面函数名相同会被覆盖
// 2.return 后面的不会被执行 ===return后面只能写一个值 如果写多个只会返回最后一个===========》 想返回多个值可以使用数组[]包裹,号隔开
function f2(a, b) {
return a + b, b - a; //写多返回值只会返回最后一个
// return [a + b, b - a];//会返回一个数组
}
let res = f2(1, 2);
console.log(res);
// 3.没有return或者return为空则没有返回值 打印调用者就是undefined
function f1() {
return;
}
console.log(f1()); //undefined
</script>
作用域
通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件
处于全局作用域内的变量,称为全局变量
2 .局部作用域
作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
处于局部作用域内的变量称为局部变量
3 .变量的特殊情况
在函数内部不声明 直接赋值(强烈不推荐)
形参可以看做是函数的局部变量
作用域链:内部函数访问变量,先在自身作用域找声明,如果没有,往外层找,直到找到全局,如果有,采取就近原则
推荐使用局部作用域 原因:函数作用域调用后就会被销毁(创建=》销毁的过程)可以提高性能节省内存空间
// 1. 全局变量声明在<script>中===全局有效(不声明直接赋值 在全局没有声明 则是全局变量声明) ====var可以提升作用域
let age = 10;
// 2.局部作用域作用于函数内部的代码环境====》因为跟函数有关也称为函数作用域=====只在局部有效
function fn() {
let age1 = 18;
}
fn();
if (true) {
// 3.块级作用域===只在块级中有效 let 声明的变量只在 let 命令所在的代码块 {} 内有效,在 {} 之外不能访问
let a = 10;
}
</script>
函数表达式/也称匿名函数
<script>
function fn() {
//只有命名函数/具名函数有声明提升
console.log(11);
}
fn();
// ================
let fun = function () {
console.log("函数表达式/匿名函数");
};
fun(); //调用一定写在式子下面 因为不具有函数声明的提升
</script>
立即执行函数
<script>
// 立即执行函数(防止变量污染)====避免命名冲突==>数据可视化时使用更方便===》
1.无需调用立即执行,本质上已经调用了
2.如果有多个立即执行函数必须加结束符英文;分号 !是隔断的效果和结束符的作用一样
// 第一种写法
(function () {
let num = 3;
let user = "张三";
console.log(999);
})();
(function () {
console.log(1999);
})();
// 第二种写法
(function () {
console.log("第二种");
})();
</script>
函数可以分为具名函数(命名函数)和匿名函数
短路运算(逻辑中断)
-
逻辑与&& (只要碰到了假值(false),就会短路,并返回该假值, 只要短路,不会继续执行后面的表达式。)(逻辑与一假则假)
-
<script>
// 布尔类型返回值为true false
// 除了0 '' null NaN undefined false 只有 这些为false
// console.log(Boolean("123"));
// console.log(Boolean("0"));
// console.log(Boolean("false"));
// console.log(Boolean(false));
// console.log(Boolean(0));
// console.log(Boolean(null));
// console.log(Boolean(NaN));
// 需求 :封装函数 求用户输入的一个数 判断是否是一个质数 如果是返回一个质数
function getNum(a) {
if (a === 1) {
return "不是质数";
}
let flag = "质数";
for (let i = 2; i < a; i++) {
if (a % i === 0) {
flag = "不是质数";
}
}
return flag;
}
let num = parseInt(+prompt("请输入一个数字"));
let res = getNum(num);
console.log(res);
</script>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现