Intensive reading of "proposal-extractors"

proposal-extractors is a proposal for enhancement of destructuring capabilities, which supports the execution of custom logic when destructing directly.

Overview

 const [first, second] = arr;
const { name, age } = obj;

The above is the convenience brought by destructuring. If there is no destructuring syntax, we need to do the same for the same implementation:

 const first = arr[0];
const second = arr[1];
const name = obj.name;
const age = obj.age;

However, the more primitive methods above can perform some processing when assigning objects, such as:

 const first = someLogic(arr[0]);
const second = someLogic(arr[1]);
const name = someLogic(obj.name);
const age = someLogic(obj.age);

Destructuring syntax is not so simple. To achieve a similar effect, it needs to degenerate to multi-line code implementation, and the redundancy even exceeds that of non-destructuring syntax:

 const [first: firstTemp, second: secondTemp] = arr
const {name: nameTemp, age: ageTemp} = obj
const first = someLogic(firstTemp)
const second = someLogic(secondTemp)
const name = someLogic(nameTemp)
const age = someLogic(ageTemp)

The proposal-extractors proposal is used to solve this problem, hoping to keep the destructuring syntax elegant while adding some additional logic:

 const SomeLogic(first, second) = arr // 解构数组
const SomeLogic{name, age} = obj // 解构对象

A little awkward, use () to deconstruct the array, use {} deconstruct the object. Let's look at the definition of SomeLogic :

 const SomeLogic = {
  [Symbol.matcher]: (value) => {
    return { matched: true, value: value.toString() + "特殊处理" };
  },
};

first 、 second 、 name 、 age变量就都变成字符串了，且后缀增加了'特殊处理' these four characters.

Why use () to represent array destructuring? Mainly to prevent assignment ambiguity:

 // 只有一项时，[] 到底是下标含义还是解构含义呢？
const SomeLogic[first] = arr

intensive reading

The proposal-extractors proposal mentions BindingPattern and AssignmentPattern:

 // binding patterns
const Foo(y) = x;           // instance-array destructuring
const Foo{y} = x;           // instance-object destructuring
const [Foo(y)] = x;         // nesting
const [Foo{y}] = x;         // ..
const { z: Foo(y) } = x;    // ..
const { z: Foo{y} } = x;    // ..
const Foo(Bar(y)) = x;      // ..
const X.Foo(y) = x;         // qualified names (i.e., a.b.c)

// assignment patterns
Foo(y) = x;                 // instance-array destructuring
Foo{y} = x;                 // instance-object destructuring
[Foo(y)] = x;               // nesting
[Foo{y}] = x;               // ..
({ z: Foo(y) } = x);        // ..
({ z: Foo{y} } = x);        // ..
Foo(Bar(y)) = x;            // ..
X.Foo(y) = x;               // qualified names (i.e., a.b.c)

From the example, BindingPattern only has one more const mark in front of AssignmentPattern. So what do BindingPattern and AssignmentPattern mean respectively?

BindingPattern and AssignmentPattern are unique concepts in destructuring mode.

BindingPattern needs to be described with variable delimiters such as const let . For example, in the following example, two new objects a and d are generated, and we call these two objects bound.

 const obj = { a: 1, b: { c: 2 } };
const {
  a,
  b: { c: d },
} = obj;
// Two variables are bound: `a` and `d`

AssignmentPattern does not need to be described by variable definers, but can only use already defined variables, so it can be understood as assigning values to these existing variables. For example, the following example binds the object a b to each item of the array numbers .

 const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);

proposal-extractors is an enhanced proposal for deconstruction, and naturally it also supports the two modes of BindingPattern and AssignmentPattern.

Summarize

The proposal-extractors proposal maintains the elegance of destructuring (custom destructuring still requires only one line of code), but introduces new syntax (custom processing functions, using () strange memory for array destructuring), in the process There is not much advantage in the type code, but there may be unexpected convenience in combination with other features. For example, after combining Declarations-in-Conditionals, you can quickly determine whether it is an instance of a certain class and deconstruct if / while let bindings at the same time.

The discussion address is: Intensive Reading "proposal-extractors" Issue #443 dt-fe/weekly

If you'd like to join the discussion, click here , there are new topics every week, with a weekend or Monday release. Front-end intensive reading - help you filter reliable content.

Follow Front-end Intensive Reading WeChat Official Account

<img width=200 src="https://img.alicdn.com/tfs/TB165W0MCzqK1RjSZFLXXcn2XXa-258-258.jpg">

Copyright notice: Free to reprint - non-commercial - non-derivative - keep attribution ( Creative Commons 3.0 license )