ES2021 / ES12 الميزات الجديدة

من المتوقع إصدار ECMAScript الإصدار 2021 في يونيو 2021. فيما يلي بعض الميزات التي قد تجدها في ES2021 أو ES12. تستند القائمة إلى مقترحات ECMAScript والميزات الجديدة التي أصدرها محرك Google Chrome V8.

جميع الميزات المدرجة أدناه مدعومة في وقت كتابة هذا التقرير في Google Chrome Canary build (الإصدار التجريبي لمتصفح Google Chrome).

طريقة استبدال الكل ()

يستبدل 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"
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

إذا كان نمط استبدال الإدخال عبارة عن سلسلة ، فإن طريقة الاستبدال () تحل محل التكرار الأول فقط. لذلك ، لا يحل الرمز محل التكرار الثاني لـ " الخلف ".

لا يمكننا إجراء استبدال كامل إلا إذا قدمنا ​​نمط الاستبدال كتعبير عادي .

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، وإذا كانت قيمة و هي باطلة أو غير معروف ، على الجانب الأيمن ؟؟ يتم تقييمها وتعيينها إلى ب .

لننظر الآن ؟؟ مع = .

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

السطر 2 في الكود أعلاه يكافئ التعبير التالي:

x = x ?? (x = y)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

هنا x غير محدد . إذن ، المقدار الموجود على اليمين يتم تقييمه ويحول x إلى 2 .