ES6的基础

let

letde特性

     a.不能够重复定义的
     b.不存在变量提升
     c.存在块级作用域
     d.不存在作用域链问题

const命令

cosnt是用来声目 文量，常量就是固定不变的量，在我们开发过程中当 一个变量希望它的一在声明以后，不被(自己或者他人)改变

语法:const常量的名称=值

const关键字用来声明常量const声明有以下特点

注意:
1常量的值一旦定义不能被修改
2.常量的名称一般使用大写
3.常量在定义的时候，必须赋值
4.不允许重复定义的
5.块级作用域
1.const声明常最时，定义时必须赚值，因为常最值是不允许修改的

2.const定义的对象或数组时，可以修改对象或数组中的元素值，不能直接修改当前常量对象

单击变色案例

<style>
        *{
            margin:0px;padding:0px;
        }
        .container{
            width: 450px;
            height: 300px;
            border: 1px solid #4013af;
            padding:8px;
            margin:0 auto;
        }
        .container h2{
            text-align: center;
        }
        .container .item{
            border: 1px dashed red;
            margin-top: 12px;
            padding:12px 0px;
        }
</style>
 <div class="container">
        <h2>点击换色</h2>
        <div class="item">one</div>
        <div class="item">two</div>
        <div class="item">three</div>
        <div class="item">four</div>
    </div>
    <script>
        // 1. 获取到需要绑定单击事件的标签
        var divObj = document.getElementsByClassName("item")
        // 2. 给标签绑定单击事件
        for(let i = 0;i<divObj.length;i++){
            console.log(i);
            divObj[i].onclick=function(){
                // alert(i)
                // 3. 改变div的背景颜色   this 表示当前这个对象
                this.style.backgroundColor = 'rgb(120,130,240)'
                /* 
                    扩展：1. 点击的时候随机换色     Math.random()  
                         2. 两个颜色之间互相切换
                */
            }
        }
        
    </script>

 解构赋值的基本使用

let [a,b,c]=[12,20]

1解构赋值
   数组的解构赋值对象的解构赋值
      字符串的解构赋值
2.运算符的扩展

运算符的分类

算术运算符

比较运算符

赋值运算符

逻辑运算符

字符串拼接运算

三元运算符
3.函数扩展

不完全解构

1. 变量名比等号右侧的值少,且没有其他特殊处理的话，多出的值会被忽略let [a,b,c] = [10,15,17,23,31] //结果:a 10 b 15 c 17
2. 变量名比等号右侧的值多,多出的变量名值为undefinedlet [a1,b1,c1] = [10,15] 
// 结果：a1 10 b1 15 c1 undefined
// console.log(c1);
// 3. 剩余运算符(...) ,会将剩下的值以数组的方式存储到c2变量中
let [a2,b2,...c2] = [10,15,17,23,31] //结果:a2 10 b2 15 c2
console.log(c2);
// 4. 默认值,当等号左侧的变量设置了默认值，在等号右侧又可以找到匹配的值，那么变量的值使用等号右侧匹配的值
let [a3,b3,c3='default'] = [10,15,'zhangsan']
console.log(c3); // 结果:zhangsan
let [test = 12] = [undefined];
console.log(test); // 结果为 12
let [test1 = 12] = [null];
console.log(test1); // 结果为 null

对象的解构赋值

a. 等号左侧要使用花括号({})包裹变量名

b. 变量名要和对象中要要解构的属性名保持一致

c. 等号右侧就是要解构的对象

<script>
    let  obj1 = {
            name:"张三",
            age:18,
            sex:1,
            study:function(){}
        }
        let {name,age} = obj1
        console.log(name);
</script>

运算符的分类

算术运算符

+ - * / % ++ --

比较运算符

> < >= <= != == !== ===

赋值运算符

= += -= *= /= %=

a+=b 等价于 a = a+b

逻辑运算符     大多数情况都会用在条件里边

字符串拼接运算    变量和字符串拼接

三元运算符

条件?条件为真的执行:条件为假的执行

运算符扩展

<script>
        // 指数运算符 符号   **
        // 5的3次方  
       console.log( 5**3);
    // 指数赋值运算符  符号  **=
    var a = 2;
    a**=4  // 等价于 a = a**4
    console.log(a);

    </script>