Detailed explanation of assignment based on ES6 scope and destructuring-JS Tutorial-php.cn

Detailed explanation of assignment based on ES6 scope and destructuring

小云云

Release： 2017-12-28 10:29:26

Original

1060 people have browsed it

This article brings you a detailed explanation of scope and destructuring assignment based on ES6. The editor thinks it’s pretty good, so I’ll share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

ES6 Force strict mode to be enabled

Scope

•var declares local variables. Variables defined in for/if curly braces can also be accessed outside the curly braces

•The variable declared by let is block scope, and the variable cannot be defined repeatedly

•const declares a constant, block scope, must be assigned a value when declaring, and cannot be modified

// const声明的k指向一个对象，k本身不可变，但对象可变

function test() {
 const k={
  a:1
 }
 k.b=3;
 
 console.log(k);
}

Copy after login

test() deconstruction Assignment

{
 let a, b, 3, rest;
 [a, b, c=3]=[1, 2];

 console.log(a, b);
}
//output: 1 2 3

{
 let a, b, 3, rest;
 [a, b, c]=[1, 2];

 console.log(a, b);
}
//output: 1 2 undefined

{
 let a, b, rest;
 [a, b, ...rest] = [1, 2, 3, 4, 5, 6];
 console.log(a, b, rest);
}
//output:1 2 [3, 4, 5, 6]

{
 let a, b;
 ({a, b} = {a:1, b:2})

 console.log(a ,b);
}
//output: 1 2

Copy after login

Usage scenarios

Variable exchange

{
 let a = 1;
 let b = 2;
 [a, b] = [b, a];
 console.log(a, b);
}

Copy after login

Get multiple function values

{
 function f(){
  return [1, 2]
 }
 let a, b;
 [a, b] = f();
 console.log(a, b);
}

Copy after login

Get multiple function return values

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a,,,b] = f();
 console.log(a, b);
}
//output: 1 4

{
 function f(){
  return [1, 2, 3, 4, 5]
 }
 let a, b, c;
 [a, ...b] = f();
 console.log(a, b);
}
//output: 1 [2, 3, 4, 5]

Copy after login

Object destructuring and assignment

{
 let o={p:42, q:true};
 let {p, q, c=5} = o;

 console.log(p ,q);
}
//output: 42 true 5

Copy after login

Get json value

{
 let metaData={
  title: 'abc',
  test: [{
   title: 'test',
   desc: 'description'
  }]
 }
 let {title:esTitle, test:[{title:cnTitle}]} = metaData;
 console.log(esTitle, cnTitle);
}
//Output: abc test

Copy after login

Related recommendations:

Detailed examples of new array methods in ES6

Detailed example of the application of es6 in react

Detailed explanation of the function binding and class event binding functions of javascript in ES6

The above is the detailed content of Detailed explanation of assignment based on ES6 scope and destructuring. For more information, please follow other related articles on the PHP Chinese website!