关于es6拓展运算符的一点心得

这两天在看组长代码时，看到经常有用到拓展运算符，然后自己在用的时候，感觉也很灵活，遂记一些心得

拓展运算符的定义请看这里：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax#示例

在日常开发中，尤其是react中，在使用setState定义对象或者数组，需要某次赋值(函数方式)时会用到：

//初始值
const [myArr,setMyArr] = useState([
a1:[],
a2:[]
])

//假设只设置a1
setMyArr(pre=>({
...pre , // 此时pre指的是上一次myArr的其他值,将会依次展开
a1:[1,2,3,4,5]
}))

这是一个很简单的例子，因而可以得出，在对对象或者数组进行解构时，...表示其余的值并且将依次展开

但是今天要说的并不只是此，要说的是在业务开发中的妙用

设想有这样一个场景，在表格筛选时要附带上筛选参数，但是筛选参数要在被change时才会生成，因而，要赋予初始值，并且筛选时可能只有参数a或者参数b,但是最终请求时，应该将a和b都要带上，没有的话要赋初值

请求参数，初始赋为空对象,在最终请求时要附带参数a和参数b
let myInParams = {
}
let filterParams // 当表格被change时，将filter赋给filterParams 
//初始筛选值
const initFilterParams = {
    a:[],
    b:[]
}
// 在准备发起请求表格数据时，要考虑下filterParams是否存在且有值， 
const myAjax = ()=>{
  //通过判断filterParams是否有值来判断用户是否有筛选动作
  if (filterParams && Object.keys(filterParams ).length > 0) {
  //有值，说明是用户进行了筛选动作，将当前filterParams内的部分值赋给myInParams 
       Object.keys(filterParams ).forEach(item => {
        // 如果有的key的value没有值，说明用户可能进行全不筛选动作，这时候要将filterParams对应的key赋为空数组(后台不允许为null为可选类型)
          filterParams [item] = []
        }
      })
  // 随后 重新组装入参对象
      myInParams = {
        ...myInParams,  // 首先解构初始值，也就是myInParams其他的参数  
        ...initFilterParams ,    // 先解构initFilterParams , 然后myFilter会将其同名key覆盖掉，
        ...filterParams // 最后，filterParams会将内部的值替换掉initFilterParams 同名的key
      }
  }else{
    //filterParams 为非法值，因而可以判定用户没有进行筛选动作
        myInParams = {
        ...myInParams,  // 首先解构初始值，也就是myInParams其他的参数  
        ...initFilterParams ,    // 先解构initFilterParams , 然后myFilter会将其同名key覆盖掉 
      }    
  }
}

// PS:在change事件里，不能简单的将当前筛选值赋给filterParams ，由于函数式组件，普通对象有时候可能会拿不到最新值，因而建议使用useRef来保存filterParams

从上面的案例中大约可以总结，如果在一个对象里同时展开了另外两个对象且另外两个对象有同名的key，则会以后者覆盖前者的方式完成覆盖同名key的动作。

以上。