Detailed interpretation of ES6 data deconstruction

This article introduces the in-depth understanding of the usage of ES6 data deconstruction. Now I share it with you and give you a reference.

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 are both declared Local variables 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 syntax means to read the attribute named type and store its value in on 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 are curly braces on the right side of the colon, it means that the target is nested in the object In a deeper level (loc: {start: localS, end: localE})

Second data destructuring

The syntax of array destructuring looks very similar to object destructuring , just replace the object literal with 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 destructuring

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 remaining items

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

Three Mixed 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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement React-native bridging to Android, and what are the specific steps?

Detailed interpretation of the concept of $window window object in AngularJS

How to monitor window.resize in VueJs and how to implement it specifically?

How to implement page adaptation in angularjs?

How to develop custom instructions directive in vue

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