ES6新增语法

ES6

什么是ES6？

ES全称ECMAScript，一项脚本语言的标准化规范。

为什么用ES6

• 变量提升特性怎额国家了程序运行的不可预测性
• 语法过于松散，实现不同功能。不同人代码不同。

let

ES6中新增的用于声明变量的关键字。

• let声明的变量只在所处块级有效,块外访问不到，且报错a is not define。(块级作用域，括号里的作用域）。

   if(true) {
   let a=10;
   }
   console.log(a) 

• 不存在变量提升（先输出后定义）

  console.let(a)
  let a=10;

• 暂时性死区。t和if语句绑定。外面定义var没有用。会报错先输出后定义。t is not define。

  var t=123;
  if(true) {
    t='abc'
    let t;
  }

let习题

输出几？

    <script>
        var arr=[];
        for(var i=0;i<2;i++) {
            arr[i]=function(){
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();
    </script>

输出的都为2。
题解：

• 变量i是全局的，函数执行时输出的都是全局作用域下i的值。
• 就是数组里存的是console（i）。现在i=2，所以都输出2。

```javascript
    <script>
        var arr=[];
        for(var i=0;i<2;i++) {
            arr[i]=function(){
                console.log(i);
            }
        }
        arr[0]();
        arr[1]();
    </script>

输出0和1
题解：

• let声明是块级作用域。
• 每个循环产生一个块级作用域。每个块级作用域中变量是不同的，函数执行时输出的是循环产生的块级作用域下的值。

常量const

const作用

声明常量，常量就是值（内存地址）不能变化的量。

• 具有块级作用域。

   if(true) {
   const a=10;
   }
   console.log(a) //报错 a is not define

• 必须赋初始值。否则Missing initializer in const declaration

• 声明常量赋值后，值（内存地址）不能变化。复杂数据类型，如数组值可以改变，地址不能变。否则报错assignment to constant variable。

    <script>
       const p=3.14
       p=100;//改变了值，报错。
       const a=[100,200];
       arr[0]='a';//不报错
       arr[1]='b';//不报错
       ary['a','b'] //改变了地址，报错
    </script>

let、const、var的区别

1. 使用var声明的变量，作用域为该语句所在函数，且存在变量提升现象。
2. 使用let声明变量，作用域为所在代码块，不存在变量提升。
3. 使用const声明的是常量，作用域为所在代码块，不存在变量提升。在后面代码块中不能修改该常量的值。

解构赋值

ES6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构。

数组解构：允许我们按照一对一对应的关系从数组中提取值并赋值于变量。

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

如果变量数量和数字长度不能一对一对应，超出部分是undefine的。

对象解构

    <script>
       let person={name:'zhangsan',age:20}
       //ES6之前 
       var age=preson.age;
       var name=person.name;
       //ES6 1.
       let {name,age}=person;
       console.log(name);//zhangsan
       console.log(age); //20
       //ES6 2.
       let {name:myname,age:myage}=person
       console.log(myage);
       console.log(myname);
    </script>

箭头函数

新增定义函数方法。

• 并且代码的执行结果就是函数的返回值 函数体大括号可以省略。
• 如果形参只有一个，形参外侧小括号可以省略。

    <script>
       const fn=()=>{
           console.log(123);
       }
       fn();
       //传统函数和箭头函数，如果函数体中只有一句代码。
       //并且代码的执行结果就是函数的返回值 函数体大括号可以省略。
       function sum(a,b){
           return a+b;
       }
       const sum=(a,b)=>{
           return a+b;
       }
       const sum=(a,b)=>a+b;
     //如果形参只有一个，形参外侧小括号可以省略
       function fn(v){
           return v;
       }
       const fn=v=>{
           alert(v);//浏览器弹出
       }
       fn(20);
    </script>

箭头函数不绑定this关键字，箭头函数中的this，指的是函数位置的上下文this。

       function fn{
          console.log(this);
          return()=> {
              console.log(this);
          }
       }
       const obj ={name:'Zhangsan'};
       const res=fn.call(obj);
       res();

箭头函数this不指向window。而是指向fn的this，就是obj。

练习题

• obj是个对象，不是函数，不产生作用域。实际箭头函数定义在全局作用域下，指向window，window没有age值，所以是undefine。
• 若在全局里设置对象，则输出全局下100。

   <script>
      var obj={
          age:20,
          say:() => {
              alert(this.age);//undefine
          }
      }
      obj.say();
  =================
       var age=100;
        var obj={
          age:20,
          say:() => {
              alert(this.age);//100
          }
      }
      obj.say();
   </script>

剩余参数

什么是剩余参数？

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

   <script type="text/javascript">
      const sum=(...args)=>{
          let total=0;
          //只要一个形参，省略了item的括号
          args.forEach(item=>total+=item);
          return total;
      };
      console.log(sum(10,20));
      console.log(sum(10,20,30));
   </script>

剩余参数和解构配合使用。
解决了数组解构必须一对一的问题。

      let a=['张三','李四','王五'];
      let [s1,...s2]=a;
      console.log(s1);
      console.log(s2);