一.数组的解构:

  以前的方式:

  var arr = [1,2,3];

  console.log(arr[0]); //1

  console.log(arr[1]); //2

  现在的方式:

  var [a,b,c] = [1,2,3];

  console.log(a); //1

  console.log(b); //2

  数组解构还有以下几种:

  (1).

  var [a,[b,c]] = [1,[2,3]];
  //1
  console.log(a);
  //2
  console.log(b);
  //3
  console.log(c);

  (2).

  var [a,b,c] = new Set([4,5,6]);
  //4
  console.log(a);
  //5
  console.log(b);
  //6
  console.log(c);

  (3).

  var [a=1,b=a] = [];
  //1
  console.log(a);
  //1
  console.log(b);

  (4).

  var [a=1,b=a] = [2,3];
  //2
  console.log(a);
  //3
  console.log(b);

  

二.对象的解构赋值:  

  以前的方式
  var json = {
    a:1,
    b:2
  };  

  现在的方式:

  //name是a的别名
  var {a:name,b} = {a:3,b:4};
  var {a,b} = {a:3,b:4};
  var {a,b} = {a:1,b:[2,3]};

  例: 

  var json = {
    a:[
      'hi',
      {b:'hello'}
    ]
  };

  var {a:[name,{b}]} = json;
  //hi
  console.log(name);
  //hello
  console.log(b);

三.函数的解构赋值:

  以前的方式:
  function fn(a,b){
    console.log([a,b]);
  }
  //[1,2]
  fn(1,2); 

  现在的方式:

  (1).

  function fn([a,b]){
    console.log([a,b]);
  }
  fn([3,4]);//[3, 4]

  (2).

  function fn({a=1,b=2} = {}){
    console.log([a,b]);
  }

  fn(); //[1, 2]
  fn({a:1}); //[1, 2]
  fn({a:10,b:11}); //[10, 11]

  (3).

  function fn({a,b} = {a:1,b:2}){
    console.log([a,b]);
  }
  fn(); //[1, 2]
  fn({a:1}); //[1, undefined]
  fn({a:10,b:11}); //[10, 11]

用vue.js学习es6(三):数组、对象和函数的解构的更多相关文章

  1. 用vue.js学习es6(一):基本工具及配置

    一.工具: sublime,node.js,npm 1.安装sublime 的es6插件: (1).在sublime中按Ctrl+`调出console (2).粘贴以下代码到底部命令行并回车(subl ...

  2. 用vue.js学习es6(六):Iterator和for...of循环

    一.Iterator (遍历器)的概念: 遍历器(Iterator)就是这样一种机制.它是一种接口,为各种不同的数据结构提供统一的访问机制.任何数据结构只 要部署Iterator接口,就可以完成遍历操 ...

  3. 用vue.js学习es6(五):set和map的使用

    一:Set用法: ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. (1).打印:console.log var data = new Set([1,2,3]); ...

  4. 用vue.js学习es6(二):let和const使用

    一.运行及关闭运行: 在上一节中我们用shift+右击在C:\vue\es6文件夹中打开命令行使用:npm run dev,打开了我们的vue界面. 如果要关闭则在命令行中按住ctrl+C则可以关闭. ...

  5. 用vue.js学习es6(四):Symbol类型

    一.Symbol类型: 1.ES6引入了一种新的原始数据类型Symbol,表示独一无二的值.它是JavaScript语言的第七种数据类型,前六种是:Undefined.Null. 布尔值(Boolea ...

  6. js学习(三)对象与事件

    JavaScript 对象 1.JavaScript 对象:拥有属性和方法的数据. 2.在 JavaScript中,几乎所有的事物都是对象. 3.定义一个person对象 var person = { ...

  7. js学习(一)-对象和函数概念

    //-----------------------js代码-------------------- function class1(){       //类成员的定义及构造函数 this.name = ...

  8. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  9. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

随机推荐

  1. 【无私分享:ASP.NET CORE 项目实战(第八章)】读取配置文件(二) 读取自定义配置文件

    目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 我们在 读取配置文件(一) appsettings.json 中介绍了,如何读取appsettings.json. 但随之产生 ...

  2. Xcode7.1环境下上架iOS App到AppStore 流程③(Part 三)

    前言部分 part三 部分主要讲解 Xcode关联绑定发布证书的配置.创建App信息.使用Application Loader上传.ipa文件到AppStore 一.Xcode配置发布证书信息 1)给 ...

  3. MVC发布到虚拟主机上出现的错误

    问题1:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 现象:无法识别的属性“targetFramework”.请注意属性名称区分大小写. 原因:站点中部署的Web使用的 ...

  4. spider RPC高级特性

    多租户 spider原生支持多租户部署,spider报文头对外开放了机构号.系统号两个属性用于支持多租户场景下的路由. 多租户场景下的路由可以支持下述几种模式: n  系统号: n  系统号+服务号( ...

  5. glibc 各版本发布时间以及内核默认glibc版本

    最近有些软件要求glibc 2.14+,centos 6.x自带的版本是2.12的,特查了下glibc 各版本发布时间以及与对应的内核,如下: Complete glibc release histo ...

  6. extend

    这段时间在写一个预览图片的插件, 被我老大说了无数次了,不多说啥,说多了都是泪 昨天看着我的代码他说你用了extend,那你知道是什么意思吗 我只知道是扩展的意思,瞬间觉得自己弱爆了 真的 然后今天看 ...

  7. switch语句的妙用

    switch语句的普通用法很简单,如下: var a = 3; switch (a) { case 1: console.log(a); break; case 2: case 3: console. ...

  8. 在 CentOS7 上安装 zookeeper-3.4.9 服务

    在 CentOS7 上安装 zookeeper-3.4.9 服务 1.创建 /usr/local/services/zookeeper 文件夹: mkdir -p /usr/local/service ...

  9. (十三)Maven插件解析运行机制

    这里给大家详细说一下Maven的运行机制,让大家不仅知其然,更知其所以然. 1.插件保存在哪里? 与我们所依赖的构件一样,插件也是基于坐标保存在我们的Maven仓库当中的.在用到插件的时候会先从本地仓 ...

  10. 遇到的Exception/error及解决办法记录汇总

    一.java.net.SocketException 1.java.net.SocketException:Connection reset 首先,如果一端的Socket被关闭(或主动关闭,或因为异常 ...