ES6定义变量与箭头函数

矫情吗；* 2023-09-27 20:46 116阅读 0赞

ES6定义变量

●我们现在知道定义（声明）一个变量用的是var  
●在ES6中又增加了两种定义（声明）变量的方式：let和const

let声明变量  
●用let声明的变量也叫变量

const声明变量  
●用const声明的变零叫产量

let和const的区别  
●声明时赋值  
○用let声明变量的时候可以不赋值  
○用const声明变量的时候 必须 赋值  
●值的修改  
○用let声明的变量的是可以任意修改的  
○用const声明的变量的是不能修改的，也就是说一经声明就不允许修改  
○但是 用const声明的对象，对象里面的属性的值是可以修改的

let/const和var的区别  
●预解析  
○var 会进行预解析, 可以先使用后定义  
○let/const 不会进行预解析, 必须先定义后使用  
●变量重名  
○var 定义的变量可以重名, 只是第二个没有意义  
○let/const 不允许在同一个作用域下, 定义重名变量  
●块级作用域  
○var 没有块级作用域  
○let/const 有块级作用域  
○块级作用域: 任何一个可以书写代码段的 \{\} 都会限制变量的使用范围  
■if() \{\}  
■for () \{\}

案例-选项卡

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        .box {
          width: 500px;
          height: 320px;
          display: flex;
          flex-direction: column;
          margin: 50px auto;
          border: 3px solid #333;
        }
    
        .box > ul {
          height: 60px;
          display: flex;
        }
    
        .box > ul > li {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 30px;
          color: #fff;
          background-color: skyblue;
          cursor: pointer;
        }
    
        .box > ul > li.active {
          background-color: orange;
        }
    
        .box > ol {
          flex: 1;
          position: relative;
        }
    
        .box > ol > li {
          width: 100%;
          height: 100%;
          background-color: purple;
          font-size: 50px;
          color: #fff;
          position: absolute;
          left: 0;
          top: 0;
          display: none;
        }
    
        .box > ol > li.active {
          display: block;
        }
      </style>
    </head>
    <body>
    
      <div class="box">
        <ul>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
        </ul>
        <ol>
          <li class="active">1</li>
          <li>2</li>
          <li>3</li>
        </ol>
      </div>
    
    
      <script>
        /*
          案例 - 选项卡
        */
    
        for (let i = 0; i < btns.length; i++) {
          btns[i].onclick = function () {
            for (let j = 0; j < btns.length; j++) {
              btns[j].classList.remove('active')
              boxs[j].classList.remove('active')
            }
    
            btns[i].classList.add('active')
            boxs[i].classList.add('active')
          }
        }
    
        /*
    
      </script>
    </body>
    </html>
    
    
    
    复制代码

ES6箭头函数  
●箭头函数是ES6 语法中定义函数的一种新方式  
●箭头函数只能用来定义函数表达式，所以箭头函数也是匿名函数  
●当你把函数当做一个值赋值给另一个内容的时候, 叫做函数表达式  
●声明式函数的定义方式是不能定义箭头函数的  
○function fn() \{\} 这样的方式是声明式函数，不能用来定义箭头函数  
●语法：() => \{\}  
○()中书写形参  
○\{\}中书写代码片段  
箭头函数的特点  
●可以省略小括号不写  
○当你的形参只有一个的时候, 可以不写小括号  
○如果你的形参没有或者两个及以上, 必须写小括号

●可以省略大括号不写  
○当的代码只有一句话的时候, 可以省略大括号不写, 并且会自动返回这一句话的结果  
○否则, 必须写你大括号

●箭头函数中没有arguements  
○箭头函数内天生不带有 arguments。没有所有实参的集合

●箭头函数内没有this  
○箭头函数中的this指向外部作用域  
○也就是书写在箭头函数的外面那个函数 this 是谁, 箭头函数内的 this 就是谁