ES6常用的新特性

小咪咪 2023-08-17 17:48 113阅读 0赞

**1、Let&const**

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

**2、解构表达式**

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

**3、箭头函数**

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

**4、解构表达式+箭头函数**

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

**5、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>

**6、模块化**

**　　**html文件(**module.html**)：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模块化</title>
        
        <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**）：

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

最后将模块1打包成bundle.js文件即可运行html文件。

**![1697796-20190817235955342-1407301046.bmp][]**

转载于:https://www.cnblogs.com/wanghj-15/p/11371031.html

[1697796-20190817235955342-1407301046.bmp]: /images/20230808/4a6d77075471482ab8572183822b2929.png