内容概要

  • 函数
    • 1.函数基本概念与作用
      • 1.1 函数的基本概念
      • 1.2 为什么需要函数?
    • 2.函数的使用与语法
      • 2.1 函数的声明语法
      • 2.2 函数名命名规范
      • 2.3 函数名命名建议:常用动词约定
      • 2.4 函数的调用语法
      • 2.5 函数体
      • 2.6 函数基本使用实例
        • 1.函数声明
        • 2.函数调用
        • 3.需求:封装一个函数,计算总和
      • 2.7 函数基本使用总结
        • 1). 函数是用那个关键字声明的?
        • 2). 函数不调用会执行吗?如何调用函数?
        • 3). 函数的复用代码和循环重复代码有什么不同?
    • 3.函数传参与调参
      • 3.1. 为什么要有参数的函数
      • 3.2. 有参数的函数声明和调用
        • 3.2.1声明语法
        • 3.2.2调用语法
        • 3.2.3 形参和实参
        • 形参概念:
        • 实参概念:
        • 形参与实参注意事项:
      • 3.3 函数传参与调参小结
        • 1. 函数传递参数的好处是?
        • 2. 函数参数可以分为那两类?怎么判断他们是那种参数?
        • 3. 参数中间用什么符号隔开?
      • 3.4.函数传参与调参实例
      • 3.5 函数传参与调参合理使用逻辑中断
    • 4.函数返回值
      • 4.1. 为什么要让函数有返回值
        • 有返回值函数的概念:
      • 4.2 用return返回数据
        • 场景
        • 语法
        • 细节:
      • 4.3 函数返回值return小结
        • 1.为什么要让函数有返回值
        • 2. 函数有返回值用那个关键字? 有什么注意事项呢?
      • 4.4 返回值案例
        • 1. 求任意数组中的最大值并返回这个最大值
        • 2. 求任意数组中的最小值并返回这个最小值
        • 3. 求任意2个数中的最大值, 并返回
    • 5.作用域
      • 5.1. 作用域概述
      • 5.2 作用域分类及各自的概念
        • 全局作用域、局部作用域、块级作用域基本概念
          • 全局作用域:
          • 局部作用域:
          • 块级作用域:
      • 5.3 变量的作用域
        • 全局变量:
        • 局部变量:
          • 函数不嵌套情况
          • 函数嵌套情况
        • 块级变量:
        • 变量有一个坑, 特殊情况
          • 1)如果函数内部或者块级作用域内部,变量没有声明,直接赋值
          • 2)但是有一种情况,函数内部的形参可以看做是局部变量。
      • 5.4 变量访问原则、 作用域链
        • 1. 变量访问原则
        • 2.作用域链
    • 6.匿名函数
      • 6.1 函数分类
      • 6.2 匿名函数
        • 声明语法:
        • 调用语法:
        • 使用场景
      • 6.3. 立即执行函数
        • 语法:
          • 写法1:
          • 写法2:
        • 实例
        • 立即执行函数小结
    • 7.综合案例
    • 8.拓展-函数参数个数
      • 8.1 函数实参个数小于形参
      • 8.2 实参个数多于形参
      • 8.3 如果调用的时候,我们没有传递实参,则默认为 0 的方法
        • 方法一:使用逻辑中断
        • 方法二:给形参设置默认值

函数

1.函数基本概念与作用

1.1 函数的基本概念

函数:function,是被设计为执行特定任务的代码块

说明:

函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用,执行这些被“包裹”的代码逻辑。
这么做的优势是*有利于精简代码方便复用。

我的理解:
执行某个特定功能和相似功能的代码模块被封装在函数这个容器里,这些代码通过函数可以随时被执行使用或不被执行使用,不需要太多的人工干预。

1.2 为什么需要函数?

可以实现代码复用,提高开发效率

2.函数的使用与语法

2.1 函数的声明语法

2.2 函数名命名规范

1.和变量命名基本一致

2.尽量小驼峰式命名法

3 .前缀应该为动词

2.3 函数名命名建议:常用动词约定

2.4 函数的调用语法

注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数
我们曾经使用的 alert() , parseInt() 这种名字后面跟小括号的本质都是函数的调用

