06.ECMAScript6.0新特性

1.ES6.0兼容性

IE10+、Chrome、FireFox、移动端、NodeJS
对于不支持ES6.0解决方案：在线转换，提前编译

2.ES6.0新特性

1）变量
2）函数
3）数组
4）字符串
5）面向对象
6）Promise
7）generator
8）模块化

3.变量

3.1 var问题

可以重复声明

//声明了两次a
var a=10;
var a=5;
alert(a);//5

无法限制修改
例如定义一个常量PI
没有块级作用域

3.2 let const

let 不能重复声明，变量-可以修改，块级作用域（块就是{ }之间）
const不能重复声明，常量-不能修改，块级作用域

块级作用域示例

使用var存在的问题：





菜鸟教程(runoob.com)

点击按钮1，2，3

之前的解决方法，保存外层函数的执行作用域，也就是用闭包来解决。





菜鸟教程(runoob.com)

使用let直接解决问题





菜鸟教程(runoob.com)

点击按钮1

点击按钮2

点击按钮3

4.函数

4.1 箭头函数

如果只有一个参数，()可以省
如果只有一个return语句，{}和return都可以省

function(){
}
()=>{
}

    /*
    window.onload=function(){
        alert('abc');
    }*/
    
    window.onload=()=>{
      alert('abc');
    }

箭头函数有几个使用注意点。
（1）函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。能够绑定函数定义时的作用域。（重要）
（2）不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误。
（3）不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
（4）没有super。
（5）不能改变this的指向。
（6）不可以使用yield命令，因此箭头函数不能用作 Generator 函数。

4.2 函数的参数

参数展开和扩展
1）收集参数

function show(a,b,...args){}

注意：Rest Parameter必须是最后一个,将其他参数放到args数组里。
2）展开数组
展开后的效果，等同于直接把数组内容拿出来。

let arr1=[1,2,3];
//show(1,2,3);
show(...arr1);
let arr2=[4,5,6];
let arr=[...arr1,arr2];

默认参数

function show(a,b=5,c=12){
console.log(a,b,c);
}
show(99,18) //99,18,12

5.解构赋值

左右两边结构必须一样
右边必须是个东西
声明和赋值不能分开

let [a,b,c]=[1,2,3];
console.log(a,b,c);//1,2,3
let {a,b,c}={a:12,b:5,c:8};
let [{a,b},[n1,n2,n3]],num,str] =[{a:12,b:5},[12,5,8],8,'cxzcv'];
//可以拆成任意粒度
let [json,arr,num,str]=[{a:12,b:5},[12,5,8],8,'cxzcv'];

6.数组

6.1 map 函数

6.2 reduce函数汇总一堆出来一个

例1：求和

求和

例2：求平均值

6.3 filter 过滤器

6.4 forEach 循环(迭代)

7.字符串

7.1多了两个新方法：startsWith、endsWith

7.2字符串模板

图片.png

8.面向对象

8.1ES6之前实现创建对象和继承

之前没有类的概念，利用构造函数和原型模式来创建对象。

通过原型链和调用构造函数来实现继承。

8.2 ES6有了class的概念，使用class创建类，使用extends实现继承

使用class创建类

使用extends实现继承

9.json(ES5中已经有了，这里回顾一下)

9.1JSON对象

json格式：只能用双引号，所有的名字都必须用引号包起来
JSON.stringify():将json转换成字符串
JSON.parse():将字符串转换成json

9.2 json的简写

名字和值（key和value一样），只写一个就行

方法：function一块删除

10.Promise（异步操作）

异步：操作之间没有关系，同时进行多个操作，操作之间不互相干扰。
同步：操作之间有关系，同时只能做一件事。

Promise封装原生的Ajax操作

function createPromise(url,method,data){
   method= method.toUpperCase();
   return new Promise((resolve,reject)=>{
      let xmlHttp=window.XMLHttpRequest?new XMLHttpRequest()：new ActiveXObject('Microsoft.XMLHTTP');
     xmlHttp.onreadystatechange=function(){
           //表示发送完成
          if(xmlHttp.readyState==4){
               //表示请求成功
              if(xmlHttp.status>=200&&xmlHttp.status<300||xmlHttp.status==304){
                  responseJson=JSON.parse(xmlHttp.responseText);
                  resolve(responseJson);
              }
              //请求失败
              else{
                  let error={code:xmlHttp.status,responce:xmlHttp.response};
                  reject(error);
              }
          }
    }

            if(method=='POST'){
                xmlHttp.open(url,method,true);
                xmlHttp.setRequestHeader('content-type','application/x-www-form-urlencoded');
                if(data!=null)
                   xmlHttp.send(JSON.stringnify(data));
                else
                   xmlHttp.send();
            }

              else{
                  if(params!=null)
                        url=url+'?'+‘data=’+JSON.stringnify(data);
                  xmlHttp.open(url,method,true);
                  xmlHttp.send();
             }
  });

}

createPromise(url,'GET',data).
then((responseJson)=>{console.log('成功了'+responseJson)},(error)=>{console.log('失败了'+error)}；

发起多个Ajax请求

// 获取产品数据
createPromise('products.json').then((products) => {
    console.log('Promises/products >>>', products);
    // 获取用户数据
    return  createPromise('users.json');
}).then((users) => {
    console.log('Promises/users >>>', users);
    // 获取评论数据
    return  createPromise('comments.json');
}).then((comments) => {
    console.log('Promises/comments >>>', comments);
});

jquery封装好的：

11.async await

不依赖于外部的runner
可以用箭头函数

 async function readData(){
    let data1=await $.ajax({url:'data/1.txt',dataType:'json'});
    let data2=await $.ajax({url:'data/2.txt',dataType:'json'}); 
    let data3=await $.ajax({url:'data/3.txt',dataType:'json'}); 
    console.log(data1,data2,data3)
 }
 readData();

使用async await实现多个Ajax请求
用同步的思想解决异步的问题

(async () => {
    // 获取产品数据
    let data = await  createPromise('products.json');

     // 获取用户数据
    let users = await  createPromise('users.json');

     // 获取评论数据
    let products = await  createPromise('comments.json');

    console.log('ES7 Async/products >>>', products);
    console.log('ES7 Async/users >>>', users);
    console.log('ES7 Async/comments >>>', comments);
}());

结合fetch使用

(async () => {
    let parallelDataFetch = await* [
        (await fetch('products.json')).json(),
        (await fetch('users.json')).json(),
        (await fetch('comments.json')).json()
    ];
    console.log('Async parallel+fetch >>>', parallelDataFetch);
}());

12.generator-生成器函数

普通函数:一路到底
generator:中间能停

function *show(){
  alert('a');
  yield;
  alert('b');
}
let genObj=show();
genObject.next();//a
genObject.next();//b

yield

yield传参

function *show(){
  alert('a');
  let a=yield;
  alert('b');
  alert(a);//5
}
let genObj=show();
genObject.next(12);//a 没法给yield传参
genObject.next(5);//b

yield返回

function *show(){
  alert('a');
  yield 12;//12表示中间返回值
  alert('b');
 
}
let genObj=show();
let a=genObject.next();//{value:12,done:false}
let b=genObject.next();//{value:undefined,done:true}

13.ES7&ES8预览

1）数组

includes()：数组是否包含某个东西。
keys()/values()/entries()

keys：所有的key
values:所有的values
entries：所有的key-value键值对

2)字符串

padStart()/padEnd()