vue简单学习-es6规范

最新推荐文章于 2022-05-25 17:14:16 发布

vi-vi-

最新推荐文章于 2022-05-25 17:14:16 发布

阅读量138

点赞数

分类专栏： Java 文章标签： vue

本文链接：https://blog.csdn.net/vivid9527/article/details/103772774

版权

Java 专栏收录该内容

42 篇文章 2 订阅

订阅专栏

1、var/let/const的区别

相同点

三个都是用来声明变量的。

不同点

var声明的变量是全局的。
let声明的变量是块级的，想当于java中的局部变量。
const声明的变量为常量，不能改变。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    var a = 1;
    let b = 3;
    console.debug(a + "----" + b);
    for (var i = 1; i < 10; i++) {
    }
    //使用var声明i，在for循环的外面，依然可以取到i。
    console.debug(i);
    for (let j = 1;  j< 10; j++) {
    }
    //使用let声明j，在for循环外面，j是“j is not defined”
    //console.debug(j);

    const c = 111;
    console.debug(c);
    //c=11222;改变直接报错
</script>
<body>

</body>
</html>

2、解构表达式

解构数组:使用[]
解构对象:使用{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    //结构数组
    var arr = ["a", "c", "d", "e"];
    //在es5中，取值如下
    console.debug(arr[0] + "--" + arr[1]);
    //在es6中，使用解构表达式
    var [one, two, three] = arr;
    console.debug(one, two, three);

    //解构对象
    var person ={
        name:"hjuaa",
        age:222
    }
    var{name,age} = person;
    console.debug(name+"======"+age);

</script>
<body>

</body>
</html>

3、声明函数

定义函数有三种写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    /*
    * 定义函数有三种写法
    * */
    var person = {
        name:"ergou",
        age:18,
        //方法1：最开始的写法
        show1:function (msg) {
            console.debug(this.name+msg+this.age);
        },
        //方式2
        show2(msg){
            console.debug(msg+this.name);
        },
        //方式3：需要注意：this是和外层函数this一致，如果外层没有函数，该this就是window
        show3:(msg)=>{
            console.debug(this);
            console.debug(msg);
        }
    }
    person.show1("方式1");
    person.show2("方式2");
    person.show3("方式3");
</script>
<body>

</body>
</html>

4、promise使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    const p = new Promise((resolve, reject) =>{
        const num = Math.random();
        // 随机返回成功或失败
        if (num < 0.5) {
            resolve("成功AAA！num:" + num)
        } else {
            reject("出错了BBB！num:" + num)
        }
    })//以后上面这坨代码我们都看不到的


    //以后我们的请求，有点类似于下面这种结构
    // 调用promise
    p.then(function (msg) {//如果调用成功执行该function函数中的内容
        console.log(msg);
    }).catch(function (msg) {//如果调用失败执行cat代码块中的内容提供
        console.log(msg);
    })

    /**
     * 伪代码以后发送ajax的写法：
     * this.axios.get(url,param).then(res=>{//成功了
         *
         * }).catch(res=>{//失败了
         *
         * })
     */
</script>
<body>

</body>
</html>

5、模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        模块化：
            如下面引入js库所示，只引入了a库
            但是，在a.js中已经导入impoort了b.js库。
        在a.js和b.js中有导入和导出的方式
    -->

    <script type="text/javascript" src="js/a.js"></script>


</head>
<body>

</body>
</html>

a.js 导入

//导入

/*import util from "b";*/
//一次导入多个
/*import {name,age,person} from "./b";*/
//导入默认的，名字可以随意取
import  xxx from "b";

b.js导出

//导出方案1
/*
export const util ={
    show1(){

    },
    show2(){

    }
}*/
//导出方案2
/*
const util = {
    show1(){},
    show2(){}
}
export util;*/
//一次导出多个
/*
let name = "ergou";
let age = 22;
const person={
    show(){}
};
export {name,age,person};*/
//导出默认的名字
export default {
    show1(){

    }
}

export default{
    show2(){

    }
}