变量的扩展与解构

一、发展历史

基本概念：ES6 是 ECMAScript6 的一个简称；

1996年网景（Netscape）提交给国际标准组织（ECMA）的新语言，但愿成为国际标准。第二年发布了Javascript并称为ECMAScript。为何不叫JavaScript而是ECMAScript呢？有两个缘由，一个是由于商标问题，JavaScript是只有网景公司才可使用的商标；ECMA的国际标准，体现标准的制做者不是我的或者公司。

ECMA是在5.1版本以后的更新迭代，ES6 第一个版本是在2015年6月发布的，后续每一年六月份发布一次，ES201五、ES201六、ES201七、ES2018；ES6是统称下一代的JavaScript语言。

ES6就是ECMAScript6是新版本JavaScript语言的标准，它的目标是使得JavaScript语言能够用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript定义了：语言语法：语法解析规则、关键字、语句、声明、运算符等。类型：布尔型、数字、字符串、对象等。

二、ES6的主要优点

• 学习ES6能够大幅度的提升开发效率；（ES6封装了不少内置方法）
• 目前比较流行的JavaScript开源框架都使用ES6编写；好比：react里面的simple，每个常量和枚举都是使用simple来实现的，这样就避免了一个重复
• ES6是下一代的JavaScript标准

在ES6以前定义变量都是用var这个关键字，var是在全局的环境下声明的一个变量，并且这个变量有一个变量的提高；也就是说，即便把变量放在后面，可是JavaScript引擎的运行的时候会把变量提到代码的最上层，而后先声明再赋值，这样就带来了一个变量提高的问题。ES6在此基础上作了一下改进，提出了两个变量的扩展：let和const。

三、变量的扩展

• let，声明变量，只在当前的代码块内有效，不能重复声明，没有变量的提高，并且它是块级做用域。

  //变量声明
   {
       let a = 10;
       var b = 10;
   }
   a  // ReferenceError: a is not defined. 
   b  // 10 
  
   for(var i = 0; i < 5; i++){
       setTimeout(function(){
           console.log(i);
       },i * 100);
   }

• const，只读常量，保证了这个变量指向的内存地址。（不能再去赋值）

  const a = 10;
    a = 3;      //TypeError:Assignment to constant variable.

var与let 和 const 的比较：

var的缺点：

• 能够重复声明
• 能够修改变量
• 没有块级做用域

es6变量 ：

• let，不能够重复声明，能够修改变量
• const，不能够重复声明，不能够修改 ，由于是常量
• 都是块级做用域
• 都不存在变量提高，必须声明才能使用

四、变量的解构

解构的做用是能够快速取得数组或对象当中的元素或属性

目的：为了方便咱们从数组或者对象把咱们想要的值给提取出来而且赋给咱们想要赋的值；若是没有解构成功就返回undefined。咱们主要是从数组和对象的解构来介绍了解：

• 数组的解构，彻底的对应位置，由于数组的属性就是index就是它的位置，有顺序匹配

  let [a, b, c] = [1, 2, 3];
     /* a = 1; b = 2; c = 3 */
  
     let [week, [[month], year]] = [1, [[2], 3]];
     /* week = 1; month = 2; year = 3 */
  
     let [ , , third] = ["week", "month", "year"];
     /* third = 'year' */
  
     let [x, , y] = [1, 2, 3];
     /* x = 1; y = 3 */
  
     let [head, ...tail] = [1, 2, 3, 4];
     /* head = 1; tail = [2, 3, 4] */
  
     let [a, [b], d] = [1, [2, 3], 4];
     /* a = 1; b = 2; d = 4 */
  
     [a, b] = [b, a];
     // 位置互换 
  
     // 指定默认值 
     let [x, y = 'b'] = ['a'];
     /* x = 'a'; y = 'b' */
  
     function f() {
         console.log('参数错误！');
     }
  
     let [x = f()] = [];

• 对象的解构， 没有顺序， 匹配属性名（对应的位置找到对应的值赋给对应的变量）

  let { month, week } = { week: 'aaa', month: 'bbb' };
    /* week = 'aaa'; month = 'bbb' */
  
    let { log, sin, cos } = Math;
    /* log = Math.log; sin = Math.sin; cos = Math.cos */
  
    let obj = {
        p: [
            'Hello',
            { y: 'World' }
        ]
    };
    let { p: [x, { y }] } = obj;
    /* x = 'hello'; y = 'word'; */
  
    let  { week: { month } } = { year: 'year' };
    /* TypeError: Cannot destructure property `month` of 'undefined' or 'null'. */