关于ES6基础

ES6，也称为ECMAScript 2015，是JavaScript编程语言的新版本，于2015年发布。它引入了许多新功能和语法，以使代码更加现代化、可读性更高、可维护性更强，并提供了更好的性能和安全性。

ES6的一些新功能包括：

1. let和const关键字，用于声明变量和常量。
2. 箭头函数，可以更简洁地定义函数。
3. 类和继承，使得面向对象编程更加直观。
4. 模板字面量，用于更方便地拼接字符串。
5. 解构赋值，可以更轻松地从对象和数组中提取数据。
6. Promise，用于处理异步操作，避免回调地狱。
7. 模块化，使得代码组织更加清晰和可复用。

这些新功能不仅可以减少代码量，还可以提高代码质量和可读性，因此被广泛应用于现代Web开发中。

在ES6中新增一个let的关键字来定义变量

 let和var的区别：

                1.变量提升

用var进行声明变量则会出现变量提升的问题，JavaScript中的变量提升是指在代码执行之前，变量和函数声明会被提升到当前作用域的最顶部。在这段代码中，即使a在后面被赋值为10，但在代码执行之前，a的值仍是undefined。这是因为变量a被提升到了当前作用域的最顶部。

 //var   变量提升
        console.log(a);//undefined
        var a=10;//全局变量

         var a;
         console.log(a);//undefined
         a=10;
         console.log(a);//10

如果用let进行声明变量则会直接报错并不会像var一样出现undefined的问题

//let
         console.log(b);//直接报错
         let b=20;
         console.log(b);

ES6中var赋值遵循从上向下的读取方式，但是let并不是这样，let只能出现一个变量名无法出现多个

//var   从上往下阅读
        var a=10;
        var a=20;
        console.log(a);//20

                2.暂时性死区

暂时性死区（Temporal Dead Zone，简称TDZ）是指在ES6中使用let和const关键字声明变量时，变量在声明前不能被访问，否则会抛出“ReferenceError: 变量未定义”的错误。该变量存在于作用域中，但由于暂时性死区的限制，直到变量声明语句执行之前，该变量都不能被访问。

  let a = 10;
  let a=30;//直接报错

  console.log(a);//

                3.块级作用域

块级作用域是指变量或函数在一个代码块中，即在一对花括号 {} 中定义的作用域。在块级作用域中，变量或函数只在该块内部有效，超出该块范围就无法访问。块级作用域主要用于控制变量或函数的作用范围，避免变量污染和命名冲突问题。

 //代码块
         {
             let a=10;
            console.log(a);
         }


        {
           let b=20;
            console.log(a);
        }

        {
            let c=30
        }

                4.let先声明，再使用

                5.let不允许重复声明

最明显的区别就是在for循环里var与let的体现非常明现。

使用var进行for循环会出现只能打印length值，但使用let声明i就不会会出现此问题

 <ul>
        <li>ab1</li>
        <li>ab2</li>
        <li>ab3</li>
        <li>ab4</li>
        <li>ab5</li>
    </ul>



    <script>
        var lis = document.querySelectorAll("ul li");
 // i 是全局变量
        for(var i=0;i<lis.length;i++){
            lis[i].onclick=function(){
               alert(i)//只会打印出length值
            }；
        }；



//  var的解决办法
        for(var i=0;i<lis.length;i++){
            lis[i].index=i;//自定义属性     对象
            lis[i].onclick=function(){
                // alert(i)
                alert(this.index)；
            }；
        }；


//  let声明
   for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {
                alert(i)；
            }；
        }；

    </script>

其实let声明的执行逻辑很简单就像以下代码：

 let temp;

        {
            let i = 0;
            lis[0].onclick = function () {
                aler(i)
                i++;
                temp=i;
            }
        }



        {
            let i=temp;
            lis[1].onclick = function () {
                aler(i)
            }
        }


        lis[2].onclick = function () {
            aler(i)
        }

        lis[3].onclick = function () {
            aler(i)
        }

        lis[4].onclick = function () {
            aler(i)
        }

const声明 

 const是JavaScript中声明常量的关键字，用于创建一个不可重新赋值的变量。一旦被赋值，它的值就不会改变。 以下是一个const的示例：

const PI = 3.14159;

在上面的代码中，PI是一个常量，它的值被固定为3.14159。如果你尝试重新赋值PI，JavaScript引擎将会抛出一个错误。