2.5 函数体

函数中{}里面的代码就是函数体

函数体是函数的构成部分,它负责将相同或相似代码“包裹”起来,直到函数调用时函数体内的代码才会被执行。函数的功能代码都要写在函数体当中。

2.6 函数基本使用实例

1.函数声明

声明(定义)的函数必须调用才会真正被执行,

<script>// 1.函数的声明 function Welcome (){document.write(`欢迎来到江苏镇江~<br>`)}</script>

2.函数调用
 <script>// 1.函数的声明 function Welcome (){document.write(`欢迎来到江苏镇江~<br>`)}//2.函数的调用//注意:声明(定义)的函数必须调用才会真正被执行,使用 () 调用函数Welcome()Welcome()//alert()也是一个函数调用,alert函数在系统内已经声明了alert()</script>

3.需求:封装一个函数,计算总和
  1. 封装一个函数,计算两个数的和
  2. 封装一个函数,计算1-100之间所有数的和
 <script>//计算两个数的和function getSum2(){let num1 = +prompt('请输入第一个数')let num2 = +prompt('请输入第二个数')let sum = num1+num2document.write(`两个数的和:num1+num2 = ${sum}<br>`)}getSum2()//计算1~100的累加和let sum = 0function getSum100(){for ( let i = 1; i <= 100 ; i++){sum +=i}document.write(`1~100的总和是:${sum}<br>`)}getSum100()</script>

2.7 函数基本使用总结

1). 函数是用那个关键字声明的?

function

2). 函数不调用会执行吗?如何调用函数?

函数不调用自己不执行

调用方式: 函数名()

3). 函数的复用代码和循环重复代码有什么不同?

循环代码写完即执行,不能很方便控制执行位置

随时调用,随时执行,可重复调用

3.函数传参与调参

3.1. 为什么要有参数的函数

若函数完成功能需要调用者传入数据(比如:函数内的变量的值),那么就需要用有参数的函数,这样可以极大提高函数的灵活性。

3.2. 有参数的函数声明和调用

3.2.1声明语法


在参数列表中,将多个数据传入数据列表,并且声明这个函数需要传入几个数据,多个数据用逗号隔开

3.2.2调用语法


注意:

  1. 调用语法中,传递的参数列表中参数个数声明语法中参数列表的参数个数呈现为一一对应关系;
    2.调用函数时,需要传入几个数据就写几个,用逗号隔开。

3.2.3 形参和实参

形参在有参数的函数声明过程中相当于变量(或临时变量),实参在有参数的函数调用过程中传递参数相当于为形参(可以类比为变量)赋值

<script>function 函数名(参数1,参数2,.........参数n){}函数名(参数1的值,参数2的值,.......参数n的值)</script>

形参概念:

声明函数时写在函数名右边小括号里的叫形参(形式上的参数)

实参概念:

调用函数时写在函数名右边小括号里的叫实参(实际上的参数)

形参与实参注意事项:

  1. 开发中尽量保持形参和实参个数一致

2.我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参

3.3 函数传参与调参小结

1. 函数传递参数的好处是?

可以极大的提高了函数的灵活性

2. 函数参数可以分为那两类?怎么判断他们是那种参数?

函数可以分为形参和实参
函数声明时,小括号里面的是形参,形式上的参数
函数调用时,小括号里面的是实参,实际的参数
尽量保持形参和实参的个数一致

3. 参数中间用什么符号隔开?

逗号

3.4.函数传参与调参实例

1.计算任意两数之和

function getSum( num1,num2){document.write(`${num1 + num2} <br>`)}//调用getSum(100,288)getSum(188 ,- 78)

2.计算任意两个数之间所有数的和

function getSum100(start,end){let sum = 0for ( let i = start ; i <= end ; i++){sum+=i}document.write(`${start} ~ ${end}之间所有数的和为${sum}<br>`)}getSum100(100,999)getSum100(1,1000)


3.函数封装-求学生总分

需求:学生的分数是一个数组,计算每个学生的总分
分析:
①: 封装一个求和函数

②: 传递过去的参数是一个数组

③: 函数内部遍历数组求和

