16-es6中的四个新特性 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
所有浏览器都支持es5，但是不是所有浏览器都支持es6
-->
</body>
</html>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    /*
    1、ES6的变量声明：
        之前用var，但是存在作用范围混淆的问题

       ES6推荐使用let和const
        let用来声明局部变量  好处：作用范围严谨，从代码声明处开始，到代码块结束 【一般声明基本变量的时候使用let】
        const用来声明js中的常量  【一旦被赋值，不能被修改】  【声明js中对象、数组时使用const】
     */

    function test() {
        for (let i = 0; i < 10; i++) {
            console.log(i)
        }
    }

    //定义一个对象，const在定义对象时所指的是对象的地址不变，对象中的属性可以改变
    const student = {id:21, name:"xiaosan"};

    //定义一个数组 const定义数组时指指数组地址不改变，数组中元素可以改变
    const schools = ["北京", "天津"];


    /*
    2、箭头函数
        在使用匿名函数作为参数的时候 function(){}  推荐使用es6中的箭头函数  (参数,参数)=>(函数体)
     */
    // axios.get("url").then(function (res) {}).catch(function (err) {});
    axios.get("url").then((res)=>{

    }).catch((err)=>{

    })
    //注意：
        //1、当箭头函数没有参数或者参数大于一个的时候，必须加入()
        //2、当箭头函数只有一个参数时，（）可以省略
        //3、当函数体中只有一行代码时，函数体{}可以省略不写
        //4、箭头函数和匿名函数最大区别  箭头函数没有自己的this，匿名函数有自己的this


    /*
    3、模板字符串  使用语法：数字一左边的反单引号： ``
    拼接html字符串更加简单，并且有语法提示
     */
    let html = `<div>
                    <h1>我是小黑</h1>
                    <button onclick="test()"></button>
                </div>`;

    /*
    4、对象定义：便利：在定义对象时如果对象属性名或者变量名一致，写一个即可
     */
    let id = 21;
    let name = "小三";
    let age = 23;

    //es5
    const emp = {id:id, name:name, age:age};

    //es6
    const emp1 = {id,name,age};
</script>
posted @ 2021-09-26 10:29  不是孩子了  阅读(42)  评论(0)    收藏  举报