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

解构有三种类型:

1.数组的解构赋值

(1)简单的数组解构

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

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

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

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

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

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

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

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

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

(3)解构的默认值

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

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

undefined和null的区别:

*undefined相当于什么都没有。

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

2.对象的解构赋值

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

(1)圆括号的使用

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

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

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

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

3.字符串解构

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

  1. const [a,b,c,d,]="love";
  2. console.log(a);//l
  3. console.log(b);//o
  4. console.log(c);//v
  5. 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网络编程和NIO详解4:浅析NIO包中的Buffer、Channel 和 Selector

    Java网络编程与NIO详解4:浅析NIO包中的Buffer.Channel 和 Selector 转自https://www.javadoop.com/post/nio-and-aio 本系列文章首 ...

  2. Java线程状态分析

    Java线程的生命周期中,存在几种状态.在Thread类里有一个枚举类型State,定义了线程的几种状态,分别有: NEW: 线程创建之后,但是还没有启动(not yet started).这时候它的 ...

  3. 也来说说C#异步委托 (转自 Rising_Sun)

    前些日子,看到园子里面有人用老王喝茶的例子讲解了一下同步和异步,虽然没有代码实现,但是能够通俗易懂的讲解了同步.异步.阻塞.非阻塞的关系了,今天借题发挥,用一个热水器加热洗澡的例子来具体演示一下C#使 ...

  4. Leetcode 53

    //经典class Solution { public: int maxSubArray(vector<int>& nums) { ; int maxsum = -INT_MAX; ...

  5. createjs记录坑

    1.使用preloadjs加载资源: manifest = [ {src: "block.png", id: "ground"}, {src: "re ...

  6. 5G RRC——为NAS层提供连接管理,消息传递等服务; 对接入网的底层协议实体提供参数配置的功能; 负责UE移动性管理相关的测量、控制等功能

    from:http://www.cnblogs.com/kkdd-2013/p/3868676.html 1 RRC协议功能 为NAS层提供连接管理,消息传递等服务: 对接入网的底层协议实体提供参数配 ...

  7. Springfox与swagger的整合使用(十七)

    一.前言 让我们先理一下springfox与swagger的关系. swagger是一个流行的API开发框架,这个框架以“开放API声明”(OpenAPI Specification,OAS)为基础, ...

  8. hadoop安装及注意事项

    一.hadoop安装及注意事项1.安装hadoop的环境,必须在你的系统中有java的环境.2.必须安装ssh,有的系统默认就安装,如果没有安装需要手动安装.    可以用yum install -y ...

  9. 050——VUE中使用js库控制vue过渡动作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. iOS UILabel两端对齐的实现(可包括中英文/数字)

    - (void)conversionCharacterInterval:(NSInteger)maxInteger current:(NSString *)currentString withLabe ...