先看看数组解构:

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. js - 文字

    居右 style="float:right;" 文字底部对齐(默认居中对齐) vertical-align:bottom; 文字居中 text-align:middle text- ...

  2. 使用SVN更新项目后出现冲突说明

    使用Update后出现多个文件,并且报错!!  R.java.mine   R.java.r21965  R.java.r23204 下面以自动生成R.java.mine,R.java.r21965, ...

  3. javascript入门(1)

    目录 Javascript认识(1) JavaScript 常见事宜 JavaScript介绍 Javascript内容 Javascript书写位置 变量 变量是什么 变量的命名规则 变量提升 数据 ...

  4. Java生鲜电商平台-生鲜电商订单结算系统的深入解析与反思总结

    Java生鲜电商平台-生鲜电商订单结算系统的深入解析与反思总结 说明:最近疫情影响,生鲜电商这个行业被彻底的激活了,全中国人民都知道用小程序或者APP可以进行买菜了,但是可惜的是,我的生鲜电商在去年经 ...

  5. vue学习指南:第十三篇(详细) - Vue的 路由 第三篇 ( 路由的缓存 )

    路由的缓存 路由缓存是 Vue组件优化的一个重要方法 为什么实现路由缓存? 为了 组件间 相互切换不会重复加载数据,影响用户体验,我们通常需要将组件的数组实现缓存,当我们点过来,在点的时候会再次发送 ...

  6. 页面回显与URL模板映射

    一.页面回显 对于需要返回界面的数据,可以将后台封装好的数据回显至原始jsp界面中. 举个例子: User.java package com.zk.data; public class User { ...

  7. java异常处理课后作

    1.动手动脑 源码 import javax.swing.*; class AboutException {   public static void main(String[] a)    {    ...

  8. centos 7安装jdk8

    前提 执行安装的当前用户为root 下载安装包 现在oracle官网下载jdk需要登录才可以下载,故下载安装包比较麻烦.下载地址: http://www.oracle.com/technetwork/ ...

  9. Request继承体系

    ServletRequest——接口 ↑继承 HttpServletRequest——接口 ↑实现 org.apache.catalina.connector.RequestFacade——类(Tom ...

  10. JS 数组克隆方法总结

    ES5 方法总结 1.slice let arr = [2,4,434,43] let arr1= arr.slice() arr[0] = 'a' console.log(arr,arr1) // ...