浅谈解构(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)的主要内容,如果未能解决你的问题,请参考以下文章