es6学习2: 解构赋值专题初步研究

一. 基本型: 

　　数组: 

　　　　case 等长: 

　　　　　　let [a, b, ...reset] = [1, 2, 3, 4, 5, 6];

　　　　case 非等长: 

　　　　　　  let  [a, b, c = 11] = [1, 2];

　　对象: 

　　　　case 等长

　　　　　　已初始化: 

　　　　　　　　let a, b;

　　　　　　　　( {a, b} = {a: 1, b: 2} );

　　　　　　未初始化:

　　　　　　　　let {a:_a=' ', b:_b=' '} = {a:11, b22}   // 将a指定为:_a并附带默认值' '

　　　　case 非等长::

　　　　　　 let { a, b, c=13 } = { a:11, b:22 }

 

二. 应用场景研究:

　　　　// 情景1: 变量交换

{
    let a = 11, b = 22, c = 33;
    [c, a, b] = [a, b, c];
}

　　　　// 情景2: 选择索取

{
    let [a, , c] = [1, 2, 3]
}

　　　　// 情景3: 解包

{
    // 模拟一个service和接口数据
    let productService = {
        getProductInfoById(pId) {
            // 定义数据 返回id/价格/数量
            let
                // todo 更改statusCode更改数据返回状态, 1为成功, 0位失败
                statusCode  = 1,
                successInfo = {
                    status: 1,
                    data: {
                        id      : pId,
                        price   : 555,
                        count   : 15,
                        recvList: [{
                            name  :'avenda',
                            addr  :'四川成都'
                        },{
                            name  :'rolling',
                            addr  :'上海'
                        }]
                    }

                },
                errorInfo = {
                    status      : 0,
                    statusText  : '请求失败..'
                }
            ;

            return new Promise((resolve, reject) => {
                if (statusCode === 1) {
                    resolve(successInfo);
                } else {
                    reject(errorInfo);
                }
            });
        }
    };

    // 模拟查询商品信息
    !function getProductInfo(id) {
        // 调用接口
        productService.getProductInfoById(10001).then((res) => {
            // 解构拆包(字段名, as别名 , 默认值)
            let { id:p_id=-1, price:p_price=0, count:p_count=0, recvList:[...list] } = res.data;
            console.log(`id: ${p_id}`, `\nprice: ${p_price}`, `\ncount: ${p_count}`,`\nrecvList:`,list);

        }, (err) => {
            console.log(err.statusText)
        });;
    }();
}

情景3输出实况:

　　// 情景4 : for of 遍历值提取

const map = new Map();
map.set('first', 'hello');
map.set('second', 'world');

for (let [key, value] of map) {
  console.log(key + " is " + value);
}