【JavaScript解析】ES6定义变量与箭头函数详解

向右看齐 2024-03-22 18:34 50阅读 0赞

![在这里插入图片描述][3c843442d9054fb296f7ed8a75fd8ec1.png]

**箭头函数可以说是ES6的一大亮点,使用箭头函数,可以简化编码过程,使代码更加的简洁**

**本文由千锋前端老师独家创作，主要给大家介绍了关于ES6中箭头函数的相关资料,文中通过实例代码介绍的非常详细,觉得有帮助的话可以【关注】持续追更~**

## 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() \{\} 这样的方式是声明式函数，不能用来定义箭头函数

`语法：() => {}`

()中书写形参

\{\}中书写代码片段

### 箭头函数的特点 ###

#### 可以省略小括号不写 ####

当你的形参只有一个的时候, 可以不写小括号

如果你的形参没有或者两个及以上, 必须写小括号