ES6中的箭头函数和扩展

简介: ES6中的箭头函数和扩展
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(1));


上边的代码如果运行的话,你会发现浏览器控制台报错,这是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, 也就是说它得到的是必须传入的参数。


箭头函数


在学习Vue的时候,我已经大量的使用了箭头函数,因为箭头函数真的很好用,我们来看一个最简单的箭头函数。也就是上边我们写的add函数,进行一个改变,写成箭头函数。

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


{}的使用


在箭头函数中,方法体内如果是两句话,那就需要在方法体外边加上{}括号。例如下边的代码就必须使用{}.

var add =(a,b=1) => {
    console.log('jspang')
    return a+b;
};
console.log(add(1));


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


目录
相关文章
|
6月前
ES6之箭头函数
ES6之箭头函数
|
6天前
|
安全 JavaScript 前端开发
es6 箭头函数
【10月更文挑战第26天】ES6箭头函数为JavaScript开发者提供了一种更简洁、更直观的函数定义方式,同时其独特的`this`绑定和无`arguments`对象等特性也使得在一些特定场景下的代码编写更加方便和安全,但在使用时也需要注意其与普通函数的区别,以确保正确地使用和理解箭头函数。
|
10天前
|
自然语言处理
ES6 中箭头函数和普通函数区别
【10月更文挑战第19天】这些仅是对箭头函数和普通函数区别的一些主要方面进行的详细阐述,实际应用中可能还会有更多具体的细节和情况需要进一步探讨和理解。可以根据自己的需求进一步深入研究和实践,以更好地掌握它们在不同场景下的应用。
26 2
|
2月前
|
JavaScript
ES6--->箭头函数、类、模块化
ES6--->箭头函数、类、模块化
22 3
ES6学习(4)箭头函数
ES6学习(4)箭头函数
|
6月前
在ES6中,箭头函数可以像传统函数一样使用`this`吗?
在ES6中,箭头函数可以像传统函数一样使用`this`吗?
32 1
|
6月前
|
网络架构
ES6箭头函数的特性
ES6箭头函数的特性
|
6月前
Es6箭头函数
Es6箭头函数
61 0
|
自然语言处理 JavaScript
ES6中的箭头函数及其使用场景
ES6 (ECMAScript 2015) 引入了许多新特性,其中之一就是箭头函数。箭头函数是一种更加简洁和便捷的函数定义方式,本文将详细介绍 ES6 中的箭头函数,并探讨其适用场景及注意事项。
126 0