<script>//声明函数,score 是形参,是一个数组function getScore( score){let totalScore = 0//逐一遍历数组求和for (let i = 0; i < score.length ; i++ ) {totalScore += score[i]}document.write( `三门课的总分是${totalScore}`)}//调用函数getScore( [100, 100 ,100])</script>

3.5 函数传参与调参合理使用逻辑中断

需求:采取函数封装的形式:输入2个数,计算两者的和,打印到页面中

场景:

如果没有给函数实参,希望函数形参默认值为0

代码如下:

<script>function getSum( num1,num2){document.write(num1 + num2)}getSum()</script>

否则会出现

解决办法分析梳理

1.分析梳理

由此可见,如果一个变量没有赋值,则默认为 undefined,为了解决这个问题,就引入了逻辑与,逻辑与 ’ II ’ 遇真逻辑中断,使用"||“左侧的数据,遇假不中断使用”||"右侧的数据。

  // num1和 num2 我们怎么理解 函数内变量 // 如果一个变量没有赋值,则默认为  undefinedfunction getSum( num1,num2){document.write( num1 )document.write( num2 )document.write(num1 + num2)}getSum()


2.解决方案

function getSum( num1,num2){//我们想要 : 如果调用的时候,我们没有传递实参 ,则默认为 0num1 = num1 || 0num2 =  num2 || 0// document.write(num1)// document.write (num2)document.write(`${num1 + num2}<br> `)}getSum()getSum(1,100)

4.函数返回值

4.1. 为什么要让函数有返回值

缺陷
函数是被设计为执行特定任务的代码块,把计算后的结果处理方式写死了,内部处理了数据,缺少反馈。

类比:
函数比作一台具有洗衣服功能的洗衣机
洗衣服功能洗衣机本身就有(相当于洗衣功能函数已经在洗衣机声明好了
用洗衣机洗衣服是函数执行和调用的过程,
可是洗衣机没有告诉我们衣服要洗多久,或者衣服虽然被洗完了,但没有提示我们衣服洗完了。

解决
把处理结果返回给调用者相当于事情处理后的结果反馈,洗衣机告诉我们衣服要洗多久,或者衣服洗完提示我们衣服洗完了。)

有返回值函数的概念:

当调用某个函数,这个函数会返回一个结果出来, 这就是有返回值的函数。

提问:执行完特定任务之后,然后呢?

把任务的结果给我们。

其实我们前面已经接触了很多的函数具备返回值:

比如: prompt(),返回的结果是弹出一个输入框,parseInt()返回的结果将字符串类型的数字转换成数字型。

只是这些函数是JS底层内置的.我们直接就可以使用,当然有些函数,则没有返回值,比如alert()

所以要根据需求,来设定需不需要返回值

4.2 用return返回数据

场景

当函数需要返回数据出去时,用return关键字

语法

return 数据

案例:

function getMyResult(){return 20}document.write( getMyResult())


返回的结果让函数可以像变量那样被输出:

 function getMyResult(){return 20}// document.write( getMyResult())let re = getMyResult()document.write( re )

细节:

  1. 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用

  2. 函数内部只能出现 1 次 return,并且 return 后面代码不会再被执行,所以 return 后面的数据不要换行写

 function getMyResult(){return 20return 30}// document.write( getMyResult())let rs = getMyResult()document.write( rs )

  1. return会立即结束当前函数,且return后面的代码不会被执行
 function fn() {//退出函数的作用 return 后面的代码不再执行returnalert(15678)//return}fn()

  1. 函数可以没有 return,这种情况函数默认返回值为 undefined
function getMyResult(){}// document.write( getMyResult())let rs = getMyResult()document.write( rs )

4.3 函数返回值return小结

1.为什么要让函数有返回值

1) 函数执行后得到结果,结果是调用者想要拿到的(一句话,函数内部不需要

输出结果,而是返回结果)

2)对执行结果的扩展性更高,可以让其他的程序使用这个结果

2. 函数有返回值用那个关键字? 有什么注意事项呢?

1) 语法:return 数据

2) return后面不接数据或者函数内不写return,函数的返回值是undefined

3) return能立即结束当前函数, 所以 return 后面的数据不要换行写

4.4 返回值案例

1. 求任意数组中的最大值并返回这个最大值

