JavaScript函数

福星高照~

已于 2024-05-25 21:59:20 修改

阅读量625

点赞数 10

分类专栏：前端 JS 文章标签： javascript 开发语言 ecmascript

于 2024-05-22 22:33:09 首次发布

本文链接：https://blog.csdn.net/atatsuki/article/details/139118861

版权

前端同时被 2 个专栏收录

26 篇文章 2 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

1.为什么需要函数

2.函数的使用

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

1.为什么需要函数

作用：抽取-封装、代码复用

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

语法：

function 函数名（）{
         函数体
}

2.函数的使用

命名规范：

（1）和变量命名基本一致

（2）尽量小驼峰式命名法

（3）前缀应该为动词

（4）命名建议：常用动词约定

function 函数名（参数列表）{
         函数体
}

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

（1）循环代码写完即执行，不能很方便控制执行位置

（2）随时调用，随时执行，可重复调用

4.函数传参

把要计算的数字传到函数内

若函数完成功能需要调用者传入数据，那么就需要用有参数的函数，可以极大提高函数的灵活性

语法：

function 函数名（参数列表）{
         函数体
}

参数列表：

（1）传入数据列表

（2）声明这个函数需要传入几个数据

（3）多个数据用逗号隔开

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

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

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）

实参可以理解为是给这个变量赋值

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

5.函数传参-默认变量

（1）undefined（2）NaN

用户不输入实参，可以给 形参默认值，可以默认为 0, 这样程序更严谨，可以如下操作：

function getSum(x = 0, y = 0) {
      console.log(x + y)
    }
    getSum()

说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参, 否则默认为 undefined

6.函数返回值

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

执行完特定任务之后，把任务的结果给我们

有返回值函数的概念：

（1）当调用某个函数，这个函数会返回一个结果出来

（2）这就是有 返回值 的函数

缺点：把计算后的结果处理方式写死了，内部处理了

解决：把处理结果返回给调用者

语法：

return  数据

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

（2）return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写

（3）return函数可以没有 return，这种情况函数默认返回值为 undefined

函数细节补充:

（1）两个相同的函数后面的会覆盖前面的函数

（2）在Javascript中实参的个数和形参的个数可以不一致：

如果形参过多会自动填上undefined (了解即可)

如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)

（3）函数一旦碰到return就不会在往下执行了函数的结束用return

函数返回值练习

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

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

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

断点调试：

进入函数内部看执行过程 F11

7.作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的 作用域 。

作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

在JavaScript中，根据作用域的不同，变量可以分为：

注意：

有一种特殊情况是全局变量是那种？（强烈不提倡）

（1）局部变量或者块级变量 没有let 声明直接赋值的当全局变量看

（2）还有一种特殊情况，函数内部的形参可以当做局部变量看

8.变量的访问原则

（1）只要是代码，就至少有一个作用域

（2）写在函数内部，即{}以内，是局部作用域

（3）如果函数中还有函数，那么作用域中再诞生一个作用域

（4）访问原则：在能够访问到的情况下先局部局部没有再找全局（作用域链：就近原则）

9.匿名函数

函数分为：具名函数、匿名函数

（1）具名函数：

声明：function fn()
{}
调用：fn()

（2）匿名函数：（ 没有名字的函数, 无法直接使用。）

function() {}

使用方式： （1）函数表达式（2）立即执行函数

1 函数表达式

（不命名函数名，直接把值给变量，通过变量名进行调用）
语法：

let fn = function(){

//函数体
}

调用：

fn ()  //函数名（）

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

使用场景

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

2 立即执行函数

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

//方式1

( function(形参) { console.log(11)} ) (实参);

//方式2

( function(x,y) { console.log(11)} (1,2) );

//立即执行函数必须加分号；不然会报错

注意：多个立即执行函数要用 ; 隔开，要不然会报错

立即执行函数需要调用吗？无需调用，立即执行，其实本质已经调用了

10.案例-转换时间

      // 1、用户输入总秒数
    let second = +prompt('请输入秒数')
    // 2.封装函数
    function getTime(t) {
      // console.log(t);
      let h = parseInt(t / 60 / 60 % 24)
      let m = parseInt(t / 60 % 60)
      let s = parseInt(t % 60)
      console.log(h, m, s);
      // 要补0
      h = h < 10 ? '0' + h : h  //要重新赋值h, 0要变成字符
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      console.log(h, m, s);
      return `转换完毕之后是${h}小时${m}分${s}秒`
    }
    let str = getTime(second)//return把结果给getTime(second),先声明变量str
    document.write(str)

不要忘记重新赋值、变量声明