JS笔记-函数

一、函数

函数是一个复杂数据类型。可以将重复使用的代码进行封装，实现代码的复用。

使用function关键字声明一个函数。

语法格式：

function 函数名（） {}

function foo() {
  // 代码
}
// function 声明函数的关键字，表示接下来是一个函数
// foo 函数名（自己定义名字）
// () 用来传参数的位置
// {} 写代码的位置
1
2
3
4
5
6
7

在使用函数的时候，必须要调用才可以。
调用语法格式：

函数名（）

所谓的函数调用就是让函数大括号中的代码执行。

函数的参数：

参数的本质就是一个变量，它位于函数小括号
语法格式：

function 函数名（参数1，参数2，…参数n）{}

• 参数的命名规则和变量命名规则一致。

形式参数

形式参数可以设置默认值，语法格式：

function 函数名（参数1 = 默认值1，参数2 = 默认值2）{}

函数的返回值（执行结果）

函数默认情况下执行结果为：undefined。
除非在函数内部使用return才可以改变计算结果（返回值），return后面跟什么内容，结果就是什么内容。
举例说明：

function foo() {
  return [1,2,3]
}
// return一次只能有一个结果
1
2
3
4

return包含两层含义

• 返回一个结果
• 让函数停止执行（return之后的代码不再执行）

1.定义函数

1.1 声明式

 function foo() {
   var obj = '可乐'
   console.log('我是foo')
 }
 function foo1() {  
   console.log('我是foo1')
 }
1
2
3
4
5
6
7

1.2 赋值式

var foo2 = function() {
  consloe.log('我是foo2')
}
1
2
3

声明式和赋值式的区别：

• 声明式可以先调用再定义。
• 赋值式先定义再调用。

2.调用函数

foo()
foo1()
foo2()
1
2
3

3.案例

求两个数的和：

function obj( ) {

  let x = 5;

  let y = 5;

  let z = x + y;

  console.log(z)

}
obj()
1
2
3
4
5
6
7
8
9
10
11
12

4.参数

函数的参数其实就是一个变量，写在函数的（）中。
语法格式为：

function 函数名(参数1，参数2，参数n…) { }

1.语法格式为：

function 函数名(参数1，参数2，参数n...) { }

// 如果一个变量没有被赋值，那么这个值就是 undefind
function arr(x, y) {

  console.log(x, y);

}
arr() // undefind undefind

// 2.在调用函数的时候为参数进行赋值

function arr(x, y) {

  console.log(x, y);
  
  let z = x + y;
  
  console.log(z);

}

arr(5，10) // 15
arr(2，30) // 32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

5.参数相关的术语

• 实参：实际的参数
• 形参：形式的参数
• 定义函数时，小括号中的参数叫形参，调用函数时小括号中的叫实参。

function arr(x, y) { // 形参

  console.log(x, y);
  
  let z = x + y;
  
  console.log(z);

}

arr(5，10) // 实参
1
2
3
4
5
6
7
8
9
10
11

6.函数参数练习

练习一：函数求和

用户输入两个数字：

let x = +promp('请输入一个数字：')

let y = +promp('请再输入一个数字：')
1
2
3

通过函数计算求和

function arr(a, b) {
  let z = a + b;
  console.log(c)
}
1
2
3
4

函数的调用

arr(x, y)
1

练习二：求数组中的和（使用参数来实现）

let num = [10, 21, 54, 23, 98, 12]

function obj() {
  let s = 0;
  for(let i = 0; i < num.length; i++) {
    s += number[i]
  }
}
obj()
1
2
3
4
5
6
7
8
9

练习三：求任意数组中的和（使用参数来实现）

let num = [10, 21, 54, 23, 98, 12]
let num1 = [17, 21, 34, 21, 96, 14]

function obj(arr) {
  let s = 0;
  for(let i = 0; i < arr.length; i++) {
    s += arr[i]
  }
  console.log(s)
}
obj(num)
obj(num1)
1
2
3
4
5
6
7
8
9
10
11
12

参数：任意的时候就会用到参数

7.参数的默认值

参数是一个变量，在没有赋值的时候可以给它一个默认值。

不严谨的写法：

function arr(name) {
  console.log('你好' + name)
}
arr('黄昏') // 你好黄昏
// 如果一个变量只声明了，但是没有赋值，那么他的值就是undefined
arr() // 你好undefined
1
2
3
4
5
6

严谨的写法：

使用参数的默认值是为了让函数的逻辑更严谨

function arr(name = '黄昏终结者') {
  console.log('你好' + name)
}
arr('黄昏') // 你好黄昏
arr() // 你好黄昏终结者
1
2
3
4
5

