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存在的问题：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
    window.onload=function(){
        var btns=document.getElementsByTagName('button');
        //click方法必须要点击的时候才能会调用，但是for循环已经执行完毕，i等于最后一个值，
        //所以当点击的时候总是最后一个值3
        for(var i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                alert(i);
            }
        }
    }

</script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

点击按钮1，2，3

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
    window.onload=function(){
        var btns=document.getElementsByTagName('button');
        for(var i=0;i<btns.length;i++){
            (function(i){
                 btns[i].onclick=function(){
                 alert(i);
              };
            })(i);
        }
    }

</script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

使用let直接解决问题

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
    window.onload=function(){
        var btns=document.getElementsByTagName('button');
        for(let i=0;i<btns.length;i++){
            btns[i].onclick=function(){
                alert(i);
            }
        }
    }

</script>
</head>
<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
</body>
</html>

点击按钮1

点击按钮2

点击按钮3

4.函数

4.1 箭头函数

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

function(){
}
()=>{
}

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

<script>
    /*
    let show=function(a,b){
        alert(a+b);
    }*/
    
    let show=(a,b)=>{
      alert(a+b);
    }
    show(3,5);

</script>

<script>
    let arr=[12,5,8,99,33,14,26];
    /*
    arr.sort(function(n1,n2){
     return n1-n2;
    })*/
    arr.sort((n1,n2)=>{
      return n1-n2;
    })
    alert(arr);
</script>

箭头函数有几个使用注意点。
（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 函数

<script>
    let arr=[12,5,8];
    let result=arr.map(function(item){
      return item*2;
    });
    alert(result);
    let score=[19,85,99,25,90];
    //一个参数省略(),一个return语句省略{}
    let sc=score.map(item=>item>=60?'及格':'不及格');
    alert(sc);
</script>

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

例1：求和

<script>
    let arr=[12,69,180,8763];
    //tmp中间结果，item就是实际的数，index索引从1开始
    //一开始tmp=12
    
    let result=arr.reduce(function(tmp,item,index){
        return tmp+item;
    });
    alert(result);
</script>

求和

例2：求平均值

<script>
    let arr=[12,69,180,8763];
    //tmp中间结果，item就是实际的数，index索引从1开始
    //一开始tmp=12
    
    let result=arr.reduce(function(tmp,item,index){
        //不是最后一次
        if(index!=arr.length-1){
           return tmp+item;}
        else{
           return (tmp+item)/arr.length;}
    });
    alert(result);
</script>

6.3 filter 过滤器

<script>
    let arr=[7,11,12,69,180,8763];
    //能被3整除的留下
    let result=arr.filter(item=>item%3==0);
    alert(result);
</script>

6.4 forEach 循环(迭代)

<script>
    let arr=[7,11,12,69,180,8763];
    /*arr.forEach(function(item){
      alert(item);
    })*/
    //箭头函数，一个参数（）可以省略
    arr.forEach((item,index)=>{
      alert(index+':'+item);
    })
</script>

7.字符串

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

<script>
    let str='http://it.lalalla.com';
    if(str.startsWith('http://')){
        alert('普通网址');
    }else{
       alert('其他');
    }
    
</script>

7.2字符串模板

<script>
    let a=12;
    //将变量直接放入字符串中去
    let str=`a${a}bc`;
    alert(str);
</script>

图片.png

8.面向对象

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

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

<script>
    function User(name,pass){
        this.name=name;
        this.pass=pass;
    }
    User.prototype.showName=function(){
        alert(this.name);
    }
    User.prototype.showPass=function(){
        alert(this.pass);
    }
    
    let user=new User('blue',123);
    user.showName();
    user.showPass();
    
</script>

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

<script>
    function User(name,pass){
        this.name=name;
        this.pass=pass;
    }
    User.prototype.showName=function(){
        alert(this.name);
    }
    User.prototype.showPass=function(){
        alert(this.pass);
    }
    
    let user=new User('blue',123);
    user.showName();
    user.showPass();
    
    function VipUser(name,pass,level){
       User.call(this,name,pass);
       this.level=level;
    }
    VipUser.prototype=new User();
    VipUser.prototype.showLevel=function(){
        alert(this.level);
    }
    let vip=new VipUser('blue',123,3);
    vip.showName();
    vip.showPass();
    vip.showLevel();
</script>

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

使用class创建类

<script>
    class User{
        constructor(name,pass){
            this.name=name;
            this.pass=pass;
        }
        showName(){
            alert(this.name);
        }
        showPass(){
            alert(this.pass);
        }
    }

    let user=new User('blue',123);
    user.showName();
    user.showPass();
</script>

使用extends实现继承

<script>
class VipUser extends User{
        constructor(name,pass,level){
         super(name,pass);
         this.level=level;
        }
        showLevel(){
            alert(this.level);
        }
        
    }
    
    let vip=new VipUser('blue',123,3);
    vip.showName();
    vip.showPass();
    vip.showLevel();
</script>

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

9.1JSON对象

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

<script>
    let json={"a":12,"b":14,"c":3};
    alert(JSON.stringify(json));
    
    let str='{"a":12,"b":14,"c":3}';
    json=JSON.parse(str);
    alert(json);
    
</script>

9.2 json的简写

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

<script>
    let a=12,b=13;
    let json={a,b,c:15};
    console.log(json);
</script>

方法：function一块删除

<script>
 let json={
  a:15,
  /*show:function(){
    alert(this.a);
  }*/
     
  show(){
   alert(this.a);
  }
 }
 json.show();
</script>

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封装好的：

<script>
Promise.all([
//把要发的所有请求放到这
$.ajax({url:'data/json.txt',dataType:'json'}),
$.ajax({url:'data/arr.txt',dataType:'json'}),
]).then(
    //所有请求都成功后的函数
    function(result){
        //result是所有结果的数组
        //利用解构赋值
        let [json,arr]=result;
        console.log(json,arr);
    },
    //至少有一个没成功
    function(err){
        alert("失败了");
    }
) 
</script>

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键值对

<script>
  let arr=[1,233,34,5];
  alert(arr.includes(1));
  for(let key of arr.keys()){
    alert(key);
  }
  for(let value of arr.values()){
    alert(value);
  }
  
  for(let [key,value] of arr.entries()){
    alert(`${key},${value}`);
  }

</script>

2)字符串

padStart()/padEnd()

<script>
 alert('('+'abc'.padStart(5)+')');
 alert('('+'abc'.padEnd(5)+')');    
 alert('('+'abc'.padStart(10,'0')+')');
 alert('('+'abc'.padEnd(10,'0')+')');
</script>

最后编辑于：2018.04.16 20:02:42

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,992评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,212评论 3赞 388
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,535评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,197评论 1赞 287
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,310评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,383评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,409评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,191评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,621评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,910评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,084评论 1赞 342
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,763评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,403评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,083评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,318评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,946评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,967评论 2赞 351