025day（函数-上）

最新推荐文章于 2023-04-05 19:21:28 发布

w296932099

最新推荐文章于 2023-04-05 19:21:28 发布

阅读量108

点赞数

分类专栏：如何从一个前端小白逆袭成为大佬

本文链接：https://blog.csdn.net/w296932099/article/details/119656242

版权

如何从一个前端小白逆袭成为大佬专栏收录该内容

38 篇文章 2 订阅

订阅专栏

引入：

先问大家一个问题，大家洗过衣服吧？

手动怎么洗？拿个盆，接水，放衣服，倒洗衣粉，洗，涮，拧干

挺费劲的，有没有简便的方法？

使用洗衣机，衣服放进去，倒上洗衣粉，按开关，一切就都搞定了

在生活中这样的例子有很多，大到洗衣机空调，小到水龙头剪刀。每个工具都有自己不同的功能。为了生活方便简洁，就会使用这些工具。

程序员是一群很会享受生活的群体，所以在代码中也有很多这样的工具，就是咱们今天要学习的函数。

总结：代码中工具----函数

概念：

函数就是具备某个功能的一个工具。是完成某个功能的一段代码。

大家以前有没有用过函数呀？

parseInt() alert() 这都是函数，是系统提供的，直接拿来就能用。

系统提供了很多函数，但是并不能包含所有的功能，所以有些功能需要我们自己来写----自定义函数。函数定义好以后，就可以像系统函数一样使用了，不用再重复写了。

所以经常写的代码，就写一个函数，需要的时候调一下好了。

自定义函数怎么写？

定义语法：

当我们定义好函数，并在页面中刷新的时候，会发现这段代码并没有被执行。因为函数定义好后，是不会自动执行的，需要我们进行调用。

函数的调用：

调用的语法很简单，这样我们以后还需要执行函数中的代码的时候，就不用再重写那么多的代码了，只需要简单的将原来定义好的函数进行调用即可。

带参数的函数：

函数代码中会发生改变的值用变量来代替，入口是声明函数时的小括号

调用函数的时候，需要给参数赋值

声明函数时候带进去的那个参数叫形参

调用函数的时候给形参进行赋值的实际值是实参

函数的本质

当我们去调用函数的时候，通过函数的名称就可以调用到，那说明我们在定义函数的时候，函数就已经保存起来了，所以下面才能调用出来。

函数定义在内存中的体现：

这段代码，在内存创建了一个空间，名字叫fn，这个空间中存储的数据是函数这整段代码。

调用函数，就相当于将这段代码拿出来执行。

匿名函数

既然函数的定义跟变量的定义过程差不多，那函数的定义就可以像变量一样进行。

这是定义一个变量，将函数代码放到变量空间中，这样的函数也是可以正常进行调用的，就使用变量的名称就行：

那fn这个函数的名字还能进行调用吗：

这就说明，当将一个函数赋值给一个变量的时候，这个函数的名字就没有用了，所以我们可以将这个函数名称省略：

这样还是可以正常调用的：

这种没有名字的函数就叫做匿名函数。

匿名函数不能单独存在，会报错：

除非将这个函数用小括号括起来：

但是这种没有名字的函数就无法调用了，js提供了一个专门用来调用匿名函数的语法：

后面加小括号就表示调用，这种定义并调用函数的语法，叫做自调用函数。即，函数定义好立即调用。

自调用函数也可以不给函数加小括号，在函数前加感叹号或波浪线：

同样是立即执行的函数。

这种函数也是可以传参数的：

函数的优点：

1. 实现了代码的可重用性

2. 实现了模块化编程

我们在使用工具的时候，很多工具需要我们带东西进去，比如洗衣服要放衣服进去，用函数这个工具来说的话，就是需要带参数。

带返回值的函数

之前的函数，在调用后，就是将函数中的代码执行了，没有得到一个结果，如果我们希望函数调用后得到一个结果，在后续的代码中，需要用到这个结果，例：

上面的函数是没有办法实现的，此时，需要使用函数的返回。

不是所有的程序的结果都需要输出在页面中，有时候，我们只是想让这一段代码得出一个结果，后续代码得到这个结果后进行后续处理。那么上面的函数显然已经不适用了。我们需要使用函数的返回。

函数返回结果，在函数中使用return关键字，后面跟要得到的结果。

此时调用函数，就得到一个结果，可以将这个结果赋值给变量或进行下一步操作。

return关键字除了可以给函数调用返回结果，还可以结束函数运行：

我们发现，调用函数后，函数中的输出代码没有执行，也就是return将函数结束了。

return在返回结果的时候，只能返回一个结果，不能返回多个：

调用后的res值得到一个90的结果，就说明return只能得到一个结果，不能得到多个。

return总结：

1. 终止代码继续运行

2. 函数运行后返回一个结果，只能返回一个

预解析

所以在正常情况下，变量要使用或函数要调用，都需要提前定义变量或函数。

