JavaScript中的函数
一、函数基础知识
1.为什么要有函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 函数: 封装一段重复的代码, 只需要声明一次, 多次使用
// 重复代码, 冗余代码, 垃圾代码
// 1. 请对以下数组进行排序
var arr = [1, 3, 5, 7, 9];
for(var j = 0; j < arr.length - 1; j++) {
// 假设都排好序了
var flag = true;
for(var i = 0; i < arr.length - 1 - j; i++) {
if (arr[i] < arr[i+1]) {
var temp = arr[i];
arr[i] = arr[i+1];
arr[i+1] = temp;
// 打脸了
flag = false;
}
}
// 假设成立
if (flag) {
break;
}
}
console.log(arr);
// 2. 又来了一个数组
var arr2 = [2,4,6,8,10,1,2];
for(var j = 0; j < arr2.length - 1; j++) {
// 假设都排好序了
var flag = true;
for(var i = 0; i < arr2.length - 1 - j; i++) {
if (arr2[i] < arr2[i+1]) {
var temp = arr2[i];
arr2[i] = arr2[i+1];
arr2[i+1] = temp;
// 打脸了
flag = false;
}
}
// 假设成立
if (flag) {
break;
}
}
console.log(arr2);
</script>
</body>
</html>
2.函数的声明与调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 函数分为 : 声明一个函数 调用一个函数
// 如何声明一个函数?
// function 函数名() {
// }
// 变量名:一般都是名词,,,,,name age
// 1. 函数名: 一般都是动词+名词 函数封装一段代码,表示的做一件事情
// 2. 函数声明的时候不会执行
// 函数调用才会执行
// 函数名()
function tellStory() {
console.log('从前有座山');
console.log('山里有座庙');
console.log('庙里有个老和尚');
console.log('老和尚对女和尚说');
}
// 调用了函数
tellStory();
// 函数可以调用多次
tellStory();
tellStory();
/*
声明
function 函数名() {
函数体(重复的代码)
}
1. 函数声明不执行,只有调用才会执行
2. 函数名通常 动词+名词 表示函数做一件事情
调用
函数名();
1. 函数只有在调用的时候才会执行
2. 函数可以调用多次。
*/
</script>
</body>
</html>
3.函数的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 封装一个打招呼的函数
function sayHi() {
console.log('hello');
console.log('萨瓦迪卡');
console.log('扩尼奇瓦');
console.log('阿尼阿斯有');
console.log('吃了没');
}
sayHi();
// sayHi 是啥????
// sayHi () 表示调用了 sayHi这个函数
// console.log(sayHi);
// 2. 封装一个函数,计算两个数的和
function add() {
var num1 = 11;
var num2 = 22;
console.log(num1 + num2);
}
add();
add();
// 3. 封装一个函数,计算1-100之间所有数的和
function getSum() {
var sum = 0;
for(var i = 1; i <= 100; i++) {
sum += i;
}
console.log(sum);
}
getSum();
getSum();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 计算两个数的和
// num1 和 num2 就叫做函数的参数
// 函数的参数,分为形参 实参
// 形参: 函数声明的时候,可以定义形参。 如果发现某个值不确定
// 形参类似于变量, 形参不是具体的值, 形式参数
// 形参只能在函数中使用
// 形参是没有具体的值和具体的类型的
// 形参: 形式参数,没有具体的值, 形参的作用:占位置
// 函数声明的时候,参数,形参,形参只有在函数调用的时候,才会有具体的值
function add(num1, num2) {
console.log(num1 + num2);
}
// 可以计算任意两个数的和
// 10 + 20
// 实参: 实际参数
// 在函数调用的时候传递的参数
// 实参是具体的值,
// 函数调用的时候,实参的值会赋值给形参。
// 实参: 实际参数,函数调用的时候传递的参数就叫实参。
// 实参的作用:在函数的调用的时候,把值给形参。
add(10, 20);
// 20, 30
add(20, 30);
add(100, 200);
// 声明函数的语法
// function 函数的名字(形参1, 形参2...) {
// 函数体
// }
// 调用函数的语法
// 函数名(实参1, 实参2...)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 计算1-n之间所有数的和
function getSum(n) {
var sum = 0;
for(var i = 1; i <= n; i++) {
sum += i;
}
console.log(sum);
}
getSum(5);
getSum(100);
// 2. 计算两个数的和
function add(n1, n2) {
console.log(n1 + n2)
}
add(1, 2);
add(2, 5);
// 3. 计算m-n之间所有数的积 1-5 10-20
function getProduct(n1, n2) {
var product = 1;
for (var i = n1; i <= n2; i++) {
product *= i;
}
console.log(product);
}
getProduct(8, 5);
// getProduct(5, 8);
</script>
</body>
</html>
4.函数的返回值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// function add(n1, n2) {
// console.log(n1 + n2);
// }
// 为什么需要返回值: 因为函数做一件事情,函数都是结果,
// 如果想要获取到这个结果,需要函数使用return把这个结果返回出来。
function getSum(n) {
var sum = 0;
for(var i = 1; i <= n; i++) {
sum += i;
}
// console.log(sum);
return sum;
}
// 我们调用函数,希望能够获取函数最终的计算的结果:
// 需求:我们需要获取到函数调用的结果
// 函数的返回值: 可以让函数返回一个结果 return :返回
// var result = getSum(100);
// console.log(result * 2);
var result = getSum(10);
console.log(result);
console.log( getSum(1000) );
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// function getSum(n) {
// var sum = 0;
// for(var i = 1; i <= n; i++) {
// sum += i;
// }
// return sum;
// }
// // getSum(100)
// // 1. getSum调用了函数
// // 2. 把 100 赋值给 n
// // 3. return sum
// // var result = getSum(100);
// // console.log(result);
// console.log( getSum(10) )
// 1. 计算1-n之间所有数的和,并且返回结果
// 2. 计算两个数的和,并且返回结果
// 3. 计算m-n之间所有数的积,并且返回结果
function add(n1, n2) {
return n1 + n2;
}
console.log(add(1, 3))
console.log(add(2, 10))
function getProduct(m, n) {
var product = 1;
for(var i = m; i <= n; i++) {
product *= i;
}
return product;
}
console.log(getProduct(1, 5));
</script>
</body>
</html>
5.函数三要素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 定义一个函数: 函数名, 参数, 返回值 函数3要素
// 1. 定义一个一定要有函数的名字
// 2. 函数可以没有参数, 如果函数内部有不确定的内容,需要有参数。
// 3. 函数可以没有返回值, 如果需要访问函数内部的某个值,只能通过函数的返回值
// 函数名一定要有,参数和返回值可以没有,根据具体的函数分析。
// 1. 求任意半径的圆的面积
// console.log(Math.PI);
// 单行注释
// /* */ 多行注释
// /** */ 文档注释
/**
* 求圆的面积
* @param r {number} 圆的半径
* @returns {number} 圆的周长
*/
function getArea(r, n) {
return Math.PI * r * r;
}
console.log(getArea(10));
// 2. 求任意半径的圆的周长
function getGirth(r) {
return 2 * Math.PI * r;
}
// 3. 求任意2个数中的最大值
function getMax(n1, n2) {
return n1 > n2 ? n1 : n2;
}
console.log(getMax(1, 2));
// 单行注释
/* 多行注释 */
/**
* 文档注释
* @param
* @return
*
* */
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 求任意数组中的最大值
// 函数名: getMax 参数:一个数组 返回值:最大值
function getMax(arr) {
var max = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] > max) {
max = arr[i];
}
}
// 返回这个最大值
return max;
}
console.log( getMax([1,2,3,4,2]) );
console.log( getMax([1,2,33,4,2]) );
// 2. 求任意数组中的最小值
function getMin(arr) {
var min = arr[0];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < min) {
min = arr[i];
}
}
return min;
}
var result = getMin([2,4,-6,8]);
console.log(result);
// 3. 翻转任意数组,返回一个新的数组
function reverse(arr) {
var newArr = [];
// 逆序遍历arr
for(var i = arr.length - 1; i >= 0; i--) {
newArr.push(arr[i]);
}
return newArr;
}
console.log(reverse([1,2,3,4]));
console.log(reverse([6,7,8,9]));
// 4. 对任意数组从小到大排序
function bubbleSort(arr) {
for(var i = 0; i < arr.length -1; i++) {
var flag = true;
for(var j = 0; j < arr.length - 1 - i; j++) {
if (arr[j] > arr[j+1]) {
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
flag = false;
}
}
if (flag) {
break;
}
}
return arr;
}
console.log(bubbleSort([1,2,5,4,7,6,8]));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="tool.js"></script>
<script>
// 求数组最大值
var max = getMax([1,2,3]);
console.log(max);
</script>
</body>
</html>
二、函数高级知识
1.函数调试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 断点调试-----函数
// F8: 跳到下一个断点,如果后面断点,代码执行结束
// F10: 可以让代码一步一步执行,注意,跳过函数的调用
// F11: 可以让代码一步一步执行, 注意:进入函数的内部执行
// shift + F11: 可以跳出当前函数
function fn() {
console.log('早上9:00开始备课');
fn1();
console.log('晚上21:00结束备课');
}
function fn1() {
console.log('早上9:30开始吃鸡');
console.log('晚上20:30结束吃鸡');
}
// 在fn中调用fn1
fn();
/*
为什么需要断点调试:
1. 可以让代码一步一步执行。 跟踪代码的执行的情况, 如果有bug,非常清晰的定位到哪一步。
怎么用?
1. F12打开控制台
2. 找到sources,找到对应的文件
3. 在需要停止代码的地方打一个断点
4. 刷新页面,就会发现代码停留在断点处。
F8: 跳到下一个断点
F10: 让代码一步一步执行,如果是函数调用,跳过内部的调用
F11: 让代码一步一步执行,如果是函数调用,进入到函数内部
shift + F11: 直接跳出当前函数
如果有变量,配合watch来使用
*/
</script>
</body>
</html>
2.函数内部可以调用函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 封装函数: 判断某个数组是否包含某个值 返回值: true或者false
// 判断value是否在arr中存在
// function contain(arr, value) {
// var flag = false;
// for(var i = 0; i < arr.length; i++) {
// if (arr[i] === value) {
// flag = true;
// break;
// }
// }
// return flag;
// }
// return可以结束整个函数
function contain(arr, value) {
for(var i = 0; i < arr.length; i++) {
if (arr[i] === value) {
return true;
}
}
return false;
}
// var result = contain([1,2,3], 5);
// console.log(result);
function uniq(arr) {
var newArr = [];
// 遍历arr,判断arr[i]在新数组中是否存在
for (var i = 0; i < arr.length; i++) {
if( contain(newArr, arr[i]) ) {
// 说明返回的true
continue;
}
newArr.push(arr[i])
}
return newArr
}
// 对数组去重
console.log( uniq([1, 2, 3, 4, 3, 2, 1]) )
console.log( uniq([1, 2, 3, 4, 3, 2, 2, 2, 2]) )
</script>
</body>
</html>
3.全局变量与局部变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 作用域:变量起作用的区域
// 全局变量: 在script标签内,函数外定义的变量叫做全局变量,
// 全局变量: 在所有地方都能使用
// 局部变量: 在函数内部定义的变量,叫做局部变量
// 局部变量只有在当前函数内部才生效
// var num = 11;
// console.log(num);
// function fn() {
// console.log(num);
// }
// fn();
function fn() {
var num = 11;
console.log(num);
}
function fn2() {
console.log(num);
}
fn();
fn2();
console.log(num);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 变量访问规则: 把自己当成浏览器
var num = 11;
function fn() {
var num = 22;
console.log(num);
}
fn();
console.log(num);
// var num = 11;
// // 函数会形成一个局部作用域
// function fn() {
// console.log(num);
// }
// fn();
// function fn() {
// var num = 10;
// console.log(num);
// }
// fn();
// console.log(num);
/*
全局变量: 在函数的外面定义的变量叫做全局变量,在所有的地方都能访问到
局部变量:在函数的内部定义的变量,只有在函数的内部才能使用。
*/
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 44 11
// 44 44
// 练习1:
// var num = 11;// 全局变量
// function fn() {
// num = 44;// 全局变量
// console.log(num);
// }
// fn();
// console.log(num);
// 练习2
// 一句话: 变量,如果当期作用域自己有,用自己的,改自己的
// 如果没有,往外找, 用的是全局的,改的也是全局的
// var num = 11;
// function fn() {
// var num = 22;
// num = 33;
// console.log(num);
// }
// fn();
// console.log(num);
// var num1 = 11;
// var num2 = 22;
// function fn() {
// var num1 = 33;
// num1 = 44;
// num2 = 55;
// console.log(num1);
// console.log(num2);
// }
// fn();
// console.log(num1);
// console.log(num2);
// 如果没有使用var定义的变量,会把他叫做隐式全局变量。
// 隐式全局变量尽可能避免。
// 以后使用变量,都应该先声明。
// function fn() {
// num = 33;
// console.log(num);
// }
// fn();
// console.log(num);
// 33 44 11 44
// var num1 = 11;
// function fn() {
// var num1 = 22;
// num1 = 33;
// num2 = 44;
// console.log(num1);
// console.log(num2);
// }
// fn();
// console.log(num1);
// console.log(num2);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 函数会形成一个局部作用域(函数作用域)
// 如果函数内部还有函数,也会形成作用域,作用域一层套一层,形成作用域链
var num1 = 11;
function fn() {
var num2 = 22;
function fn2() {
var num3 = 33;
console.log(num3);
console.log(num2);
console.log(num1);
}
fn2()
console.log(num2);
console.log(num1);
// console.log(num3);
}
fn();
</script>
</body>
</html>
4.预解析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 预解析: 预先解析
// js代码从上往下一行一行执行.
// undeinfed 报错 11
// 1. js有一个预解析的过程
// 目的:1. 确保代码没有语法错误
// 目的 2: 确定有多少变量
// 2. js代码从上往下一行一行执行的
// var num;
// 1. 把所有的var声明的变量提升到当前作用域的最前面,不会提升变量的赋值
// 2. 把所有function声明的变量提升到当前作用域的最前面。
console.log(num);
var num = 11;
console.log(num);
// 语法错误: 编辑器就能辨别 for(;;)
// 运行时错误:运行时才能确定这个错误
// console.log(hahah);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 1. 预解析
// 1. 提升所有的var声明,不会提升赋值, 如果有同名的var声明,会忽略
// 2. 提升所有的函数的声明,不会提升调用。如果有同名的function声明,会覆盖。
// 3. 如果变量名和函数名重名, 函数优先。
// 2. 代码一行一行执行
// console.log(num);
// var num = 11;
// fn();
// function fn() {
// console.log('哈哈');
// }
// console.log(num);
// var num = 11;
// var num = 22;
// console.log(num);
// function getCool() {
// console.log('小莲子是这个班级最美的人')
// }
// getCool();
// function getCool() {
// console.log('汪汪是这个班级最美的人');
// }
// getCool();
console.log(a);
function a () {
console.log('哈哈')
}
var a = 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//1.
var num = 10;
fn1();
function fn1() {
console.log(num);
var num = 20;
}
var a = 18;
fn2();
function fn2() {
var b = 9;
console.log(a);
console.log(b);
}
// // 9 9 9 9 9 报错
// // 9 9 9 报错
// fn3();
// console.log(c);
// console.log(b);
// console.log(a);
// function fn3() {
// // c = 9
// // b = 9
// // a = 9
// var a = b = c = 9;
// console.log(a);
// console.log(b);
// console.log(c);
// }
/*
1. 先把所有的var的声明提前,不会提升赋值
2. 把所有的function声明提前,不会提升调用
3. 如果var和function同名,函数优先
*/
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 整个函数 1
// 两个函数
// undefined
// console.log(a);
// function a() {
// console.log("aaaaa");
// }
// var a = 1;
// console.log(a);
// 4 6 哈 10
// 4 6 哈 哈
// 4 6 报错
// var a = 4;
// console.log(a);
// a = 6;
// console.log(a);
// function a() {
// console.log('哈');
// }
// a();
// a = 10;
// console.log(a);
// 千万不要让变量和函数名重名
var fn = 12;
console.log(fn);
function fn() {
console.log('哈哈');
}
fn();
</script>
</body>
</html>
5.声明函数的两种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 常见的数据类型
// 简单数据类型: number string boolean undefined null
// 复杂数据类型: array function
// function fn() {
// console.log('哈哈哈');
// }
// 我们不要把函数给特殊化, 函数其实就是一个值,复杂类型的值。 fn通常可以调用
// 声明函数的2种方式
// 1. 函数声明
function fn() {
console.log('哈哈哈');
}
fn();
// 2. 函数表达式, 声明函数的第二种方式
// webapi里面用的很多,,,,注册事件
var fn1 = function() {
console.log('呵呵呵')
}
fn1();
// 二者的区别
// function直接声明的函数,可以提升的,可以先调用,在声明
// 函数表达式必须先声明函数,才能调用。
</script>
</body>
</html>
6.匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 匿名函数:没有名字的函数
// 匿名函数不能直接使用,会报错,因为没有名字。
// 匿名函数使用1: 赋值给变量 函数表达式
// 匿名函数使用2: 匿名函数自调用
// 自调用函数
// var fn = function () {
// console.log('嘻嘻');
// }
// fn();
// 自调用函数
// (function fn() {
// console.log('哈哈');
// })()
// 匿名函数自调用 沙箱 (非常有用)
// 全局变量污染
(function() {
console.log('哈哈哈')
})();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 全局变量污染:
// 李四的代码
// 沙箱:
(function () {
var fn = 12;
function num() {
console.log('嘻嘻嘻');
console.log(fn);
}
num();
})();
(function () {
// 张三的代码
var num = 12;
function fn() {
console.log('哈哈哈');
console.log(num);
}
fn();
})();
</script>
</body>
</html>
7.递归函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 冒泡排序 递归 算法类
// 递归函数: 在函数内部调用了自己的函数
// 注意:递归函数一定要有出口
// 递归:化归思想, 把一个复杂的问题变得简单。
// 1 - 100 1-99 + 100 ........ 1 = 1
// 1 * 10 的结果
// 问: js如果不加分号,他怎么知道代码如何执行
// Js会自动在每行的默认添加 ; 作为结束
// vue 作者 在vue的源码里面,全部都没有分号
// function getProduct(n) {
// if(n === 1) {
// return 1;
// }
// return getProduct(n-1) * n;
// }
// console.log(getProduct(5));
// 兔子数 第一个 + 第二月 = 第三个月
// 求第n个月 = 第n-1个月 + 第n-2个月
// function getTu(n) {
// if(n === 1 || n === 2) {
// return 1;
// }
// return getTu(n-1) + getTu(n-2);
// }
// console.log(getTu(12));
// 兔子数 可以不用递归实现
// 数学
var n1 = 1;
var n2 = 1;
var sum = 0;
for(var i = 3; i <= 24; i++) {
// sum第3个月
sum = n1 + n2;
// n2往后挪一个月
n1 = n2;
n2 = sum;
}
console.log(sum);
</script>
</body>
</html>