变量的扩展与解构（ES6）

作者: 前白 | 来源:发表于2019-08-05 10:01 被阅读5次

Object.create()与new操作符
【基础知识】扩展运算符...
变量的扩展与解构（ES6）
ES6文集的目录
2018-01-03
ES6
解构赋值
es6的数值,函数,字符串扩展
『ES6脚丫系列』变量的解构赋值
es6的变量解构赋值

1、发展历史

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

1996年网景（Netscape）提交给国际标准组织（ECMA）的新语言，希望成为国际标准。第二年发布了Javascript并称为ECMAScript。为什么不叫JavaScript而是ECMAScript呢？有两个原因，一个是因为商标问题，JavaScript是只有网景公司才可以使用的商标；ECMA的国际标准，体现标准的制作者不是个人或者公司。

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

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

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

2、ES6的主要优势

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

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

3、变量的扩展

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，不可以重复声明，不可以修改，因为是常量
都是块级作用域
都不存在变量提升，必须声明才能使用

4、变量的解构

解构的作用是可以快速取得数组或对象当中的元素或属性。

目的：为了方便我们从数组或者对象把我们想要的值给提取出来并且赋给我们想要赋的值；如果没有解构成功就返回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'. */