ES6 deconstruction expression

ES6 expression syntax added deconstruction allows us to get an elegant array or an object or multiple values ​​directly through a specific syntax;

In the traditional values ​​of the array is such that we

let arr = [1,2,"abc"];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);

If we use the expression after deconstruction ES6 is this

let arr = [1,2,"abc"];
let [a,b,c] = arr;
console.log(a,b,c)

It is not a more elegant look of it. Deconstructing the use of expressions more than that.

If we want to get the first element of the array, you can enter only one element

let arr = [1,2,"abc"];
let [a] = arr;
console.log(a)

If we just want to get the second element may be as follows:

let arr = [1,2,"abc"];
let [,a] = arr;
console.log(a)

Or after obtaining all the elements except the first element:

let arr = [1,2,"abc"];
let [a,...b] = arr;
console.log(b)

When the value of an array element exceeds the default value is displayed

let arr = [1,2,"abc"];
let [a,b,c,d] = arr;
console.log(a,b,c,d)

We can also specify a default value for a given element in excess

let arr = [1,2,"abc"];
let [a,b,c,d="张三"] = arr;
console.log(a,b,c,d)

 

If the structure of the object is used as follows:

const person = {
            name: 'Luke',
            age: '24',
            facts: {
                hobby: 'Photo',
                work: 'Software Developer'
            }
        }

 

Gets the object specified parameters:

const person = {
            name: 'Luke',
            age: '24',
            facts: {
                hobby: 'Photo',
                work: 'Software Developer'
            }
        }
        let {name,age} = person;
        console.log(name,age)

 

Gets deep nested objects parameters:
 

const person = {
            name: 'Luke',
            age: '24',
            facts: {
                hobby: 'Photo',
                work: 'Software Developer'
            }
        }
        let {facts:{hobby},age} = person;
        console.log(hobby,age)

 

 

Published 60 original articles · won praise 5 · views 10000 +

Guess you like

Origin blog.csdn.net/weixin_42214548/article/details/104110580