ES2021 (ES12) will bring five new features, which will be briefly introduced in this article.

String.prototype.replaceAll()

In JavaScript, it is common to use the string.prototype.replace () method to replace strings, for example:

'koofe'.replace('o'.'ô');
/ / koofe
Copy the code

In the string.prototype.replace () method, only the first matching String is replaced when the first argument is of String type. See the MDN documentation for details. Therefore, in the above code, only the first O is replaced with an O, leaving the second O unchanged. If you want to replace all the matched strings, you can only do this using a regular expression, for example:

'koofe'.replace(/o/g.'ô');
/ / koofe
Copy the code

For the convenience of the global String replacement, ES2021 will support String. The prototype. The replaceAll () method, which don’t have to write a regular expression can be completed global replacement String, such as:

'koofe'.replaceAll('o'.'ô');
/ / koofe
Copy the code

Read more

  • Stackoverflow.com/questions/1…
  • Github.com/tc39/propos…
  • V8. Dev/features/st…
  • Developer.mozilla.org/en-US/docs/…
  • Caniuse.com/?search=rep…

Promise.any

Promise supports the following methods:

  • This will be a resolved Promise, whether settled or rejected

    Promise.allSettled([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// result:
// [{ status: "rejected", reason: 1 },
// { status: "fulfilled", value: 2 }]
Copy the code

  • All: as long as there is a Promise is rejected, immediately return a Promise; This will be fulfilled when all promises are fulfilled

    Promise.all([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// error: 1
Copy the code

  • This is a fulfilled Promise. Race: As long as there is a Promise, return immediately a resolved or rejected Promise

    Promise.race([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// error: 1
Copy the code

  • If one of the promises is fulfilled, a resolved Promise will be returned. If all promises are rejected, a rejected promise is returned

    Promise.any([
  Promise.reject(1),
  Promise.resolve(2)
])
.then(result= > console.log('result:', result))
.catch(error= > console.error('error:', error));

// result: 2
Copy the code

All and promise. race are attributes of ES2015, while promise. allSettled and promise. any are attributes of ES2020 and ES2021, respectively.

Read more

  • Github.com/tc39/propos…
  • V8. Dev/features/pr…

Logical assignment operator

A logical assignment operator is a combination of a logical operator and an assignment expression:

  • or or equals (||=)

    a ||= b;

/ / with a | | = b equivalence
a || (a = b);

/ / with a | | = b equivalence
if(! a) { a = b; }Copy the code

  • and and equals (&&=)

    a &&= b;

A &&= b
a && (a = b);

A &&= b
if (a) {
  a = b;
}
Copy the code

  • question question equals (?? =)

    a ?? = b;/ / with a???? = b equivalent
a ?? (a = b);

/ / with a???? = b equivalent
if (a === null || a === undefined) {
  a = b;
}
Copy the code

Example usage:

letobj = {}; obj.x ?? =0;
console.log(obj.x) / / 0

obj.x ||= 1;
console.log(obj.x) / / 1

obj.x &&= 2;
console.log(obj.x) / / 2
Copy the code

Notes:

a = a || b; / / with a | | = b inequitable
a = a && b; // Is not equivalent to a &&= b
a = a ?? b; / / with a???? = b is not equivalent
Copy the code

The reason for the disparity is that each of the above logical expressions is assigned regardless of the result; The logical assignment operator, on the other hand, will only assign if the conditions are true, such as:

let x = 0;
const obj = {
  get x() {
    return x;
  },
  
  set x(value) {
    console.log('setter called'); x = value; }};// This always logs "setter called"
obj.x += 1;
assert.equal(obj.x, 1);

// Logical operators do not call setters unnecessarily
// This will not log.
obj.x ||= 2;
assert.equal(obj.x, 1);

// But setters are called if the operator does not short circuit
// "setter called"
obj.x &&= 3;
assert.equal(obj.x, 3);
Copy the code

Read more

  • Github.com/tc39/propos…

Number separator

Use _ to divide numbers and improve the readability of numbers. For example, in daily life, numbers are usually divided between every three digits, so that people can quickly identify the number. In code, the programmer is also required to identify the numbers more easily:

// 1000000000 is not easy to identify
const count1 = 1000000000;

// 1_000_000_000 is intuitive
const count2 = 1 _000_000_000;

console.log(count1 === count2); // true
Copy the code

WeakRefs

WeakRef instance can be used as a weak reference to an object. A weak reference to an object is one that does not prevent GC from collecting when the object should be collected by GC. In contrast, a normal reference (strong by default) keeps the corresponding object in memory. Only if the object does not have any strong references will the JavaScript engine GC destroy the object and reclaim the memory occupied by the object. Therefore, when accessing the object pointed to by weak reference, it is likely that the object has been reclaimed. The use method of WeakRef is as follows:

const ref = new WeakRef({ name: 'koofe' });
let obj = ref.deref();
if (obj) {
  console.log(obj.name); // koofe
}
Copy the code

For the use of WeakRef object should be carefully considered, can not use as far as possible not to use

Read more

  • Github.com/tc39/propos…
  • Github.com/tc39/propos…
  • Developer.mozilla.org/en-US/docs/…

conclusion

ES2021 is currently at Stage 4, which means it can be incorporated into the formal ECMAScript language specification and is expected to be released in the middle of this year. All of these new features are supported in the latest versions of Chrome, so if you’re interested, try them out quickly.

Follow public Account