es6的函数扩展-箭头函数

责编:menVScode 2018-02-25 16:22 阅读(552)

        1、为函数参数指定默认值

// es5
function fnEs5(a,b){
    var a = a || 10;
    var b = b || 20;
    console.log(a+b);
    // 存在小缺陷:当a/b为0时,布尔值为false,代码需要再做判断。
}

//es6
function fnEs6(a=10,b=20){
    console.log(a+b);
}


        2、函数的 rest 参数:参数形式为(...变量名),用于获取函数的多余参数,这样就不需要使用 argument 对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。

// es5
function sumEs5(){
    var args = arguments;
    console.log(args)
    var res = 0;
    for (var i = 0; i < args.length; i++) {
        res += args[i];
    };
    console.log(res)
}
sumEs5(1,2,3); // 6

// es6
function sumEs6(...arr){
    var res = 0;
    for (var i = 0; i < arr.length; i++) {
        res += arr[i]
    };
    console.log(res)
}
sumEs6(1,2,3); // 6

        在使用rest参数是时,前面还能添加其他的参数,但是在rest参数后面不能在添加其他参数,否则会报错。

function sumEs6(int,...arr){
    var res = int;
    for (var i = 0; i < arr.length; i++) {
        res += arr[i]
    };
    console.log(res)
}
sumEs6(10,1,2,3); // 16


        3、箭头函数

        在 ES6 中允许使用“箭头”(=>)方式来定义函数。

        【1】单个参数的时候,不需要加括号

// 箭头函数
var fn = a => a;
// es5
var fn = function(a){
    return a;
}

        【2】多个括号的时候,需要加括号

var fn = (a,b) => a+b;
console.log(fn(1,2));

        【3】箭头函数的函数体有多行代码的时候,需要用花括号包起来

var fn = (a,b) => {
    a = a*2;
    b = b*3;
    return a+b;
}
console.log(fn(1,2));

        【4】当箭头函数的返回值是一个对象的时候,需要一个括号将返回值包起来。

var fn = (a,b) => ({a,b})
console.log(fn(1,2)); // {a: 1, b: 2}

        【5】箭头函数体内没有自己的 this 对象,所以在使用的时候,其内部的 this 就是定义时所在环境的对象,而不是使用时所在环境的对象。

function fn(){
    setTimeout(function(){
        console.log(this)
    },1000)

    setTimeout(()=>{
        console.log(this)
    },1000)
}

var obj = {a:1}

fn.call(obj);
// 普通函数中打印this结果是:window;
// 箭头函数打印this结果是:Object {a: 1}
// 因为箭头函数体内没有自己的this对象,当函数fn执行的时候通过call将fn的this指向了obj,箭头函数定义环境就是fn执行时的环境,所以其this指向就是obj对象。

        因此箭头函数不能用call、apply、bind改变其内部this指向,压根就没有this。

        【6】箭头函数体内没有argument对象,如果要用,可以用Rest参数代替。

function fn(){
    setTimeout(()=>{
        console.log(arguments); // 打印处fn的arguments的对象
    },1000)
}
fn(1,2,3);

const fnn = (...arr)=>{
    console.log(arr)
}
fnn(1,2,3); // [1, 2, 3]

        【7】不可以当作构造函数,不可以使用 new 命令,否则会抛出一个错误。

const Fn = (a,b) => a+b
const f = new Fn(1,2); // Uncaught TypeError: Fn is not a constructor

        【8】箭头函数不能用作Generator函数。

标签: 箭头函数 es6
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码