[ES6] 细化ES6之 -- 函数的扩展

函数参数的默认值

函数参数指定状认值

ES6 之前，不能直接为函数的参数指定默认值，如果定义了形参,不传递实参时导致形参为undefined，只能采用变通的方法。

//ES5
function fn(arg) {
    arg = arg || 0;
    console.log(arg);//0
}
fn()

//ES6
function fn(arg = 0) {
    console.log(arg);//0
}
fn()

 

与解构赋值配合使用

参数默认值可以与解构赋值的默认值，结合起来使用。

function fn([a,b=0]) {
    console.log(a + b);//1
}
fn([1])

 

函数参数的作用域

如果为函数的参数设置默认值的话，当函数声明进行初始化时，参数会形成一 个独立的作用域。这个作用域会在函数初始化完毕时消失。

let v = 100;
function fn(arg = v) {
    let v = 1000;
    console.log(arg);//100
}
fn()

 

rest参数

ES6 引入 rest 参数（形式为...变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

// ES6 - 利用rest 参数接收多余的参数
function fn(a,b,...args) {
    //扩展运算符-原地展开可迭代的对象(数组、字符串等)
    console.log(a, b, ...args);
}
fn(1,2,3,4,5)// 1 2 3 4 5

• rest参数之后不能再有其他参数(即只能是最后一个参数)，否则会报错。
• 函数的length属性，不包含rest参数。

 

箭头函数

箭头函数是什么

ES6 允许使用“箭头”（=>）定义函数。箭头函数是匿名的

简洁的函数和this会影响引入箭头函数

• () - 表示声明函数时的参数(形参)
• =>内容 - 表示声明函数时的函数体

var n = () => 5;
var n = function () {
    return 5
};
console.log(n());//5


function fn(a,b) {
    var result = a+b;
    return result
}
//改写为箭头函数
var fn = (a,b)=>a+b;
console.log(fn(1, 2))//3



function fn(a,b) {
    var result = a+b;
    return result
}
//改写为箭头函数
var fn = (a,b)=>{
    var result = a+b
    console.log(result);
}
fn(1,2)

 

箭头函数的this

ES5

定义函数时，使用的this ->指向调用函数时的上下文对象

function fn() {
    console.log(this)
}
//将fn作为函数进行调用
fn();//当前执行环境中的全局对象(浏览器环境是window;Node. js环境是Global对象)

// 使用call()或apply()方法调用函数fn
let obj={}
fn.call(obj);//当前执行环境中的全局对象(浏览器环境是window;Node. js环境是Global对象)
//函数fn作为对象obj2的方法
let obj2 = {
    sayMe:fn
}
obj2.sayMe()// obj2

ES6

声明箭头函数，函数中的this ->指向的是定义箭头函数时的上下文对象

var n =()=>{
    console.log(this)
}
n()// {}
var obj3 ={
    sayMe : n
}
obj3.sayMe()// {}

 

简头函数的语法结构

• 基本语法结构

  • (參数1,参数2, …参数N)=> {函数声明}
    (参数1,参数2.,…参数N)=>表达式(单一)
    相当于: (参数1,参数2, …参数N) =>{ return表达式;}

  • 当只有一个参数时，圆括号是可选的:
    (单一参数) => {函数声明}
    单一参数=> {函数声明}

  • 没有参数的函数应该写成一对圆括号。
    () => {函数声明}

• 高级语法结构

  • 支持剩余参数和默认参数
    (参数1,参数2, …rest )=>{函数声明}
    (参数1 =默认值1,参数2, …,参数N =默认值N) => {函数声明}

 

箭头函数的注意事项

（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。

（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

（4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

//箭头函数不能作为构造函数使用
var fn = () =>{
    this.name = '张无忌'
}
var f = new fn()
console.log(f);


//箭头函数可以作为对象的方法
let obj = {
    name : '张无忌',
    sayMe : ()=>{
        console.log('this is 张无忌');
    }
}
obj.sayMe()


// ES6对象方法定义
let obj = {
    name : '张无忌',
    sayMe(){
        console.log('this is 张无忌');
    }
}
obj.sayMe()

//箭头函数中不存在arguments对象， 需要使用rest参数进行替换
var fn = (...args) => {
    console.log(args);
}
fn(1,2,3,4,5);

 

函数的尾调用

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。

function g(x){
    return x=2;
}
function fn(x){
    return g(x);// 表示尾调用
}

console.log(fn(3));//5

尾调用不一定出现在函数尾部，只要是最后一步操作即可。

以下三种不属于尾调用

• 情况一

//调用函数g之后，还有赋值操作
function f(x){
  let y = g(x);
  return y;
}

• 情况二

//写在一行内,执行的不是最后一步操作
function f(x){
  return g(x) + 1;
}

• 情况三

function f(x){
  g(x);
}

// 相当于
function f(x){
  g(x);
  return undefined;
}