解构的作用:简化书写长度,提升开发效率。

解构对象

在开发中我们常用到使用ajax请求数据,并且把数据渲染到页面上。可能这个数据返回的对象或数组。例如返回一个obj{name:'zwq',age:18,sex:woman}而我们获取里面的值保存在变量里会用 var name = obj.name,var age = obj.age。

在es6中提供了解构的语法糖,让左右两侧极为相似的结构进行变量赋值。

在对象中单独写一个name代表的就是 name:name,左侧name你要到对象对象找到的属性,右侧name代表你声明的变量名,所以,下面代码中obj对象的name,age属性赋值给变量name和age。在左侧的变量找到了右侧对象的相同属性并把值赋给对应变量。

let obj = {
name: "zwq",
age: 18,
sex:'female'
}
let name,age;
({ name, age } = obj);
console.log(name, age); //zwq 18

上面代码是先声明变量,在赋值。也可以声明变量时同时赋值,如下:

let {name,age} = obj;
console.log(name,age); //zwq 18

当自己声明的变量不想和对应的属性重名是

let {name:Oname,age:Oage} = obj;
console.log(Oname,Oage); //zwq 18

默认赋值

下面代码采用默认赋值,形参a,分别默认赋值为10,20。当值传入一个值的时候,b并不是undefined,而是取默认值。

function sum(a = 10,b = 20){
console.log(a+b);
}
sum(5);

下面代码使用默认值的方式给变量sex附上默认值male,当对象中找不到对应的属性是取默认值,当存在对用属性是,取对象里面的值。

let {name:Oname,age:Oage,sex ='male' } = obj;
console.log(Oname,Oage,sex);

解构数组

由于数组也是对象,属性名是当前的索引值,所以下面可以成功的进行变量赋值。同时数组中用length属性。因此声明length变量也可以获取对象的属性值:数组的长度

let arr = [1,2,3];
let {0:x,1:y,2:z} = arr
console.log(x,y,z); //1,2,3
 let{length} = arr;
 console.log(length);  //3
 

而解构就是使用左右两侧极为相似的解构进行赋值,在数组解构中这样书写:

let [x,y,z] = arr;
console.log(x,y,z); //1,2,3

当数组嵌套对象的形式也可以利用左右两侧相似解构进行赋值。

用,,,占位,照抄arr的结构。如下声明name变量,并且打印zwq.

let arr = [1,2,3,{name:'zwq'}];
let [,,,{name}] = arr;
console.log(name);

ES6 解构 destructuring的更多相关文章

  1. 深入浅出ES6(六):解构 Destructuring

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 什么是解构赋值? 解构赋值允许你使用类似数组或对象字面量的语法将数组和对象的属性 ...

  2. ES6解构赋值

    前面的话 我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段.在ES6中添加了可以简化这种任务的新特性:解构.解构是一种打破数据结构,将其拆分为更小部分的过程.本文将详细介绍ES6解构赋值 ...

  3. ES6 解构

    { "code": 200, "msg": "success", "data": { "total" ...

  4. ES6解构赋值常见用法

    解构赋值出现的契机: let obj = { a: 1, b: 2 } // 取值 let a = obj.a let b = obj.b 问题核心: 每次取值既要确定对象属性名,还得重新定义一个变量 ...

  5. es6 解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 关于给变量赋值,传统的变量赋值是这样的: var arr = [1,2,3];//把数组的值 ...

  6. ES6—解构赋值

    1.什么是解构赋值 ES6允许按照预定的模式,从数组.对象中提取值,对变量进行赋值. 我们直接用例子说明.    2. 数组的解构赋值 数组传统的变量赋值:      var arr=[1,2,3]; ...

  7. ES6解构赋值详解

    文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...

  8. (2)ES6解构赋值-数组篇

    1.解构赋值-数组篇 //Destrcturing(解构) //ES5 /* var a = 1; var b = 2; var c = 3; */ //ES6 var [a,b,c] = [1,2, ...

  9. es6 解构赋值 新认知/新习惯

    es6 的解构赋值其实很早就学习了,但一直纠结于习惯和可读性问题,所以没有大规模使用.最近被 react调教一番之后.已经完全融入认知和习惯中去了.总结一下三个常用的技巧: 对象取值 取值并重命名 剩 ...

随机推荐

  1. 服务器RAID技术基础

    RAID ( Redundant Array of Independent Disks )即独立磁盘冗余阵列,通常简称为磁盘阵列 一.RAID主要优势 大容量: 这是 RAID 的一个显然优势,它扩大 ...

  2. 谁说微服务是Spring Cloud的独角戏?Service Mesh了解一下?

    Service Mesh 的概念自 2017 年初提出之后,受到了业界的广泛关注,作为微服务的下一代发展架构在社区迅速发酵,并且孵化出了诸如 Istio 等广受业界关注的面向于云原生 (Cloud N ...

  3. [ch05-00] 多变量线性回归问题

    系列博客,原文在笔者所维护的github上:https://aka.ms/beginnerAI, 点击star加星不要吝啬,星越多笔者越努力. 第5章 多入单出的单层神经网络 5.0 多变量线性回归问 ...

  4. Java基础面试相关

    面试相关的问题(下) 四 Linux高级_ 1.Linux机器 变慢,怎么查看? (1)整机的性能 主要查看的是CPU和内存 先查看整机的top,使用命令 top 虚拟机 使用1可以查看哪个核被占用过 ...

  5. linux—netstat

    netstat--option -a: 列出所有端口,监听的没有监听的     -t: 显示tcp相关的选项 -u: 显示udp相关的选项 -l: 仅仅显示监听选项 -p:  显示与连接有关的程序名和 ...

  6. Orleans[NET Core 3.1] 学习笔记(三)( 1 )本地开发配置

    本地开发配置 本地开发和调试的时候,我们可能不需要去关注集群和网络ip端口.所以对于本地开发模式,Orleans给了我们比较简单的配置方式. Silo配置 在本地开发的配置模式下,Orleans会默认 ...

  7. jq触发oninput事件

    之前一直在用jq的change()方法来处理输入框的值变化事件,以及触发输入框的变化事件. 后来发现change()方法有个弊端,change事件的发生条件是:输入框的值value发生变化,并且输入框 ...

  8. (Concurrent)HashMap的存储过程及原理。

    1.前言 看完咕泡Jack前辈的有关hashMap的视频(非宣传,jack自带1.5倍嘴速,高效),收益良多,所以记录一下学习到的东西. 2.基础用法 源码的注释首先就介绍了哈希表是基于Map接口,所 ...

  9. CCF-CSP题解 201903-3 损坏的RAID5

    先吐槽先吐槽!因为输入太大,需要用fgets,读n个字符或读到回车终止. char *fgets(char *str, int n, FILE *stream) 因为scanf模拟考试T了10+次.因 ...

  10. 使用t-SNE做降维可视化

    最近在做一个深度学习分类项目,想看看训练集数据的分布情况,但由于数据本身维度接近100,不能直观的可视化展示,所以就对降维可视化做了一些粗略的了解以便能在低维空间中近似展示高维数据的分布情况,以下内容 ...