ES6之解构表达式

ES6语法中新增了解构表达式,使得我们可以通过特定的语法直接优雅获取数组或者是对象中的一个或者是多个值;

在传统的数组取值我们是这样的

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

如果我们使用ES6的解构表达式之后是这样的

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

看起来是不是更优雅了呢.解构表达式的用法还不止于此.

如果我们想要获取数组的第一个元素,可以只输入一个元素

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

如果我们只想要获取第二个元素可以如下:

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

或者获取除第一个元素之后的所有元素:

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

当取值元素超过数组,则会显示默认值

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

我们也可以在超出的元素给定指定的默认值

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

如果是结构对象用法如下:

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

获取对象指定的参数:

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

获取对象深层次的嵌套参数:

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

栗子木发布了60 篇原创文章 · 获赞 5 · 访问量 1万+ 私信关注

ES6之解构表达式

在传统的数组取值我们是这样的

如果是结构对象用法如下:

相关文章