This is the 18th day of my participation in Gwen Challenge

1. Array deconstruction assignment

Basic usage

//before
let a = 1;
let b = 1;
let c = 1;

//now
let [a,b,c] = [1.2.3];
Copy the code

The default value

Default values are allowed

let [a = true] = []; a//true

let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a'.undefined]; // x='a', y='b'
Copy the code

Undefiend is effective only when there is no default value.

2. Object deconstruction assignment

Array deconstruction assignment requires position – to – position correspondence, but object deconstruction assignment requires the correct property name.

// The variable name should correspond to the attribute name
let {foo, bar} = {foo: 'aaa'.bar: 'bbb'};
foo //aaa
bar //bbb

let { baz } = { foo: "aaa".bar: "bbb" };
baz // undefined
Copy the code

Note that the variable is assigned, not the schema name.

let { foo: baz } = { foo: "aaa".bar: "bbb" };
baz // "aaa"
foo // error: foo is not defined
Copy the code

Baz is a true variable and foo is a pattern.

If you want to assign a value to the schema name, it looks like this.

const node = {
  loc: {
    start: {
      line: 1.column: 5}}};let { loc, loc: { start }, loc: { start: { line }} } = node;
line / / 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
Copy the code

Nested assignment

let obj = {};
let arr = [];

({ foo: obj.prop, bar: arr[0]} = {foo: 123.bar: true });

obj // {prop:123}
arr // [true]
Copy the code

The default value

var {x = 3} = {};
x / / 3

var {x, y = 5} = {x: 1};
x / / 1
y / / 5

var {x: y = 3} = {};
y / / 3

var {x: y = 3} = {x: 5};
y / / 5

var { message: msg = 'Something went wrong' } = {};
msg // "Something went wrong"
Copy the code

3. String deconstruction assignment

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

let {length : len} = 'hello';
len / / 5
Copy the code

4. Deconstructive assignment of values and Bores

When deconstructing an assignment, if the value and Boolean are to the right of the equals sign, the object is converted first.

let {toString: s} = 123;
s === Number.prototype.toString // true

let {toString: s} = true;
s === Boolean.prototype.toString // true
Copy the code

The rule for deconstructing assignment is to turn the value to the right of the equals sign into an object whenever it is not an object or array. Undefined and NULL cannot be converted to objects, so destructuring assignments to them will result in an error.

let { prop: x } = undefined; // TypeError
let { prop: y } = null; // TypeError
Copy the code

5. Destruct assignment of function parameters

Function arguments can also be destructively assigned.

function add([x, y]){
  return x + y;
}

add([1.2]); / / 3
Copy the code

Another example

[[1.2], [3.4]].map(([a, b]) = > a + b);
// [3, 7]

/ / is equivalent to
[[1.2], [3.4]].map(function([a, b]){
  return a + b;
});
Copy the code

Arrays are not supposed to add, so the a’s and the B’s have been deconstructed.

The default value

function move({x = 0, y = 0} = {}) {
  return [x, y];
}

move({x: 3.y: 8}); / / [3, 8]
move({x: 3}); / / [3, 0]
move({}); / / [0, 0]
move(); / / [0, 0]
Copy the code

6. Parentheses

While deconstructing assignments is convenient, it’s not easy to parse. There is no way for the compiler to know from the start whether an expression is a pattern or an expression. It must be parsed to (or not) the equals sign.

This raises the question of what to do if parentheses are present in the schema. The rule of ES6 is that parentheses should not be used whenever there is a possibility of ambiguity about deconstruction.

However, this rule is actually not so easy to discern and can be quite troublesome to deal with. Therefore, it is recommended that parentheses not be placed in schemas whenever possible.

7. Use

  1. Exchange value
let x = 1;
let y = 2;

[x, y] = [y, x];
Copy the code
  1. Returns multiple values from a function
// Return an array

function example() {
  return [1.2.3];
}
let [a, b, c] = example();

// Return an object

function example() {
  return {
    foo: 1.bar: 2
  };
}
let { foo, bar } = example();
Copy the code
  1. Definition of function parameters
// Arguments are an ordered set of values
function f([x, y, z]) {... } f([1.2.3]);

// Arguments are an unordered set of values
function f({x, y, z}) {... } f({z: 3.y: 2.x: 1});
Copy the code
  1. Extracting JSON data
let jsonData = {
  id: 42.status: "OK".data: [867.5309]};let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]
Copy the code
  1. Default values for function arguments
jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false.global = true.//. more config }) {
  // ... do stuff
};
Copy the code
  1. Traverse the Map structure
const map = new Map(a); map.set('first'.'hello');
map.set('second'.'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world

// Get the key name
for (let [key] of map) {
  // ...
}

// Get the key value
for (let [,value] of map) {
  // ...
}
Copy the code
  1. Specifies the method of input module
const { SourceMapConsumer, SourceNode } = require("source-map");
Copy the code

reference

[1] Ruan Yifeng: Introduction to ECMAScript 6