Fitur Baru ES2021 / ES12

ECMAScript versi 2021 diharapkan akan dirilis pada Juni 2021. Berikut adalah beberapa fitur yang mungkin Anda temukan di ES2021 atau ES12. Daftar ini didasarkan pada ECMAScript Proposals dan fitur baru yang dirilis oleh mesin Google Chrome V8.

Semua fitur yang tercantum di bawah ini didukung pada saat penulisan di Google Chrome Canary build (versi eksperimental browser Google Chrome).

String replaceAll () metode

String.prototype.replaceAll () menggantikan semua kemunculan string dengan nilai string yang berbeda.

Saat ini di JavaScript, string memiliki metode replace (). Ini dapat digunakan untuk mengganti substring dengan string lain.

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Jika pola penggantian masukan adalah string, metode replace () hanya menggantikan kemunculan pertama. Oleh karena itu, kode tersebut tidak menggantikan kemunculan kedua " Kembali ".

Kami hanya dapat melakukan penggantian lengkap jika kami memberikan pola penggantian sebagai ekspresi reguler .

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 () mencoba mengganti semua kemunculan, meskipun pola masukannya adalah string .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Metode pribadi

, . #.

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
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

On line 2, jika nilai suatu adalah nol atau tidak terdefinisi , sisi kanan ?? dievaluasi dan ditugaskan ke b .

Sekarang mari kita pertimbangkan ?? bersama dengan = .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Baris 2 pada kode di atas sama dengan ekspresi berikut:

x = x ?? (x = y)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Di sini x tidak ditentukan . Jadi ekspresi di sebelah kanan dievaluasi dan set x menjadi 2 .