语法格式：

function 函数名(参数 = 默认值) {}
1

函数支持中英文练习：

function sayHello(name, lang = 'zh') {
  // lang自定义变量。如果他的值为zh表示用中文打招呼，如果为en就用英文打招呼
  if(lang === 'zh') {
    console.log('你好' + name)
  } else if(lang === 'en') {
    console.log('Hi~' + name)
  }
}
sayHello('黄昏'，'zh') // 你好黄昏
sayHello('boss'，'en') // Hi~boss

sayHello('黄昏'，'en') // Hi~黄昏
sayHello('boss') // 你好boss
1
2
3
4
5
6
7
8
9
10
11
12
13

8.函数的返回值

函数的返回值就是函数本身执行的【结果】，【结果】是一个值。

// 二元运算
let x = 5 + 5; // 10（结果）

// 三元运算
let y = x > 5 ? '真' : '假'； // 真（结果）

// 函数
// 一个函数的执行结果[默认]情况下为undefined
function obj() {
  console.log('一个函数')
}
let j = obj()； 
console.log(j); // undefined
1
2
3
4
5
6
7
8
9
10
11
12
13

// 改变函数的结果值需要用到函数的返回值，只需要在函数中使用return即可
function arr() {
  return 10;
}
let t = arr();
console.log(t); // 10
1
2
3
4
5
6

// 函数的return一次只能有1个返回值。如果需要返回多个值可以通过数组来实现。
function foo() {
  retun [1,2]
}
console.log(foo()); // [1,2]
1
2
3
4
5

分析之前用到的代码：

// 这是一个内置的函数，可以供开发者直接使用。
prompt('请输入一个数字：') // 实参

let n = prompt('请输入一个数字：');
console.log(n); // 执行结果就是用户输入的值

// 这是一个内置的函数，可以供开发者直接使用。
alert('这是一个警告')

let s = alert('这是一个警告');
console.log(s); // 结果是undefined
1
2
3
4
5
6
7
8
9
10
11

函数中是否需要有return取决于函数自身的功能。

数组：[12,8,6,13,21,7,30]

需求：将6从数组中删除

可以用splice(下标，1)

let numbers = [12,8,6,13,21,7,30]
// 先找到6的下标(封装成函数)
function arr(obj,num){
  let index;
  // 遍历查找某个单元
  for(let i = 0; i < obj.length; i++){
    if(obj[i] === num){
      index = i
      break
    } else {
      index = -1
    }
  }
  // 将结果返回到函数外部
  return index
}
let key = arr(numbers,6)
// 调用splice将其删除
numbers.splice(key,1)
console.log(numbers)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

函数中使用了return后，后面的代码就不再执行。

function foo() {
  console.log('会执行') // 输出
  return // 终止函数的执行
  console.log('测试') // 不会输出
}
foo()
1
2
3
4
5
6

return两个含义：

• 就是为了给函数添加一个返回值，那么后面需要跟一个值

• 单纯只是让函数停止执行，后面啥也不写。

function foo() {
  console.log('会执行') // 输出
  return 1 // 终止函数的执行
  console.log('测试') // 不会输出
}
foo()
1
2
3
4
5
6

练习：
(1)用户输入100以内的数字

let ages = [];
function set (age) {

  // 第一种实现方式
  // if(age > 0 && age <= 100) {
  //   ages.push(age);
  // }
  
  // 第二种实现方式
  if(age < 0 || age > 100) {
    return;
  }
  ages.push(age);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

(2)用户输入秒数,自动转换为时分秒

// 1小时是3600秒

// 封装一个函数能够将秒数转换为[时分秒]显示
function format(seconds) {
  // 将[秒]转换为[小时],parseInt(秒数/3600)
  let h = parseInt(seconds / 3600)
  // 将[秒]转换为[分钟],parseInt((秒数%3600)/60)
  let i = parseInt((seconds % 3600) / 60)
  // 将总的[秒]数转换成秒,seconds%60
  let s = seconds % 60
  return `时间为{h}:{i}:{s}`
}
// 用户输入的秒数
let seconds = +prompt('请输入一个秒数:')
let str = format(seconds)
console.log(str)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

9.函数总结

• 函数的返回值就是函数本身执行的【结果】，【结果】是一个值。

• 一个函数的执行结果【默认】情况下为undefined。

• 改变函数的结果值需要用到函数的返回值，只需要在函数中使用return即可。

• 函数中使用了return，return之后所跟的内容就是函数的返回值，也叫函数的执行结果。

• 函数的return一次只能有1个返回值。如果需要返回多个值可以通过数组来实现。

• 函数中是否需要有return取决于函数自身的功能。