06.ECMAScript6.0新特性

1.ES6.0兼容性

IE10+、Chrome、FireFox、移動端、NodeJS
對于不支持ES6.0解決方案：在線轉(zhuǎn)換，提前編譯

2.ES6.0新特性

1）變量
2）函數(shù)
3）數(shù)組
4）字符串
5）面向?qū)ο?br> 6）Promise
7）generator
8）模塊化

3.變量

3.1 var問題

  • 可以重復(fù)聲明
//聲明了兩次a
var a=10;
var a=5;
alert(a);//5
  • 無法限制修改
    例如定義一個(gè)常量PI
  • 沒有塊級作用域

3.2 let const

let 不能重復(fù)聲明，變量-可以修改，塊級作用域（塊就是{ }之間）
const不能重復(fù)聲明， 常量-不能修改，塊級作用域

塊級作用域示例
  • 使用var存在的問題：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
    window.onload=function(){
        var btns=document.getElementsByTagName('button');
        //click方法必須要點(diǎn)擊的時(shí)候才能會調(diào)用，但是for循環(huán)已經(jīng)執(zhí)行完畢，i等于最后一個(gè)值，
        //所以當(dāng)點(diǎn)擊的時(shí)候總是最后一個(gè)值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>
點(diǎn)擊按鈕1，2，3
  • 之前的解決方法，保存外層函數(shù)的執(zhí)行作用域，也就是用閉包來解決。
<!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>
點(diǎn)擊按鈕1

點(diǎn)擊按鈕2

點(diǎn)擊按鈕3

4.函數(shù)

4.1 箭頭函數(shù)

  • 如果只有一個(gè)參數(shù)，()可以省
  • 如果只有一個(gè)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>
  • 箭頭函數(shù)有幾個(gè)使用注意點(diǎn)。
    （1）函數(shù)體內(nèi)的this對象，就是定義時(shí)所在的對象，而不是使用時(shí)所在的對象。能夠綁定函數(shù)定義時(shí)的作用域。 （重要）
    （2）不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會拋出一個(gè)錯(cuò)誤。
    （3）不可以使用arguments對象，該對象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替。
    （4）沒有super。
    （5）不能改變this的指向。
    （6）不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)。

4.2 函數(shù)的參數(shù)

  • 參數(shù)展開和擴(kuò)展
    1）收集參數(shù)
function show(a,b,...args){}

注意：Rest Parameter必須是最后一個(gè),將其他參數(shù)放到args數(shù)組里。
2）展開數(shù)組
展開后的效果，等同于直接把數(shù)組內(nèi)容拿出來。

let arr1=[1,2,3];
//show(1,2,3);
show(...arr1);
let arr2=[4,5,6];
let arr=[...arr1,arr2];
  • 默認(rèn)參數(shù)
function show(a,b=5,c=12){
console.log(a,b,c);
}
show(99,18) //99,18,12

5.解構(gòu)賦值

  • 左右兩邊結(jié)構(gòu)必須一樣
  • 右邊必須是個(gè)東西
  • 聲明和賦值不能分開
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.數(shù)組

6.1 map 函數(shù)

<script>
    let arr=[12,5,8];
    let result=arr.map(function(item){
      return item*2;
    });
    alert(result);
    let score=[19,85,99,25,90];
    //一個(gè)參數(shù)省略(),一個(gè)return語句省略{}
    let sc=score.map(item=>item>=60?'及格':'不及格');
    alert(sc);
</script>

6.2 reduce函數(shù) 匯總 一堆出來一個(gè)


例1：求和

<script>
    let arr=[12,69,180,8763];
    //tmp中間結(jié)果，item就是實(shí)際的數(shù)，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中間結(jié)果，item就是實(shí)際的數(shù)，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 循環(huán)(迭代)

<script>
    let arr=[7,11,12,69,180,8763];
    /*arr.forEach(function(item){
      alert(item);
    })*/
    //箭頭函數(shù)，一個(gè)參數(shù)（）可以省略
    arr.forEach((item,index)=>{
      alert(index+':'+item);
    })
</script>

7.字符串

7.1多了兩個(gè)新方法：startsWith、endsWith
<script>
    let str='http://it.lalalla.com';
    if(str.startsWith('http://')){
        alert('普通網(wǎng)址');
    }else{
       alert('其他');
    }
    
</script>
7.2字符串模板
<script>
    let a=12;
    //將變量直接放入字符串中去
    let str=`a${a}bc`;
    alert(str);
</script>
圖片.png

8.面向?qū)ο?/h2>

8.1ES6之前實(shí)現(xiàn)創(chuàng)建對象和繼承

之前沒有類的概念，利用構(gòu)造函數(shù)和原型模式來創(chuàng)建對象。

<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>

通過原型鏈和調(diào)用構(gòu)造函數(shù)來實(shí)現(xiàn)繼承。

<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創(chuàng)建類，使用extends實(shí)現(xiàn)繼承

使用class創(chuàng)建類

<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實(shí)現(xiàn)繼承

<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中已經(jīng)有了，這里回顧一下)

9.1JSON對象

json格式：只能用雙引號，所有的名字都必須用引號包起來
JSON.stringify():將json轉(zhuǎn)換成字符串
JSON.parse():將字符串轉(zhuǎn)換成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一樣），只寫一個(gè)就行

<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（異步操作）

異步：操作之間沒有關(guān)系，同時(shí)進(jìn)行多個(gè)操作，操作之間不互相干擾。
同步：操作之間有關(guān)系，同時(shí)只能做一件事。

  • 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(){
           //表示發(fā)送完成
          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)}；
  • 發(fā)起多個(gè)Ajax請求
// 獲取產(chǎn)品數(shù)據(jù)
createPromise('products.json').then((products) => {
    console.log('Promises/products >>>', products);
    // 獲取用戶數(shù)據(jù)
    return  createPromise('users.json');
}).then((users) => {
    console.log('Promises/users >>>', users);
    // 獲取評論數(shù)據(jù)
    return  createPromise('comments.json');
}).then((comments) => {
    console.log('Promises/comments >>>', comments);
});

jquery封裝好的：

<script>
Promise.all([
//把要發(fā)的所有請求放到這
$.ajax({url:'data/json.txt',dataType:'json'}),
$.ajax({url:'data/arr.txt',dataType:'json'}),
]).then(
    //所有請求都成功后的函數(shù)
    function(result){
        //result是所有結(jié)果的數(shù)組
        //利用解構(gòu)賦值
        let [json,arr]=result;
        console.log(json,arr);
    },
    //至少有一個(gè)沒成功
    function(err){
        alert("失敗了");
    }
) 
</script>

11.async await

不依賴于外部的runner
可以用箭頭函數(shù)

 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實(shí)現(xiàn)多個(gè)Ajax請求
用同步的思想解決異步的問題

(async () => {
    // 獲取產(chǎn)品數(shù)據(jù)
    let data = await  createPromise('products.json');

     // 獲取用戶數(shù)據(jù)
    let users = await  createPromise('users.json');

     // 獲取評論數(shù)據(jù)
    let products = await  createPromise('comments.json');

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

結(jié)合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-生成器函數(shù)

普通函數(shù):一路到底
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預(yù)覽

1）數(shù)組
  • includes()：數(shù)組是否包含某個(gè)東西。

  • 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>
1

2

3

4
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容