[JS]函数

简介: [JS]函数

前言

  • 系列文章目录:
  • 根据视频和PPT整理
  • 视频及对应资料:
  • JS

1. 函数的概念

在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。

函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

2. 函数的使用

函数的使用分为两步:声明函数和调用函数。

2.1 声明函数

语法:

// 声明函数
function 函数名() {
    //函数体代码
}

注意:function 是声明函数的关键字,必须小写;由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum。

<script>
  // 声明函数
  function sayHello() {
    // 函数体
    console.log('hello world')
  }
</script>

2.2 调用函数

语法:

// 调用函数
函数名();  // 通过调用函数名来执行函数体代码

注意:调用的时候千万不要忘记添加小括号;声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。

<script>
  // 声明函数
  function sayHello() {
    console.log('hello world')
  }
  // 调用函数
  sayHello()
</script>

2.3 函数的封装

函数的封装是把实现一个或者多个功能的代码通过函数的方式封装起来,对外只提供一个简单的函数接口,在需要使用函数封装的功能时,直接调用函数即可,不用再次重复写实现功能的代码。

3. 函数的参数

参数的作用 : 在函数内部某些值不能固定,在函数声明的时候不能知道某些值具体是什么,只有在函数调用的时候才能确定,我们可以通过参数在调用函数时传递不同的值进去。

3.1 形参和实参

在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参。

形参:形式上的参数,在函数定义的时候,不知道传递的参数具体是什么。

语法:

// 带参数的函数声明
function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔
  // 函数体
}

而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。

实参:实际上的参数,在函数调用的时候传递的参数,此时知道参数的具体值。

在函数调用时,实参会传递给形参,在函数内部通过形参使用实参传递过来的值。

语法:

// 带参数的函数调用
函数名(实参1, 实参2, 实参3...);

函数的参数可以有,也可以没有,即函数参数的个数不限。

3.2 利用函数求任意两个数的和

<script>
  // 声明函数
  function getSum(num1, num2) {
    console.log(num1 + num2)
  }
  // 调用函数
  getSum(1, 2)
  getSum(3, 2)
</script>

3.3 函数形参和实参个数不匹配问题

3.3.1 实参的个数等于形参的个数

如果实参的个数等于形参的个数,则正常输出结果。

<script>
  // 声明函数
  function getSum(num1, num2) {
    console.log(num1 + num2)
  }
  // 调用函数
  getSum(1, 2)
</script>

3.3.2 实参的个数多于形参的个数

如果实参的个数多于形参的个数,则只取到形参的个数。

<script>
  // 声明函数
  function getSum(num1, num2) {
    console.log(num1 + num2)
  }
  // 调用函数
  // 实参的个数等于形参的个数
  getSum(1, 2)
  // 实参的个数多于形参的个数
  getSum(2, 3, 4)
</script>

3.3.3 实参的个数少于形参的个数

如果实参的个数少于形参的个数,则多出来的形参的值为undefined。

在JavaScript中,形参的默认值是undefined。

<script>
  // 声明函数
  function getSum(num1, num2) {
    console.log(num1 + num2)
  }
  // 调用函数
  // 实参的个数等于形参的个数
  getSum(1, 2)
  // 实参的个数多于形参的个数
  getSum(2, 3, 4)
  // 实参的个数少于形参的个数
  getSum(3)
</script>

4. 函数的返回值

4.1 return 语句

函数需要将值返回给函数的调用者,此时需要通过使用 return 语句实现。

语法:

// 声明函数
function 函数名(){
    ...
    // 函数会将return后的值返回给函数的调用者
    return  需要返回的值;
}
// 调用函数
变量 = 函数名();    // 此时调用函数就可以得到函数体内return的返回值
<script>
  // 声明函数
  function getSum(num1, num2) {
    sum = num1 + num2
    // 将计算出来的两数之和返回给函数的调用者
    return sum
  }
  // 调用函数并得到函数的返回值
  sum = getSum(1, 2)
  console.log(sum)
</script>

4.2 return 终止函数

函数中的代码在执行过程中如果遇到了 return 语句,return 语句之后的代码不会被执行。

<script>
  // 声明函数
  function getSum(num1, num2) {
    sum = num1 + num2
    // 将计算出来的两数之和返回给函数的调用者
    return sum
    console.log('hello world!')
    console.log('hello world!')
  }
  // 调用函数并得到函数的返回值
  sum = getSum(1, 2)
  console.log(sum)
</script>

4.3 return 的返回值

return 只能返回一个值。如果 return 后面的返回值是由用逗号隔开多个值组成的,则以最后一个为准。

如果需要一次性返回多个值,可以使用数组,将需要返回的多个值放入数组,然后将整个数组返回。

