es6的新特性

最新推荐文章于 2024-07-06 00:11:00 发布

weixin_45443249

最新推荐文章于 2024-07-06 00:11:00 发布

阅读量69

点赞数

分类专栏：练习

本文链接：https://blog.csdn.net/weixin_45443249/article/details/102929526

版权

练习专栏收录该内容

3 篇文章 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:"terry",
            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:"terry",
            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、模块化

<!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="terry";
export var study=function () {
    console.debug("回家了")
}

weixin_45443249

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
es6的新特性

1、Let&const<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>es-let&const</title></head><body><script type="t...
复制链接

扫一扫