ES —— 数据解构的用法

最新推荐文章于 2025-09-07 15:36:29 发布

原创最新推荐文章于 2025-09-07 15:36:29 发布 · 659 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#es

本文揭示了解构后在编程中的高效应用，通过实例展示如何轻松获取并操作复杂对象的content和meta数据，提升代码简洁性和可读性。

用过解构后，就知道解构的魅力所在了！

//从后台获取的数据如下，需要获取到content和meta数据
{
  content:{
    device:{
      name:'1',
      switch_on:'on'
    },
    sites:[
      {name:'设备1',switch_on:'on'},
      {name:'设备2',switch_on:'off'},
      {name:'设备3',switch_on:'on'},
      {name:'设备4',switch_on:'on'},
    ]
  },
  meta:{
    name:'设备列表'
  }
}

//最初写法
let resData = {
  content:{
    device:{
      name:'1',
      switch_on:'on'
    },
    sites:[
      {name:'设备1',switch_on:'on'},
      {name:'设备2',switch_on:'off'},
      {name:'设备3',switch_on:'on'},
      {name:'设备4',switch_on:'on'},
    ]
  },
  meta:{
    name:'设备列表'
  }
}

let content = resData.content;
let meta = resData.meta;
console.log(content,meta)


//解构写法就可以直接拿到content，meta 了
let { content , meta } = {
  content:{
    device:{
      name:'1',
      switch_on:'on'
    },
    sites:[
      {name:'设备1',switch_on:'on'},
      {name:'设备2',switch_on:'off'},
      {name:'设备3',switch_on:'on'},
      {name:'设备4',switch_on:'on'},
    ]
  },
  meta:{
    name:'设备列表'
  }
}
console.log(content,meta)