JS基础[四]

koyoki

已于 2023-07-14 17:30:39 修改

阅读量90

点赞数 2

于 2023-03-31 14:58:58 首次发布

本文链接：https://blog.csdn.net/qq_33696722/article/details/129858972

版权

本文介绍了JavaScript中的函数概念，包括定义、调用、参数和返回值。讨论了作用域，强调了全局和局部作用域的区别，以及作用域链的工作原理。此外，还提到了断点调试的基本操作。最后，提供了一个将秒数转换为时分秒的示例函数。

摘要由CSDN通过智能技术生成

一.函数

函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数的封装：将需要重复执行的代码单独写成一个函数，然后再在需要执行该代码的位置调用该函数，实现一套代码的复用。可以使代码更加精简，复用代码可以提高代码编写效率。
函数语法：function 函数名(参数, 参数...) { 执行代码 }；
函数命名规范：
1. 和变量名基本一致；
2. 一般使用小驼峰命名；
调用函数语法：函数名();
sort()、pop()、alert()......都是函数。

// 函数简单示例
function hellow() {
console.log('hellow');
};
hellow(); // 输出：hellow

函数传参
1. 实参：在调用函数的小括号(参数1, 参数2)内传参数。
2. 形参：在声明函数的小括号(参数1, 参数2)内接收参数。
3. 形参和实参尽量保持数量一致。
4. 在函数内部，{}花括号内使用参数。
5. 传给函数的参数作用域只在该函数的{}内。
6. 多个参数用,逗号隔开。
7. 函数参数可以传任何数据类型。
8. 函数参数可以是变量或常量或值。
9. 调用时传几个参数，声明函数就写几个接收参数。
10. ```
let name = prompt("请输入姓名：");
let job = prompt("请输入职业：");
// 声明函数接收参数 形参value1 value2
function newFunction(value1, value2) {
    console.log(`${value1}的职业是${value2}`);
}
// 调用函数传参 实参name job
newFunction(name, job);
// 弹框输入：张三 前端
// console输出：张三的职业是前端。 
```
函数参数的默认值
1. 形参没有默认值也没有实参时，默认为undefined。
2. 没有实参时，为了防止程序报错，可以给形参一个默认值。
3. 默认值写法：赋值号设置默认值。function 函数名(a=1, b=2){};
4. 有实参时，不使用默认值，没有实参时，使用默认值。
5. ```
function sum(a=1, b=1) {
    console.log(a+b);
}
sum(); // 输出：2
sum(5, 6); // 输出：11
sum(5); // 输出：6
```
函数的返回值
1. 函数返回值：调用函数后，函数会返回一个结果给调用者，所以如果要接收返回值，需要有一个接收结果的“容器”。
2. 例如：调用pop()会返回一个被删除的数组元素。
3. 语法：return 返回的数据;
4. ```
function fun() {
     return '哈哈';
}
let a = fun();
console.log(a); // 输出：哈哈

function fun1(a, b) {
     return a + b;
}
a = fun1(5,15);
console.log(a); // 输出：20
```
5. 说明：
  1. 函数体内使用return关键字将函数内部计算结果返回给函数外部使用。
  2. return后面的代码不会再执行，会立即结束当前的函数，是结束函数关键字，所以return的数据不可以换行写。
  3. return后面可以没有数据，函数也可以没有return，调用者接收的值则会是undefined。
