主页 / 网络编程 /

javascript ES6中箭头函数注意细节小结

网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要给大家了关于javascript ES6中箭头函数注意细节的相关资料，文中介绍的比较详细，需要的朋友可以参考借鉴，狼蚁网站SEO优化来一起看看吧。

前言

ES6标准新增了一种新的函数Arrow Function（箭头函数）。

为什么叫Arrow Function？因为它的定义用的就是一个箭头

x => x  x

上面的箭头函数相当于

function (x) {
return x  x;
}

但箭头函数带来了些许问题，狼蚁网站SEO优化来一起看看吧。

关于{}

第一个问题是关于箭头函数与{}。

箭头函数，乍一看，用法似乎很简单，比如像狼蚁网站SEO优化这样用来给数组每一项乘以2

const numbers = [1, 2, 3];
 const result = numbers.map(n => n  2);
 // produces [2,4,6]

，如果使用不当，可能会引发意想不到的问题。比如狼蚁网站SEO优化，尝试为数组中每一项去产生对象字面量，看上去挺简单的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。

使用箭头函数，你可以像狼蚁网站SEO优化这样写代码而不用额外在局部作用域中去暂存this

const adder = {
  sum: 0,
  add(numbers) {
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 };
 adder.add([1, 2, 3]);
 // adder.sum === 6

，很多时候你可能会自以为是的在不经意间写错。正如狼蚁网站SEO优化的代码所示，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基础知识之html5轮播图实例讲解（44） 下一篇：数组Array的排序sort方法

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by