ES6經常使用的新特性

時間 2019-11-14

原文原文鏈接

一、Let&constjavascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>es-let&const</title>
</head>
<body>
<script type="text/javascript">
    /* var定義的變量在代碼塊外面還能夠使用 */
    for(var i=0;i<10;i++){
        console.debug(i);

    }
    console.debug("塊外i:"+i);
    /* let定義的變量做用域爲代碼塊以內 */
    for(let j=0;j<10;j++){
        console.debug(j);
    }
    //console.debug("塊外j:"+j);
    /* const定義的是常量，不能被改變且做用域爲代碼塊以內 */
    {
        const k=23;
        //k=34;
        console.debug(k);
    }
    //console.debug("塊外j:"+k);
</script>

</body>
</html>

二、解構表達式html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解構表達式</title>
</head>
<body>

    <script type="text/javascript">
        /* 數組的解構：位置要對應 */
        const arr=["我",4,"不吹牛的",true];
        const [a,b,c,d]=arr;
        console.debug("a：",a);
        console.debug("b：",b);
        console.debug("c：",c);
        console.debug("d：",d);

        /* 對象的解構：屬性名必須對應 */
        let user={
            name:"小明",
            age:10,
            hobby:"吃糖"

        }
        const {name,hobby}=user;
        const {sex}=user;
        console.debug(name+hobby);
        console.debug("sex:"+sex);
    </script>
</body>
</html>

三、箭頭函數java

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭頭函數</title>
</head>
<body>
    <script type="text/javascript">
        /* 傳統寫法*/
        let le=function (food) {
            console.debug("不能浪費"+food);
        }
        le("食物")
        /* 箭頭函數：只有一個參數能夠不寫括號*/
        let me= food =>{
            console.debug("浪跡在"+food);
        }
        me("天上")

        setInterval(()=>{
            console.debug("流浪");
        },1000)
    </script>

</body>
</html>

四、解構表達式+箭頭函數數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解構+箭頭函數</title>
</head>
<body>
    <script type="text/javascript">
        let haha=({name,sex})=>{
            console.debug(name+"是"+sex+"人");
        }
        let user={
            name:"小明",
            sex:"男"
        }
        haha(user)
    </script>

</body>
</html>

五、Promise對象promise

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise對象</title>
</head>
<body>
    <script type="text/javascript">
        /*隨機一個數，若是這個數大於0.5就爲真，小於等於就爲假*/
        const promise=new Promise((resolve ,reject)=>{
            setTimeout(()=>{
                let value= Math.random();
                if(value>0.5){
                    resolve(value);
                }else {
                    reject(value);
                }
            },1000)
        })

        promise.then(res=>{
            console.debug(res+"，真")
        }).catch(res=>{
            console.debug(res+"，假")
        })

    </script>

</body>
</html>

六、模塊化dom

　　html文件(module.html)：模塊化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模塊化</title>
    <!-- bundle.js文件是將模塊module1.js打包獲得的 -->
    <script type="text/javascript" src="dist/bundle.js"></script>
</head>
<body>

</body>
</html>

　　模塊1（module1.js）：函數

import {name,study} from "./module2"
study();
document.write(name)

　　模塊2（module2.js）：spa

export var name="小明";
export var study=function () {
    console.debug("出去玩啦")
}

　　最後將模塊1打包成bundle.js文件便可運行html文件。debug

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。