基本思路

1.定义函数,用一个数组作为函数的形参;
2.在函数内定义最大值变量,并将这个变量的初始值定为数组的第一个值;
3.循环遍历数组,在数组内做if-分支判断最大值变量与数组每个数的大小,若最大值变量当前的值小于数组的某一个数,则将数组中的这个数赋值给最大值变量;
4.在函数内部返回函数最大值的结果;
5.定义变量获取函数运行结果 ,并将这个变量的值定为调用函数
6.输出获取函数运行结果的变量

细节:

1).形参虽然为数组类型变量,但无需在函数内再重复定义;
初次代码

function getMax( data ){let data = []let max = data[0]for ( let  i = 0; i < data.length; i++){if ( max < data[i]){max = data[i]}}return max}let ma = getMax([1,3,87,69,0])document.write(ma)


bug 分析:

形参已经在函数名旁边的“ ()”写好了,虽然为数组类型变量,但无需在函数内再重复定义

修复后的代码

<script>//1. 求任意数组中的最大值并返回这个最大值//注意: 不要在函数内预定义形参为数组function getMax( data ){let max = data[0]for ( let  i = 0; i < data.length; i++){if ( max < data[i]){max = data[i]}}return max}let ma = getMax([1,3,87,69,0])document.write(ma)</script>


2).if-else 只能关联判断同一个变量的属性关系,且判断结果为:这个变量是不是(boolean型,true or false)它关联的属性关系,不能再更进一步或再判断这个变量是不是其他属性,比如:本例求数组的最大值,这里只能对最大值变量max判断是不是数组中的最大值这个属性,不能进一步或再判断这个变量是不是最小值属性。

2. 求任意数组中的最小值并返回这个最小值

思路:

与求任意数组中的最大值并返回这个最大值类似,更换变量为最小值变量,只需将“若最大值变量当前的值小于数组的某一个数,则将数组中的这个数赋值给最大值变量;”修改为“若最小值变量当前的值大于数组的某一个数,则将数组中的这个数赋值给最小值变量 ”。

代码

<script>//2. 求任意数组中的最大值并返回这个最小值//注意: 不要在函数内预定义形参为数组function getMin( data ){let min = data[0]for ( let  i = 0; i < data.length; i++){if ( min > data[i]){min = data[i]}}return min}let mi = getMin([1,3,87,69,0])document.write(mi)

3. 求任意2个数中的最大值, 并返回

思路:

声明函数和两个形参,对两个形参做if-else分支判断,第一个数大,返回第一个数,否则返回第二个数。

代码:

 <script>//3. 求任意2个数中的最大值, 并返回function getMaxtwo(num1,num2){if (num1 > num2){return num1}else {return num2}}let no1 = getMaxtwo( 67787,99977)let no2 =getMaxtwo(78,66)document.write(`${no1}<br>`)document.write (`${no2}<br>`)</script>


优化:
定义全局变量存放用户输入两个的数
让实参成为变量,可让函数调用输出返回的结果

 //3. 求任意2个数中的最大值, 并返回let no1 = +prompt('请输入第一个数')let no2 = +prompt('请输入第二个数')function getMaxtwo(num1,num2){if (num1 > num2){return num1}else {return num2}}let no = getMaxtwo( no1,no2)document.write(`${no}<br>`)</script>

输入 12,33

5.作用域

问题引入

出现下面现象是什么原因?
i这个变量明明在 for循环中写了,在for循环之外却无法打印?
num这个变量明明在函数中写了,在函数之外却无法打印?

5.1. 作用域概述

通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

5.2 作用域分类及各自的概念

全局作用域、局部作用域、块级作用域基本概念

全局作用域:

所有JavaScript代码执行的地方

 <script>//script 标签内的所有代码就是一个全局作用域let num = 0console.log(11)console.log(221)</script>

局部作用域:

函数里面的代码执行

 //函数内的所有代码就是局部作用域function fn () {function ff ( ) {}}
块级作用域:

有“{} ”包括的地方,比如for(){}循环、if(){}语句、while(){}循环等。

//块级作用域if ( n = 1){console.log(n);}

5.3 变量的作用域

与作用域逐一对应

