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

解构有三种类型:

1.数组的解构赋值

(1)简单的数组解构

以前,我们给变量赋值是直接单个指定值,比如:

let a=0;
let b=1;
let c=2;

数组解构的方式来进行赋值,如下:

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

总结:从数组中提取值,按照位置的对象关系(次序)对变量赋值。

(2)数组模式和赋值模式统一

可以简单的理解为等号左边和等号右边的形式要统一,如果不统一解构将失败。相关代码如下:

let [a,[b,c],d]=[1,[2,3],4];

如果等号两边形式不一样,很可能获得undefined或者直接报错。

(3)解构的默认值

解构赋值是允许你使用默认值的,相关代码如下:

let [foo = true] =[];
console.log(foo); //控制台打印出true

undefined和null的区别:

*undefined相当于什么都没有。

*null相当于有值,但值为null。

2.对象的解构赋值

对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

(1)圆括号的使用

如果在解构之前就定义了变量,这时候再解构会出现问题,而且编译就会报错。

let foo;
{foo} ={foo:'i love you'};
console.log(foo);

要解决报错,使程序正常,我们这时候只要在解构的语句外边加一个圆括号就可以了。

let foo;
({foo} ={foo:'i love you'});
console.log(foo); //控制台输出i love you

3.字符串解构

字符串解构,此时字符串被转换成了一个类似数组的对象。

const [a,b,c,d,]="love";
console.log(a);//l
console.log(b);//o
console.log(c);//v
console.log(d);//e

学习参考链接为:http://jspang.com/post/es6.html#toc-696 。

ES6系列_3之变量的解构赋值的更多相关文章

  1. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  2. ES6学习 第二章 变量的解构赋值

    前言 该篇笔记是第二篇 变量的解构赋值. 这一章原文链接: 变量的解构赋值 解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 解构 ...

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

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

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

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

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

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

  6. ES6 - 基础学习(3): 变量的解构赋值

    解构赋值概述 1.解构赋值是对赋值运算符的扩展. 2.它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值. 3.代码书写上显得简洁且易读,语义更加清晰明了:而且还方便获取复杂对象中的数据字 ...

  7. ES6 第三章 变量的解构赋值 具体参照http://es6.ruanyifeng.com

    1.基本用法 let [a, b, c] = [1, 2, 3];左右两边解构格式要保持一致. 2.默认值 let [x, y = 'b'] = ['a']; // x='a', y='b' let ...

  8. es6系列-变量的解构赋值

    git地址: https://github.com/rainnaZR/es6-study/tree/master/src/destructuring 变量的解构赋值 变量的解构赋值: 数组, 对象, ...

  9. es6之变量的解构赋值

    es5中通常我们声明变量都是以下的方式: var a = 10; var b = 20; var c = 30; //或者 var a = 10,b = 20,c = 30; //或者 var arr ...

随机推荐

  1. 秒转为时分秒格式js

    秒转为时分秒格式 function formatSeconds(value) { if(value == undefined) { value = 0; } var second = parseInt ...

  2. 创建对象并生成结果的3个步骤-Chapter 3 P38

    必须完成3个步骤才能创建对象并生成结果: 1 创建对象   namespace LanguageFeatures { public class Product { public int Product ...

  3. 114. Flatten Binary Tree to Linked List -- 将二叉树转成链表(in-place单枝树)

    Given a binary tree, flatten it to a linked list in-place. For example,Given 1 / \ 2 5 / \ \ 3 4 6 T ...

  4. laravel中资源路由的控制器创建方法:

    php artisan make:controller Admin\ArticleController --resource 上面的创建方法是,创建控制器文件夹下的Admin文件下的ArticleCo ...

  5. C primer plus 5 读书笔记3

    1.ASCII 码前31位控制字符(非打印字符)的表示方法:(1)使用ASCII码表示比如蜂鸣字符用7(十进制)表示:(2),使用特殊的符号序列,即转义序列.如 ‘\a’表示蜂鸣字符.(3),使用十六 ...

  6. 快速切题 sgu134.Centroid 树形dp

    134. Centroid time limit per test: 0.25 sec. memory limit per test: 4096 KB You are given an undirec ...

  7. C语言----------链表的简单实现与操作

    链表是一种物理存储单元上非连续.非顺序的存储结构,数据元素的逻辑顺序是通过链表中的指针链接次序实现的. 链表由一系列结点(链表中每一个元素称为结点)组成,结点可以在运行时动态生成. 每个结点包括两个部 ...

  8. 在jenkins和sonar中集成jacoco(二)--在jenkins中生成jacoco覆盖率报告

    先要在jenkins上安装jacoco的插件,安装完成之后在job的配置项中可以增加这个选项: 第一个录入框是你的覆盖率文件(exec),第二个是class文件目录,第三个是源代码文件目录. 配置好了 ...

  9. 通过iframe 实现upload file无刷新

    <html>    <head> </head> <body> <form encType="multipart/form-data&q ...

  10. 每天一个linux命令(网络):【转载】ping命令

    Linux系统的ping命令是常用的网络命令,它通常用来测试与目标主机的连通性,我们经常会说“ping一下某机器,看是不是开着”.不能打开网页时会说“你先ping网关地址192.168.1.1试试”. ...