ES6语法

目录

1、let和var的区别

2、const常量

3、模板字面量之多行字符串

4、模板字面量之变量占位符

5、默认参数

6、Object.assign对象的拷贝与合并

7、对象字面量语法扩展

8、解构赋值

9、 模块化

10、箭头函数

11、promise

12、async和await

13、class类的使用

1、let和var的区别

1.作用域不一样

var来声明变量，只有函数作用域和全局作用域，没有块级作用域，也就是说可以在代码块{}外部使用。而let可以实现块级作用域，只能在代码块 {} 内有效，在 {} 之外不能访问。

2.let没有变量提升

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死

区” temporal dead zone，简称 TDZ。

3.let变量不能重复声明

之前用var定义变量，在多人开发一个项目时，比如都定义了一个变量a，但各自用途不同，后面定义的a会把前面定义的覆盖掉，而用let就能解决这个问题。

4.循环作用域

在for循环中，不仅{}会生成块级作用域，( )也会生成块级作用域 ，( )块级作用域是{}块级作用域的父级作用域，var声明的变量是全局的，包括循环体内与循环体外，let声明的变量作用域只在循环体内，循环体外的变量不受影响。

2、const常量

const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错，常量的命名规范：全部大写。对于引用类型保证的不是变量的值不变，而是保证变量指向的内存地址所保存的数据不允许改变。

3、模板字面量之多行字符串