全局变量:

JavaScript所有代码的每个地方都能使用

 <script>// 全局变量 全局能用,在局部作用域和块级作用域内均生效let num = 100document.write( num )function fun () {alert(num)}fun()if( true ) {console.log( num );}</script>



局部变量:

只能在函数内访问,函数之外不能直接使用

函数不嵌套情况
  <script>// 2.在局部作用域下, 变量是 局部变量// 函数内的变量,只能给内部使用,函数外面不能使用function fun () {let num = 10document.write(`${num}<br>`)}fun ()console.log(num)

函数嵌套情况

父级函数局部变量的值可以被子级函数中的局部变量使用,但子级函数中局部函数的局部变量的值不能被父级局部变量使用

 function fun () {let num = 10// document.write(`${num}<br>`)//父级函数局部变量的值可以被子级函数中的局部变量使用,但子级函数中局部函数的局部变量的值不能被父级局部变量使用function fu(){document.write(`${num}<br>`)} fu()}fun ()
 function fun () {let num = 10// document.write(`${num}<br>`)//父级函数局部变量的值可以被子级函数中的局部变量使用,但子级函数中局部函数的局部变量的值不能被父级局部变量使用function fu(){document.write(`${num}<br>`)let num_1 = 87} fu()console.log(num_1)}fun ()

作用域:
子级函数作用域只在当前父级函数作用域(即:直接父级局部作用域)内有效

 function fun () {let num = 10// document.write(`${num}<br>`)//父级函数局部变量的值可以被子级函数中的局部变量使用,但子级函数中局部函数的局部变量的值不能被父级局部变量使用function fu(){document.write(`${num}<br>`)} }fu()fun ()

块级变量:

只能在“{}”内使用

 //if语句外部打印{}内的定义的变量不生效if(true){let num = 20}console.log(num)

for (let i = 0; i < 5; i ++){console.log(i)}//for 语句外打印i的值console.log(i)

变量有一个坑, 特殊情况
1)如果函数内部或者块级作用域内部,变量没有声明,直接赋值

则当全局变量看,但是强烈不推荐。

case 1 :函数局部作用域变量,没有声明

 function fun (){num = 10}fun()console.log(num)


case 2 :块级作用域变量,没有声明

 if( true ){id = 100}console.log(id)

2)但是有一种情况,函数内部的形参可以看做是局部变量。
 // 函数内部的形参可以看做是局部变量function fun ( a,b){document.write ( a-b)}fun(8,5)console.log(a)

5.4 变量访问原则、 作用域链

1. 变量访问原则

1) 只要是代码,就至少有一个作用域

2)写在函数内部的是局部作用域

3) 如果函数中还有函数,那么在这个作用域中就又可以诞生一个作用域

4) 根据在内部函数可以访问外部函数变量的这种机制,用链式查找决定哪些数据能被内部函数访问,就称作作用域链

2.作用域链

对同名变量遵循就近原则,从当前位置开始查找声明的同名变量和值,若没有声明当前的变量和值,就逐级向上一级作用域查找该变量,若最终仍然找不到变量,则输出undefined
例1:输出num的值是多少

  <script>let num = 10function fn() {let num = 20console.log( num )}fn()</script>

输出结果
离输出最近的num值得语句是let num = 20,所以输出20

例2:案例 1: 结果是几?

function f1() {let num = 123function f2() {console.log( num )}f2()
}
let num = 456
f1()

离console.log( num )最近的是let num = 123
所以输出123

例3: a与b的值是多少?

