es6 基本语法

作者: ropon 分类: Vue 发布时间: 2018-12-30 21:26
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="testid">
    测试div
</div>
<script src="http://blog.ropon.top/js/jquery.min.js"></script>
<script>
    //1 let命令声明变量,但所声明变量只在let命令所在代码块内有效

    var a = [];
    for (let i = 0; i < 10; i++) {
        a[i] = function () {
            console.log(i);
        };
    }
    //a[6]();

    //var存在变量提升现象,即变量可以在声明之前使用值为undefined
    //console.log(aa);
    var aa = 33;

    //console.log(bb); //报错
    let bb = 44;

    let cc = 55;
    //let cc = 66; //报错不允许重复声明

    //块级作用域
    var tmp = new Date();

    function f() {
        console.log(tmp);
        if (false) {
            var tmp = "test";
        }
    }

    //f();

    var s = "hello";
    for (let i = 0; i < s.length; i++) {
        console.log(s[i]);
    }
    //console.log(i);

    //总结:let命令 不存在变量提升 不允许重复声明

    //const命令声明变量不得改变值,也就是const一旦声明变量就必须立即初始化
    //const dd; //报错
    const ee = 66;

    if (true) {
        const ff = 5;
    }
    //console.log(ff);//报错
    //与let命令一样,只在声明所在块级作用域内有效

    //2 模板字符串 在反引号` `之间的字符串 若要在模板字符串中使用反引号,需要在前面加反斜线\转义
    //如果使用模板字符串表示多行字符串,所有空格和缩进都会保留在输出之中
    let gg = "test变量"
    $("#testid").append(
        `<p>模板字符串实例</p>${gg}
        <p>\`Check Now\`</p>
        <ul>
            <li>111</li>
            <li>222</li>
        </ul>`
    );

    //3 箭头函数 基本语法 (=>) 定义函数
    var func = a => a;
    //等同于
    var func = function (a) {
        return a;
    };

    //使用一个圆括号()代表参数部分
    var func = () => 5;
    //等同于
    var func = function () {
        return 5
    };

    //多个形参
    var sum = (num1, num2) => num1 + num2;
    //等同于
    var sum = function (num1, num2) {
        return num1 + num2;
    };

    //注意 函数体内的this对象 是定义时所在的对象 而不是使用时所在的对象
    var name = "ropon";
    var person = {
        name: "pengge",
        age: 18,
        //fav: function () {
        //fav: () => {
        fav() { //对象单体模式
            console.log(this);
            console.log(this.name);
        }
    };
    person.fav();


    function f1() {
        setTimeout(() => {
            console.log("id", this.id);
        }, 1000);
    }

    var id = 22;
    f1.call({id: 24});

    //不能使用arguments对象 该对象在函数体内不存在
    var person2 = {
        name: "pengge",
        age: 18,
        fav: () => {
            //console.log(arguments);//报错
        }
    };
    person2.fav("test1", "test2");

    class Person {
        constructor(name="ropon12", age=18) {
            this.name = name;
            this.age = age;
        }
        showname() {
            console.log(this.name);
        }
        showage() {
            console.log(this.age);
        }
    }

    let P = new Person();
    P.showname();

</script>
</body>
</html>

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!