一、函数参数的默认值(以前做法)
{
function fn(obj) { //不传值 默认值undefined,报错
var obj = obj || {}; //之前解决不传值 设置默认值的方法
return obj.userName = "zhangsan"
}
// let result = fn({}); //传空对象,zhangsan
let result = fn() //不传值
console.log(result)
}
ES6做法:
{
function fn(obj={}) { //不传值 设置默认值
return obj.userName = "lisi"
}
let result = fn() //不传值
console.log(result) //lisi
}
二、作用域
如果函数内有优先访问函数内的,没有访问函数体外的
{
let x = 456;
function fn(){
let x = 123; //如果这里没有let,则打印456
console.log(x) //123
}
fn()
}
{
let x = 456;
function fn(x){
console.log(x) //undefined
}
fn()
}
{
let x = 456;
function fn(x,y = x){
console.log(x,y) //hello hello
}
fn("hello")
}
{
let x = 456;
function fn(x,y = x){
console.log(x,y) //undefined undefined
}
fn()
}
如果调用时,函数作用域内部的变量x没有生成,结果就会不一样。
let x = 1;
function f(y = x) {
let x = 2;
console.log(y);
}
f() // 1
上面代码中,函数调用时,y的默认值变量x尚未在函数内部生成,所以x指向全局变量。
如果此时,全局变量x不存在,就会报错。
function f(y = x) {
let x = 2;
console.log(y);
}
f() // ReferenceError: x is not defined
三、rest参数
ES6引入rest参数(形式为“...变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
{
function fn(a,b,...c){
console.log(a,b,c) //1 2 [3, 4, 5, 6]
console.log(c.length) //4
}
fn(1,2,3,4,5,6)
}
注意,rest参数之后不能再有其他参数(即只能是最后一个参数),否则会报错。
四、箭头函数
- 一个参数的写法:
{
//箭头函数写法
let fn = y => y;
console.log( fn(5) )
// =>左侧的y指的是参数y
// =>右侧的y指的是return y
//等同于:
let fn = function(y){
return y
}
console.log( fn(5) )
}
- 不需要参数或需要多个参数,就使用一个圆括号代表参数部分
//不需要参数
var f = () => 5;
// ||
var f = function () { return 5 };
//多个参数
var sum = (num1, num2) => num1 + num2;
// ||
var sum = function(num1, num2) {
return num1 + num2;
};
如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。
var sum = (num1, num2) => {
return num1 + num2;
}
箭头函数注意点:
1.没有arguments对象(存放所有实参,是一个数组)
2.不能new(不能定义构造函数)
3.函数体内的this对象
- 关于arguments对象
//普通函数:
let fn = function(a,b){
console.log(arguments); //[1,2,3]
console.log(a,b); //1 2
return 123;
}
console.log( fn(1,2,3) )
//箭头函数:
let fn_1 = () => {
console.log(arguments); //arguments is not defined
return 456;
}
console.log( fn_1(1,2,3) )
实参于形参不必一一对应,原因是参数在函数内部用一个arguments对象来存放所有参数。
- 关于new
//普通函数:
let fn = function(a,b){
return 123;
}
console.log( new fn(1,2,3) ) //fn {}
//箭头函数:
let fn_1 = () => {
return 456;
}
console.log( new fn_1(1,2,3) ); // fn_1 is not a constructor
- 关于this
//普通函数
let obj = {
userName:"zhangsan",
run:function(){
setTimeout(function(){
console.log(this) //window
console.log(this.userName); //undefined,window上没有userName
})
}
}
obj.run()
//箭头函数
let obj = {
userName:"zhangsan",
run:function(){
setTimeout(()=>{
console.log(this) //{userName: "zhangsan", run: ƒ}
console.log(this.userName) //zhangsan
})
}
}
obj.run()