13518219792
小编给大家分享一下javascript ES6中箭头函数注意细节有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
前言
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。
为什么叫Arrow Function？因为它的定义用的就是一个箭头：
x => x * x
上面的箭头函数相当于：
function (x) {
return x * x;
}但箭头函数带来了些许问题，下面来一起看看吧。
关于{}
第一个问题是关于箭头函数与{}。
箭头函数，乍一看，用法似乎很简单，比如像下面这样用来给数组每一项乘以2：
const numbers = [1, 2, 3]; const result = numbers.map(n => n * 2); // produces [2,4,6]
但是，如果使用不当，可能会引发意想不到的问题。比如下面，尝试为数组中每一项去产生对象字面量，看上去挺简单的map操作，还是引发了意外。
const numbers = [1, 2, 3];
const result = numbers.map(n => { value: n });
// produces [undefined], [undefined], [undefined]什么原因造成的呢？
稍微分析可知，引起上面问题在于，箭头函数内部包裹在花括号之间的代码，被认为是一段独立的代码块而不是对象字面量，因此其单独执行，显然得到的结果就是一个全为undefined的数组。
于是，在这种情况下，其中的代码就必须有明确的返回语句或者用圆括号()包括对象字面量。
const result = numbers.map(n => ({ value: n }));
// [{value: 1}, {value:2}, {value:3}]关于this
第二个问题是关于箭头函数与this。
使用箭头函数，你可以像下面这样写代码而不用额外在局部作用域中去暂存this：
const adder = {
sum: 0,
add(numbers) {
numbers.forEach(n => {
this.sum += n;
});
}
};
adder.add([1, 2, 3]);
// adder.sum === 6然而，很多时候你可能会自以为是的在不经意间写错。正如下面的代码所示，this并不指向”adder”对象，而指向”adder”对象所在的作用域：
const adder = {
sum: 0,
add: (numbers) => { // scope here is important
numbers.forEach(n => {
this.sum += n;
});
}
};
adder.add([1, 2, 3]);
// adder.sum === 0最后请记住一点：箭头函数中的this继承自外围作用域的值，因此我们不能改变其指向。
以上是“javascript ES6中箭头函数注意细节有哪些”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联网站建设公司行业资讯频道！
另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
