第七节、ES6 中的箭头函数和扩展

最新推荐文章于 2024-04-28 14:44:03 发布

原创最新推荐文章于 2024-04-28 14:44:03 发布 · 215 阅读

CC 4.0 BY-SA版权

18 篇文章

订阅专栏

本文介绍了ES6中新增的功能，包括默认参数值、主动抛出错误、严谨模式、获取参数个数以及箭头函数等。通过示例展示了如何在实际编程中应用这些新特性。

回顾一下ES5中的函数写法。写一个函数，进行一个加法计算。

function add(a,b){
    return a+b;
}
console.log(add(1,2));

我们声明了一个add函数，然后传入a和b两个值，返回a+b的值。然后我们在控制台打印了这个函数的返回结果，这里是3.

在ES6中给我们增加了默认值的操作，我们修改上边的代码，可以看到现在只需要传递一个参数也是可以正常运行的。

function add(a,b=1){
    return a+b;
}
console.log(add(1));

在使用 Vue 框架中，可以经常看到框架主动跑出一些错误，比如 v-for 必须有：key值。其实很简单，ES6中我们直接用throw new Error( xxxx ),就可以抛出错误。

function add(a,b=1) {
    if(a == 0 ){
        throw new Error('this is error');
    }
    return a+b;
}
console.log(add(0))

我们经常在 ES5 中使用严谨模式来进行比编程，但是必须写在代码最上边，相当于全局使用。在 ES6 中我们可以写在函数体中，相当于针对函数来使用。

function add(a,b=1) {
    'use strict'
    if(a == 0 ){
        throw new Error('this is error');
    }
    return a+b;
}
console.log(add(0))

上边的代码如果运行的话，你会发现浏览器控制台报错，这是ES6中的一个坑，如果没人指导的话，可能你会陷进去一会。这个错误的原因就是如果你使用了默认值，再使用严谨模式的话，就会有冲突，所以我们要取消默认值的操作，这时候你在运行就正常了。

function add(a,b) {
    'use strict'
    if(a == 0 ){
        throw new Error('this is error');
    }
    return a+b;
}
console.log(add(1,2))

如果你在使用别人的框架时，不知道鄙人的函数需要传递几个参数怎么办？ ES6 为我们提供了得到参数的方法（xxx.length）。我们用上边的代码看一下需要传递的参数个数。

function add(a,b) {
    'use strict'
    if(a == 0 ){
        throw new Error('this is error');
    }
    return a+b;
}
console.log(add.length)

这时控制台打印出了2，但是如果我们去掉严谨模式，并给第二个参数加上默认值的话，这时候add.length的值就变成了1，也就是说它得到的是必须传入的参数。

来看一个最简单的箭头函数。也就是上边我们写的add函数，进行一个改变，写成箭头函数。

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

在箭头函数中，方法体内如果是两句话，那就需要在方法体外边加上{ } 括号。

var add =(a,b=1) => {
    console.log('方括号的使用')
    return a+b;
};
console.log(add(1));

箭头函数中不可加new，也就是说箭头函数不能当构造函数进行使用。