uTools-Manuals/docs/javascript/Reference/Functions/Arrow_functions.html

<article id="wikiArticle">
<div> </div>
<p><strong>箭头函数表达式</strong>的语法比<a href="Reference/Operators/function">函数表达式</a>更简洁，并且没有自己的<a href="Reference/Operators/this">this</a>，<a href="Reference/Functions/arguments">arguments</a>，<a href="Reference/Operators/super">super</a>或 <a href="Reference/Operators/new.target">new.target</a>。这些函数表达式更适用于那些本来需要匿名函数的地方，并且它们不能用作构造函数。</p>
<h2 id="Syntax" name="Syntax">语法</h2>
<blockquote>
<h3 class="brush: js" id="基础语法">基础语法</h3>
<pre><code  class="language-javascript">(参数1, 参数2, …, 参数N) =&gt; { 函数声明 }

//相当于：(参数1, 参数2, …, 参数N) =&gt;{ return 表达式; }
(参数1, 参数2, …, 参数N) =&gt; 表达式（单一）

// 当只有一个参数时，<strong>圆括号</strong>是可选的：
(单一参数) =&gt; {函数声明}
单一参数 =&gt; {函数声明}

// 没有参数的函数应该写成一对圆括号。
() =&gt; {函数声明}</code></pre>
</blockquote>
<h3 id="高级语法">高级语法</h3>
<blockquote>
<pre><code  class="language-javascript">//加括号的函数体返回对象字面表达式：
<em>参数</em>=&gt; ({<em>foo: bar</em>})

//支持<strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">剩余参数</a></strong>和<strong><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">默认参数</a></strong>
(参数1, 参数2, <strong>...rest</strong>) =&gt; {函数声明}
(参数1 <strong>= </strong><strong>默认值1</strong>,参数<em>2</em>, …, 参数N <strong>= </strong><strong>默认值N</strong>) =&gt; {函数声明}

//同样支持参数列表<a href="https://developer.mozilla.orgReference/Operators/Destructuring_assignment">解构</a>
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) =&gt; a + b + c;
f();  // 6</code></pre>
</blockquote>
<h2 id="描述">描述</h2>
<p>参考 <a class="external" href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/" rel="noopener">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p>
<p>引入箭头函数有两个方面的作用：更简短的函数并且不绑定<code>this</code>。</p>
<h3 id="更短的函数">更短的函数</h3>
<pre><code  class="language-javascript">var elements = [
  'Hydrogen',
  'Helium',
  'Lithium',
  'Beryllium'
];

elements.map(function(element) { 
  return element.length; 
}); // 返回数组：[8, 6, 7, 9]

// 上面的普通函数可以改写成如下的箭头函数
elements.map((element) =&gt; {
  return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数只有一个参数时，可以省略参数的圆括号
elements.map(element =&gt; {
 return element.length;
}); // [8, 6, 7, 9]

// 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
elements.map(element =&gt; element.length); // [8, 6, 7, 9]

// 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
// 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
// 可以替换成任意合法的变量名
elements.map(({ "length": lengthFooBArX }) =&gt; lengthFooBArX); // [8, 6, 7, 9]
</code></pre>
<h3 id="不绑定this">不绑定<code>this</code></h3>
<p>在箭头函数出现之前，每个新定义的函数都有它自己的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>值（在构造函数的情况下是一个新对象，在严格模式的函数调用中为 undefined，如果该函数被作为“对象方法”调用则为基础对象等）。<code>This</code>被证明是令人厌烦的面向对象风格的编程。</p>
<pre><code  class="language-javascript">function Person() {
  // Person() 构造函数定义 `this`作为它自己的实例.
  this.age = 0;

  setInterval(function growUp() {
    // 在非严格模式, growUp()函数定义 `this`作为全局对象, 
    // 与在 Person()构造函数中定义的 `this`并不相同.
    this.age++;
  }, 1000);
}

var p = new Person();</code></pre>
<p>在ECMAScript 3/5中，通过将<code>this</code>值分配给封闭的变量，可以解决<code>this</code>问题。</p>
<pre><code  class="language-javascript">function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    //  <span>回调引用的是<span lang="EN-US">`that`</span>变量<span lang="EN-US">, </span>其值是预期的对象<span lang="EN-US">.</span></span> 
    that.age++;
  }, 1000);
}</code></pre>
<p>或者，可以创建<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">绑定函数</a>，以便将预先分配的<code>this</code>值传递到绑定的目标函数（上述示例中的<code>growUp()</code>函数）。</p>
<p>箭头函数不会创建自己的<code>this,它只会从自己的作用域链的上一层继承this</code>。因此，在下面的代码中，传递给<code>setInterval</code>的函数内的<code>this</code>与封闭函数中的<code>this</code>值相同：</p>
<pre><code  class="language-javascript">function Person(){
  this.age = 0;

  setInterval(() =&gt; {
    this.age++; // |this| 正确地指向 p 实例
  }, 1000);
}

