浅谈解构(js)

Posted 摸爬滚打的小前前

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浅谈解构(js)相关的知识,希望对你有一定的参考价值。

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

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

 

解构

什么是解构?

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

例子

(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】代表的就是哪个希望取的值的属性名,我们也可以这么使用

 

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

 

 

 

 

 

 

 

以上是关于浅谈解构(js)的主要内容,如果未能解决你的问题,请参考以下文章

浅谈解构(js)

浅谈解构(js)

ES6浅谈--解构,字符串扩展

ES6浅谈--const,数组解构

浅谈《白夜行》结局

你真的了解 “对象解构赋值” 吗?关于对象解构的全面解析 ✌