ES6课程笔记

ECMA6是什么

它可以理解为是JavaScript的一个标准,实际上JavaScript是ECMA标准的实现和扩展。

ES6即代表ES5.1后的6.0版本，也是泛指5.1之后下一代标准，涵盖了ES2015，ES2016，ES2017等等，而ES2015则是正式名称。

• 开发语言的整体流程

块级作用域

在ES5版本中只存在全局作用域和函数作用域

例如：

var A = 100;//在全局作用域中
function fn(){
   
    //在函数作用域中
    var B = 10;
    console.log(B);
}

• ES5和ES6在块级作用域上的对比

  效果如下：

  //ES5没有块级作用域
  if(true){
       
      var v = 100//这是个全局变量
  }
  console.log(v)//100
  

  //在ES6中提供了块级作用域，使用let关键字定义块级作用域的变量
  if (true) {
       
      //块级作用域中定义的变量只能在当前块级作用域中被访问
      let v = 100
  }
  console.log(v) //报错v is not defined
  

let与var的区别

从上面的对比中引出了两个定义变量关键字，一个let，一个var。

• let关键字：允许声明一个作用域被限制在块级中的变量、语句或者表达式。
  • 也可以在全局作用域中或函数作用域中定义变量
• var关键字：声明的变量只能是全局的或者是整个函数块的变量。

声名提前现象

• 使用var关键字存在声名提前现象

  效果如下：

  console.log(a); //undefined
  var a = 10;
  //上述代码等价于
  var a; //只声名变量，并不初始化-默认值为undefined
  console.log(a); //undefined
  a = 10 //初始化变量 赋值
  

• let关键字不允许声名提前

  效果如下：

  //使用let关键字定义变量时，不存在声名提前（变量提升）
  console.log(a); //报错 Cannot access 'a' before initialization 无法在初始化之前访问“a”
  let a = 10; //ES6中没有声名提前（变量提升）
  

• 定义变量的关键字还有一个const，只不过是常量，我们试一下const有没有变量提升现象，效果如下：

  //const 关键字定义常量时，也是没有声名提前（变量提升）
  console.log(a); //Cannot access 'a' before initialization
  const a = 10
  

• 总结：在使用let以及const声明变量不会提升，所以就会抛错，而使用var声明的变量，会声明提升，所以会打印出undefined

重新声名问题

• 使用var关键字允许重复声明

  效果如下：

  var a = 100;
  console.log(a); //100
  var a = 1000;
  console.log(a); //1000
  

• 使用let关键字不允许重复声明

  效果如下：和重复定义常量const报一样的错

  let a = 100;
  console.log(a); //重复声明-抛错-Identifier 'a' has already been declared
  let a = 1000;
  console.log(a);
  
  const v = 10; //Identifier 'v' has already been declared
  const v = 20;
  

• 那既然let重复定义和const报一样的错，试试let的重新赋值

  let a = 100;
  console.log(a); //100
  a = 1000;
  console.log(a); //1000
  

与函数的关系

• 使用var

  //使用var 允许声名提前
  var v = 100;
  
  function fn() {
       
      console.log(v); //undefind-这里存在声名提前，所以这里输出v为undefined
      var v = 1000;
      console.log(a); //1000
  }
  fn()
  

• 使用let

  //使用let来尝试以上代码
  let v = 100;
  
  function fn() {
       
      console.log(v); //Cannot access 'v' before initialization
      //let在声名变量时将当前环境封闭
      //函数作用域封闭-全局作用域中的变量与当前函数作用域无关
      let v = 1000;
      console.log(v); //1000
  }
  fn()
  

与函数声明

ES5中规定函数声明只能在全局作用域和函数作用域中，不能在块级作用域中声名。

if (true) {
   
    function fn() {
   
        console.log("aaaa");
    }
}
fn()

在ES5的标准中，上述代码是报错的，但ES6支持这么写。

if (true) {
   
    //块级作用域
    let fn = function () {
   
        console.log("aaaa");
    }
}
fn() //fn is not defined   报错证明上面声明的函数是块级作用域中的，外面不可用

对比下面let方式声名，上面的可以理解为是var声名的函数，那么总结为var声名的函数不是块级，可以在全局访问；let声名的函数是块级，不可以在全局访问

变量的解构赋值

ES6中允许按照一定模式从数组或对象中提取值，对变量进行赋值。这种赋值方式被称为“解构赋值”

• ES5为变量赋值方式如下：

  var a = 1;
  var b = 2;
  var c = 3;
  

• ES6为变量赋值方式如下：

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

ES6的解构赋值本质上属于模式匹配。赋值运算符两边的模式相同，左边的变量会被赋予对应位置的值。

解构赋值失败

正确的情况下，变量的索引值对应值的索引值，效果如下：

let [a, b, c] = [1, 2, 3]
console.log(a, b, c);//1 2 3

• 如果左侧变量名多于右侧， 则左侧多的变量赋值不成功为undefined

  //如果左侧变量名多于右侧， 则左侧多的变量赋值不成功为undefined
  let [m, n] = [1]
  console.log(m, n); //1 undefined
  

• 如果右侧的值多于左侧的变量，那么只匹配对应的值，多余的值则不会解构(不完全解构)

  //如果右侧的值多于左侧的变量，那么只匹配对应的值，多余的值则不会解构
  let [p, q] = [1, 2, 3]
  console