关键词：
前言：什么是ES6？ECMAScript 6（简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。其中相比较于ES5新增了诸多的特性，并且ES6可转换为ES5的语法。->在线ES6转换为ES5工具。
本系列学习随笔参考了阮一峰老师的《ES6标准入门》。
一、解构赋值简述
在学习ES6之前，如果我们要从一个数组将值取出来，我们要如何去做？
let arr=[1,2,3];
let a=arr[0];
let b=arr[1];
let c=arr[2];
是不是感觉上面的代码很繁琐，我们仅仅是从简单的数组结构获取数据就需要很多重复的代码，若是更为复杂的数据结构呢，代码量可能更多，需要遍历的次数也更多。
针对于这种情况，ES6推出了解构赋值，所谓的解构赋值就是允许按照一定模式，从数组和对象中提取值，对变量进行赋值。
二、数组的解构赋值
那我们用ES6的解构赋值可以怎么去优化简述中的例子呢？
let [a, b, c] = [1, 2, 3];//表示可以从数组中提取值，按照对应的位置进行一一赋值。
同样的效果，只需要一行代码，是不是更清晰与简洁。 事实上，只要是具有Iterator 接口的都可以解构成功，关于iterable结构请关注我的博客，后续将会介绍，或者也可以去学习阮一峰老师的《ES6标准入门》的 Iterator一章
针对于更复杂的数组结构，也可以进行解析：
let [a, [[b], c]] = [1, [[2], 3]];//a==1,b==2,c==3
let [a,,c]=[1,2,3]//也可以只要其中几个值a==1,c==3
let [a, ...d] = [1, 2, 3, 4];//可以用...表示这个范围内解构成一个数组,a==1,d==[2,3,4]
let [a,b,c]=[1,2];//若是解构不成功，值为undefined,a==1,b==2,c==undefined
let [a] = 1;//若是右边是不可遍历结构，将会报错。输出Uncaught TypeError: 1 is not iterable;
let [a, b, c] = new Set([1, 2, 3]);Set结构也可以解构成功;
解构赋值中允许指定默认值：
let [a,b,c=3]=[1,2];//a==1,b==2,c==3;
//特别注意的是，当一个数组成员严格等于undefined，默认值才会生效。
let [a,b=2,c]=[1,null,3];//a==1,b==2,c==3;
默认值可以引用解构赋值的其他变量，但该变量必须已经声明。
let [a=1,b=a]=[];//a==1,b==1;
let [a=b, b=1] = []; //Uncaught ReferenceError: b is not defined
三、对象的解构赋值
解构赋值不仅可以在数组中使用，对象中也是可以的，但是对象与数组不同的是，数组是按照顺序排列的，所以在进行对象解构赋值时，属性名与变量一定要一样。
接下来我们看下例子：
let a,b=a:1,b:2;//a==1,b==2
//若是想要属性名与变量名不一样，我们也可以写成以下这样
let a: b = a: 1, c: 2 ;//b==1,对象的解构赋值是先去寻找相同的属性名再去赋值，但是真正赋值的是后者
在对象中也可以像数组一样进行嵌套赋值
let obj =
a: [
1,
c: 2
]
;
let a: [b, c ] = obj;//b==1,c==2
//此时a是不赋值的，若是a想赋值，可以写成这样
let a, a: [b, c ] = obj;//a==[1,c:2],b==1,c==2
如果我们要对已经声明的变量进行解构赋值，要小心js引擎将解析成代码块：
let a;
a = a: 1;//Uncaught SyntaxError: Unexpected token =
//正确的写法如下：
(a = a: 1)
我们也可以有更为复杂的嵌套赋值：
let obj = ;
let arr = [];
( b: obj.a, c: arr[0] = b: 1, c: 2 );//obj==b:1,arr==[2]
我们可以引申出很多精妙的用法：
//将Math中的log，sin，cos方法逐一赋值出来。用的时候更方便。
let log, sin, cos = Math;
//操作数组的结构
let arr = [1, 2, 3];
let 0 : first, [arr.length - 1] : last = arr;
跟数组一样，我们在对象的解构赋值也可以进行指定默认值
var a = 1 = ;//a==1
四、字符串的解构赋值
字符串也可以解构赋值：
const [a,b,c,d]=[‘fish‘];//a==‘f‘;b==‘i‘;c==‘s‘;d==‘h‘;
//还可以解构他的属性
const [length:len]=[‘fish‘];//len==5
五、函数参数的解构赋值
函数的参数也能解构赋值
function add([x, y])
return x + y;
add([1, 2]); // 3
上面的例子中，一传入参数就会自动解构赋值成x1 y2
函数参数的解构赋值也能指定默认值
function add(x = 0, y = 0 = )
return x+y;
add();//0
add(1);//1
六、用途
解构赋值不单单只能用来纯粹的从对象或者数组里面取值，他还有很多精妙的用途：
let a=1;
let b=2;
[a,b]=[b,a];//此时a==2;b==1;
上面就是一个两个变量交换值的例子，看更加起来简洁清晰易于理解。
平时我们函数如果想返回多个变量怎么办？我门可以将他们先转成数组或者对象，然后再解构赋值：
function getArry()
return [1,2,3];
let [a,b,c]=getArry();//a==1;b==2;c==3
利用解构赋值我们也可以将函数的多个参数一一对应起来；
function a([a,b,c]);
a([1,2,3]);
//还可以设置函数参数的默认值，上文已提过，这里就不重复说明了。
我们也可以利用解构赋值用来提取json里面的值；
let json=
data:[1,2,3]
const [data: num]=json;//num==[1,2,3]
总之，变量的解构赋值是ES6新增的一种使代码更加优美简洁的一种模式，有兴趣的同学可以多去使用学习。
阮一峰老师的es6入门：变量的解构赋值(代码片段)
变量的解构赋值数组的解构赋值对象的解构赋值字符串的解构赋值数值和布尔值的解构赋值函数参数的解构赋值圆括号问题用途数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为... 查看详情
es6变量的解构赋值(代码片段)
...：es6允许按照一定模式匹配，从数组和对象中提取值，对变量进行赋值，这被称之为解构。 1.解构一般有三种情况，完全解构，不完全解构，解构不成功<script>//完全解构var[a,b,c]=[1,2,3];console.log(a+b+c);//6//不完全解构le... 查看详情
001-es6变量声明解构赋值解构赋值主要用途(代码片段)
一、基本语法1.1、声明变量的六种方法参看地址：http://es6.ruanyifeng.com/#docs/letlet：局部变量，块级作用域，声明前使用报错var：全局变量，声明前使用undefinedconst：声明一个只读的常量。一旦声明，常量的值就不能改变。只是内... 查看详情
es6系列_3之变量的解构赋值(代码片段)
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。解构有三种类型：1.数组的解构赋值（1）简单的数组解构以前，我们给变量赋值是直接单个指定值，比如：leta=0;letb=1;letc=2;数组解构的方式来进行... 查看详情
es6之解构赋值(代码片段)
...阮一峰《ES6标准入门（第3版）》一书进行简要概述ES6中变量的解构赋值。 数组的解构赋值基本用法ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。ES6以前，为变量赋值，只能直接指定... 查看详情
es6解构赋值(代码片段)
ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。传统解构赋值vararr=[1,2,3];//把数组的值分别赋给下面的变量；vara=arr[0];varb=arr[1];varc=arr[2];console.log(a);//a的值为1console.log(b);//b的值为2c... 查看详情
es6中的解构赋值(代码片段)
...hello‘,7];console.log(name,age)//hello7单个解构数组的结构赋值变量位置必须一一对应，如果你只想获取一个变量的值那么其余位可以用空表示 查看详情
es6赋值好能手——解构赋值(代码片段)
...谢！简介ES6允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。有了这个操作之后，赋值的操作会更加的简洁和实用，解构赋值其实属于模式匹配，只要等号两边的模式相同，左边的变量... 查看详情
es6解构赋值的高级技巧(代码片段)
1.解构嵌套的对象，注意，这时p是模式，不是变量，因此不会被赋值。如果p也要作为变量赋值，可以写成下面这样。letobj=p:[‘Hello‘,y:‘World‘];letp,p:[x,y]=obj;x//"Hello"y//"World"p//["Hello",y:"World"] 2.解构我们需要的变量let[,,third]=["... 查看详情
再不学es6你就out啦(代码片段)
目录一、概念二、声明变量letvarconst的区别 2.1 let关键字声明变量2.2、const关键字声明变量2.3声明变量的总结三、解构赋值 3.1数组解构 3.2对象解构 四、箭头函数五、Array的扩展运算符 5.1、扩张运算符可以运用于合并数组5.2、... 查看详情
es6之解构赋值(代码片段)
...值在以前，我们若是要将数组的每个元素分别赋值给不同变量，较为麻烦。如：letarr=[1,2,3];leta=arr[0];letb=arr[1];letc=arr[2];ES6中的解构赋值，允许我们写成这个样子。let[a,b,c]=[1,2,3];console.log(a,b,c);上面这段代码表示，可以从数组里面... 查看详情
es6新特性3：变量的解构赋值(代码片段)
...S6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。解构赋值是对赋值运算符的扩展，主要针对数组或对象中的变量进行赋值。在代码书写上简洁且易读，语... 查看详情
变量的解构赋值整理(代码片段)
...法 ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。letx=1;lety=2;letz=3;letx=1,y=2,z=3;let[x,y,z]=[1,2,3];//ES6数组解构实例：let[foo,[[bar],baz]]=[1,[[2],3]];foo//1bar//2baz//3let[,,thir 查看详情
es6之解构赋值(代码片段)
...达式，这使得可以将值从数组或属性从对象提取到不同的变量中。如果理解起来感觉抽象，直接看下面例子：数组解构：我们在以前要给变量赋值需要像下面这样写：vararr=[1,2.3];vara=arr[0];varb=arr[1];varc=arr[2];是不是感觉略繁琐了点... 查看详情
javascriptes6-解构赋值(代码片段)
...定义是:允许按照一定的模式从数组和对象中取值,然后对变量进行赋值,这被称为解构。2.左边一种结构、右边一种结构,然后左右按照一定的对应关系进行赋值。2.解构赋值的分类1.数组的解构赋值⭐️2.对象的解构赋值⭐️3.字符... 查看详情
es6变量解构赋值(代码片段)
解构：ES6允许按照一定模式从数据和对象中提取值来对变量进行赋值1.数组的解构赋值let[a,b,c]=[1,2,3];let[x,,y]=[1,2,3];x//1y//3如果解构不成功，变量的值就等于undefinedlet[x,y,...z]=[‘a‘];x//"a"y//undefinedz//[]不完全解构，即等号左边的模... 查看详情
es6解构赋值的详细说明，建议给为前端收藏！(代码片段)
...赋值方式.vara=[1,2] 分析一下这句代码的几个点:(1)变量申明和赋值/*你可以理解这两个操作是分开的,虽然是一句代码.声明变量都会出现变量名的提升(也就是是声明变量的这句代码会被提升到生效作 查看详情
es6解构赋值(代码片段)
解构赋值对象的解构赋值:letobj=a:1,b:2;//假如需要两个变量把里面的两个值进行保存起来进行使用:/*leta=obj.a;letb=obj.b;console.log(a,b);*///es6中的解构赋值可以这样写:leta,b=obj;//注意这里的严格遵守:a,b必须是obj.a属性对应名字;console.log(a,... 查看详情