ES6最簡單易懂教程-小白必看

ES6是什么

  • ECMAScript6簡稱ES6,是JavaScript語言的下一帶標(biāo)準(zhǔn),在2015年6月進(jìn)行發(fā)布,也可以稱為ES2015。ES6簡化了JavaScript的開發(fā),隨后的每一年都會更新一版。
  • ES2016-ES7
  • ES2017-ES8
  • ES2018-ES9
  • ES2019-ES10
  • 2020年已經(jīng)發(fā)布ES11 詳情請見("http://www.itdecent.cn/p/02d377ce2078")前端大牛公羊無衣的技術(shù)文章

ES6更新了什么

變量以及常量的聲明

  • 在ES6以前,聲明變量的方法都是使用var,ES6更新了let和const。let是聲明變量的方法,const是聲明常亮的方法。
  • let的特性
    1、作用域:塊級作用域
    在括號內(nèi)用let聲明的變量只能在括號內(nèi)使用
    if(true){  
        let a = 10;
    }
    console.log(a);//報錯a is not defined
    
    2、變量在聲明之前無法使用
    console.log(a);//報錯Cannot access 'a' before initialization
    let a = 10;
    
    3、在for循環(huán)中用let定義自動形成閉包
  • const的特性
    1、書寫方式:聲明的常量要全部大寫
    2、必須要在聲明的時候賦值
    const LIST//報錯Missing initializer in const
    
    3、聲明之后不允許被再次賦值
    const LISt = 20;
    LISt = 10;//報錯Assignment to constant variable
    
    4、常量一般用來存儲 對象的地址,字符串表達(dá)的地址,根據(jù)需求定義的常量

箭頭函數(shù)

  • 箭頭函數(shù)簡寫了function函數(shù)
    ES5的函數(shù)寫法
    function sum(a,b){
        console.log(a+b)
    }
    sum(10,20)//結(jié)果 30
    
    ES6箭頭函數(shù)寫法
    let sum = (a,b)=>{
        console.l0g(a+b)
    }
    sum(10,20)//結(jié)果30
    
  • 參數(shù)容器和代碼容器之間用=>連接
  • 參數(shù)只有一個的話可以省略小括號,代碼只有一行可以省略大括號和return,自動返回。
    let foo = a => a * 10;
    console.log(foo(2));//結(jié)果 20
    
  • 與數(shù)組的API配合使用
    let  arr = [1,2,3,3,4,5,5,5,66,5,3,3,2,2,2];
    arr = arr.filter( item => item % 2 === 0 )//將數(shù)組中的偶數(shù)返回
    console.log(arr);//結(jié)果[2,4,66,2,2,2]
    

解構(gòu)賦值

  • 解構(gòu)賦值適用于數(shù)組的值,對象的屬性值,對象方法和類的靜態(tài)方法
    1、數(shù)組的解構(gòu)賦值
    let [a,b,c] = [1,2,3]
    console.log(a,b,c);//結(jié)果 1 2 3
    
    
    //可以隨意嵌套
    let [[a,b],c,d] = [ [ 1 , 2 ] , [3,33,333] , 4]
    console.log(a,b,c,d);//結(jié)果 1 2 [3,33,333] 4
    
    //交換
    let a = 10;
    let b = 20;
    [a,b] = [b,a];
    console.log(a,b) //結(jié)果  20 10
    
    2、對象的解構(gòu)賦值 是按照屬性名的
    let obj = {
                  a : 20 ,
                  b : 30,
                  d : {
                        c : 50
                  }
            }
    let { a : aaaa } = obj;
    console.log(aaaa);//結(jié)果 20
    

Set和Map

  • Set的方法和特性
    1、Set是一個不重復(fù)的列表。
    2、所有的數(shù)據(jù)都不是按照索引排列的,沒有索引。不能使用for和for in遍v歷,可以使用for of。
    let set = new Set([1,2,3,4,5,1,2,3,4,5]);
    console.log(set.has(5));//查看是否含有5結(jié)果為true
    for(let value of set){
        console.log(value);// 1 2 3 4 5
    }
    set.add(10);//添加元素
    set.delete(5);//刪除元素
    set.clear();//清除所有元素
    
  • Map的方法和特性
    1、Map是鍵值對存儲數(shù)據(jù)
    2、Map有長度,map中key可以任何類型,包括索引類型,value也可以任何類型
    var map=new Map();
    map.set("name","xietian");//set 是設(shè)置屬性
    map.set(3,10);
    map.set(true,false);
    var arr=[1,2,3]
    map.set(arr,[1,2,3]);
    var o={a:1};
    map.set(o,{a:2});
    console.log(map.get(true));//get 是獲取屬性
    console.log(map.get(arr));
    console.log(map.get(o));
    map.delete(3);//key按照key來刪除
    console.log(map.has("name"));//判斷有沒有這個屬性
    console.log(map.size) //長度,有多少個數(shù)據(jù)
    map.clear();//清楚所有
    

還有生成器函數(shù)、Promise沒有寫。預(yù)知后事如何請看下回分解

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

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