var p = new Person();</code></pre>
<h4 id="与严格模式的关系">与严格模式的关系</h4>
<p>鉴于 <code>this</code> 是词法层面上的，<a href="Reference/Strict_mode">严格模式</a>中与 <code>this</code> 相关的规则都将被忽略。</p>
<pre><code  class="language-javascript"><code class="language-js"><span class="keyword token">function</span> <span class="function token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
  <span class="keyword token">var</span> closure <span class="operator token">=</span> <span class="string token">"123"</span>
  <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="keyword token">function</span> <span class="function token">growUp</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="keyword token">this</span><span class="punctuation token">.</span>age<span class="operator token">++</span><span class="punctuation token">;</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>closure<span class="punctuation token">)</span>
  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="keyword token">var</span> p <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">Person</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

<span class="keyword token">function</span> <span class="function token">PersonX</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="string token">'use strict'</span>
  <span class="keyword token">this</span><span class="punctuation token">.</span>age <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span>
  <span class="keyword token">var</span> closure <span class="operator token">=</span> <span class="string token">"123"</span>
  <span class="function token">setInterval</span><span class="punctuation token">(</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="operator token">=</span><span class="operator token">&gt;</span><span class="punctuation token">{</span>
    <span class="keyword token">this</span><span class="punctuation token">.</span>age<span class="operator token">++</span><span class="punctuation token">;</span>
    console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>closure<span class="punctuation token">)</span>
  <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="number token">1000</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span>

<span class="keyword token">var</span> px <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">PersonX</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></code></pre>
<p>严格模式的其他规则依然不变.</p>
<h4 id="通过_call_或_apply_调用">通过 call 或 apply 调用</h4>
<p>由于 <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">箭头函数没有自己的this指针</span></font>，通过 <code>call()</code><em> 或</em> <code>apply()</code> 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立---译者注）</p>
<pre><code  class="language-javascript">var adder = {
  base : 1,
    
  add : function(a) {
    var f = v =&gt; v + this.base;
    return f(a);
  },

  addThruCall: function(a) {
    var f = v =&gt; v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  }
};

console.log(adder.add(1));         // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3 ——译者注）</code></pre>
<h3 id="不绑定arguments">不绑定<code>arguments</code></h3>
<p>箭头函数不绑定<a href="Reference/Functions/arguments">Arguments 对象</a>。因此，在本示例中，<code>arguments</code>只是引用了封闭作用域内的arguments：</p>
<pre><code  class="language-javascript">var arguments = [1, 2, 3];
var arr = () =&gt; arguments[0];

arr(); // 1

function foo(n) {
  var f = () =&gt; arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

foo(1); // 2</code></pre>
<p>在大多数情况下，使用<a href="Reference/Functions/Rest_parameters">剩余参数</a>是相较使用<code>arguments</code>对象的更好选择。</p>
<pre><code  class="language-javascript">function foo(arg) { 
  var f = (...args) =&gt; args[0]; 
  return f(arg); 
}
foo(1); // 1

function foo(arg1,arg2) { 
    var f = (...args) =&gt; args[1]; 
    return f(arg1,arg2); 
} 
foo(1,2);  //2

</code></pre>
<h3 id="像函数一样使用箭头函数">像函数一样使用箭头函数</h3>
<p>如上所述，箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。</p>
<pre><code  class="language-javascript">'use strict';
var obj = {
  i: 10,
  b: () =&gt; console.log(this.i, this),
  c: function() {
    console.log( this.i, this)
  }
}
obj.b(); 
// undefined
obj.c(); 
// 10, Object {...}
</code></pre>
<p>箭头函数没有定义this绑定。另一个涉及<a href="Reference/Global_Objects/Object/defineProperty" title="Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。"><code>Object.defineProperty()</code></a>的示例：</p>
<pre><code  class="language-javascript">'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () =&gt; {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

obj.b; // undefined   "undefined"   Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}   
</code></pre>
<h3 id="使用_new_操作符">使用 <code>new</code> 操作符</h3>
<p>箭头函数不能用作构造器，和 <code>new</code>一起用会抛出错误。</p>
<pre><code  class="language-javascript">var Foo = () =&gt; {};
var foo = new Foo(); // TypeError: Foo is not a constructor</code></pre>
<h3 id="使用prototype属性">使用<code>prototype</code>属性</h3>
<p>箭头函数没有<code>prototype</code>属性。</p>
<pre><code  class="language-javascript">var Foo = () =&gt; {};
console.log(Foo.prototype); // undefined</code></pre>
<h3 id="使用_yield_关键字">使用 <code>yield</code> 关键字</h3>
<p> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> 关键字通常不能在箭头函数中使用（除非是嵌套在允许使用的函数内）。因此，箭头函数不能用作生成器。</p>
<h2 id="函数体">函数体</h2>
<p>箭头函数可以有一个“简写体”或常见的“块体”。</p>
<p>在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的<code>return</code>语句。</p>
<pre><code  class="language-javascript">var func = x =&gt; x * x;                  
// 简写函数 省略return

var func = (x, y) =&gt; { return x + y; }; 
//常规编写 明确的返回值</code></pre>
<h2 id="返回对象字面量">返回对象字面量</h2>
<p>记住用<code>params =&gt; {object:literal}</code>这种简单的语法返回对象字面量是行不通的。</p>
<pre><code  class="language-javascript">var func = () =&gt; { foo: 1 };               
// Calling func() returns undefined!

var func = () =&gt; { foo: function() {} };   
// SyntaxError: function statement requires a name</code></pre>
<p>这是因为花括号（<code>{}</code> ）里面的代码被解析为一系列语句（即 <code>foo</code> 被认为是一个标签，而非对象字面量的组成部分）。</p>
<p>所以，记得用圆括号把对象字面量包起来：</p>
<pre><code  class="language-javascript">var func = () =&gt; ({foo: 1});</code></pre>
<h2 id="换行">换行</h2>
<p>箭头函数在参数和箭头之间不能换行。</p>
<pre><code  class="language-javascript">var func = ()
           =&gt; 1; 
// SyntaxError: expected expression, got '=&gt;'</code></pre>
<h2 id="解析顺序">解析顺序</h2>
<p>虽然箭头函数中的箭头不是运算符，但箭头函数具有与常规函数不同的特殊<a href="Reference/Operators/Operator_Precedence">运算符优先级</a>解析规则。</p>
<pre><code  class="language-javascript">let callback;

callback = callback || function() {}; // ok

callback = callback || () =&gt; {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() =&gt; {});    // ok</code></pre>
<h2 id="更多示例">更多示例</h2>
<pre><code  class="language-javascript">// 空的箭头函数返回 undefined
let empty = () =&gt; {};

(() =&gt; 'foobar')(); 
// Returns "foobar"
// (这是一个立即执行函数表达式,可参阅 'IIFE'术语表) 


var simple = a =&gt; a &gt; 15 ? 15 : a; 
simple(16); // 15
simple(10); // 10

let max = (a, b) =&gt; a &gt; b ? a : b;

// Easy array filtering, mapping, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) =&gt; a + b);  
// 66

var even = arr.filter(v =&gt; v % 2 == 0); 
// [6, 0, 18]

var double = arr.map(v =&gt; v * 2);       
// [10, 12, 26, 0, 2, 36, 46]

// 更简明的promise链
promise.then(a =&gt; {
  // ...
}).then(b =&gt; {
  // ...
});

// 无参数箭头函数在视觉上容易分析
setTimeout( () =&gt; {
  console.log('I happen sooner');
  setTimeout( () =&gt; {
    // deeper code
    console.log('I happen later');
  }, 1);
}, 1);</code></pre>
<p> </p>
<h4 id="箭头函数也可以使用条件（三元）运算符：">箭头函数也可以使用条件（三元）运算符：</h4>
<pre><code  class="language-javascript">var simple = a =&gt; a &gt; 15 ? 15 : a;
simple(16); // 15
simple(10); // 10

let max = (a, b) =&gt; a &gt; b ? a : b;</code></pre>
<blockquote>
<p> </p>
<p>箭头函数内定义的变量及其作用域</p>
</blockquote>
<pre><code  class="language-javascript">// 常规写法
var greeting = () =&gt; {let now = new Date(); return ("Good" + ((now.getHours() &gt; 17) ? " evening." : " day."));}
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined 标准的let作用域

// 参数括号内定义的变量是局部变量（默认参数）
var greeting = (now=new Date()) =&gt; "Good" + (now.getHours() &gt; 17 ? " evening." : " day.");
greeting();          //"Good day."
console.log(now);    // ReferenceError: now is not defined

// 对比：函数体内{}不使用var定义的变量是全局变量
var greeting = () =&gt; {now = new Date(); return ("Good" + ((now.getHours() &gt; 17) ? " evening." : " day."));}
greeting();           //"Good day."
console.log(now);     // Fri Dec 22 2017 10:01:00 GMT+0800 (中国标准时间)

// 对比：函数体内{} 用var定义的变量是局部变量
var greeting = () =&gt; {var now = new Date(); return ("Good" + ((now.getHours() &gt; 17) ? " evening." : " day."));}
greeting(); //"Good day."
console.log(now);    // ReferenceError: now is not defined
</code></pre>
<blockquote>
<p> </p>
<h4 id="箭头函数也可以使用闭包：">箭头函数也可以使用闭包：</h4>
</blockquote>
<pre><code  class="language-javascript">// 标准的闭包函数
function A(){
      var i=0;
      return function b(){
              return (++i);
      };
};

var v=A();
v();    //1
v();    //2


//箭头函数体的闭包（ i=0 是默认参数）
var Add = (i=0) =&gt; {return (() =&gt; (++i) )};
var v = Add();
v();           //1
v();           //2

//因为仅有一个返回，return 及括号（）也可以省略
var Add = (i=0)=&gt; ()=&gt; (++i);

</code></pre>
<p> </p>
<blockquote>
<h4 id="箭头函数递归"> 箭头函数递归</h4>
</blockquote>
<pre><code  class="language-javascript">var fact = (x) =&gt; ( x==0 ?  1 : x*fact(x-1) );
fact(5);       // 120</code></pre>
<p>规范</p>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td><a class="external" href="https://www.ecma-international.org/ecma-262/6.0/#sec-arrow-function-definitions" hreflang="en" lang="en" rel="noopener">ECMAScript 2015 (6th Edition, ECMA-262)<br/><small lang="zh-CN">Arrow Function Definitions</small></a></td>
<td><span class="spec-Standard">Standard</span></td>
<td>Initial definition.</td>
</tr>
<tr>
<td><a class="external" href="https://tc39.github.io/ecma262/#sec-arrow-function-definitions" hreflang="en" lang="en" rel="noopener">ECMAScript Latest Draft (ECMA-262)<br/><small lang="zh-CN">Arrow Function Definitions</small></a></td>
<td><span class="spec-Draft">Draft</span></td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">浏览器兼容</h2>
<div class="hidden">The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a class="external" href="https://github.com/mdn/browser-compat-data" rel="noopener">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</div>
<p></p><div class="bc-data"><a class="bc-github-link external" href="https://github.com/mdn/browser-compat-data" rel="noopener">Update compatibility data on GitHub</a><table class="bc-table bc-table-js"><thead><tr class="bc-platforms"><td></td><th class="bc-platform-desktop" colspan="6"><span>Desktop</span></th><th class="bc-platform-mobile" colspan="7"><span>Mobile</span></th><th class="bc-platform-server" colspan="1"><span>Server</span></th></tr><tr class="bc-browsers"><td></td><th class="bc-browser-chrome"><span class="bc-head-txt-label bc-head-icon-chrome">Chrome</span></th><th class="bc-browser-edge"><span class="bc-head-txt-label bc-head-icon-edge">Edge</span></th><th class="bc-browser-firefox"><span class="bc-head-txt-label bc-head-icon-firefox">Firefox</span></th><th class="bc-browser-ie"><span class="bc-head-txt-label bc-head-icon-ie">Internet Explorer</span></th><th class="bc-browser-opera"><span class="bc-head-txt-label bc-head-icon-opera">Opera</span></th><th class="bc-browser-safari"><span class="bc-head-txt-label bc-head-icon-safari">Safari</span></th><th class="bc-browser-webview_android"><span class="bc-head-txt-label bc-head-icon-webview_android">Android webview</span></th><th class="bc-browser-chrome_android"><span class="bc-head-txt-label bc-head-icon-chrome_android">Chrome for Android</span></th><th class="bc-browser-edge_mobile"><span class="bc-head-txt-label bc-head-icon-edge_mobile">Edge Mobile</span></th><th class="bc-browser-firefox_android"><span class="bc-head-txt-label bc-head-icon-firefox_android">Firefox for Android</span></th><th class="bc-browser-opera_android"><span class="bc-head-txt-label bc-head-icon-opera_android">Opera for Android</span></th><th class="bc-browser-safari_ios"><span class="bc-head-txt-label bc-head-icon-safari_ios">Safari on iOS</span></th><th class="bc-browser-samsunginternet_android"><span class="bc-head-txt-label bc-head-icon-samsunginternet_android">Samsung Internet</span></th><th class="bc-browser-nodejs"><span class="bc-head-txt-label bc-head-icon-nodejs">Node.js</span></th></tr></thead><tbody><tr><th scope="row">Arrow functions</th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              45</td><td class="bc-supports-yes bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-firefox bc-has-history"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              22<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div><section class="bc-history" id="sect1"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              22<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div></dt><dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of <code>'use strict';</code> is now required.</dd><dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> Prior to Firefox 39, a line terminator (<code>\n</code>) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like <code>() \n =&gt; {}</code> will now throw a <code>SyntaxError</code> in this and later versions.</dd></dl></section></td><td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support">
<span>No support</span>
</abbr>
              No</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              32</td><td class="bc-supports-yes bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              10</td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              45</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              45</td><td class="bc-supports-yes bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td><td class="bc-supports-yes bc-browser-firefox_android bc-has-history"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              22<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div><section class="bc-history" id="sect2"><dl><dt class="bc-supports-yes bc-supports"><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              22<div class="bc-icons"><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> </div></dt><dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of <code>'use strict';</code> is now required.</dd><dd><abbr class="only-icon" title="See implementation notes"><span>Notes</span><i class="ic-footnote"></i></abbr> Prior to Firefox 39, a line terminator (<code>\n</code>) was incorrectly allowed after arrow function arguments. This has been fixed to conform to the ES2015 specification and code like <code>() \n =&gt; {}</code> will now throw a <code>SyntaxError</code> in this and later versions.</dd></dl></section></td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              32</td><td class="bc-supports-yes bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              10</td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              5.0</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td></tr><tr><th scope="row">Trailing comma in parameters</th><td class="bc-supports-yes bc-browser-chrome"><span class="bc-browser-name">Chrome</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              58</td><td class="bc-supports-unknown bc-browser-edge"><span class="bc-browser-name">Edge</span><abbr title="Compatibility unknown; please update this.">
                ?
              </abbr></td><td class="bc-supports-yes bc-browser-firefox"><span class="bc-browser-name">Firefox</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              52</td><td class="bc-supports-no bc-browser-ie"><span class="bc-browser-name">IE</span><abbr class="bc-level-no only-icon" title="No support">
<span>No support</span>
</abbr>
              No</td><td class="bc-supports-yes bc-browser-opera"><span class="bc-browser-name">Opera</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              45</td><td class="bc-supports-unknown bc-browser-safari"><span class="bc-browser-name">Safari</span><abbr title="Compatibility unknown; please update this.">
                ?
              </abbr></td><td class="bc-supports-yes bc-browser-webview_android"><span class="bc-browser-name">WebView Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              58</td><td class="bc-supports-yes bc-browser-chrome_android"><span class="bc-browser-name">Chrome Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              58</td><td class="bc-supports-unknown bc-browser-edge_mobile"><span class="bc-browser-name">Edge Mobile</span><abbr title="Compatibility unknown; please update this.">
                ?
              </abbr></td><td class="bc-supports-yes bc-browser-firefox_android"><span class="bc-browser-name">Firefox Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              52</td><td class="bc-supports-yes bc-browser-opera_android"><span class="bc-browser-name">Opera Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              45</td><td class="bc-supports-unknown bc-browser-safari_ios"><span class="bc-browser-name">Safari iOS</span><abbr title="Compatibility unknown; please update this.">
                ?
              </abbr></td><td class="bc-supports-yes bc-browser-samsunginternet_android"><span class="bc-browser-name">Samsung Internet Android</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              7.0</td><td class="bc-supports-yes bc-browser-nodejs"><span class="bc-browser-name">nodejs</span><abbr class="bc-level-yes only-icon" title="Full support">
<span>Full support</span>
</abbr>
              Yes</td></tr></tbody></table><section class="bc-legend" id="sect3"><h3 class="offscreen" id="Legend">Legend</h3><dl><dt><span class="bc-supports-yes bc-supports">
<abbr class="bc-level bc-level-yes only-icon" title="Full support">
<span>Full support</span>
                  
                </abbr></span></dt><dd>Full support</dd><dt><span class="bc-supports-no bc-supports">
<abbr class="bc-level bc-level-no only-icon" title="No support">
<span>No support</span>
                  
                </abbr></span></dt><dd>No support</dd><dt><span class="bc-supports-unknown bc-supports">
<abbr class="bc-level bc-level-unknown only-icon" title="Compatibility unknown">
<span>Compatibility unknown</span>
                  
                </abbr></span></dt><dd>Compatibility unknown</dd><dt><abbr class="only-icon" title="See implementation notes."><span>See implementation notes.</span><i class="ic-footnote"></i></abbr></dt><dd>See implementation notes.</dd></dl></section></div><p></p>
<h2 id="相关链接">相关链接</h2>
<ul>
<li><a class="external" href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/" rel="noopener">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li>
</ul>
</article>