模板字面量是增强版的字符串，它用反引号`(按键1左边的按键)标识。

在ES6出现之前，咱们在做开发，字符串里面是不支持换行的，这样咱们在做程序的时候可读性很差。ES5字符串换行的方式：

1.使用反斜杠\

2.使用拼接字符串

代码：

 var str=`
   hello world!
   hello world!!!`

4、模板字面量之变量占位符

变量占位符可以看做是JavaScript字符串的升级版，可以将JS表达式嵌入到模板字面量中

语法：${变量}

代码：

let name="张珊";
​
let str2 =`欢迎${name}同学，学习vue`;

5、默认参数

在ES5中声明函数参数是不能有默认值的，但是在ES6中是可以写默认值的

六、扩展运算符三个点的使用

扩展运算符理解起来并不难，其作用就是用于取出对象中的所有可遍历的属性，拷贝合并到当前对象之中。可以实现拷贝对象、合并对象、拷贝数组、合并数组。

代码：

     //1 对象
•    //拷贝
•    // es5
•    let obj1={a:1,b:2}
•    let obj2=obj1;
•    obj2.a=3;
•    console.log(obj1);
•    console.log(obj2);
•    let obj2=[]
•    for(let key in obj1){
•       obj2[key]=obj1[key]
•    }
•    obj2.a=3;
•    console.log(obj1);
•    console.log(obj2);
•    //es6
•    let obj1={a:1,b:2}
•    let obj2={...obj1};
•    obj2.a=3;
•    console.log(obj1);
•    console.log(obj2);
•    //合并
•    let a={uid:001,name:'zhangshan'}
•    let b={sid:001,menu:'肉类'}
•    let s={...a,...b}
•    console.log(s);
•    //2 数组
•    let arr1=[1,2,3]
•    let arr2=[...arr1];
•    arr1.push(3);
•    console.log(arr1);
•    console.log(arr2);
•    let arr1=[1,2,3]
•    let arr2=[4,5,6]
•    let s=[...arr1,...arr2];
•    console.log(s);
•    let data=[
•      {id:1,title:'羊肉串'},
•      {id:2,title:'猪肉串'},
•      {id:3,title:'牛肉串'}
•    ]
•    let data2=[
•      {id:4,title:'啤酒'},
•      {id:5,title:'可乐'},
•      {id:6,title:'雪碧'}
•    ]
•    //es5
•    for(let i=0;i<data2.length;i++){
•      data.push(data2[i])
•    }
•    console.log(data);
•    //es6
•    data.push(...data2);
•    console.log(data);

6、Object.assign对象的拷贝与合并

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。和扩展运算符一样可以实现对象的浅拷贝。Object.assign()第一个参数是目标对象，后面的参数是源对象。

常见用途：

1.为对象添加属性

2.为对象添加方法

代码：

     let target={a:1}
•    let souce1={b:2}
•    let souce2={c:3}
•    Object.assign(target,souce1,souce2)
•    console.log(target);
•    //有相同属性名会覆盖
•    let target={a:1,b:11}
•    let souce1={b:2,c:22}
•    let souce2={c:3}
•    Object.assign(target,souce1,souce2)
•    console.log(target);
•    //只有一个目标对象返回自己
•    let target={a:1}
•    Object.assign(target)
•    console.log(target);
•    //如果目标对象不是一个对象，则会先转成对象
•    let abc=Object.assign("abc")
•    console.log(abc);
•    console.log(abc[0],abc[1],abc[2]);
•    //target不能是undefined 和null
•    let target=undefined;
•    let target2=null;
•    Object.assign(target)
•    Object.assign(target2)
•    console.log(target);
•    //为对象添加属性
•    function Person(name,age){
•      Object.assign(this,{name,age})
•      //相当于es5中
•      //this.name=name
•      //this,age=age
•    }
•    let p=new Person('zs',18)
•    console.log(p.name,p.age);
•    //为对象添加方法
•    Object.assign(Person.prototype,{
•      say(){
•        console.log('say()');
•      },
•      run(){
•        console.log('run()');
•      }
•      //相当于es5中
•      // Person.prototype.say=function(){
•      //   console.log('say()');
•      // }
•    })
•    p.say();
•    p.run()

7、对象字面量语法扩展

对象字面量语法扩展包括：属性初始值的简写、对象方法的简写、计算属性名。

代码：

•    //属性初始值
•    //es5
•    let title='vue';
•    let price=5;
•    let book={title:title,price:price}
•    console.log(book);
•    //es6 简写
•    let book={title,price}
•    //对象方法简写
•    //es5
•    let p={
•      say:function(){
•        console.log('say方法');
•      }
•      //简写
•      // say(){
•      //   console.log('say方法');
•      // }
•    }
•    //计算属性名
•    //出现： - 或者中文
•    //es5
•    let p={}
•    let ageArr='age';
•    p["first-name"]='si';
•    p["last-name"]='li'
•    p[ageArr]=20;
•    console.log(p);
•    es6
•    let ageArr='age';
•    let p={
["first-name"]: 'si',
["last-name"]: 'li',
[ageArr]: 20
•    }
•    console.log(p);

8、解构赋值

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

代码：

 let person={
•      id:01,
•      name:"lisi",
•      children:{
•        id:001,
•        name:'cici',
•          children:{
•          id:0001,
•          name:'jack',
•      }
•      }
•    }
•   //es5
•    console.log(person.id);
•    console.log(person.name);
•    console.log(person.children);
•    //es6
•    let {id,name,children}=person;
•    console.log(id,name,children);
•    //:取别名
•    let {id:pid,name:pname,children:{id,name}}=person;
•    console.log(id,name);
•    // 深层嵌套
•    let {id:pid,name:pname,children:{children:{id,name}}}=person;
•    console.log(id,name);
•    //与扩展运算符...结合应用 浅拷贝
•    let {...p}=person;
•    console.log(p);
•    //数组
•    //es5
•    let arr=[11,22,33,['java,css']];
•    let a=arr[0];
•    let b=arr[1];
•    let c=arr[2];
•    console.log(a,b,c);
•    let [a,b,c]=arr;
•    console.log(a,b,c);
•    let [,,c]=arr;
•    console.log(c);
•    let a,b,c;
•    [a,b,c]=arr;
•    console.log(a,b,c);
•    let [a,b,c,d=44,e]=arr;
•    console.log(a,b,c,d,e);
•    let [a,,,[j,c]]=arr;
•    console.log(a,j,c);
•    let [a,,,...j]=arr;
•    // console.log(a,j);
•    console.log(j[0]);//["java,css"]
•    console.log(j[0][0]);//java,css
•    let [a,,,[...j]]=arr;
•    console.log(j[0]);//java,css
•    let newArr=[...arr];
•    console.log(newArr);

9、 模块化

在ES6之前的javascript中是没有模块化概念的。如果要进行模块化操作，需要引入第三方的类库，如：requireJS与seaJS，requireJS是AMD规范，seaJS是CMD规范。

ES6现已支持模块化开发规范ES Module，让Javascript支持原生模块化开发。ES Module把一个文件当作一个模块，每个模块有自己的独立作用域，核心点就是模块的导入（import）与导出（export）。

10、箭头函数

箭头函数在VUE和React中使用的非常频繁，箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

11、promise

Promise就是一个对象，用来传递异步操作的消息。可以解决回调函数的嵌套问题，也就是所谓的“回调地狱”。

一个Promise有以下几种状态:

1、pending: 初始状态，既不是成功，也不是失败状态。

2、fulfilled: 意味着操作成功完成。

3、rejected: 意味着操作失败。

如果异步操作成功，resolve 方法将 Promise 的状态，从“未完成”变为“成功”（即从 pending 变为 fulfilled）。

如果异步操作失败，reject 方法将 Promise 对象的状态，从“未完成”变为“失败”（即从 pending 变为 rejected）。

如果执行resolve 方法，对应的会调用then方法，then方法传入一个函数作为参数，该函数的参数的值就是resolve 方法的实参。

如果执行reject方法，对应的会调用catch方法，catch方法传入一个函数作为参数，该函数的参数的值就是reject方法的实参。

代码：

let code=290;
    let p1=new Promise((resolve,reject)=>{
      setTimeout(() => {
        if(code==200){
          resolve('成功')
        }else{
         reject('失败')
       }
     }, 300);
   });
   p1.then((res)=>{
      console.log(res);
   }).catch((err)=>{
     console.log(err);
    })
    //promise封装ajax 重要！ 手写
    function request(method,url,data){
      let request=new XMLHttpRequest()//实例化ajax
      return new Promise((resolve,reject)=>{
      request.onreadystatechange=function(){//服务器建立连接
          if(request.status===200){//连接成功
           resolve(request.responseText)
          }else{
           reject(request.status)
         }
       }
       request.open(method,url);
        request.send(data)
   });
    }
    //调用
    request("get","url").then((res)=>{
     console.log(res);
    }).catch((err)=>{
      console.log(err);
    })

12、async和await

async/await/promise让异步变成“同步”

这时候ES7的async和awati出现了，async 表示异步，而 await表示等待。所以应该很好理解 async 用于声明一个是异步函数，而 await 用于等待一个异步方法执行完成。

代码：

 function getTime(){
      //返回promise
     return new Promise((resolve,reject)=>{
        setTimeout(() => {
          resolve(10)
        }, 30);
     })
    }
   //定义一个异步函数
   async function getAsync(){
     let num =await getTime()
     //写同步代码 例如表单各种信息
     console.log(num);
   }
  getAsync()

13、class类的使用

JavaScript语言的传统方法是通过构造函数，定义并生成新对象。function既是对象，对象既是function，没有class的概念。ES6提供了更接近传统语言的写法，比如：JAVA、PHP等后端语言，引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。可以实现：单例模式、访问

器属性、静态方法、extends继承