React三浅一深之ES6(一)（三浅是什么意思）

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 标准的制定者有计划，以后每年发布一次标准，使用年份作为版本。因为ES6的第一个版本是在2015年发布的，又称ECMAScript2015（简称ES2015）。

截止到现在各大浏览器的最新版（IE除外）可以说基本都已经全部支持ES6语法了。具体的浏览器支持情况可以在这个网址查询http://kangax.github.io/compat-table/es6/ ，对于那些不支持ES6的浏览器可使用babel转译成ES5从而在现有环境执行，Babel的具体使用方法此文不做介绍，官网地址http://babeljs.io 中文地址http://babeljs.cn

接下来进入我们的正题。

let 和 const

let的特性

1. let声明的变量只在其声明的块或子块中可用

2. 在同一个函数或同一个作用域中不可用let重复定义一个变量

3. let并不会像var一样在全局对象上创造一个属性

4. 不存在变量的提升

let 对比 var

let的作用域是块，而var的作用域是函数

例如下图在一个普通的块级作用域中用var声明的变量在外面也是可以访问的并且会覆盖外部定义的变量，而let声明的只能在作用域内访问。在函数块中声明的变量在外部无法访问。

const的特性

1. const是块级作用域

2. const需要被初始化且初始化不可修改

解构

解构赋值 语法是一个Javascript表达式，这使得可以将值从数组或属性从对象提取到不同的变量中。

数组的解构

还可以设置默认值，可以防止取出的值为undefined

大家如果属性算法的话应该知道在冒泡排序中我们会用到两个值得交换

可能看到这里有的同学会问，我想只取第一个和第三个的值怎么办，其实这是我们接下来要说的部分取值

部分取值是不是也很简单，但是数组值少还好，多了这样写也麻烦（那么可以适当使用数组函数），还有一个问题就是如果要把剩余的值都赋值给一个变量该怎么呢？so easy

注意：如果剩余元素右侧有一个逗号（let [a, ...b , ]），会抛出语法错误的异常，因为剩余元素必须是数组的最后一个元素。

接下来我们说说不能解构的情况

如果等号的右边不是数组（或者严格地说，不是可遍历的结构），那么将会报错，详见下图

对象的解构

对象的解构其实就是从对象中读取对应的属性赋值给变量

注意：当通过解构一个对象字面量来无需声明赋值变量时必须给表达式加上"(..)"，{a, b} = {a: 1, b: 2}不是有效的语法，因为{a, b}被认为是一个代码块而不是对象字面量，但是({a, b} = {a: 1, b: 2})是有效的，相当于var {a, b} = {a: 1, b: 2}

那么想给变量取不同的名字该怎么办呢？so easy

同样对象的解构跟数组的解构一样也是支持默认值，规则一样。

最后，提一句我们常用的小技巧

好了今天就写到这里，后期会继续把ES6的相关知识写完。有什么写的不对的地方，希望大家海涵。

吐槽一句，今日头条的编辑器真心难用，写代码只能通过贴图了