ES6 let const deconstruction and assignment

Translation of this paper ☞ https://es6.ruanyifeng.com/#docs/ There are changes

let block level variable const block level constant
characteristic:

  1. Valid only in code blocks
		{
            let a = 3
        }
        console.log(a); //a is not defined
  1. There is no variable promotion

  2. Temporary dead zone

   var b = 233;
        if (true) {
            b = 1
            let b;//Cannot access 'b' before initialization
        }

If it is Es5, VaR is OK

Within a code block, a variable is not available until it is declared using the let command. Syntactically, this is called "temporary dead zone" (TDZ)

  1. Don't make heavy statements

be careful:

Another special feature of the for loop is that the part that sets the loop variable is a parent scope, and the interior of the loop body is a separate child scope.

for (let i = 0; i < 3; i++) {
  let i = 'abc';
  console.log(i);
}
// abc
// abc
// abc
  1. const
  • The essence is:
    It is not that the value of the variable cannot be changed, but that the data stored at the memory address pointed to by the variable cannot be changed.
  		const obj = {
            x: 1
        }
        obj.x = 2
        console.log(obj);//{"x": 2}

Deconstruction and assignment of variables:
destructuring

  1. Who can deconstruct assignment: as long as a data structure has an Iterator interface (write this later)
  2. Concept: "pattern matching". As long as the patterns on both sides of the equal sign are the same, the variables on the left will be given corresponding values.
  3. Details:
  • Array:
  • Basic writing:
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
  • Deconstruction failure: the value of the variable is equal to undefined, or both sides of the pattern are not equal.

let [bar, foo] = [1];

  • Deconstruction semi successful:

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

  • Sequential correspondence: it corresponds one by one

  • Default values are supported
    1.1 when can the default value be used: the default value will be used only when the right side is undefined

 	var [a = 1, b = 2, c = 3] = [undefined, null, NaN]
    console.log(a, b, c);//1,null,NaN

1.2 the default value is expression: the expression is inert and will be executed only when used

function f() {
  console.log('aaa');
}

let [x = f()] = [1];//x=1
 function f() {
        console.log('aaa');
        return 2
    }

    //let [x = f()] = [1];
    let [x = f()] = [undefined] //aaa
    console.log(x); //2

1.3 the default value can refer to other variables assigned by deconstruction, but the variable must have been declared.

let [x = 1, y = x] = [];     // x=1; y=1
let [x = 1, y = x] = [2];    // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined
//Because it is executed sequentially, x = undefined and x=y; And y=undefined

Object:

  1. No installation order assignment, installation property name assignment
	let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
	foo // "aaa"
	bar // "bbb"
	let {foo} = {bar: 'baz'};
	foo // undefined

Essence:

let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };
  1. Nesting is supported, but if the parent property of the object does not exist, an error will be reported
	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}
  1. Deconstruction assignment can get inherited attributes
  2. Default value: the effective condition is consistent with the array
  3. Purpose: deconstruct function return value, function parameter default value, quick use of json, module import and deconstruction

character string

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o
let {length : len} = 'hello';
len // 5

Number and Boolean

  • Convert to object first:
	let {toString: s} = 123;
	s === Number.prototype.toString // true
	
	let {toString: s} = true;
	s === Boolean.prototype.toString // true

Deconstruction assignment of function parameters

  • The incoming parameter has been deconstructed at the moment
function add([x, y]){
  return x + y;
}

add([1, 2]); // 3

be careful

  • undefined and null cannot be converted to objects, so an error will be reported when they are deconstructed and assigned.
  • Do not use declared variables for deconstruction assignment, {x} like code blocks
  • An array can be deconstructed by an object, but not vice versa
	let arr = [1, 2, 3];
	let {0 : first, [arr.length - 1] : last} = arr;
	first // 1
	last // 3

Tags: Javascript ECMAScript

Posted on Sat, 06 Nov 2021 06:57:51 -0400 by Roberto