6. 因为return只能返回一个数据，所以返回多个值时，可以使用数组或者对象的方式来返回。
7. ```
function fun() {
const a = "今天的天气是";
const b = "晴天";
return [a, b];
}
let val = fun();
console.log(val[0] + val[1]); // 输出：今天的天气是晴天

function fun1() {
const a = "今天的天气是";
const b = "晴天";
return {a:a, b:b};
}
val = fun1();
console.log(val.a + val.b); // 输出：今天的天气是晴天
```
补充说明：
1. 实参和形参的个数可以不一致，形参过多则多余的形参值为undefined，实参过多会忽略多余的参数。
2. ```
function fun (a, b, c) {
 console.log(`${a}----${b}----${c}`); // 输出：1----2----undefined
}
fun(1,2);

function fun1 (a, b) {
 console.log(`${a}----${b}`); // 输出：1----2
}
fun1(1,2,3,4,5);
```
3. 如果存在两个相同的函数，则后面的会覆盖前面的。
结束函数使用return。
break和return的区别：break结束的是循环，return结束的是函数。
具名函数和匿名函数
1. 具名函数：有函数名，可以直接调用，function funName() {};
  1. 具名函数与变量不同，let的变量必须是先声明后使用，而已声明的函数的调用位置，可以是任意位置，也就是说可以写在声明前调用，也可以写在声明后调用，都正常生效。
  2. ```
  fun(); // 输出：哈哈
  fucntion fun() {
      console.log("哈哈");
  }
  fun(); // 输出：哈哈
```
2. 匿名函数：没有函数名，不能直接调用，function() {};
  1. 函数表达式：将匿名函数赋值给一个变量，并通过变量名进行调用。
    1. ```
    let fun = function() {
        console.log("哈哈");
    }
    console.log(fun);
    // 输出的是一个函数：
    // ƒ () {
    //  console.log("哈哈");
    // }
    fun(); // 输出执行函数后的结果：哈哈
```
2. 因为是使用变量接收函数，所以函数表达式必须先声明，后使用。
3. 形参和实参的使用方式一致。
2. 立即执行函数：避免作用域污染，会立即执行。
  1. 写法1：(function(){ })();
    1. 其中(function(){})相当于声明函数，后面的()小括号相当于调用函数。
    2. 形参写在function()内，实参写在(value)内。
    3. (function(){ console.log("哈哈"); })(); // 输出：哈哈 (function(a, b){ console.log(a+b); })(3,5); // 输出：8
  2. 写法2：(function(){ }());
    1. 其中function(){}相当于声明函数，()小括号相当于调用函数。
    2. 形参写在function()内，实参写在(value)内。
    3. 可以写函数名，也可以不写。(function fun(){ }());
    4. (function(){ console.log("哈哈"); }()); // 输出：哈哈 (function(a, b){ console.log(a+b); }(3,5)); // 输出：8
  3. 多个立即执行函数必须用;分号隔开。

二.断点调试

断点调试：F12-sources进入断点调试，调试时，F10执行下一步，F11进入调用函数的函数内部，F9跳到下一断点，F8关闭断点。

三.作用域

js中的变量、对象、函数都是有可访问范围的，其中可访问对应变量、对象、函数的可用性代码范围叫做作用域，超出访问范围的部分访问则会提示错误。
优点：提高程序逻辑局部性，增强程序可靠性，减少代码和名字的冲突。
全局作用域：全局可访问，作用于整个js代码中(js文件或js标签)，在哪里访问都可以访问到。
1. 全局变量
2. 注意：如果在函数内部有一个没声明的且直接赋值的变量，会被当成全局变量。
3. ```
// 全局变量
let name = '张三';
function fun () {
    console.log(name); // 输出：张三
}
fun();
console.log(name); // 输出：张三
```
局部作用域(函数作用域)：局部有效，作用于某一函数内，超出该函数访问该变量则会报错。
1. 局部变量
2. 函数的形参也属于是局部变量，在函数外部不能访问。除非使用return返回到外部。
3. ```
function fun() {
    let name = '张三';
}
fun();
console.log(name); // 超出作用域，访问不到，报错
```

嵌套函数声明相同变量名的作用域

优先使用和调用变量者的作用域最相近的变量，如果找不到，最后使用全局变量。局部优先于全局。
作用域链：采取就近原则的方式来查找变量值。

let a = 1;
function fun1() {
    let a = 2;
    function fun2() {
        let a = 3;
        console.log(a); // 输出：3
    }
    fun2();
    console.log(a); // 输出：2
}
fun1();
console.log(a); // 输出：1

let a = 1;
function fun1() {
    let a = 2;
    function fun2() {
        console.log(a); // 输出：2
    }
    fun2();
    console.log(a); // 输出：2
}
fun1();
console.log(a); // 输出：1

四.输入秒数转换时分秒

let num = +prompt('请输入秒数：'); // 输入：3662
function fun() {
	let h = 0;
	let m = 0;
	let s = 0;
	h = parseInt(num / 60 / 60);
	m = parseInt(num / 60 % 60);
	s = parseInt(num % 60);
	h = h < 10 ? '0'+h : h;
	m = m < 10 ? '0'+m : m;
	s = s < 10 ? '0'+s : s;
	console.log(`${h}小时${m}分钟${s}秒`);
}; 
fun(); // 输出：01小时01分钟02秒

仅作为个人学习用，如有错误，还请指正。