但我们发现一件比较有意思的事情：先输出变量，然后再定义变量，浏览器不报错；先调用函数，再定义函数，不报错，函数能调用

原因是浏览器执行js代码之前，会有一个预解析的过程：

浏览器中有一段程序专门用来解析js代码，叫做js解析器。js解析器在执行js代码的时候，分两步进行：

1. 预解析js代码

预解析的过程，就是查找代码中的var和function这两个关键字，找到以后，将变量和函数提前存到内存中，并给他们赋一个初始值，变量的初始值为undefined，函数的初始值为代码段。

2. 开始按顺序一行一行解读代码

解读代码的时候，会略过变量和函数的定义，因为变量和函数的定义已经提前放在内存中了，提前储存的变量和函数的值会随着代码的解读而发生变化，也就是变量的赋值和函数的调用。

预解析分为变量的预解析和函数的预解析，也就是代码在执行之前先进行解析，将变量和函数的定义放在内存中。

但是在打印之后声名过变量的话，情况就不一样了。

代码执行之前先预解析:

开始按照预解析后顺序执行：

面试题：

预解析总结：

1. 匿名函数赋值给变量的定义方式，预解析时遵循变量的预解析规则，不会将函数代码预解析

2. 预解析的时候，会将定义提前放在内存中，不会提前将赋值放在内存中

3. 如果变量名和函数名同名了，保留函数预解析，忽略变量预解析

因为函数预解析其实包含了赋值的过程，函数定义放在内存中的时候将函数的代码也放在内存中

变量的预解析只有空间，没有值，所以如果是先预解析变量，那后面的函数预解析赋值就将空间中放入了值，如果是先预解析的函数，再次预解析变量的时候，空间已经存在了，再次定义空间也是没有意义的。

4. 省略var定义的变量是不会有预解析的

5. js代码如果报错了，那后面的代码就不会执行了

6. 不会执行的代码中有变量或函数定义也会预解析，因为预解析在执行之前。

函数的嵌套

函数结构中的大括号，里面放的是代码段，既然是代码段，就可以写判断、循环甚至函数代码，这样就形成了函数的嵌套。

函数的大括号中可以写函数的定义，可以写函数的调用：

函数的调试

示意图

练习题

计算100以内偶数的和
页面上显示出1000-2000年中所有的闰年，并以每行四个数的形式输出
输出一个正三角形，如下
输出一个倒三角形，如下

用循环计算下面的结果

1 - 1/2 + 1/3 - 1/4 + ... - 1/100

求20以内所有数字的阶乘的和
篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度小于0.1米。
有一个棋盘，有64个方格，在第一个方格里面放1粒芝麻重量是0.00001kg，第二个里面放2粒，第三个里面放4，棋盘上放的所有芝麻的重量
某人在银行有50000元存款。银行每月都要收取服务费，存款大于5000元时每个月收取总额的5%，总额不大于5000元的时候不收服务费；假设这个人存了以后从来都不用，用循环计算银行要扣这个人的手续费能扣多少次？每次扣取后剩余多少钱？
猴子偷桃，猴子摘了x个桃，每天吃一半，再多吃一个，第7天吃的时候剩下一个了，猴子摘了多少桃子？
有个皮球，每次落地弹起都是高度的一半，如果从10米高的地方丢下，第十次弹起时，皮球总过经历了多少距离。
输出100-200之间所有的素数 (素数，就是除了1和自己本身，不能被别的数整除)

答案：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

//1.求1~n(n>=1)之间的所有偶数的个数

// 步骤：先把核心程序写出来，然后将核心程序包在一个function中，

// 那个数字需要每次调用变化，就作为变量并作为函数的

// 形参，那个数字是最后需要的结果就作为返回值

// 核心程序

var k = 0;