<script>
  // 声明函数
  function getNum(num1, num2, num3) {
    return num1, num2, num3
  }
  // 调用函数并得到函数的返回值
  num = getNum(1, 2, 3)
  console.log(num)
</script>

<script>
  // 声明函数
  function getNums(num1, num2, num3) {
    return [num1, num2, num3]
  }
  // 调用函数并得到函数的返回值
  nums = getNums(1, 2, 3)
  console.log(nums)
</script>

4.4 函数没有 return 语句返回值为 undefined

函数都是有返回值的,如果有 return 语句则返回 return 后面的值,如果没有return 语句则返回 undefined。

<script>
  // 声明函数
  function getNums(num1, num2, num3) {
    return [num1, num2, num3]
  }
  function fun() {
    console.log('fun')
  }
  // 调用函数并得到函数的返回值
  nums = getNums(1, 2, 3)
  res = fun()
  console.log(nums)
  console.log(res)
</script>

4.5 break ,continue ,return 的区别

  • break :结束当前的循环体(如 for、while)
  • continue :跳过本次循环,执行下次循环(如 for、while)
  • return :能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码

5. arguments

当我们不确定有多少个参数传递的时候,可以用 arguments 来获取传递给函数的参数。

在 JavaScript 中,arguments 实际上它是当前函数的一个内置对象。所有函数都内置了一个 arguments 对象,arguments 对象中存储了传递给函数的所有实参。

arguments展示形式是一个伪数组,因此可以进行遍历。

伪数组具有以下特点:

  • 具有 length 属性
  • 可以按索引方式储存数据
  • 不具有数组的 push , pop 等方法
<script>
  // 声明函数
  function fun() {
    console.log(arguments)
    console.log(arguments.length)
    console.log(arguments[0], arguments[1], arguments[2])
    for (var i=0; i<arguments.length; i++) {
      console.log(arguments[i])
    }
  }
  // 调用函数
  fun(1, 2, 3)
</script>

6. 函数可以调用另外一个函数

因为每个函数都是独立的代码块,用于完成特殊任务,我们可以在一个函数中调用另一个函数。

<script>
  function f1() {
    console.log('f1')
  }
  function f2() {
    console.log('f2')
    f1()
  }
  // 向调用 f2 函数,在 f2 函数中调用 f1 函数
  f2()
</script>

7. 函数的两种声明方式

7.1 利用函数关键字 function 自定义函数

语法:

// 声明定义方式
function fn() {...}
// 调用  
fn();

使用函数关键字 function 自定义的函数称为自定义函数,因为有函数名,所以也被称为命名函数。

调用函数的代码既可以放到声明函数的前面,也可以放在声明函数的后面。因为在浏览器解析js代码时,会将使用 var function 关键字声明定义代码提到其他js代码的前面。

<script>
  f1()
  function f1() {
    console.log('f1')
  }
</script>

7.2 函数表达式声明函数

语法:

// 这是函数表达式写法
var fn = function(){...}
// 调用的方式,函数调用必须写到函数体下面
fn()

由于使用函数表达式声明的函数没有名字,所以这种函数也被称为匿名函数。这种方式只是声明了一个匿名函数,然后将函数赋值给变量 fn。

这个fn 里面存储的是一个函数,函数表达式方式原理跟声明变量方式是一致的。

<script>
  var f1 = function() {
    console.log('f1')
  }
  f1()
</script>

函数调用的代码必须写到函数体后面。这是由于js代码在浏览器解析时会将使用 var function 关键字声明定义代码提前,但是赋值的代码并不会提前,所以这种方式声明的函数调用的代码必须写到函数体后面。如果在函数赋值前调用函数,相当于undefined(),undefined不是函数,会报错。

<script>
  console.log(f1)
  f1()
  var f1 = function() {
    console.log('f1')
  }
</script>

相关文章
|
1月前
|
JavaScript 前端开发
JavaWeb JavaScript ③ JS的流程控制和函数
通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
74 32
|
4月前
|
JavaScript 前端开发 Java
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法,包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明,并提供了示例代码。文章强调了函数的学习应结合源码和实践,适合JavaScript初学者和进阶开发者参考。
62 2
[JS]同事:这次就算了,下班回去赶紧补补内置函数,再犯肯定被主管骂
|
4月前
|
前端开发 JavaScript 开发者
除了 Generator 函数,还有哪些 JavaScript 异步编程解决方案?
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作,以实现高效、可读和易于维护的代码。
|
5月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
|
5月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
6月前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
5月前
|
JavaScript 前端开发
js教程——函数
js教程——函数
76 4
|
5月前
|
JavaScript 前端开发 Java
【javaScript数组,函数】的基础知识点
【javaScript数组,函数】的基础知识点
52 5
|
5月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
59 2
|
5月前
|
JavaScript 前端开发
Node.js 函数
10月更文挑战第5天
39 3

热门文章

最新文章