[ES] I can't learn ES2021. This time, I will only learn 3.

Pants, what have you been doing lately?

I was watching ES2021 recently.

It's only 2020. What can you learn from 2021

Your progress in 2020 is 84%

▓▓▓▓▓▓▓▓▓▓▓▓▓░░░

Tell me, what have you learned? Also, can you put it simply? I'm afraid I can't learn.

At present, there are 5 new features that have been identified. In order to let you remember them better, I have specifically selected 3 that I think are more interesting to tell you.

Well, I like learning the most useful things with the least time!

1. Logical operator

Have you ever encountered such a situation?

function example(a) {
  // Default `a` to "foo"
  if (!a) {
    a = "foo";
  }
  // or
  a = a || "foo";
}
copy

Some initialization requires some lengthy logic code

function example(opts) {
  // Ok, but could trigger setter.
  opts.foo = opts.foo ?? "bar";

  // No setter, but 'feels wrong' to write.
  opts.baz ?? (opts.baz = "qux");
}

example({ foo: "foo" });
copy

Don't mention it. Sometimes I feel dizzy when I write too much.

Don't interrupt me. This is a self questioning and self answering mode. You don't need to answer.

Where did I come from just now? Oh, the code is not concise enough. It's an exciting time. Now we have new features and can write more clearly in the future.

function example(opts) {
  // Old ways
  if (!a) {
    a = "foo";
  }
  // or
  a = a || "foo";
  // New ways
  a ||= "foo"
}

example({ foo: "foo" });
copy
function example(opts) {
  // Old ways
  opts.foo = opts.foo ?? "bar";
  // New ways
  opts.foo ??= "bar";

  // Old ways
  opts.baz ?? (opts.baz = "qux");
  // New ways
  opts.baz ??= "qux";
}

example({ foo: "foo" });
copy

Is it much simpler than that? Do you think this model is very familiar?

emm, this is really a question sentence.

Come on! yes! It is commonly used in logical operators. It used to be. Look down.

a = a + b;  // old
a += b;
a = a - b; // old
a -= b;
copy

Yes, 3 | |,&&,?? have been added this time, The usage is still the same as before, isn't it very simple?

Well, there is no new use cost, good! It's a little interesting. Go on.

The next one is Promise.any

2.Promise.any

Promise.any. Literally, you should be able to guess the role of this API if you are smart. Promise.any accepts an array of promises. When any of the promises is completed, the promise with completion value will be returned. If all promises are rejected, a rejected promise is returned, and the return value of the promise is an AggregateError object.

Promise.any(promises).then(
  (first) => {
    // Any Promise is completed
  },
  (error) => {
    // All promises have been rejected
  }
);
copy

Is there any specific scenario?

To give an official example, the simplest is to test which site is the fastest.

Promise.any([
  fetch("https://v8.dev/").then(() => "home"),
  fetch("https://v8.dev/blog").then(() => "blog"),
  fetch("https://v8.dev/docs").then(() => "docs"),
])
  .then((first) => {
    // Any of the promises was fulfilled.
    console.log(first);
    // → 'home'
  })
  .catch((error) => {
    // All of the promises were rejected.
    console.log(error);
  });
copy

For example, some playback platforms can use this to test which line has the lowest current delay, and switch to the corresponding fastest line first.

Good thing, there is a problem, this and Promise All, it seems

Yes, we can remember these two together, and we can promise Any is interpreted as Promise The reverse operation of all. Next, I will use Promise All to downgrade the simulation promise Any to deepen the memory.

Don't look at me like this. I'm not saying nothing.

Come on, show the ancestral downgrade code

function reverse(promise) {
  return new Promise((resolve, reject) =>
    Promise.resolve(promise).then(reject, resolve)
  );
}
function promiseAny(iterable) {
  return reverse(Promise.all([...iterable].map(reverse)));
}
// https://github.com/m0ppers/promise-any/blob/master/index.js
copy

The implementation is very simple. Through an inversion function, use Promisea All features: once a Promise is rejected, it enters the reject. Therefore, reversing resolve and reject can simulate the Promise Any.

Let me think... seconds! Put Promise A reject of all is a promise Any's resolution. What about the last one?

Let me test you one question first. How much is 1000000000?

1 billion

100000000

100 million

Do you think there is any difference?

Yes, the dark night gave me black eyes, but you made me blind.

A point of propriety.

The first one has no "," interval identifier, which is too difficult to understand.

The next new feature is the number separator. With this feature, your black eyes can look for light.

3. Number separator

let fee1 = 1000000000;
let fee2 = 1_000_000_000;  // fee1 === fee2
copy

This mode can be used not only in decimal, but also in binary, hexadecimal... and even BigInt.

// Binary Literals
let nibbles = 0b1010_0001_1000_0101;
// Hex Literal
let message = 0xa0_b0_c0;
// BigInt Literal
const max = 2n ** (64n - 1n) - 1n;
console.log(max === 9_223_372_036_854_775_807n);
copy

All the above features are supported by the latest version of chrome. Open the console and play.

If you want to use it in an actual project, use the following two plug-ins.

  • Logical Assignment Operator[1]
  • Numeric Separator[2]

[1]Logical Assignment Operator: https://babeljs.io/docs/en/babel-plugin-proposal-logical-assignment-operators

[2]Numeric Separator: https://babeljs.io/docs/en/babel-plugin-proposal-numeric-separator

[3]https://juejin.im/post/6856704516499832845

[4]https://github.com/tc39/proposals/blob/master/finished-proposals.md

Posted by GravityFX on Wed, 28 Sep 2022 00:50:37 +0300