记录一个es6变量的解构赋值的小技巧

自从SPA盛行之后，前端就开始全面拥抱es6了。相对于es5，es6真的是多了很多方法，或者说是语法糖。很有趣，语法也很好理解，但我们应该关注的是这些方法应该怎么用。这才是提现一个软件工作者的素养的地方。

总结一个关于es6变量结构赋值的一个小技巧

当然，脱离了场景来讨论任何技巧或者方法或者模式，都是流氓行为。先来简单说说场景吧

场景是这样的，有一个微信支付接口，刚好需要如下参数

//这里有一个用来作为参数的对象
const params = {
            access_token: localStorage.getItem('userToken'),
            order_numbers,
            total_amount,       
            return_url: RETURN_URL + '/payOrder',
            notify_url,
            order_type: getOrderTypeNum( order_type ),
            ..._store[ pay_type ]
        }

也就是说把上述参数传到这个微信接口就可以正常请求了。

WEIXIN: async ( params ) => {
       const result = await ajax_post(url_for( ENV.ACCOUNT_URL, 'api/payment/do-trade-pay' ), params);    
       return result;
    }

可以看到上述代码，把参数直接传进去了。

但是随着版本的迭代，可能会增加另外一个新的支付接口，这时候这个参数对象里面的一些参数可能会存在以下问题：

1、某字段的字段名不一样，但是值一样；

2、某字段名一样，但值不一样；

COLOURLIFE: async ( params ) => {
        const { order_numbers, notify_url, total_amount, method_ids, ...others } = params;
        const result = await ajax_post(url_for( ENV.ACCOUNT_URL, 'api/colourlife/unifiedorder' ), {
            order_number: order_numbers,
            notify_url: 'http://api.xxx.com/api/v2/payment/colourlifenotify',
            amount: total_amount,
            method_id: method_ids,
            ...others
        });
        return result;
    }

如上述代码，同过变量结构赋值的方式，将order_numbers从params中提取出来，因为在新的接口中，字段名是order_number而不是order_numbers，所以要提取出来赋值给新的字段名；又如notify_url，新接口的参数中有这个字段名，但是字段值并不是这个了，之所以要从params中提取出来，是为了后面的others变量

...athers

三个点叫spread，扩展运算符，...others在这里的意思是把params中剩下的参数以对象的形式赋值给others。这就表示，之前params中无需改变的参数通过赋值给others，之后统一结构给接口。

##总结一下

import { ajax_post, url_for } from "../../agency_file/global_agency";

const PayWay = {
    ALIPAY: async ( params ) => {
        const result = await ajax_post(url_for( ENV.ACCOUNT_URL, 'api/payment/do-trade-pay' ), params);    
        return result;
    },
    async WEIXIN ( params ) {
        const result = await this.ALIPAY( params );
        return result;
    } ,
    COLOURLIFE: async ( params ) => {
        const { order_numbers, notify_url, total_amount, method_ids, ...others } = params;
        const result = await ajax_post(url_for( ENV.ACCOUNT_URL, 'api/colourlife/unifiedorder' ), {
            order_number: order_numbers,
            notify_url: 'http://api.xxx.com/api/v2/payment/colourlifenotify',
            amount: total_amount,
            method_id: method_ids,
            ...others
        });
        return result;
    }
}


 //所有订单的支付
export const orderPay = async ( pay_type, params ) => {
    const result = await PayWay[ pay_type ]( params );
    return result;    
}

###这个技巧主要是用在你需要统一封装一些模块的时候，可以对一些东西进行筛选