导读
- 函数是什么
- == 1. 定义函数==
- 函数声明
- 函数表达式
- 箭头函数
- ==2.调用函数==
- 函数调用
- 方法调用
- 构造函数调用
- 间接调用
- 隐式函数调用
- ==3.函数参数==
- 形参默认值
- 剩余形参
- arguments对象
- 函数调用中的扩展符
- 实参解构
函数是什么
- 函数是一个代码块。(代码块就是使用大括号包裹起来的语句的集合）
- 函数是可重复执行特定任务的代码块。
特点1：函数只定义一次，可被调用任意次。
特点2：定义的函数永远不会执行，除非你调用它。
示例：函数
function sum(a,b){
let c = a + b
return c
}
======1. 定义函数 ======
函数声明
函数声明是使用function关键字定义的函数声明语句。它是命名的代码块。
函数声明是定义函数的传统方式。它的语法格式如下：
function 函数名称(形参1,形参2,...,形参N){
//函数体
return 值
}
- function：关键字，用于声明函数。
- 函数名称：就是赋予代码块一个名字。函数声明会创建一个变量，函数名称就是变量的名称，这是理解函数的关键。函数名称用于存放代码块。代码块相当于变量的值。
-
形参：形参是函数的形式上的参数，用于接收函数调用时传入的实际参数。就是变量，只是省略了声明变量的关键词
var。它是小括号里用逗号分隔的参数。一个函数通常具有0个或多个形参。形参用于接收在函数调用时通过形参传入函数内的实参。 - 函数体 ：使用大括号包裹的代码块。函数体相当于函数名的值。
-
return语句：如果你希望函数运行之后计算出一个值，那么你需要在函数内使用
return语句显式设置返回值。return语句不是必须设置的，如果没有在函数体内设置return语句，那么函数默认的返回值是undefiend。注意：一个函数只能有一个返回值，如果你需要返回多个值，可以考虑将多个值放入一个数组里，以数组元素的形式返回。
示例: 声明一个求平方的函数
function square(a){
return a * a
}
函数表达式
函数表达式是使用function关键字定义的函数表达式。
语法
function (){
//代码块
return 值
}
- 函数表达式是一个匿名代码块。
- 函数表达式不会声明变量。
- 把函数表达式赋值给一个变量或常量取决于开发者。最佳实践是把函数赋值给常量，防止因意外而重写函数。
- 函数表达式不能再程序中单独存在。因为解析器遇到
function关键字会看做函数声明语句，必须告诉解析器这是函数表达式，比如：
方法1：使用小括号
(function(){})
方法2：赋值给常量
const fn = function(){}
注意: f() 与 f = function(){}的区别
函数声明语句在函数定义的语句之前是可以调用的。
在函数表达式在赋值给变量之前是无法调用函数的。
箭头函数
是什么
箭头函数是一种语法糖，使用特别简洁的语法定义函数。
- 使用箭头分隔函数参数和函数体;
- 不必使用function关键字（箭头函数是表达式而不是语句）
- 不需要函数名
const sum = (x,y) => { return x + y }
- 如果函数体只有一个return语句，可以省略return关键字和花括号
const sum = (x, y) => x + y
- 如果只有一个参数，可以省略小括号
const sum = x => x + x
- 如果没有参数，必须书写小括号
const sum = () => console.log('hello world')
- 如果函数体的返回值是一个return语句，要返回的是一个对象字面量表达式，则必须把对象放在小括号里
const f = x => { return {x: 'zhangsan'} }//正确
const f = x => ( {x: 'zhangsan'} )//正确
const f = x => {x: 'zhangsan'} //错误；什么也不返回
const f = x => {x:'zhangsan',age: 19} //语法错误
语法糖(syntatic sugar)是一计算机编程语言的术语，用于描述一种语言的特性，它可以让您更轻松地做某事/输入更少的内容，但实际上并没有向该语言添加任何它尚不具备的新功能。
箭头函数的区别
- 箭头函数从定义上下文继承this关键字的值（而非调用上下文）
- 箭头函数没有prototype属性（不能作为新类构造函数使用）
======2.调用函数======
当创建了一个函数之后，如果需要使用它，就必须要去调用它，调用函数的方法有五种：
- 函数调用
- 方法调用
- 构造函数调用
- 间接调用
- 隐式函数调用
函数调用
函数调用就是通过表达式调用函数。函数表达式只需要在函数名后加一对小括号即可。小括号内传入实际的参数，如果有多个参数，请使用逗号分隔。
语法
funtionName( 实参1,实参2,实参3,...,实参N )
- 实参： 是调用函数时，通过形参传入到函数内的实际的参数。所有的实参都是为了计算函数返回值而出现的。
示例： 调用square()函数
square(10) // 100
思考：形参数量和实参数量是否必须一致？答案是否定的。了解相关内容，请查阅“arguments'对象。作为函数的初学者，最好让形参与实参数量保持一致。
方法调用
待补充
构造函数调用
待补充
间接调用
待补充
隐式函数调用
待补充
======3.函数参数======
参数是什么？
参数是函数调用时，传入到函数体内的值。在函数体内对值进行处理，把处理的结果使用return返回出去。
参数的分类
形参：形式上的参数。形参出现在定义函数时。形参是函数体内的局部变量。(只不过省略了var声明而已) 。形参用于接收实参。 英文：parameter => para
实参：实际传入的参数。实参出现在调用函数时。实参是传入函数体内的值。实参通过形参传入函数体内。英文：arguments => args
一般我们需要对参数进行验证。因为js函数定义不指定参数类型。js函数调用不检测参数个数。
参数验证
//
function sum(a,b){
if(b){
return a + b
} else if(a){
return a
} else {
return 0
}
}
let result = sum(4,6,8)
console.log(result)
形参默认值
当函数调用时没有传递值或传递undefined进来时，形参默认值允许我们对形参使用初始化值。
示例：形参初始化
function sum(a=0,b=0){
return a + b
}
let result = sum()
console.log(result)
使用默认参数，不再需要检查函数体。现在可以将 0作为函数头中 b 的默认值。
function multiply(a, b) {
a = typeof a !== "undefined" ? a : 0;
b = typeof b !== "undefined" ? b : 1;
return a * b;
}
multiply(5, 2); // 10
multiply(5); // 5
multiply(); // 0
示例：先定义的参数可用于形参默认值
function greet(name, greeting, message = `${greeting} ${name}`) {
return [name, greeting, message];
}
greet("David", "Hi"); // ["David", "Hi", "Hi David"]
greet("David", "Hi", "Happy Birthday!"); // ["David", "Hi", "Happy Birthday!"]
arguments对象
示例：利用arguments对象向函数体内传递参数
function sum(){
let len = arguments.length
let sum = 0
for(let i=0;i<len;i++){
sum += arguments[i]
}
return sum
}
let result = sum(4,6)
console.log(result)
示例：求和
function sum(a,b,...args){
let num = a + b
for(n of args){
num = num + n
}
return num
}
let result = sum(4,6,3,7,5)
console.log(result)
arguments是什么
- 向函数体内传递实参的第二种方法
- arguments是一个函数体内的内置对象。
- arguments是一个类数组对象
- 通过arguments对象可以访问调用函数时的全部实参
什么时候使用arguments对象？
当实参数目不确定的时候，可以考虑使用arguments对象。但是在新写的代码中应该尽量避免使用它，它效率低且难优化。通常可以将其替换为...args剩余参数。
注意: 箭头函数内不存在arguments对象。
剩余形参(...rest)
当实参数量不确定时，可以考虑使用剩余形参(...rest)。
示例：
//需求：接收一个或多个实参，返回其中最大值。
function max(a,...rest){
let maxValue = -Infinity
for(n of rest){
if(n > maxValue){
maxValue = n
}
}
return maxValue
}
let result = max(1,10,100,1000)
console.log(result)
剩余形参(...rest)的语法
- 剩余形参rest前面有三个点
- 剩余形参必须是函数声明的最后一个参数
- 实参先传入形参，后传入剩余形参
- 剩余形参是一个数组
