ES6-个人学习笔记一--let和const

时间：2022-08-21 19:18:25

es6已经推出一段时间了，虽然在兼容和应用上还有不少的难题，但是其提供的未来前端代码编程的发展趋势和一些好用的功能还是很吸引人的，因此个人买了‘阮一峰’先生的es6入门，希望对其有一个了解和学习，本系列博客文中为个人对书中例题的重现和理解，仅供学习交流之用，请勿转载，文中个人理解可能有误，请大家支持作者和正版阅读原版，在此感谢作者，书名为‘ES6标准入门’

首先由于阅览器的兼容问题，大家的es6代码如果需要实际运行必须经过解析为es5代码后插入网页才行，下面的方法直接使用了Google公司的Traceur转码器，比较方便，除此之外还可在安装完node.js环境后通过npm来下载对应的不同版本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div ></div>

</body>

<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>

<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>

<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>

<script>

    //无法对traceur进行设置，编译时可能有错误

    console.log(traceur);

    // Create the System object

    window.System = new traceur.runtime.browserTraceurLoader();

    // Set some experimental options

    var metadata = {

    traceurOptions: {

        experimental: true,

                properTailCalls: true,

                symbols: true,

                arrayComprehension: true,

                asyncFunctions: true,

                asyncGenerators: exponentiation,

                forOn: true,

                generatorComprehension: true

    }

    };

    // Load your module

    System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {

    console.error('Import failed', ex.stack || ex);

    });

</script>

<script type="module">

    //这里是正文，上面是使用es6的必要引入，traceur可以将es6代码翻译为阅览器识别的es5代码

    console.log([1,2,3].map(x=>x*x));//测试结果是否为【1,4,9】

    //首先是两种新增的声明方式，let和const，当然还有import和class,这两种高级用法以后介绍

    //let声明的使用

    {

        let a =10 ;

        var b = 1;

    }

    console.log(b);

//    console.log(a);//let命令，只在let所在的代码块内有效，因此a无法找到

    //例1：

    // 循环中的变量i用var来声明，最后的输出结果为10，i是累加的

    var a=[];

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

        a[i]=function(){

            console.log(i)

        }

    }

    a[6]();

    //如果换成let来声明，则每一个j实际上都是新的变量，因此其中保存的j为当前数值

    var b=[];

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

        b[j]=function(){

            console.log(j)

        }

    }

    b[6]();

    //注意点：

    //1.let不会发生声明提升，因此先使用后声明的情况不会发生，需要注意（特殊：如有全局变量a，在代码块中如果使用了let a 那么在声明前也不能使用a变量，即使a在全局中已经声明过，这称为暂时性死区）

    //2.同一块级区域内let不允许重复声明同一变量

    //3.let和const声明的变量不是全局对象（window）的属性，而var和function声明的则是。

</script>

</html>
 //const用于声明常量，声明时必须马上赋值并且不可改变

    const f=123;

    //注意，当const声明对象时，只是冻结了指向的地址，即地址不会被改变但是数据可以改变

    const foo={};

    foo.add=123;

    //foo={}//报错,当需要冻结对象数据时可以使用Object.freeze()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ></div>
</body>
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script>
//无法对traceur进行设置，编译时可能有错误
console.log(traceur);
// Create the System object
window.System = new traceur.runtime.browserTraceurLoader();
// Set some experimental options
var metadata = {
    traceurOptions: {
        experimental: true,
properTailCalls: true,
symbols: true,
arrayComprehension: true,
asyncFunctions: true,
asyncGenerators: exponentiation,
forOn: true,
generatorComprehension: true
}
    };
// Load your module
System.import('./myModule.js', {metadata: metadata}).catch(function(ex) {
    console.error('Import failed', ex.stack || ex);
});
</script>
<script type="module">
//这里是正文，上面是使用es6的必要引入，traceur可以将es6代码翻译为阅览器识别的es5代码
console.log([,,].map(x=>x*x));//测试结果是否为【1,4,9】
//首先是两种新增的声明方式，let和const，当然还有import和class,这两种高级用法以后介绍
//let声明的使用
{
        let a =10 ;
var b = ;
}
    console.log(b);
//    console.log(a);//let命令，只在let所在的代码块内有效，因此a无法找到
//例：
// 循环中的变量i用var来声明，最后的输出结果为，i是累加的
var a=[];
for(var i=;i<;i++){
        a[i]=function(){
            console.log(i)
        }
    }
    a[]();
//如果换成let来声明，则每一个j实际上都是新的变量，因此其中保存的j为当前数值
var b=[];
for(let j=;j<;j++){
        b[j]=function(){
            console.log(j)
        }
    }
    b[]();
//注意点：
//1.let不会发生声明提升，因此先使用后声明的情况不会发生，需要注意（特殊：如有全局变量a，在代码块中如果使用了let a 那么在声明前也不能使用a变量，即使a在全局中已经声明过，这称为暂时性死区）
//2.同一块级区域内let不允许重复声明同一变量
//3.let和const声明的变量不是全局对象（window）的属性，而var和function声明的则是。

</script>
</html>

相关文章