JavaScript 基础四函数使用、传参、返回值、作用域、匿名函数

本文链接：https://blog.csdn.net/yavlgloss/article/details/135390881

JavaScript 基础四函数

1.1 函数
1.2 函数使用
- 函数名命名规范
- 函数的调用
1.3 函数传参
1.4 函数返回值
- （1）语法
- （2）细节
1.5 作用域
1.6 匿名函数
案例-时间转换

1.1 函数

函数：function，是被设计为执行特定任务的代码块。
这么做的优势是有利于精简代码方便复用。

1.2 函数使用

函数的声明语法

function 函数名() {
	函数体
}

例：

function sayHi() {
	document.write('hi~')
}

函数名命名规范

和变量命名基本一致
尽量小驼峰式命名法
前缀应该为动词
命名建议：常用动词约定
e.g. getName(), addSquares()

动词	含义
can	判断是否可执行某个动作
has	判断是否含有某个值
is	判断是否为某个值
get	获取某个值
set	设置某个值
load	加载某些数据

函数的调用

//函数调用，这个函数体内的代码逻辑会被运行
函数名()

function sayHi() {
	document.write('hi~')
}

sayHi() // 函数调用

1.3 函数传参

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

（1）声明语法

function 函数名(参数列表) {
	函数体
}

参数列表 ① 传入数据列表 ② 声明这个函数需要传入几个数据 ③ 多个数据用逗号隔开

例子：

function getSquare(num1) {
	document.write(num1 * num1)
}

function getSum(num1, num2) {
	document.write(num1 + num2)
}

（2）调用有参函数

语法：函数名（传递的参数列表）

例：getSquare(8)

（3）形参和实参

在这里插入图片描述

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
开发中尽量保持形参和实参个数一致
我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参

（4）参数默认值

形参：可以看做变量，但是如果一个变量不给值，默认是undefined。
如果是function getSum(num1, num2) 不传参，undefined + undefined 结果是NaN。

改进：用户不输入实参，可以给 形参默认值，可以默认为 0，这样程序更严谨。
说明：这个默认值只会在缺少实参参数传递时才会被执行，所以有参数会优先执行传递过来的实参 ，否则默认为 undefined。

function getSum(num1 = 0, num2 = 0) {
	document.write(num1 + num2)
}

getSum() // 0， 如果不给形参默认值，结果是 NAN

例，参数是数组：
给形参（此题是数组）一个默认值 arr = []

<body>
  <script>
    // 1. 封装函数
    // 给一个参数的默认值
    function getArrSum(arr = []) {
      // console.log(arr)
      let sum = 0
      for (let i = 0; i < arr.length; i++) {
        sum += arr[i]
      }
      console.log(sum)
    }
    getArrSum([1, 2, 3, 4, 5])
    getArrSum([11, 22, 33])
    getArrSum()  // 0
  </script>
</body>

1.4 函数返回值

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

let num1 = prompt('请输入你的年龄')
let num2 = parseInt('111')

当然有些函数，则没有返回值：

alert('我是弹框，不需要返回值')

（1）语法

当函数需要返回数据出去时，用return关键字
语法：return 数据

例：

function getSum(num1 = 0, num2 = 0) {
	return num1 + num2
}

let sum = getSum(1, 2) // 3

（2）细节

细节：
① 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
② return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
③ return函数可以没有 return，这种情况函数默认返回值为 undefined

function fn() {
}

let re = fn()
console.log(re) // undefined

④ 两个相同的函数后面的会覆盖前面的函数。
⑤ 在Javascript中实参的个数和形参的个数可以不一致。
如果形参过多会自动填上undefined (了解即可)；
如果实参过多那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
⑥ 函数一旦碰到return就不会在往下执行了函数的结束用return

1.5 作用域

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

全局变量在任何区域都可以访问和修改
局部变量只能在当前函数内部访问和修改

特殊情况

变量有一个坑，特殊情况：

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
但是有一种情况，函数内部的形参可以看做是局部变量。

变量的访问原则

变量访问原则：采取就近原则的方式来查找变量最终的值。

只要是代码，就至少有一个作用域
写在函数内部的局部作用域
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
访问原则：在能够访问到的情况下 先局部，局部没有在找全局

案例

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

let num = 456
f1()

答案是123。
f2 的 console.log( num )中没有 num，就向上找，找到了 f1 的 num

1.6 匿名函数

在这里插入图片描述
匿名函数： 没有名字的函数, 无法直接使用。
使用方式：
① 函数表达式
② 立即执行函数

① 函数表达式

将匿名函数赋值给一个变量，并且通过变量名称进行调用我们将这个称为函数表达式。
声明语法：

let fn - function () {
	// 函数体
}

调用语法：

fn() //函数名（）

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

注意：
① 具名函数的调用可以写在任何位置
② 匿名函数函数表达式，必须先写表达式，后调用

② 立即执行函数

场景介绍：避免全局变量之间的污染。
注意：多个立即执行函数要用 ; 分号隔开，要不然会报错
不需要调用，立即执行
语法：

//方法1
(function () { console.log(11)}) ();

//方法2
(function () {console.log(11)} ());

案例-时间转换

计算公式：计算时分秒
小时: h = parseInt（总秒数/60 / 60 % 24）
分钟: m = parseInt（总秒数/60 % 60）
秒数: s = parseInt（总秒数%60）

<body>
  <script>
    // age = age + 1
    // 1. 用户输入
    let second = +prompt('请输入秒数:')
    // 2.封装函数
    function getTime(t) {
      // console.log(t)  // 总的秒数
      // 3. 转换
      // 小时：  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 : h
      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)
    document.write(str)
    console.log(h)
  </script>
</body>