js执行顺序与es6的letconst关键字和解构赋值-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的高级就学习到这然后必须快点搞完前段</title>
    <!--学习es6-11尚硅谷的李强老师还是很不错的推荐,就是声音有点小推荐使用音响
    https://www.bilibili.com/video/BV1uK411H7on?p=7
    -->
    <style>
        .item{
            width: 200px;
            height: 50px;
            border:1px solid black;
            margin: 5px;
        }
    </style>
</head>
<body>
<!--
js是单线程的
他的执行顺序是:
 1.js代码的初始化--你可以理解为就是将所有的js代码先进行变量提升,和将所有代码识别准备好确定执行顺序,
 2.设置计时器
 3.绑定事件监听
 4.执行ajax
 5.执行回调函数,
 等所有的事件处理完成后主要才进行回调函数的处理
 alert会暂停js主线程的所有代码
 js有多线程的实现办法但我先不打算去使用它是要h5才能使用,不能进行对dom的操作主要是用来进行函数的处理计算
 用来提升性能
-->
<h2>点击切换颜色</h2>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<script type="text/javascript">
    /*
    下面先开始学习es6-11新特性
    let :1.let不会被变量提升
        2.用let声明的变量只有独一份不能再次声明
        3.let变量他是块级作用域只能被次级与当前的作用域识别,上一级作用域无法识别(let可以在全局作用域中声明)
     */
    /*
    重点,在我们用for 函数写循环加上监听的话
    用var的变量 作为for 的索引值
    因为此时的var 是全局变量 , for循环每次的变量添加都会使 for循环中的作用域代码保留下来但 i是同一的
    所以使用var 最后所有想让他不固定的i会变成 3
    造成了全是i且i=3 那么点击后就会报错
    你可以使用 let 来替换for中 var定义的 i
    因为i是独一份他会在每个循环作用域中留下
     */
    {
        let i=0;
    }
    {
        let i=1;
    }
    //....
    let  items=document.getElementsByClassName("item");
    for (var i=0;i<items.length;i++)
    {//会报错
        items[i].onclick=function(){
            items[i].style.backgroundColor='red';
        }
    }
    console.log(i);
    /*
    const 关键字是常量,若是单独为一个变量添加const关键字首先他不允许在去修改
    (潜规则:他一般使用const的变量会大写变量名)
     */
    const A=15,T='A',M="参数";//他们都不允许修改,因为这些基础类型的修改会导致内存地址的变化
    //但是对数组以及对象的修改他们不会发生报错,
    //对数字以及对象的修改只要他们不去赋值新的数组或对象他们的地址指向不变就不会变化
    /*
    总之const是对地址的约束
     */
    const SZ=['1','2','3'],oop={
        name:"梨花"
    };
    SZ[0]=45;
    SZ.push(66);
    oop.name="叶子";
    oop.attribute="树";
    /*
    es6中运行使用一定的模式从数组和对象中进行取值赋值
    解构赋值
     */
    const IOSZ=['你','好','吗'];
    let [ny,tg,czz]=IOSZ;
    console.log(ny);
    //他们以数组的形式命名来分别获取另一个数组的各项值
    //使他们成为不同的变量
    const OBJ={
        name:'二刺猿',
        age:'骚年',
        fn:function(){
            console.log("焯!");
        }
    }
    let {name,age,fn}=OBJ;
    console.log(name);
/*
总的来说就是 数组的解构就要用数组来组合变量,对象的解构就要用对象来解构,但是对象的解构解构的变量名必须和对象中的变量名相同
 */
</script>

</body>
</html>