浅谈解构（js）

Posted 2021-07-25 摸爬滚打的小前前

在项目中我们如何优化自己的代码呢，用最新的语法写最漂亮的代码！

首先感谢团队中带我成长的各位老师，根据自己在代码中使用的进行一定的总结

 

解构

什么是解构？

解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。解构可以解构数组和对象，目前使用解构对象的情况更多因此在本文主要讲解解构对象

例子

({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

这其实也是一个语法糖

在我们使用接口返回的值时，到底有哪些属性在被使用

那么等价于 const a=data.a

我们也称之为结构

最基本的用法

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true

其实就等同于

var o = {p: 42, q: true};
var p = o.p;
var q = o.q;

console.log(p); // 42
console.log(q); // true

一种更加简便的方法

给取出来的值重命名

var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true 

其实这个也等同于

var o = {p: 42, q: true};
var foo= o.p;
var bar= o.q;

console.log(foo); // 42
console.log(bar); // true

这种情况可能使用的情况更多 ，比如 p:foo 表达的意思就是在对象中取出p这个的属性，然后重命名为foo

重命名并赋值

var {a:aa = 10, b:bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5

这种情况和上边的重命名类似，但是让我们想一个问题，如果对象中没有这个属性怎么办呢？那么取出来的值就是undefined，为了避免这种情况我们可以给取值的时候赋予默认值

嵌套的对象解构

const metadata = {
  title: 'Scratchpad',
  translations: 
    {
      locale: 'de',
      localization_tags: [],
      last_edit: '2014-04-14T08:43:37',
      url: '/de/docs/Tools/Scratchpad',
      title: 'javascript-Umgebung'
    },
  url: '/en-US/docs/Tools/Scratchpad'
};

let {
  title: englishTitle, // rename
  translations: 
    {
       title: localeTitle, // rename
    },
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle);  // "JavaScript-Umgebung"

我们在项目中可能遇到的更多的是这种结构复杂的对象，我们只要把变量父级的名字等照抄就可以使用

计算属性名

let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

我们希望取的值可能每次是不一样的，那么我们这个时候就需要一个【key】代表的就是哪个希望取的值的属性名，我们也可以这么使用

 

解构还有很多种方法，用途，本文中列出来的主要是常用的一些，以后再有好用的方法会持续更新