先看看数组解构:

function fn(){
return [1,2,3];
} var [a,b,c] = fn();
console.log(a,b,c); // 1 2 3 var [d,,f] = fn();
console.log(d,f); //1 3 var [e,] = fu();
console.log(e); //1

假设有一个能够返回对象的函数f :

function fn(){
return {
a:'1',
b:'2',
c:'3'
};
} var {a:x,b:y,c:z} = fn();
console.log(x,y,z);

假如使用的变量名和被匹配的属性名一样,即 var {a:a,b:b,c:c} = fn();

那么可以简写为:

function fn(){
return {
a:'1',
b:'2',
c:'3'
};
} var {a,b,c} = fn();
console.log(a,b,c);

错误写法:

var  {x:a,x:b,x:c} = fn();

console.log(x,y,z);

正确写法

var  {a:x,b:y,c:z} = fn();

console.log(x,y,z);     //  a  b c

JS中的解构的更多相关文章

  1. 【JS】325- 深度理解ES6中的解构赋值

    点击上方"前端自习课"关注,学习起来~ 对象和数组时 Javascript 中最常用的两种数据结构,由于 JSON 数据格式的普及,二者已经成为 Javascript 语言中特别重 ...

  2. ES6中的解构

    数组中的解构: 输出 : 白板 幺鸡 二条 对象的解构: 输出: 老王 12 数组的结构用[];对象的解构用{}:一定要区分它是数组还是解构. 区分方法:看 它是在赋值还是在拿值,等号左边,都为解构, ...

  3. ES6中的解构赋值

    在解释什么是解构赋值前,我们先来看一下, ES5 中对变量的声明和赋值. var str = 'hello word'; 左边一个变量名,右边可以是字符串,数组或对象. ES6 中增加了一种更为便捷的 ...

  4. C#7.0中的解构功能---Deconstruct

    解构元组 C#7.0新增了诸多功能,其中有一项是新元组(ValueTuple),它允许我们可以返回多个值,并且配合解构能更加方便的进行工作,如下面例子 static void Main(string[ ...

  5. ES2015中的解构赋值

    ES2015中允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,被称为”解构(Destructering)“. 以前,为变量赋值,只能指定值. /** * 以前,为变量赋值,只能直接指定值 * ...

  6. JavaScript 中对象解构时指定默认值

    待解构字段为原始值 正常情况下, const obj = { a: 1, b: 2, }; const { a, b } = obj; console.log(a, b); // 1 2 当被解构字段 ...

  7. js变量的解构赋值

    今天在学习时看到几段代码,让我感叹JS的灵活,特此一记: let stateObj = {a:1,b:3}; let newObj = {b:13,c:4} ; stateObj = {...stat ...

  8. ES6中变量解构的用途—遍历Map结构

  9. js 数组分解 解构

    // ES5 a = list[0], rest = list.slice(1) // ES6 [a, ...rest] = list

随机推荐

  1. php处理复选框

    1.HTML <form action="getData.php" method="post" enctype="multipart/form- ...

  2. 155.XSS攻击原理

    XSS攻击: XSS(Cross Site Script)攻击叫做跨站脚本攻击,他的原理是用户使用具有XSS漏洞的网站的时候,向这个网站提交一些恶意代码,当用户在访问这个网站的某个页面的时候,这个恶意 ...

  3. 【Unity|C#】基础篇(3)——类(class)/ 接口(interface)

    [学习资料] <C#图解教程>(第4~7章):https://www.cnblogs.com/moonache/p/7687551.html 电子书下载:https://pan.baidu ...

  4. selenium 百度登录

    private String baseUrl="http://www.baidu.com/"; --------- @Test public void testLoginB() t ...

  5. (转)Hadoop Combiner

    转自:http://blog.csdn.net/jokes000/article/details/7072963 众所周知,Hadoop框架使用Mapper将数据处理成一个<key,value& ...

  6. 一次列表页伪静态的实现;结合nginx rewrite

    nginx伪静态: rewrite ^/(.*)-htm-(.*)$ /$1.php?$2; 将 list-html-t-3-p-4.html 转到list.php?t-3-p-4 t-3-p-4 用 ...

  7. 面试题:HashSet、TreeSet 和HashMap 的实现与原理

    说下 TreeSet 和 HashSet 什么区别呢? 它们的区别点主要在他们的底层数据结构不同,HashSet 使用的是 HashMap 来实现,而 TreeSet 使用的是 TreeMap 来实现 ...

  8. Python基础与科学计算常用方法

    Python基础与科学计算常用方法 本文使用的是Jupyter Notebook,Python3.你可以将代码直接复制到Jupyter Notebook中运行,以便更好的学习. 导入所需要的头文件 i ...

  9. CAN报文格式

    CAN协议的报文传输过程中有:数据帧.远程帧.错误帧.过载帧和帧间隔. 1.数据帧:用于发送节点向接收节点传送数据的帧. 2.远程帧:用于接收节点向具有相同ID的发送节点传送数据的帧. 3.错误帧:用 ...

  10. jvm(3):JVM调优

    typora-root-url: ./ JVM调优思路 目的:减少full GC次数.减少STW时间(一次GC的时间) 手段: 打印GC日志-XX:+PrintGCDetails -XX:+Print ...