ES6常用的新特性

2019-08-26 05:43:52来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

ES6常用的新特性

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

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

  

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

 


原文链接:https://www.cnblogs.com/wanghj-15/p/11371031.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:前端开发HTML&amp;css入门——CSS&amp;选择器练习(待补)

下一篇:vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度