JS 函数的基本知识

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>