let a = 1function fn1() {let a = 2let b = '22'fn2()function fn2() {let a = 3fn3()function fn3() {let a = 4console.log(a) //a的值 ?console.log(b) //b的值 ?}}
}
fn1()

输出 a=4, b=22

6.匿名函数

6.1 函数分类

6.2 匿名函数

将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式

声明语法:

调用语法:


其中函数的形参和实参使用跟具名函数一致

 <script>let num = 10// 函数表达式let fun = function (){console.log( 111)}fun()let func = function (x,y){console.log( x + y)}func(1,6)</script>

使用场景

目前没有, 先认识
后期 web API 会使用:

  let click = document.querySelector('button')click.onclick = function (){alert('欢迎光临')}// 也可以作为参数写在写在click.addEventListener()里面click.addEventListener('click',function(){document.write('欢迎光临北京')})


6.3. 立即执行函数

场景介绍: 避免全局变量之间的污染

语法:

写法1:

类比匿名函数
let fn = function(){}
fn()
这个写法相当于 省略 let fn = function(){},用 function(){}替代fn,并直接调用fn(),而fn=function() {},即function(){}(),第一个括号(function旁边的括号)放的形参, 第二个括号(最末尾的())的是实参, 即(function(形参){})(实参)

      //写法1:相当于 fn(),而fn=function() {},即function(){}()//  1 第一个括号放的形参, 第二个括号(最末尾的())的是实参//   即(function(形参){})(实参)
(function(形参){})(实参)
写法2:

相当于把写法一(function(形参){})(实参)把(function(形参){})把‘)’外移到实参后面,即在function(){}()左右两侧添加小括号,即(function(){}()),立即执行函数可以给名字或不给名字

//写法2: 相当于在function(){}()左右两侧添加小括号,
//即(function(){}()),立即执行函数可以给名字或不给名字
(function(形参){}(实参))

实例

写法一
1.输出msn字符串

 (function (){document.write(`msn<br>`)})()

2.输出x-y的结果

    (function (x,y) {document.write(x-y)})(1,7)


写法二
1.立即执行函数不给名字

(function (){console.log('北京欢迎你!')}())


2.立即执行函数给名字

 (function fun(){console.log('北京欢迎你!')}())

注意:

多个立即执行函数要用 ;隔开,要不然会报错

实例
1)加‘;’

(function(){console.log('abcdefg')}());(function(){console.log('hijklmn')}());

2)不加‘;’

 (function(){console.log(abcdefg)}())(function(){console.log(hijklmn)}());

立即执行函数小结

  1. 立即执行函数有什么作用?

防止变量污染

  1. 立即执行函数需要调用吗? 有什么注意事项呢?

无需调用,立即执行,其实本质已经调用了

多个立即执行函数之间用分号隔开

7.综合案例

需求:
用户输入秒数,可以自动转换为时分秒

分析与思路:
1.获取用户输入的秒数;
2.用函数转换用户输入的秒数,若转换后的时分秒位数小于2位,则自动用零补全
3.输出函数执行后返回后的结果

计算公式:计算时分秒

小时: h = parseInt(总秒数 / 60 / 60 % 24)
分钟: m = parseInt(总秒数 / 60 % 60 )
秒数: s = parseInt(总秒数 % 60)

初始代码:

 //1.获取用户输入的秒数;let second = +prompt('请输入要转换的时间秒数')//2.用函数转换用户输入的秒数,若转换后的时分秒位数小于2位,则自动用零补全function autoChangetime( time ){// 计算公式:计算时分秒// 小时: h = parseInt(总秒数 / 60 / 60 % 24)// 分钟: m = parseInt(总秒数 / 60 % 60 )// 秒数: s = parseInt(总秒数 % 60) let h = parseInt(time / 60 / 60 % 24)let m = parseInt(time / 60 % 60 )let s = parseInt(time % 60)if ( h < 10 || m < 10 || s < 10 ){h = '0'+ hm = '0'+ ms = '0'+ s} else{h = hm = ms = s}return `${second}秒经过计算被转换为${h}时${m}分${s}秒`}// 3.输出函数执行后返回后的结果let times = autoChangetime(second)document.write(times)</script>


bug

参考代码与修复思路

<script>// 1.  用户输入let second = +prompt('请输入总的秒数:')// 2. 计算时间  封装函数function getTimes(t) {// 小时:  h = parseInt(总秒数 / 60 / 60 % 24)// 分钟:  m = parseInt(总秒数 / 60 % 60)// 秒数: s = parseInt(总秒数 % 60)let h = parseInt(t / 60 / 60 % 24)let m = parseInt(t / 60 % 60)let s = parseInt(t % 60)h = h < 10 ? '0' + h : hm = m < 10 ? '0' + m : ms = s < 10 ? '0' + s : sreturn `计算之后的时间是${h}小时${m}分${s}秒`}// 3. 打印输出let str = getTimes(second)document.write(str)// document.write(str)</script>


