ECMAScript 6的一些新特性

ES6非常好用，但是不兼容edge以下的浏览器

先看下let声明变量的特点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

        /*

        1 必须在严格模式下执行
        2 let不能重复声明同一个变量
        3 let没有预解析 不能在赋值前console出来

        */

        'use strict';    // 如果不加会报错


        // console.log( b ); let不会预解析 会报错
        // let b = 2;  重复声明 会报错

        let b = 1;

        console.log(b);

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

再看下let在实际应用中的好处，比如在定时器中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

        'use strict';

        for (var i = 0; i < 10; i++) {

            setTimeout(function(){

                console.log( i );    // 每次都是10

            });
        };


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

原因就不说了，很基础的东西，如果我想显示0-9 ，只要把var换成let即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

        'use strict';

        for (let i = 0; i < 10; i++) {

            setTimeout(function(){

                console.log( i );    // 0 - 9

            });
        };


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

跟变量对应的还有常量，在ES6中定义常量用const ，常量无法更改，但是如果常量的值是对象，对象的值是可以更改的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

        'use strict';

        const a = 1;

        const b = {
            a : 2,
            b : 3
        };


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

解构赋值，说人话就是拿变量中转一下，然后把变量赋给一个值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

        'use strict';

        var arr = [1, 2, 3];

        var [a, b, c] = arr;

        console.log( [a, b, c] );

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

不过解构赋值并不是按顺序赋值的，而是按名称赋值的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

        'use strict';

        var obj = {
            foo : function () {
                
            },
            num : 12,
            arr : [],
            str : 'abc'
        };

        var {foo, arr, str, o } = obj;

        console.log( foo, arr, str, o );

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

关于字符串的一些小方法，更多方法请自行百度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>
　　'use strict';

    var s = '你好';

    console.log(s.repeat(3));

    console.log( `我想说 ${s}` );    // 注意这里不是单引号， 是反引号
    </script>
</body>
</html>

看一些ES6里一些数字的扩展，更多方法请自行百度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    

    <script>

    'use strict';

    var num = '1.234';

    console.log( Math.trunc(num) ); // 干掉小数点和小数点后的数 有点类似parseInt() -> 1

    console.log( Math.sign(10) );    // 判断正负数 1

    console.log( Math.hypot(3, 4) );    // 勾股定理 -> 5
    </script>
</body>
</html>

ECMAScript 6的一些新特性

推荐阅读