480 lines
30 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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 class="brush: js">(参数1, 参数2, …, 参数N) =&gt; { 函数声明 }
//相当于:(参数1, 参数2, …, 参数N) =&gt;{ return 表达式; }
(参数1, 参数2, …, 参数N) =&gt; 表达式(单一)
// 当只有一个参数时,<strong>圆括号</strong>是可选的:
(单一参数) =&gt; {函数声明}
单一参数 =&gt; {函数声明}
// 没有参数的函数应该写成一对圆括号。
() =&gt; {函数声明}</pre>
</blockquote>
<h3 id="高级语法">高级语法</h3>
<blockquote>
<pre class="brush: js">//加括号的函数体返回对象字面表达式:
<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</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 class="brush: js">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]
</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 class="brush: js">function Person() {
// Person() 构造函数定义 `this`作为它自己的实例.
this.age = 0;
setInterval(function growUp() {
// 在非严格模式, growUp()函数定义 `this`作为全局对象,
// 与在 Person()构造函数中定义的 `this`并不相同.
this.age++;
}, 1000);
}
var p = new Person();</pre>
<p>在ECMAScript 3/5中通过将<code>this</code>值分配给封闭的变量,可以解决<code>this</code>问题。</p>
<pre class="brush: js">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);
}</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 class="brush: js">function Person(){
this.age = 0;
setInterval(() =&gt; {
this.age++; // |this| 正确地指向 p 实例
}, 1000);
}
var p = new Person();</pre>
<h4 id="与严格模式的关系">与严格模式的关系</h4>
<p>鉴于 <code>this</code> 是词法层面上的,<a href="Reference/Strict_mode">严格模式</a>中与 <code>this</code> 相关的规则都将被忽略。</p>
<pre class="brush: js line-numbers language-js"><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></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 class="brush: js">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 ——译者注)</pre>
<h3 id="不绑定arguments">不绑定<code>arguments</code></h3>
<p>箭头函数不绑定<a href="Reference/Functions/arguments">Arguments 对象</a>。因此,在本示例中,<code>arguments</code>只是引用了封闭作用域内的arguments</p>
<pre class="brush: js">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</pre>
<p>在大多数情况下,使用<a href="Reference/Functions/Rest_parameters">剩余参数</a>是相较使用<code>arguments</code>对象的更好选择。</p>
<pre class="brush: js">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
</pre>
<h3 id="像函数一样使用箭头函数">像函数一样使用箭头函数</h3>
<p>如上所述,箭头函数表达式对非方法函数是最合适的。让我们看看当我们试着把它们作为方法时发生了什么。</p>
<pre class="brush: js">'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 {...}
</pre>
<p>箭头函数没有定义this绑定。另一个涉及<a href="Reference/Global_Objects/Object/defineProperty" title="Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。"><code>Object.defineProperty()</code></a>的示例:</p>
<pre class="brush: js">'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, …}
</pre>
<h3 id="使用_new_操作符">使用 <code>new</code> 操作符</h3>
<p>箭头函数不能用作构造器,和 <code>new</code>一起用会抛出错误。</p>
<pre class="brush: js">var Foo = () =&gt; {};
var foo = new Foo(); // TypeError: Foo is not a constructor</pre>
<h3 id="使用prototype属性">使用<code>prototype</code>属性</h3>
<p>箭头函数没有<code>prototype</code>属性。</p>
<pre class="brush: js">var Foo = () =&gt; {};
console.log(Foo.prototype); // undefined</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 class="brush: js">var func = x =&gt; x * x;
// 简写函数 省略return
var func = (x, y) =&gt; { return x + y; };
//常规编写 明确的返回值</pre>
<h2 id="返回对象字面量">返回对象字面量</h2>
<p>记住用<code>params =&gt; {object:literal}</code>这种简单的语法返回对象字面量是行不通的。</p>
<pre class="brush: js">var func = () =&gt; { foo: 1 };
// Calling func() returns undefined!
var func = () =&gt; { foo: function() {} };
// SyntaxError: function statement requires a name</pre>
<p>这是因为花括号(<code>{}</code> )里面的代码被解析为一系列语句(即 <code>foo</code> 被认为是一个标签,而非对象字面量的组成部分)。</p>
<p>所以,记得用圆括号把对象字面量包起来:</p>
<pre class="brush: js">var func = () =&gt; ({foo: 1});</pre>
<h2 id="换行">换行</h2>
<p>箭头函数在参数和箭头之间不能换行。</p>
<pre class="brush: js">var func = ()
=&gt; 1;
// SyntaxError: expected expression, got '=&gt;'</pre>
<h2 id="解析顺序">解析顺序</h2>
<p>虽然箭头函数中的箭头不是运算符,但箭头函数具有与常规函数不同的特殊<a href="Reference/Operators/Operator_Precedence">运算符优先级</a>解析规则。</p>
<pre class="brush: js">let callback;
callback = callback || function() {}; // ok
callback = callback || () =&gt; {};
// SyntaxError: invalid arrow-function arguments
callback = callback || (() =&gt; {}); // ok</pre>
<h2 id="更多示例">更多示例</h2>
<pre class="brush: js">// 空的箭头函数返回 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);</pre>
<p> </p>
<h4 id="箭头函数也可以使用条件(三元)运算符:">箭头函数也可以使用条件(三元)运算符:</h4>
<pre class="brush: js">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;</pre>
<blockquote>
<p> </p>
<p>箭头函数内定义的变量及其作用域</p>
</blockquote>
<pre class="brush: js">// 常规写法
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
</pre>
<blockquote>
<p> </p>
<h4 id="箭头函数也可以使用闭包:">箭头函数也可以使用闭包:</h4>
</blockquote>
<pre class="brush: js">// 标准的闭包函数
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);
</pre>
<p> </p>
<blockquote>
<h4 id="箭头函数递归"> 箭头函数递归</h4>
</blockquote>
<pre class="brush: js">var fact = (x) =&gt; ( x==0 ? 1 : x*fact(x-1) );
fact(5); // 120</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>