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. Java Spring-事务管理概述

    2017-11-11 23:05:39 事务(Transaction):是逻辑上一组操作,要么全都成功,要么全都失败. 一.事务的特性 原子性:事务不可分割 一致性:事务执行的前后,数据完整性保持一致 ...

  2. JavaScript--练习1--99乘法表

    JavaScript--练习1--99乘法表 一.心得 二.代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" &quo ...

  3. jquery性能优化的十种方法

    jquery性能优化的十种方法 有时候我们在书写jquery的时候,为了书写代码方便,往往忽略了程序执行过程中,给客户端带来的压力.随之而来的就是在某些低端浏览器或者低端电脑上运行速度缓慢,甚至无法运 ...

  4. 使用POI导入小数变成浮点数异常

    例如   我在Excel中的数据为17.2, 导入到表中就变成了17.1999999或者17.20000001 原因是我用double接收了17.2,然后直接用了String去转换,精度就丢失了. 代 ...

  5. 用setTimeout实现setInterval函数

    最近get一个新知识,也不算是新知识,可能是以前自己没有认真对待(对自己无语ing,si不si傻). 废话不多说,直接来看代码吧 function setInterval(func, t){ var ...

  6. SPOJ VLATTICE Visible Lattice Points 莫比乌斯反演 难度:3

    http://www.spoj.com/problems/VLATTICE/ 明显,当gcd(x,y,z)=k,k!=1时,(x,y,z)被(x/k,y/k,z/k)遮挡,所以这道题要求的是gcd(x ...

  7. L172 K-kilogram

    In a historic vote, nations on Friday unanimously approved a groundbreaking overhaul to the internat ...

  8. JS中的phototype详解

    作者:轩脉刃 1 原型法设计模式 在.Net中可以使用clone()来实现原型法 原型法的主要思想是,现在有1个类A,我想要创建一个类B,这个类是以A为原型的,并且能进行扩展.我们称B的原型为A. 2 ...

  9. URL 生成带文字二维码

    <!DOCTYPE html> <html> <head> <title></title> <meta charset="u ...

  10. python3 tkinter 桌面软件教程

    效果图 """"brid布局""" from tkinter import * import tkinter.filedialog ...