JS 函数的基本知识

news/2024/11/14 13:09:38/

1. 介绍函数

2. 使用函数

3. 函数传参

3.1 传递默认值

3.2 传递数组

3.3 传递变量

4. 函数返回值

5. 匿名函数

6. 立即执行函数

7. 注意

1. 介绍函数

在学习 CSS 样式过程中，经常有如下操作：

2. 使用函数

函数声明：

函数命名规范：

函数调用：

<!DOCTYPE html>
<html lang="ch—ZN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>函数基础</title>
</head>
<body><script>/* 函数的声明与调用 */function getHi (){document.write('Hi')}getHi () /* 两个数字的和 */function add(){let a = +prompt("请输入第一个数字：")let b = +prompt("请输入第二个数字：")alert(a+b)   }add ()/* 100以内的累加和 */function add100(){let sum = 0;for(let i = 1;i <= 100;i++){sum += i;}document.write(sum)}add100 ()</script>
</body>
</html>

3. 函数传参

前面所讲述的函数的功能是固定的，比较死板的。比如：函数的功能为求100以内的累加和，如果需要求1000以内的累加和，就需要重新写一个函数，这样是不好的。但是，我们可以声明一个求累加和的函数，不管求哪些范围的累加和，都不需要重新声明一个函数了。要想实现这样的函数，需要传参；

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>传参函数</title>
</head>
<body><script>/* 传参提高了函数的灵活性 */function addAay (a,b){let sum = 0 for(let i = a;i <= b;i++){sum += i}document.write(sum)}addAay(10,50)</script>
</body>
</html>

3.1 传递默认值

3.2 传递数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>数组传参</title>
</head>
<body><script>let array = [1,2,3,4,5,6,7,8,9,10]function addArray(arr = []){let sum = 0for(let i = 0;i < arr.length; i++){sum += arr[i]}document.write(sum)}addArray (array)</script>
</body>
</html>

3.3 传递变量

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>变量传递</title>
</head>
<body><script>/* 变量 */let a = +prompt("请输入第一个数字")let b = +prompt("请输入第二个数字")/* 声明函数 */function getAdd(num1 = 0,num2 = 0){let sum = 0for (let i = num1;i <= num2;i++){sum += i }alert(sum)}/* 调用函数 */getAdd(a,b)</script>
</body>
</html>