ES6之解构函数

对象解构-根据key检索取值

    let demo = {
    
        name: 'dao',
        value: 0
    }
    // 基础用法
    let {
     name, value } = demo;
    console.log(name);
    console.log(value);
    
    // 赋值用法
    let {
     name: localName } = demo;
    console.log(localName);
    
    // 默认值,在demo中找不到时，默认赋值为0
    let {
     type: localType = 0 } = demo;
    
    // 嵌套解构
    let node = {
    
        parent: {
    
            child: {
    
                name: 'dom',
                value: 'class'
            }
        }
    }
    let {
     parent: {
     child } } = node;
    console.log(child.name);
    console.log(child.value);

数组解构-根据位置(索引)检索取值

    let demo = ['red', 'green', 'blue'];
    // 取值和默认值
    let [, second,,four = 'yellow'] = demo;
    console.log(second);
    console.log(four);
    
    // 值交换
    let x = 1;
    let y = 2;
    [x, y] = [y, x];
    console.log(x);
    console.log(y);
    
    // 嵌套数组
    let node = [[...demo], [1, 2, 3]];
    let [[a], [b]] = node;
    console.log(a);
    console.log(b);
    
    // 剩余项
    let [first, ...rest] = demo;
    console.log(first);     
    console.log(rest.length);
    console.log(rest[0]);

混合解构

    // 在以上的基础上，对数组与对象的复合数据结构进行结构
    let node = {
    
        parent: {
    
            child: {
    
                name: 'dom',
                value: 'class'
            }
        },
        type: [1, 2, 3]
    }
    let {
     parent: {
     chilid }, type: [first] } = node;
    console.log(child.name);
    console.log(first);