【JavaScript】12_函数1:函数的参数,箭头函数的参数

时间:2023-02-14 18:17:06

1、初识函数

函数(Function)

  • 函数也是一个对象
  • 它具有其他对象所有的功能
  • 函数中可以存储代码,且可以在需要时调用这些代码

语法:

function 函数名(){
语句...
}

调用函数:

- 调用函数就是执行函数中存储的代码
- 语法:
函数对象()

使用typeof检查函数对象时会返回function

<script>
// 创建一个函数对象
function fn(){
console.log("你好!")
console.log("Hello!")
console.log("萨瓦迪卡")
console.log("阿尼哈撒有")
}
console.log(typeof fn)
// fn()
// fn()
// fn()
</script>

2、函数的创建方式

函数的定义方式:

1.函数声明

function 函数名(){

语句...

}

2.函数表达式

const 变量 = function(){

语句...

}

3.箭头函数

() => {

语句...

}

<script>
function fn(){
console.log("函数声明所定义的函数~")
}

const fn2 = function(){
console.log("函数表达式")
}

const fn3 = () => {
console.log("箭头函数")
}

const fn4 = () => console.log("箭头函数")


console.log(typeof fn)
console.log(typeof fn2)
console.log(typeof fn3)
console.log(typeof fn4)
fn4()
</script>

3、参数

形式参数

- 在定义函数时,可以在函数中指定数量不等的形式参数(形参)
- 在函数中定义形参,就相当于在函数内部声明了对应的变量但是没有赋值

实际参数

- 在调用函数时,可以在函数的()传递数量不等的实参
- 实参会赋值给其对应的形参
- 参数:
1.如果实参和形参数量相同,则对应的实参赋值给对应的形参
2.如果实参多余形参,则多余的实参不会使用
3.如果形参多余实参,则多余的形参为undefined

- 参数的类型
- JS中不会检查参数的类型,可以传递任何类型的值作为参数

1.函数声明

​ function 函数名([参数]){ ​
语句... ​ }

2.函数表达式

​ const 变量 = function([参数]){ ​ 语句...
​ }

3.箭头函数

​ ([参数]) => { ​ 语句... ​
}

<script>
/*
定义一个可以求任意两个数和的函数
*/

// function sum(){
// let a = 123
// let b = 456
// console.log(a + b)
// }

// const sum2 = () => console.log(1 + 1)
// sum()

function fn(a, b){
console.log("a =", a, a.name)
console.log("b =", b)
}

// fn(1)
// fn(true, "hello")
// fn(null, 11n)
// fn({name:"孙悟空"},"hello")

function sum(a, b){
console.log(a + b)
}
sum(123, 456)
</script>

4、箭头函数的参数

<script>

const fn3 = () => {
console.log("箭头函数")
}

//只有一行代码时,可以不加大括号,不能写return语句,省略大括号,会隐式的返回函数返回值(P288页)
const fn4 = () => console.log("箭头函数")
//--------------------------------------------------

const fn = (a, b) => {
console.log("a =", a);
console.log("b =", b);
}


// 当箭头函数中只有一个参数时,可以省略()
const fn2 = a => {
console.log("a =", a);
}


// fn2(123)

// 定义参数时,可以为参数指定默认值
// 默认值,会在没有对应实参时生效
const fn3 = (a=10, b=20, c=30) => {
console.log("a =", a);
console.log("b =", b);
console.log("c =", c);
}
fn3(1, 2)
</script>