优化技巧：项目中利用扩展运算符优化代码

微信公众号：  [大前端驿站]
关注大前端驿站。问题或建议，欢迎公众号留言。 这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战

今天周末，事情有点多，差点想断更了，想想还是更一下吧哈哈！今天简单来总结一下我们日常工作中可能会遇到的业务场景，然后我们是如何去巧妙处理冗余代码的，我们在这个场景中也会用到ES6的扩展运算符，我相信很多同学知道这个的作用，但是不知道怎么在实践中去应用到。学以致用是非常关键的，尤其对于我们前端工程师来说。

扩展运算符（...）的作用是将一个数组转为用逗号分隔的参数序列。

业务场景： 我们可以通过arguments来获取传入的参数数组，比如在vue项目中,多个组件中同时用到了一个数据接口时，但是获取后的数据又需要绑定组件来做相对应的业务操作时，这时候大多数同学可能就没个组件内部去定义一个函数分别处理不同逻辑，这时候就会出现代码的冗余相对较多，尤其是构建参数的过程重复编码。这时候我们可以通过抽取出来一个公共方法来处理不同的逻辑，但是参数我们可以灵活传入。 下面是一个示例，a组件和b组件调用相同的接口但是获取到数据后做的业务操作不一样，getListData方法有可能时子组件通过$emit触发的，甚至有可能出现更复杂的业务逻辑，这时我们一定要注意公共方法的抽取，避免代码冗余，因为有时候我们构建后端所需要的接口参数可能会比较复杂，比如一些数组的遍历工作等等，然后我们通过传入组件的vue实例来做他们获取数据之后的业务逻辑即可。

/**a.vue文件**/
import FetchData from './utils.js'
...
//获取列表数据
getListData(){
    FetchData(this, ...arguments)
}
...

/**b.vue文件**/
import FetchData from './utils.js'
...
//获取列表数据
getListData(){
    FetchData(this, ...arguments)
}
...

/**utils.js文件**/
import listData from 'api.js' // api,js是封装过的axions或fetch数据接口
...
//获取列表数据
FetchData(vueInstance, ...arguments){
    const params = {
        ...
    }
    listData(params).then(res => {
        const {error, message} = res
        if(error !==  0) {
            this.$message.error(message)
        } else {
            // 这时候可以在公共方法里面利用vueInstance处理不同的业务逻辑
            // use vueInstance
        }
    })
}
...

业务场景越复杂，我们越要懂得如何去做方法的抽取，考虑组件的复用等等，这样我们才能在一系列的产品迭代工作中不那么被动。

【分享、点赞、在看】三连吧，让更多的人加入我们