for(var i=1;i<=10;i++){

if(i%2==0){

k++;

}

console.log(k);

// 包在一个函数中并指定形参和返回值

function ou(n) {

var k = 0;

for (var i = 1; i <= n; i++) {

if (i % 2 == 0) {

k++;

}

return k;

}

var res = ou(90);

console.log(res);

// 2.页面上显示出1000-2000年中所有的闰年，并以每行四个数的形式输出

// // 定义计数器

// var k = 0

// // 输出1000~2000之间所有的闰年

// for(var year=1000; year<=2000; year++){

// // 判断是否是闰年

// if(year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {

// k++

// document.write(year + ' ')

// // if(k === 4) {

// // document.write('<br>')

// // k=0

// // }

// if(k % 4 === 0) {

// document.write('<br>')

// }

// 3.正三角形

// for(var a=1;a<=9;a++){

// for(var b=1;b<=a;b++){

// document.write('*')

// }

// document.write('<br>')

// }

// 4.倒三角形

// for(var a=9;a>=1;a--){

// for(var b=1;b<=a;b++){

// document.write('*')

// }

// document.write('<br>')

// }

// 5.计算分数

// var sum = 0

// for(var a=1;a<=3;a++){

// if(a%2){

// sum += 1/a

// }else{

// sum -= 1/a

// }

// console.log(sum);

// 6. 20以内所有数字的阶乘的和

// var sum = 1

// for(var a=1;a<=1;a++){

// sum *= a

// }

// console.log(sum);

// var sum = 1

// for(var a=1;a<=2;a++){

// sum *= a

// }

// console.log(sum);

// var sum = 1

// for(var a=1;a<=3;a++){

// sum *= a

// }

// console.log(sum);

// var result = 0

// for(var b=1;b<=20;b++){

// var sum = 1

// for(var a=1;a<=b;a++){

// sum *= a

// }

// // console.log(sum);

// result += sum;

// }

// console.log(result);

// 7.篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度小于0.1米。

// h=5 h=h*0.3 1

// h h=h*0.3 2

// h h=h*0.3 3

// var h = 5;

// var k = 0

// while(h>0.1){

// h=h*0.3

// k++

// }

// console.log(k);

// var k = 0

// for(var h=5;h>0.1;h*=0.3){

// k++

// }

// console.log(k);

// 8.有一个棋盘，有64个方格，在第一个方格里面放1粒芝麻，重量是0.00001kg，第二个里面放2粒，第三个里面放4粒，.....，棋盘上放的所有芝麻的重量

// 1 1

// 2 2

// 3 4

// 4 8

// var a = 1

// a=a*2

// var sum = a

// for(var b=2;b<=64;b++){

// a=a*2

// sum += a

// }

// console.log(sum*0.00001);

// 9.某人在银行有50000元存款。银行每月都要收取服务费，存款大于5000元时每个月收取总额的5%，总额不大于5000元的时候不收服务费；假设这个人存了以后从来都不用，用循环计算银行要扣这个人的手续费能扣多少次？每次扣取后剩余多少钱？

// var k = 0

// for(var money=50000;money>5000;money=money-money*0.05){

// console.log("第"+k+"次,剩下" + money);

// k++

// }

// console.log("第"+k+"次,剩下" + money);

// console.log(k);

// var money = 50000;

// var k = 0

// while(money>5000){

// k++

// money = money - money * 0.05

// console.log("第"+k+"次,剩下" + money);

// }

// 10.猴子摘桃，猴子摘了x个桃，每天吃一半，再多吃一个，第7天吃的时候剩下一个了，猴子摘了多少桃子？

// 1 x x/2+1 x=x/2-1

// 2 x x/2+1 x=x/2-1

// 3 ...

// 7 x=1

// 7 x=1 x=(x+1)*2

// 6 x=(x+1)*2

// 5 x=(x+1)*2

// 4 x=(x+1)*2

// ..

// 1

// var x = 1

// for(var day=7;day>=2;day--){

// x=(x+1)*2

// }

// console.log(x);

// 11.有个皮球，每次落地弹起都是高度的一半，如果从10米高的地方丢下，第十次弹起时，皮球总过经历了多少距离。

// var h = 10;

// var sum = 0

// for(var i=1;i<=10;i++){

// sum += h + h/2

// h = h/2

// }

// console.log(sum);

// 12.输出100-200之间所有的素数 (素数，就是除了1和自己本身，不能被别的数整除)

// for(var a=100;a<=200;a++){

// console.log(a);

// }

// 素数判断：将自己以内的数字都除一次，看看是否有能整除的数字，如果其中有一个能整除，说明不是素数，如果全部除完了，有没有一个能整除，说明是素数

// var num = 5;

// var b = 1

// if(num%2 === 0){

// b = 2

// // console.log("不是素数");

// }

// if(num%3 === 0){

// b = 2

// // console.log("不是素数");

// }

// if(num%4 === 0){

// b = 2

// // console.log("不是素数");

// }

// for(var a=2;a<num;a++){

// if(num%a === 0){

// b = 2

// // console.log("不是素数");

// }

// 如果所有条件都没有成立，就表示是素数

// 假设有一个初始值是1，只要有一个条件成立过，就将变量改成2

// 判断这个变量是1还是2就知道，是否成立过了

// if(b === 1){

// console.log("是素数");

// }else{

// console.log("不是素数");

// }

// 判断一个数是不是素数

// var num = 13;

// var b = 1;

// for(var a=2;a<num;a++){

// if(num%a === 0){

// b = 2

// }

// if(b === 1){

// console.log("是素数");

// }else{

// console.log("不是素数");

// }

// for(var c=100;c<=200;c++){

// // 要判断的每个c

// var num = c;

// var b = 1;

// for(var a=2;a<num;a++){

// if(num%a === 0){

// b = 2

// }

// // if(b === 1){

// // console.log(c+"是素数");

// // }else{

// // console.log(c+"不是素数");

// // }

// if(b === 1){

// console.log(c);

// }

</script>

</html>

w296932099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
025day（函数-上）

的撒的
复制链接

扫一扫

专栏目录

025day（函数-上）

“相关推荐”对你有帮助么？