定义

  ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构

数组的解构赋值

  • 以前,为变量赋值,只能直接指定值。

    let a = 1;
    let b = 2;
    let c = 3;
  • es6写法

    let [a, b, c] = [1, 2, 3];
  • 不完全解构--解构不成功,值都会等于undefined

    let [x, y, ...z] = ['a'];
    x // "a"
    y // undefined
    z // [] let [bar, foo] = [1]; foo //undefined let [foo] = []; foo //undefined
  • 不完全解构的另外一种情况

    //等号左边的模式,只匹配一部分的等号右边的数组 ,此时解构成功
    let [x, y] = [1, 2, 3];
    x //
    y // let [a, [b], d] = [1, [2, 3], 4];
    a //
    b //
    d // //等号的右边不是数组(或者严格地说,不是可遍历的结构,参见《Iterator》一章),那么将会报错,以下写法都会报错
    // 报错
    let [foo] = 1;
    let [foo] = false;
    let [foo] = NaN;
    let [foo] = undefined;
    let [foo] = null;
    let [foo] = {};
  • Set 结构,也可以使用数组的解构赋值。

    let [x, y, z] = new Set(['a', 'b', 'c']);
    x // "a" 

数组解构赋值允许默认值

  • ES6 内部使用严格相等运算符(===),判断一个位置是否有值。所以,只有当一个数组成员严格等于undefined,默认值才会生效。

    //默认值生效了
    let [foo = true] = [];
    foo // true let [x, y = 'b'] = ['a']; // x='a', y='b'
    let [x, y = 'b'] = ['a', undefined]; // x='a', y='b' let [x = 1] = [undefined]; //x=1 //默认值没有生效
    let [x = 1] = [null];
    x // null
  • 默认值是一个表达式,那么这个表达式是惰性求值的,即只有在用到的时候,才会求值

    function f() {
    console.log('aaa');
    } let [x = f()] = [1]; //x=1
  • 默认值可以引用解构赋值的其他变量,但该变量必须已经声明。

    let [x = 1, y = x] = [];     // x=1; y=1
    let [x = 1, y = x] = [2]; // x=2; y=2
    let [x = 1, y = x] = [1, 2]; // x=1; y=2
    let [x = y, y = 1] = []; // ReferenceError: y is not defined

      

【ES6 】ES6 解构赋值--数组解构赋值的更多相关文章

  1. ES6-新增的数组操作,数组解构,forEach,fillter,some.map的数组遍历,数组转换字符串

    ES6-新增的数组操作 // es6数组格式 let json = { '0' : 'anan', '1' : 'anani', '2' : 'anania', length:3 } //es6 把数 ...

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

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

  3. ES6 数组解构赋值

    .数组解构 let [a, b, c,d] = ["aa", "bb", 77,88]; alert(a) //弹出aa 可以用babel 解析看ES5的转换结 ...

  4. ES6(二) Destructuring-变量的解构赋值

    1.解构的含义 允许按照一定的模式,从数组和对象中取值,对变量进行赋值,称为解构. 解构赋值时,只要等号右边的值不是对象,就先将其转换成对象. 本质上,这种写法属于 “模式匹配”,只要两边模式相同,左 ...

  5. ES6标准入门之变量的解构赋值简单解说

    首先我们来看一看解构的概念,在ES6标准下,允许按照一定模式从数组和对象中提取值,然后对变量进行赋值,这被称作解构,简而言之粗糙的理解就是变相赋值. 解构赋值的规则是,只要等号右边的值不是对象或者数组 ...

  6. ES6系列_3之变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 解构有三种类型: 1.数组的解构赋值 (1)简单的数组解构 以前,我们给变量赋值是直接单个指定值,比如: let a=0; ...

  7. ES6学习随笔--字符串模板、解构赋值、对象、循环、函数、Promise、Generrator

    在线编译器:babel.github 在nongjs中使用 'use strict' let a = ; 运行node : node --harmony_destructuring xxx.js 代码 ...

  8. ES6第三节:变量的解构赋值

    ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.下面我们看实际的例子: 一.数组解构: let [a,b,c] = [1,2,3]; console.log(a); //a ...

  9. es6学习2:变量的解构赋值

    一:数组的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构 let [foo, [[bar], baz]] = [1, [[2], 3]]; foo bar ba ...

随机推荐

  1. How To Display Variable Value In View?

    How To Display Variable Value In View? There are several ways. For example simply using @ like this: ...

  2. Bootstrap form-group and form-control

    https://github.com/twbs/bootstrap/blob/21f3375f21e9a7a5155d0cd783fd2bc7aeee8485/scss/_forms.scss htt ...

  3. pre-fork 分叉 软分叉 硬分叉 前叉实现 pre-fork implementation

    https://mp.weixin.qq.com/s/wIDTs2J1ZkLkAEHqQnkYnw 什么是分叉?为何对区块链发展至关重要? Uselink公有链 Uselink公有链 2018-12- ...

  4. kotlin之MutableMap委托

    fun main(arg: Array<String>) { val map = mutableMapOf("name" to "tom", ) v ...

  5. Flask之加载静态资源

    Flask之加载静态资源 1.加载css样式 <link rel="stylesheet" href="{{ url_for('static',filename=' ...

  6. thinkphp模版主题使用方法

    3.1.3模版主题使用方法,手册貌似没有.配置项: 'DEFAULT_THEME'=>'default',//默认主题 'THEME_LIST'=>'default,theme',//主题 ...

  7. 阶段5 3.微服务项目【学成在线】_day04 页面静态化_13-页面静态化-数据模型-轮播图DataUrl接口

    要开发轮播图的DataUrl的接口 轮播图的配置的集合 xc-framework-model这个module下 CmsConfigModel的类的属性 定义接口 在api里面定义接口:CmsConfi ...

  8. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_16-CMS前端工程创建-导入系统管理前端工程

    提供了基于脚手架封装好的前端工程 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\阶段5 3.微服务项目[学成在线]·\day02 CMS前端开发\资料\xc-ui-p ...

  9. PAT 甲级 1013 Battle Over Cities (25 分)(图的遍历,统计强连通分量个数,bfs,一遍就ac啦)

    1013 Battle Over Cities (25 分)   It is vitally important to have all the cities connected by highway ...

  10. Delphi 中自定义异常及异常处理的一般方法

    delphi中异常定义如下: TCustomException   =   class(Exception)     private     public         constructor   ...