太阳鱼吃什么食物
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2016.
??? ?? ???(??? ?? expression)? ?? ???? ?? ??? ????, ??? ??? ??? ???? ???? ??? ??? ????.
??? ??
const materials = ["Hydrogen", "Helium", "Lithium", "Beryllium"];
console.log(materials.map((material) => material.length));
// Expected output: Array [8, 6, 7, 9]
??
() => expression
param => expression
(param) => expression
(param1, paramN) => expression
() => {
statements
}
param => {
statements
}
(param1, paramN) => {
statements
}
???? ? ??? ????, ??? ????, ?? ?? ??? ???? ?? ?? ?? ??? ???.
(a, b, ...r) => expression
(a = 400, b = 20, c) => expression
([a, b] = [10, 20]) => expression
({ a, b } = { a: 10, b: 20 }) => expression
??? ??? ??? ?? async
???? ??? async
? ??? ? ????.
async param => expression
async (param1, param2, ...paramN) => {
statements
}
??
??? ?? ??? ?? ??? ??? ??? ???? ??? ?????. ? ???? ? ??? ??? ??? ?????.
?? : ?? ?? ???? ??? ??? ?? ??? ? ?? ???? ????. ?? ? ?? ?? ???? ? ??? ?? ??? ?? ??? ???????.
// ??? ?? ??
(function (a) {
return a + 100;
});
// 1. "function"??? ??? ???? ??? ?? ??? ??? ???? ?????.
(a) => {
return a + 100;
};
// 2. ???? "return"??? ??? ???? ??? ?????.
(a) => a + 100;
// 3. ????? ??? ?????.
a => a + 100;
?? ???? ???? ??? ??? ?? ?? ??? ???? ?? ??? ? ????. ??? ?? ???? ??? ? ????.
??? ??? ??? ??? ????? ?? ???? ??? ? ????. ?? ??? ?? ? ??? ??? ???? ??? ?? ?? ??? ?? ?? ?? ??? ?? ??? ?? ?? ?? ?? ?? ??? ??? ???? ???.
// ??? ?? ??
(function (a, b) {
return a + b + 100;
});
// ??? ??
(a, b) => a + b + 100;
const a = 4;
const b = 2;
// ??? ?? ?? (????? ??)
(function () {
return a + b + 100;
});
// ??? ?? (????? ??)
() => a + b + 100;
???? ??? ?? ???? ???? ???? ??? ? ????. ??? ??? ???? ??? ?? ?? ???? ???? return
???? ???????. ??? ??? ??? ?? ???? ??? ? ????.
// ??? ?? ??
(function (a, b) {
const chuck = 42;
return a + b + chuck;
});
// ??? ??
(a, b) => {
const chuck = 42;
return a + b + chuck;
};
??? ??? ?? ??? ???? ????. ??? ??? ???? ???? ?? ?? ??? ?? ???? ?? ?????. ??? ??? ??? ???? ??? ??? ?? ????.
// ?? ??
function bob(a) {
return a + 100;
}
// ??? ??
const bob2 = (a) => a + 100;
?? ??
??? ??? ??? ???? ???? ?? ??? ??? ?? ? ????.
??? ????? ??? ???? ?? ?? ???? ?????. ?? ????? ???? return
?? ???? ???.
const func = (x) => x * x;
// ??? ?? ??, ??? "??"
const func2 = (x, y) => {
return x + y;
};
// ?? ??? ??, ??? "??" ??
??? ?? ??? (params) => { object: literal }
? ???? ?? ???? ???? ???? ???? ????.
const func = () => { foo: 1 };
// func()? ???? ???? ?? ?? ?????.
const func2 = () => { foo: function () {} };
// SyntaxError: function statement requires a name
const func3 = () => { foo() {} };
// SyntaxError: Unexpected token '{'
JavaScript? ??? ?? ?? ??? ?? ???? ?? ???? ??? ??? ??? ??? ?? ??? ?????. ???({}) ?? ??? ??? ???? ????, ??? foo
? ?? ???? ?? ?? label? ???.
? ??? ????? ?? ???? ??? ??? ???.
const func = () => ({ foo: 1 });
???? ??? ? ????
??? ?? ???? this
? ?? ??? ???? ?? ???? ???? ???. ???? ????? ?? ?? ?? ????? ?????.
"use strict";
const obj = {
i: 10,
b: () => console.log(this.i, this),
c() {
console.log(this.i, this);
},
};
obj.b(); // logs undefined, Window { /* … */ } (or the global object)
obj.c(); // logs 10, Object { /* … */ }
? ?? ?? Object.defineProperty()
? ??? ????.
"use strict";
const obj = {
a: 10,
};
Object.defineProperty(obj, "b", {
get: () => {
console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (or the global object)
return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'
},
});
???? ???? this
? ????, ??? ??? ??? ??? ???? this
???? ?? ?? ? ?????. ??? ??? ?? ??? this
? ???? (?? ?? ??? ?? ??? ??)? ???? ???? ???. ??? ?? ??? ???? ?? ?????? ?? ????? ?? this
? ?? ???? ????.
class C {
a = 1;
autoBoundMethod = () => {
console.log(this.a);
};
}
const c = new C();
c.autoBoundMethod(); // 1
const { autoBoundMethod } = c;
autoBoundMethod(); // 1
// ???? ????? ? ???? ???? ??? ???.
??? ?? ??? ?? ???? ???? ??? ?? "?? ??? ???"?? ????.
class C {
a = 1;
constructor() {
this.method = this.method.bind(this);
}
method() {
console.log(this.a);
}
}
?? : ??? ??? ?????? ?? ????? ????? ????? ??? ??? ? ?? ??? ???? ? ???? ???? ???? ???? ????? ??? ???? ??? ? ????.
??? ??? call()
, apply()
, bind()
???? ??? ???? ??? ? ???? ????. ??? ??? ??? ??? ??? ??? ???? this
? ???? ??? ???? ??? ?? this
?? ??? ?? ?????.
??? ???? ????
??? ???? ?? arguments
??? ????. ??? ? ???? arguments
? ???? ??? ??? ?????.
function foo(n) {
const f = () => arguments[0] + n; // foo? ??? ?? ??????. arguments[0]? n???.
return f();
}
foo(3); // 3 + 3 = 6
??: strict mode???
arguments
? ??? ??? ? ???? ?? ??? ?? ??? ???. ??? ??arguments
? ?? ?? ??? ?? ? ?? ??? ? ????.
???? ??, ??? ????? ???? ??
arguments
??? ???? ??? ?? ?????.
function foo(n) {
const f = (...args) => args[0] + n;
return f(10);
}
foo(1); // 11
???? ??? ? ????
?????? ??? ? ????
yield
???? ??? ?? ???? ??? ? ????. (??? ?? ?? ??? ????? ?? ??? ???? ??? ??????). ??? ??? ??? ?????? ??? ? ????.
??? ? ? ??
??? ???? ????? ??? ??? ? ??? ??? ? ????.
const func = (a, b, c)
=> 1;
// SyntaxError: Unexpected token '=>'
??? ????? ??? ?? ??? ?? ? ??? ??? ?? ?? ??? ??/???? ??? ? ????. ???? ??? ? ??? ?? ?? ????.
const func = (a, b, c) =>
1;
const func2 = (a, b, c) => (
1
);
const func3 = (a, b, c) => {
return 1;
};
const func4 = (
a,
b,
c,
) => 1;
???? ?? ??
??? ??? ???? ???? ????, ??? ???? ?? ??? ?? ??? ????? ?? ??? ?? ?? ??? ????.
let callback;
callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments
=>
? ???? ????? ????? ???? callback || ()
? ??? ??? ?? ???? ?? ???? ??? ??? ???? ???.
callback = callback || (() => {});
??
??? ?? ????
// ? ??? ??? ???? ?? ?? ?????.
const empty = () => {};
(() => "foobar")();
// "foobar"? ?????.
// (?? ???? ?? ??????.)
const simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10
const max = (a, b) => (a > b ? a : b);
// ??? ?? ???, ?? ?
const arr = [5, 6, 13, 0, 1, 18, 23];
const sum = arr.reduce((a, b) => a + b);
// 66
const even = arr.filter((v) => v % 2 === 0);
// [6, 0, 18]
const double = arr.map((v) => v * 2);
// [10, 12, 26, 0, 2, 36, 46]
// ?? ??? ???? ??
promise
.then((a) => {
// …
})
.then((b) => {
// …
});
// ????? ? ?? ?? ??? ? ?? ???? ?? ??? ??
setTimeout(() => {
console.log("I happen sooner");
setTimeout(() => {
// deeper code
console.log("I happen later");
}, 1);
}, 1);
call, bind, apply ??? ????
call()
, apply()
, bind()
???? ? ???? ??? ????? ?? ???? ???? ?? ?????.
const obj = {
num: 100,
};
// globalThis? "num"? ???? ???? ?? ??? ?????.
globalThis.num = 42;
// "this"?? ???? ??? ?? ??
const add = function (a, b, c) {
return this.num + a + b + c;
};
console.log(add.call(obj, 1, 2, 3)); // 106
console.log(add.apply(obj, [1, 2, 3])); // 106
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 106
??? ??? ??, add
??? ????? globalThis
(??) ???? ????? this
? globalThis
?? ?????.
const obj = {
num: 100,
};
// globalThis? "num"? ???? ???? ??? ?????.
globalThis.num = 42;
// ??? ??
const add = (a, b, c) => this.num + a + b + c;
console.log(add.call(obj, 1, 2, 3)); // 48
console.log(add.apply(obj, [1, 2, 3])); // 48
const boundAdd = add.bind(obj);
console.log(boundAdd(1, 2, 3)); // 48
??? ??? ???? ?? ? ??? setTimeout()
, EventTarget.prototype.addEventListener()
? ?? ??? ??? ???? ????? ?? ?? ????? ??? ???, call()
, apply()
?? bind()
? ??? ???? ??? ? ??? ????.
?? ?? ???? ???? ?? ?? ??? ???? ???? ????.
const obj = {
count: 10,
doSomethingLater() {
setTimeout(function () {
// ??? window ???? ?????.
this.count++;
console.log(this.count);
}, 300);
},
};
obj.doSomethingLater(); // "count" ??? window ??? ?? ??? "NaN"? ?????.
??? ??? ???? this
? ??? ? ?? ??? ? ????.
const obj = {
count: 10,
doSomethingLater() {
// ??? ??? "this"? "obj" ????? ??????.
setTimeout(() => {
// ??? ???? ?? ???? ??
// ?? ???? setTimeout? ??? ??? ???? ????
// ?? ???? "obj" ????? ?????.
this.count++;
console.log(this.count);
}, 300);
},
};
obj.doSomethingLater(); // 11? ?????.
???
Specification |
---|
ECMAScript? 2026 Language?Specification # sec-arrow-function-definitions |
???? ???
??
- ??
- ??
function
??
???- ES6 In Depth: Arrow functions on hacks.mozilla.org (2015)