javascript:ES6的特点- 箭头函数实例 | ES6教程

在这篇博文中，我们将通过实例来学习javascript中箭头函数的基础知识。

为什么使用箭头函数

让我们在javascript中创建一个普通的函数声明。该函数有一个名称、参数和主体。

function incrementByOne(value) {
   return value + 2;
 }
incrementByOne(2);

上述同样的代码用新的语法重写--同样的函数用更短的语法。这是一个箭头函数，省略了函数名、大括号和返回语句。不需要隐式返回。语法包含肥大的箭头 =>

var incrementByOne = value => value + 2
incrementByOne(2);

语法

(parameters) => { statements/expression }

这里的参数可以是可选的或许多没有返回类型的语句 大括号是不需要的 表达式是需要大括号的代码 声明箭头函数的方法。我们将看到声明箭头函数的不同情况。 无参数语法

() => { statements/expression }

一个参数的语法

多参数语法

箭头函数示例

var strs = [
  'one',
  'two',
  'three',
  'four'
];
console.log(strs.map(strs => strs.length));

箭头函数错误/未定义实例

在以下情况下，这将不会像预期的那样工作。

new和构造函数的使用

使用箭头函数会抛出未发现的类型错误。MyObj不是一个构造函数

function MyObj1() {
}
var myobj1=new MyObj1()
console.log(myobj1); // outputs object
var MyObj = () => {};
var myobj = new MyObj();

console.log(myobj); // TypeError: MyObj is not a constructor

原型方法的使用

带有原型方法的数组函数会返回未定义。

var MyObj = () => {};
console.log(MyObj.prototype); // outputs undefined
function MyObj1() {
}
console.log(MyObj1.prototype); // outputs object

yield关键字在箭头函数中也不起作用。