Home > Web Front-end > JS Tutorial > body text

In-depth understanding of ES6 data deconstruction

小云云
Release: 2018-01-15 09:08:20
Original
1271 people have browsed it

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
Copy after login

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
Copy after login

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
Copy after login

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);
Copy after login

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}
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login

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
Copy after login

Nested deconstruction


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

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
Copy after login

Array cloning can be done using the remaining items


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

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
Copy after login
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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!