Es6新增语法

let声明变量

//1.let声明变量，与var不同的是let声明的变量不能重复声明    
     let a;
     a=100;
     let a=200;

//2.let块儿级作用域,在大括号中的变量再括号外不能被访问,var可以
{var girl = "123"}
console.log(girl);

//3.let不存在变量提升，不允许在变量声明前使用
console.log(song);
let song="张三";

//4.不影响作用域链效果,let声明的变量在块儿级作用域中使用还是可以被访问到，和var一样
{
    var s="张三";
    function fn(){
         console.log(s);
    }
    fn();
}

//5.let声明的循环在各个区域块不关联，点击各个盒子有用,但var声明的变量在点击时i的值已经超过了items的长度，此时点击会报错
let items=document.getElementsByClassName('item');
for(let i=0;i<items.length;i++){
    items[i].onclick=function(){
        items[i].style.background="pink";
   }
} 

const 声明常量 

//1.必须赋初值2.一般常量大写3.常量的值不能被修改4.块儿级作用域5.对数组和对象的元素修改，不算对常量的修改，不会报错
const TEAM = ['XIAO','LI','WANG'];
TEAM.push('zhang');//正确
TEAM = ['ZHANG'];//错误

对象的解构

//一般对象的引用方法
const zhao = {
         name:'red',
         age:'13',
         xiaopin:function(){
           console.log("123");
         }
       }
console.log(zhao.name);
zhao.xiaopin();

//使用解构方法，可以从对象中提取属性或者方法并绑定到变量身上
const zhao ={
         name:'red',
         age:'13',
         xiaopin:function(){
           console.log("123");
         }
       }
// 定义变量name,age,xiaopin获取zhao对象的属性
    let {name,age,xiaopin}=zhao;
    console.log(name);
    xiaopin();

模板字符串 ` `

//1.内容中可以直接出现换行
       let str = `1313
       156`;
       console.log(str);
//2.变量拼接
       let a=`123`;
       let b=`${a}456`;
       console.log(b);

在大括号里面直接写入变量和函数，作为对象的属性和方法

      let name='zhang';
      let color = function (){  
        console.log('red');
      }

      const ming = {
        name,
        color,
        import(){
          console.log("今天提升年期");
        }
      }
      console.log(ming.name);

箭头函数

1.//箭头函数this指向定义该函数时所在的作用域指向的对象，作用域是指函数内部，并不是对象内部
 let a = () =>{
         console.log("123");
     }
   //this是静态的，this始终指向函数声明时所在作用域下this的值
         function getName(){
           console.log(this.name);
         }
         let getName2 = ()=>{
           console.log(this.name);
         }
         window.name='尚硅谷';
         const school = {
           name:'guigu'
         }
//普通函数调用时的this永远是window
//call()是函数对象的方法，需要通过函数来调用，在call里面的第一个参数传入一个对象，此时会改变this的指向
//call()与apply()用法几乎相同，不同的是，call传实参的时候要一个个的传，而apply要将一个数组整体传入
         getName();    //window    
         getName.call(school); //school
         getName2.call(school); //window
//用箭头函数声明的对象this的值是不可以改变的


//2.不能构造实例化对象
//报错
        let Person = (name,age)=>{
          this.name=name;
          this.age=age;
        }
        let me = new Person('zhangsan',20);
        console.log(me);
//通过普通函数创建
        let Person = function(name,age){
            this.name = name;
            this.age = age;
        }
        let me = new Person('zhangsan',20);

//3.不能使用 arguments变量，arguments是一个类数组对象，调用函数时，传递的实参都在arguments中保存
//报错
        let fn = () =>{
           console.log(arguments);
         }
        fn(1,2,3);
//注意:1.arguments对象和Function是分不开的。2.arguments这个对象不能显式创建。3.arguments对象只有函数开始时才可用。
        let fn = function(){
            console.log(arguments);
            console.log(arguments[0]);
          }
          fn(1,2,3);

//4.箭头函数的简写
    //1)省略小括号，当形参有且只有一个的时候
             let add = n =>{
               return n + n;
             }
             console.log(add(9));
   //2)省略花括号,当代码只有一条语句的时候,此时return 必须省略，而且执行结果就是函数的返回值
             let pow = (n) =>n*n;
             console.log(pow(9));

[...]扩展运算符能将[数组]转换为逗号分隔的[参数序列]

 const tfboys=['w','l','y'];
          //这样传递给arguments的是一个数组，并且赋给arguments[0]
          const tfboys=['w','l','y'];
          function chumwan(){
            console.log(arguments);
          }
          chumwan(tfboys);

            //这样得到arguments下标的值依次为w l y
           function chumwan(){
             console.log(arguments);
           }
           chumwan(...tfboys);
 //扩展运算符的应用
          //1.数组合并
           const kuaizi = ['xia','wang'];
           const feiji = ['cheng','ming'];
           const hebing = [...kuaizi,...feiji];
           console.log(hebing);
          //2.数组的克隆
           const sanzhihua=['E','G','M'];  
           const sanyecao=[...sanzhihua];
           console.log(sanyecao);
          //3.将伪数组转为真正的数组，将获取到的所有div标签的元素转换为数组
           const divs=document.querySelectorAll('div');
           const divsArr = [...divs];
          

数组遍历 for...of

 const xiyou = ['猪八戒','孙悟空','唐僧'];
           for(let v of xiyou){
             console.log(v);
           }

Class类

               class Phone{
                 //在类中创建函数不需要使用function,并且函数之间不用加逗号分隔
                 //接收传递过来的参数，并且返回给实例化对象，当new出一个对象时，constructor函数会自动调用
                 constructor(brand,price){
                   this.brand = brand;
                   this.price = price;
                 }
                 //创建对象方法
                 call(){
                   console.log('我可以打电话');
                  
                 }
               }
               let iphone = new Phone('iphone13',5999);
              
               console.log(iphone.brand,iphone.price);
               iphone.call();
//继承
              class Father{
                constructor(){

                }
                money(){
                  console.log('这是父亲挣的钱');
                }
              }
              class Son extends Father{

              }
              let son = new Son();
              son.money();


//子类可以得到父类的属性和方法,但是子类内部的属性值父类是访问不到的
              //因为子类创建的实例化对象的this与父类的this不是一个
              class Father{
                constructor(x,y){
                  this.x=x;
                  this.y=y;
                }
                sum(){
                  console.log(this.x+this.y);
                }
              }
              class Son extends Father{
                constructor(x,y){
                  //调用父类中的构造函数，将子类的x,y传给父类,可以通过super来调用父类中的方法和属性,注意:super调用必须要在子类的this之前
                  super(x,y);
                }
              }
              let son = new Son(1,2);
              son.sum();

 Es7新特性

//inclues  判断数组是否包含某元素，返回boolen类型
      const   mingzhu = ['西游记','红楼梦','三国演义','水浒传'];
      console.log(mingzhu.includes('西游记'));

** 

//**  平方
console.log(2 ** 10);