目录
一、函数
1、函数:实现某种功能的程序模块
2、函数参数的不定参数
3、箭头函数
A、没有参数,用括号代替
B、一个参数,括号可以省略
C、多个参数
D、利用箭头语法里隐式返还的时候需要注意对象的情况
一、函数
1、函数:实现某种功能的程序模块
参数(形参):形式参数,占位符,在函数定义时没有数据
参数(实参):实在参数,在函数中调用使用,表示实际的数据
函数形参的默认值:在很多情况下,需要在使用函数的时候给定默认参数,在ES5标准中
//ES5中定义函数的默认参数
function fun(name,age,cb){//name,age,cb都是形参,没有任何东西,都是形式参数
name = typeof(name !== 'undefined')?name:'张三';//name的值默认为张三
age = typeof(age !== 'undefined')?age:20;
cb = typeof(cb !== 'undefined')?cb:function(){
console.log('我是默认函数')
}
console.log(`${name},${age}`)
}
//如果name等于undefined,则把张三的值传给他,如果name不等于undefined,则把name自己的参数传过去
fun()
fun('李四',30)
/*输出:
undefined,undefined
李四,30
*/
ES6中的写法
function fun1(name='张三',age='30',cb){
console.log(`${name},${age}`)
}
fun1()
fun1('王五',36)
/*输出:
张三,30
王五,36
*/
2、函数参数的不定参数
很多情况下,使用函数传参的时候,形参的数量是不固定的,这时候要获取参数值就会比较麻烦。在ES5中可以通过隐藏参数arguments来获取,此时会把所有参数放在arguments中
function fun(num,str,...rest){//...解构运算符 ...rest不定参数
console.log(arguments);//代表函数的参数
console.log(arguments[0])//每个函数都有一个arguments属性
console.log(arguments[1]);//参数
console.log(arguments[2]);
console.log(rest)
}
fun(123,'西邮','长安南路',456,789)
/*输出:
[Arguments] { '0': 123, '1': '西邮', '2': '长安南路', '3': 456, '4': 789 }
123
西邮
长安南路
[ '长安南路', 456, 789 ]
*/
3、箭头函数
箭头语法最大的特点是有箭头"=>"符号
箭头函数:let/const 变量名字 = ([参数])=>{函数体语句(记得要return)}
(1)若只有一个参数,则()是可以省略的
(2)若函数体当中只有一条语句,则{}也可以省略,并且这条语句默认带有return功能
(3)用箭头函数后,就没有隐形的arguments参数
let getName = name=> name
let getName = (name)=> {
return name
}
//箭头函数:let/const 变量名字 = ([参数])=>{函数体语句(记得要return)}
//(1)若只有一个参数,则()是可以省略的
//(2)若函数体当中只有一条语句,则{}也可以省略,并且这条语句默认带有return功能
//(3)用箭头函数后,就没有隐形的arguments参数
// let getName = name=> name
let n = getName('张三');
console.log(n)
/*输出:
张三
*/
A、没有参数,用括号代替
let fun = ()=> '张三'
B、一个参数,括号可以省略
let fun = arg=>'李四'
C、多个参数
let fun = (arg1,arg2)=>arg1 + arg2
console.log(fun(1,3))
D、利用箭头语法里隐式返还的时候需要注意对象的情况
let fun = () => {
name:'张三',
age:20
}
这个代码感觉是返还一个对象,但是这里的大括号和函数里的大括号在含义上有冲突,系统会认为大括号是函数里的括号,而不是对象里的括号,导致报错,应向以下方式更改
let fun = () => ({
name:'张三',
age:20
})
console.log(fun())
/*输出:
{ name: '张三', age: 20 }
*/
E、箭头函数里没有this绑定,this指向对象本身,但如果有箭头函数,函数中的this指向就会发生改变
let id = 12;
let obj = {
id: 2,
fun: ()=>{
console.log(this.id);
//this代表obj的对象(在function里),在箭头函数中this。。不存在,因为不知道this代表的是谁
}//嵌套在html里,this就指向了window,this.id指的就是window的id,而node中不存在window,所以打印不出来
}
obj.fun()
/*输出
undefined
*/
可以在html中导入这个js,然后打开页面的开发者工具,里面输出的是12这个数值。