很赞的es6解构用法

前言

一个有追求的前端er，怎么可以allow自己写出平庸的code！下面5个解构栗子让你的代码瞬间提升好几个bigger ，嘻嘻~

1.获取用户对象数组中的id集合

普通写法：

let users = [{id:'abc',name:'tom'},{id:'dfg',name:'jake'}]
 function getUserIds(){
     let userIds = [];
    users.forEach(user=>{
        userIds.push({id:user.id})
    }) 
    return userIds
 } 
 getUserIds() // [{id:'abc'},{id:'dfg'}]

bigger 写法：

let users = [{id:'abc',name:'tom'},{id:'dfg',name:'jake'}]
function getUserIds(){
  let userIds = users.map(user=>{
     let {id} = user
     return {id}
   }) 
   return userIds
} 
 getUserIds() // [{id:'abc'},{id:'dfg'}]

2.删除对象

let regionTree=[{disabled:false,value:'广州',children:[]},{disabled:true,value:'深圳',children:[]}]
let result = regionTree.map(item => {
         let { disabled, ...values } = item;
         return values;
       });
//result=[{value:'广州',children:[]},{value:'深圳',children:[]}]

3.优雅地获取年月日

const [all, year, month, day] = /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec('2020-01-20');
// 2020-01-20 2020 01 20

4.为Ajax请求设置预警

假设 this.$http(url) 返回的对象正确格式为{code:0,data:{id:'123',name:'tony'} }，如data返回为空则抛出异常

 function toastErr (){
    alert('俄欧，没有获取到任何数据~')
 }
 let {code,data:y=toastErr()} = this.$http(url)

5.获取函数参数

function getArguments(...args) { //这里args 是函数内置的Arguments类数组
   console.log(args) // [1,3,2]
}
let a=1,b=2,c=3
getArguments(a,b,c)