ES6中的箭头函数和扩展-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41013537/article/details/80318195

本文回顾了ES5中的函数用法，并详细介绍了ES6中新增的功能，如函数默认值、错误处理（通过`throw new Error`）以及函数内部的严谨模式。还探讨了严谨模式与默认值之间的冲突，以及如何解决这个问题。同时，提到了`arguments.length`用于获取函数参数个数的方法。最后，简要提及了箭头函数的使用，展示了其简洁性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这节课开始，先不着急看ES6中的函数，而是回顾一下ES5中的函数写法。写一个函数，进行一个加法计算。

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

打印结果：

默认值

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

function add(a,b=2){
	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));

打印结果：

Error: A is error

函数中的严谨模式

我们在ES中就经常使用严谨模式来进行编程，但是必须写在代码最上边，相当于全局使用。在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')
	}
	returna+b
}
console.log(add.length);

打印结果：

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

箭头函数

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

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

打印结果：