ECMAScriptバージョン2021は、2021年6月にリリースされる予定です。ES2021またはES12にある可能性のある機能の一部を次に示します。このリストは、ECMAScriptの提案とGoogle ChromeV8エンジンによってリリースされた新機能に基づいています。
以下にリストされているすべての機能は、Google Chrome Canaryビルド（Google Chromeブラウザーの実験バージョン）での執筆時点でサポートされています。
文字列replaceAll（）メソッド
String.prototype.replaceAll（）は、出現するすべての文字列を別の文字列値に置き換えます。
現在JavaScriptでは、文字列にはreplace（）メソッドがあります。サブストリングを別のストリングに置き換えるために使用できます。
const str = "Backbencher sits at the Back";
const newStr = str.replace("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Back"
入力置換パターンが文字列の場合、replace（）メソッドは最初の出現のみを置換します。したがって、コードは「戻る」の2番目の出現を置き換えません。
置換パターンを正規の式として提供する場合にのみ、完全な置換を行うことができます。
const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"
String.prototype.replaceAll（）は、入力パターンが文字列であっても、すべての出現箇所を置き換えようとします。
const str = "Backbencher sits at the Back";
const newStr = str.replaceAll("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Front"
プライベートメソッド
, . #.
class Person {
//
#setType() {
console.log("I am Private");
}
//
show() {
this.#setType();
}
}
const personObj = new Person();
personObj.show(); // "I am Private";
personObj.setType(); // TypeError: personObj.setType is not a function
setType() , personObj.setType undefined. undefined TypeError.
- (get/set) , # .
class Person {
//
get name() { return "Backbencher" }
set name(value) {}
//
get #age() { return 42 }
set #age(value) {}
}
get set name . , name , .
const obj = new Person();
console.log(obj.name); // "Backbencher"
console.log(obj.age); // undefined
WeakRef
WeakRef (Weak References). . , . , , , .
JavaScript - . , JavaScript . JavaScript , MDN.
:
const callback = () => {
const aBigObj = {
name: "Backbencher"
};
console.log(aBigObj);
};
(async function(){
await new Promise((resolve) => {
setTimeout(() => {
callback();
resolve();
}, 2000);
});
})();
. callback() setTimeout(). await. await - ES6, .
2 «Backbencher». , callback(), aBigObj .
aBigObj .
const callback = () => {
const aBigObj = new WeakRef({
name: "Backbencher"
});
console.log(aBigObj.deref().name);
}
(async function(){
await new Promise((resolve) => {
setTimeout(() => {
callback(); // "Backbencher"
resolve();
}, 2000);
});
await new Promise((resolve) => {
setTimeout(() => {
callback(); // , "Backbencher"
resolve();
}, 5000);
});
})();
WeakRef new WeakRef(). .deref(). setTimeout() name. .
, setTimeout() «Backbencher». . -, . WeakRef , .
FinalizationRegistry - WeakRef. , , .
const registry = new FinalizationRegistry((value) => {
console.log(value);
});
registry FinalizationRegistry. (), FinalizationRegistry, .
(function () {
const obj = {};
registry.register(obj, "Backbencher");
})();
3 obj registry. obj , .register() . , , obj , «Backbencher» .
Google Chrome Canary, 1 , «Backbencher» . Chrome - « ». «».
Promise.any() AggregateError
Promise.any() , . 3 , .
const p1 = new Promise((resolve, reject) => {
setTimeout(() => resolve("A"), Math.floor(Math.random() * 1000));
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => resolve("B"), Math.floor(Math.random() * 1000));
});
const p3 = new Promise((resolve, reject) => {
setTimeout(() => resolve("C"), Math.floor(Math.random() * 1000));
});
Promise.any() p1, p2 p3.
(async function() {
const result = await Promise.any([p1, p2, p3]);
console.log(result); // "A", "B" "C"
})();
, ? Promise.any() AggregateError. .
const p = new Promise((resolve, reject) => reject());
try {
(async function() {
const result = await Promise.any([p]);
console.log(result);
})();
} catch(error) {
console.log(error.errors);
}
Promise.any() . « » (reject). .
(&&, || ??) .
let x = 1;
let y = 2;
x &&= y;
console.log(x); // 2
3 :
x && (x = y)
-:
if(x) {
x = y
}
x - , y, 2.
&&, || ??.
||
.
let x = 1;
let y = 2;
x ||= y;
console.log(x); // 1
3 :
x || (x = y)
, , x . x 1, , , , . 1 .
??
?? - (Nullish Coalescing operator) JavaScript. , , null undefined , . null undefined, .
let a;
let b = a ?? 5;
console.log(b); // 5
2行目で、aがnullまたは未定義の場合、右側?? 評価され、bに割り当てられます。
考えてみましょう?? =と一緒に。
let x;
let y = 2;
x ??= y;
console.log(x); // 2
上記のコードの2行目は、次の式と同等です。
x = x ?? (x = y)
ここで、xは未定義です。したがって、右側の式が評価され、xが2に設定されます。