Clever Geek Handbook

ES2021 / ES12 Neue Funktionen

ECMAScript Version 2021 wird voraussichtlich im Juni 2021 veröffentlicht. Hier sind einige der Funktionen, die Sie in ES2021 oder ES12 finden können. Die Liste basiert auf ECMAScript-Vorschlägen und neuen Funktionen, die von der Google Chrome V8-Engine veröffentlicht wurden.





Alle unten aufgeführten Funktionen werden zum Zeitpunkt des Schreibens im Google Chrome Canary-Build (der experimentellen Version des Google Chrome-Browsers) unterstützt.





String replaceAll () -Methode

String.prototype.replaceAll () ersetzt alle Vorkommen einer Zeichenfolge durch einen anderen Zeichenfolgenwert.





Derzeit haben Zeichenfolgen in JavaScript eine replace () -Methode . Es kann verwendet werden, um einen Teilstring durch einen anderen String zu ersetzen.





const str = "Backbencher sits at the Back";
const newStr = str.replace("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Back"

Wenn das Ersetzungsmuster für die Eingabe eine Zeichenfolge ist, ersetzt die Methode replace () nur das erste Vorkommen. Daher ersetzt der Code nicht das zweite Vorkommen von " Zurück ".





Wir können eine vollständige Ersetzung nur durchführen, wenn wir das Ersetzungsmuster als regulären Ausdruck bereitstellen .





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 () versucht, alle Vorkommen zu ersetzen, auch wenn das Eingabemuster eine Zeichenfolge ist .





const str = "Backbencher sits at the Back";
const newStr = str.replaceAll("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Front"

Private Methoden

, . #.





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

In Zeile 2, wenn der Wert von a ist null oder undefiniert , die rechte Seite ?? wird ausgewertet und b zugeordnet .





Lassen Sie uns jetzt überlegen ? zusammen mit = .





let x;
let y = 2;
x ??= y;
console.log(x); // 2

Zeile 2 im obigen Code entspricht dem folgenden Ausdruck:





x = x ?? (x = y)

Hier x ist nicht definiert . Der Ausdruck rechts wird also ausgewertet und setzt x auf 2 .







More articles:


All Articles