In-depth understanding of ES6 data deconstruction

I believe everyone has heard of ES6 data deconstruction. This article mainly helps you understand the usage of ES6 data deconstruction. The editor thinks it is quite good, so I will 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.

Object destructuring

Object destructuring syntax uses object literals on the left side of the assignment statement

let node = {
  type: true,
  name: false
}

//既声明又赋值
let {
  type,
  name
} = node;

//或者先声明再赋值
let type, name
({type,name} = node);
console.log(type);//true
console.log(name);//false

type and name identifiers not only declare local variables, but also read the corresponding attribute values ​​​​of the object.

The value of a destructuring assignment expression is the value on the right side of the expression. An error is thrown when the right side of a destructuring expression evaluates to null or undefined.

Default value

When you use the destructuring assignment statement, if the specified local variable does not find a property with the same name in the object, the variable will be assigned the value undefined

let node = {
  type: true,
  name: false
},
  type, name, value;
({type,value,name} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//undefined

You can optionally define a default value to be used if the specified property does not exist.

let node = {
    type: true,
    name: false
  },
  type, name, value;
({
  type,
  value = true,
  name
} = node);

console.log(type);//true
console.log(name);//false
console.log(value);//true

Assign values ​​to different local variable names

let node = {
  type: true,
  name: false,
  value: "dd"
}
let {
  type: localType,
  name: localName,
  value: localValue = "cc"
} = node;
console.log(localType);
console.log(localName);
console.log(localValue);

type:localType this The syntax means to read the attribute named type and store its value in the variable localType. This syntax is opposite to the syntax of traditional object literals

Nested object structure

##

let node = {
type: "Identifier",
name: "foo",
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
}
}

let {
loc: localL,
loc: {
  start: localS,
  end: localE
}
} = node;

console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4}
console.log(localS);//{line: 1,column: 1}
console.log(localE);//{line: 1,column: 4}

When there is a curly brace on the right side of the colon When, it means that the target is nested in a deeper layer of the object (loc: {start: localS, end: localE})

Second data destructuring

Array destructuring The syntax looks very similar to object destructuring, except that the object literal is replaced by an array literal.

let colors = ["red", "blue", "green"];
let [firstC, secondC, thirdC, thursC = "yellow"] = colors;
console.log(firstC//red
console.log(secondC);//blue
console.log(thirdC);//green
console.log(thursC);//yellow

You can also ignore some items in destructuring mode and provide variable names only for the items of interest.

let colors = ["red","green","blue"];

let [,,thirdC] = colors;
console.log(thirdC);//blue

The comma before thirdC is a placeholder provided for the previous item in the array. Using this method, you can easily retrieve a value from anywhere in the array without giving other items names.

Destructuring assignment

let colors = ["red","green","blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor,secondColor] = colors;
console.log(firstColor);//red
console.log(secondColor);//green

Array destructuring has a very unique use case, which can easily interchange the values ​​​​of two variables.

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

Nested deconstruction

let colors = ["red", ["green", "blue"], "yellow"];
let [firstC, [, ssc]] = colors;
console.log(ssc);//blue

Remaining items

let colors = ["red", "green", "blue"];
let [firstC, ...restC] = colors;
console.log(firstC);
console.log(...restC);
console.log(restC[0]);//green
console.log(restC[1]);//blue

Array cloning can be done using the remaining items

let colors = ["red", "green", "blue"];
let [...restC] = colors;
console.log(restC);//["red", "green","blue"]

Three mixes Deconstruction

let node = {
type: "Identifier",
name: 'foo',
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

Related recommendations:

The solution to the problem of js exporting Excel table exceeding 26 English characters ES6

A simple method to use babel to convert es6 syntax to es5

What are the functions of static methods of classes in ES6

The above is the detailed content of In-depth understanding of ES6 data deconstruction. For more information, please follow other related articles on the PHP Chinese website!