Table of contents
2. Details of object deconstruction
2.1. When the destructured value object does not exist
2.2. Give default parameters to destructuring values
2.3. Non-identical property deconstruction
3.1 Basic deconstruction grammar
3.2 Array nested destructuring
4. Function deconstruction parameter passing
The deconstruction method is added to the new syntax of ES6, which allows us to easily fetch data from arrays or objects, simplifies a lot of repetitive code, and makes our code more readable and maintainable.
1. Object Deconstruction
In the period when there is no object deconstruction, if we want to get the data on the object, we have to use a syntax similar to: user.name to obtain the data. If it is only a single-layer deconstruction object, it is fine, if the object is nested. If it is very deep, it will become very troublesome, and our code will also become very redundant, which will affect readability, so the deconstruction grammar came into being.
Look at the following code, before ES6 we must get the value of the object like this
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
//传统的获取值
let name = user.name
let age = user.age
let sex = user.sex
let pro = user.address.pro
let city = user.address.city
With object destructuring, our grammar will become very short, but the function has not changed at all
//对象解构语法
let {name,age,sex,address: { pro, city }} = userIt is very intuitive to see that the code becomes very short, which makes people very comfortable
2. Details of object deconstruction
2.1. When the destructured value object does not exist
When the value we destructure is a value that doesn't exist in the object
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
//对象解构语法
let { name, age, gender, address:{ pro,city} } = user
console.log(name, age, gender, pro,city)
For example, we deconstructed a: gender, but this value does not exist in the object. At this time, the value is: undefined, because what we need to know here is that our line of code is actually a definition: let { name, age, gender, address: { pro,city} }, when you define it itself has no value, so it is undefined
2.2. Give default parameters to destructuring values
The value that does not exist in the previous deconstruction is undefined, so if we want to give a default value, we only need to assign a value to it, which is to give the default value
//对象解构语法
let { name, age, gender="女", address:{ pro,city} } = user
console.log(name, age, gender, pro,city) 
2.3. Non-identical property deconstruction
In this case, when the variable name defined by our deconstructed value is different from that in the object, we can use this syntax: sex:gender, so that the deconstructed value is assigned to gender
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
//对象解构语法
let { name, age, sex:gender, address:{ pro,city} } = user
console.log(name, age, gender, pro,city)
3. Array destructuring
In fact, the deconstruction of an array is not much different from the deconstruction of an object. When deconstructing an array, the array can also be regarded as an object.
3.1 Basic deconstruction grammar
Here's how you can destructure by index
//数组解构
let arr = ['a', 'b', 'c', 'd']
let { 0: n1, 1: n2 } = arr
console.log(n1, n2) // a b
let { 2: n3, 3: n4 } = arr
console.log(n3, n4) // c d
It can also be deconstructed like this
//数组解构
let arr = ['a', 'b', 'c', 'd']
let [n1, n2] = arr
console.log(n1, n2) // a b
let [, , n3, n4] = arr
console.log(n3, n4) // c dOf course, the array structure can also carry default values, similar to object deconstruction, just assign values directly
3.2 Array nested destructuring
//数组嵌套解构
let arr = ['a', 'b', 'c', 'd', [1, 2, 3, 4]]
let [, , , , newArr] = arr
console.log(newArr) // [1,2,3,4]
//获取第五项中的某一个值
let [, , , , [, , n3]] = arr
console.log(n3) // 3
4. Function deconstruction parameter passing
This is the scene where we usually pass in an object parameter and use it in the function
//函数解构传参
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}
function print(user) {
console.log(`name:${user.name}`)
console.log(`age:${user.age}`)
console.log(`sex:${user.sex}`)
console.log(`pro:${user.address.pro}`)
console.log(`city:${user.address.city}`)
}
print(user)
It becomes very simple with deconstruction
function print({ name, age, sex, address: { pro, city } } = user) {
console.log(`name:${name}`)
console.log(`age:${age}`)
console.log(`sex:${sex}`)
console.log(`pro:${pro}`)
console.log(`city:${city}`)
}
print(user)When doing projects in actual combat, we often use various parameters in functions, which may have default values or no default values. At this time, we can flexibly use the above methods of deconstructing objects and deconstructing arrays, let our code see It looks more concise, and we can also reduce a lot of redundant code, which greatly improves the readability of the code.
5. Deconstruction exercises
5.1, the following is an object, we need to destructure the name, and then put all other attributes into a new object
let user = {
name: 'zs',
age: 16,
sex: '男',
address: {
pro: '湖南',
city: '长沙'
}
}This can be achieved using the spread operator
let { name, ...obj } = user //利用展开运算符收集剩下的属性
console.log(name, obj)
5.2, there is an object below, which deconstructs the username and user content of the second comment
let article = {
title: '文章标题',
content: '文章内容',
comments: [
{
content: '评论1',
user: {
id: 1,
name: '用户名1'
}
},
{
content: '评论2',
user: {
id: 2,
name: '用户名2'
}
}
]
}Using the above knowledge, we can easily deconstruct the elements we need
//解构出第二条评论的用户名和用户内容
//name:'用户名2',content:'评论2'
let {
comments: [
,
{
content,
user: { name }
}
]
} = article
console.log(content, name)