修复思路:
由于判断条件是‘ h < 10 || m < 10 || s < 10 ’,所以只要h、m、s其中一个为假就会补零,修复措施有两个,第一个方法分开写三个if语句判断h、m、s的位数,第二个方法用参考代码中的三元表达式赋值方法来写。

最终修复后的代码

 <script>let second = +prompt('请输入要转换的时间秒数')function autoChangetime( time ){// 计算公式:计算时分秒// 小时: h = parseInt(总秒数 / 60 / 60 % 24)// 分钟: m = parseInt(总秒数 / 60 % 60 )// 秒数: s = parseInt(总秒数 % 60) let h = parseInt(time / 60 / 60 % 24)let m = parseInt(time / 60 % 60 )let s = parseInt(time % 60)if ( h < 10  ){h = '0'+ h} if(m < 10 ){m = '0'+ m}if(s < 10){s = '0'+ s}return `${second}秒经过计算被转换为${h}时${m}分${s}秒`}let times = autoChangetime(second)document.write(times)</script>

8.拓展-函数参数个数

8.1 函数实参个数小于形参

 function fun(m,n){console.log(m + n)}fun(1)//上面相当于 m = 1, n = undefined// m + n = 1 + undefend = NaN

8.2 实参个数多于形参

实参个数多于形参,多出的实参直接忽略,不多出的参数按顺序逐一匹配,若想让多余的参数不被忽略,则需要引入伪数组参与计算。

 <!--2.实参个数多于形参,多出的实参直接忽略,不多出的参数按顺序逐一匹配,若想让多余的参数不被忽略,则引入伪数组参与计算  --><script>function fun(m,n){console.log(m + n)}fun(1,2,5)//输出1 + 2 =3,5不参与运算</script>


伪数组
arguments 只在函数内有效,表现形式为 伪数组
伪数组 比 真数组 少了些 pop() push()等方法

 <script>function fun(m,n){console.log(m + n)console.log(arguments)}fun(1,2,5)//输出1 + 2 =3,5不参与运算</script>


伪数组参与基本运算(与数组参与计算方法相同)

function fun ( m, n){let sum = 0for( let i = 0; i < arguments.length ; i++){sum += arguments[i]}document.write(sum)}// console.log(arguments)fun(1,2,5)


在函数外输出argument无效

<script>//  arguments 只在函数内有效,表现形式为 伪数组// 伪数组 比 真数组 少了些 pop() push()等方法//伪数组参与运算function fun ( m, n){let sum = 0for( let i = 0; i < arguments.length ; i++){sum += arguments[i]}document.write(sum)}console.log(arguments)fun(1,2,5)
</script>

8.3 如果调用的时候,我们没有传递实参,则默认为 0 的方法

 function fn (x,y){console.log(x + y)}fn( )fn(1,2 )

方法一:使用逻辑中断
 function fn (x,y){x = x || 0y = y || 0console.log(x + y)}fn( )fn(1,2 )

方法二:给形参设置默认值

x和y可以看作是函数内部的局部变量,函数只有在调用时才能被执行,声明时不被执行。

调用的时候会有个内部判断是否有参数传递过来:

(1)若x没有实参的值传入,则使用形参的值,即x = 0,y = 0。
(2)若x有实参的值传入,则使用实参的值进行赋值。
//方法二//x和y可以看作是函数内部的局部变量//函数只有在调用时才能被执行,声明时不被执行//调用的时候会有个内部判断是否有参数传递过来//若x没有实参的值传入,则使用形参的值,即x = 0,y = 0//若x有实参的值传入,则使用实参的值进行赋值
function fn ( x = 0 , y = 0){console.log(x + y)}fn()fn(1,6)

前端JavaScript梳理D4(JavaScript函数)相关推荐

  1. 好程序员web前端分享详细了解JavaScript函数

    好程序员web前端分享详细了解JavaScript函数,如果你曾经接触过JavaScript编程,你一定不会陌生如何定义并且调用一个函数.但是你知道在JavaScript中有多少种定义函数的方法吗?如 ...

  2. 好程序员前端教程之JavaScript闭包和匿名函数的关系详解...

    好程序员前端教程之JavaScript闭包和匿名函数的关系详解 本文讲的是关于JavaScript闭包和匿名函数两者之间的关系,从匿名函数概念到立即执行函数,最后到闭包.下面一起来看看文章分析,希望你 ...

  3. BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数

    BCSP-玄子前端开发之JavaScript+jQuery入门CH02_JavaScript函数 4.2 函数 4.2.1 什么是函数 类似于Java中的方法,是完成特定任务的代码语句块 特点 使用更 ...

  4. JavaScript中的工厂函数vs构造函数vs class

    原文链接:JavaScript Factory Functions vs Constructor Functions vs Classes 作者:Eric Elliott 译者:sunny 转载需提前 ...

  5. name optimize is not defined 怎么解决_Web前端:怎么在JavaScript中比较对象?

    大家好,我来了,本期为大家带来的前端开发知识是"Web前端:怎么在JavaScript中比较对象?",有兴趣做前端的朋友,一起来看看吧! 比较JavaScript中的原始值很简单. ...

  6. 菜鸟教程-Javascript学习笔记-JS函数之前

    教程连接是: https://www.runoob.com/js/js-tutorial.html DOM(一些操作页面元素的方法) BOM(一些操作浏览器的方法) ################# ...

  7. 【前端芝士树】Javascript的原型与原型链

    [前端芝士树]Javascript的原型.原型链以及继承机制 前端的面试中经常会遇到这个问题,自己也是一直似懂非懂,趁这个机会整理一下 0. 为什么会出现原型和原型链的概念 1994年,网景公司(Ne ...

  8. 【前端工程师手册】JavaScript作用域拾遗

    [前端工程师手册]JavaScript作用域拾遗 昨天总结了一些作用域的知识[前端工程师手册]JavaScript之作用域,但是发表完发现忘记了一些东西,今天拾个遗. 昨天说到了JavaScript中 ...

  9. javascript经典实例_一道前端经常忽视的JavaScript面试题

    题目 function Foo() { getName = function () { alert (1); }; return this;}Foo.getName = function () { a ...

最新文章

  1. R语言使用tidyquant包的tq_transmute函数计算持有某只股票的天、月、周收益率、ggplot2使用条形图(bar plot)可视化股票年收益率数据使用不同的色彩表征正收益率和负收益率
  2. SpringSecurity认证流程分析
  3. MyEclipse10安装SVN插件的几种方法
  4. html第二章课后选择题答案,HTML课后习题(带答案).doc
  5. OpenStack快速入门-queens版本
  6. 荣耀20 PRO差评太多?原来是这个原因,回应:差评不冤
  7. OpenAI公布强化学习新算法,可控制复杂机器人
  8. 1081. 不同字符的最小子序列
  9. java自动阅卷判断选择题,客观题型自动阅卷系统(管道过滤器模式)
  10. 主角连击敌人处理:连击次数的显示(图片数字字体)---1
  11. js实现签名功能(vue中使用电子签名)
  12. 如何使用Bootbox ?
  13. hive: Error in acquiring locks
  14. 冷库设计安装前有哪些检查工作
  15. 2015年中国数据库技术大会(DTCC)PPT合集
  16. 分解质因数Java_Java 分解质因数
  17. Python 常用标准库介绍
  18. CHIL-SQL-SELECT INTO 语句
  19. Skype for Business 网页安排会议(无Exchange Server)
  20. 唯众IT教学云平台获华为技术认证,入驻华为云严选商城

热门文章

  1. 纯 canvas 实现漂亮的仪表盘
  2. CPU调速器Governor说明
  3. 关于青风蓝牙NRD52832开发经验(一)
  4. zigbee协议栈初使用(三)无线数据传输
  5. php格式的种子,php读取torrent种子文件内容的方法(测试可用)
  6. 用docker-compose构建mysql主从结构
  7. 独立成分分析ICA在MATLAB中的实现
  8. JHOK-ZBG2 AC220V【漏电剩余继电器】
  9. 盘点哪些平台可以做下拉词优化
  10. 基于javaweb的宠物医院管理系统设计和实现(java+springboot+ssm+mysql+jsp)