【JavaScript解析】ES6定义变量与箭头函数详解-Toy模板网

这篇具有很好参考价值的文章主要介绍了【JavaScript解析】ES6定义变量与箭头函数详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

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

ES6定义变量

我们现在知道定义（声明）一个变量用的是var

在ES6中又增加了两种定义（声明）变量的方式：let和const

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

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

let和const的区别

声明时赋值

用let声明变量的时候可以不赋值

用const声明变量的时候必须赋值

值的修改

用let声明的变量的是可以任意修改的

用const声明的变量的是不能修改的，也就是说一经声明就不允许修改

但是用const声明的对象，对象里面的属性的值是可以修改的

<script> 
    //注意：这里的代码不能整体运行。需要单独运行。这里是为了整体做比较 
    // let 和 const 的区别 
    
    // 1. 声明时赋值 
    let n 
    console.log(n) //undefined 
    n = 200 
    console.log(n) //200 
    // 不能定义常量不赋值 会报错 
    const n2 
    
    // 2. 值的修改 
    let n = 100 
    console.log(n) //100 
    n = 'hello world' 
    console.log(n) //hello world 
    const str = '我是定义时候就写好的内容' 
    console.log(str)
    // 当你试图修改一个 const 定义的常量 直接报错 
    str = 'hello world' 
</script>

let/const和var的区别

预解析

○var 会进行预解析, 可以先使用后定义

○let/const 不会进行预解析, 必须先定义后使用

变量重名

○var 定义的变量可以重名, 只是第二个没有意义

○let/const 不允许在同一个作用域下, 定义重名变量

块级作用域

var 没有块级作用域

let/const 有块级作用域

块级作用域 任何一个可以书写代码段的 {} 都会限制变量的使用范围

if() {}

for () {}

<script> 
    // 注意：代码不能整体运行需要分开运行，为了对比需要 
    //let/const 和 var 的区别 
    
    // 1. 预解析 
    console.log(n) //undefined 
    var n = 100 
    
    // Uncaught ReferenceError: Cannot access 'n2' before initialization 
    //未捕获引用错误：在初始化之前无法访问“n2” 
    console.log(n2) 
    let n2 = 200  
    console.log(n3) // Uncaught ReferenceError: Cannot access 'n3' before initi 
    const n3 = 300 
    
    // // 2. 变量重名 
    var n = 100 
    var n = 200 
    console.log(n) 
    //Uncaught SyntaxError: Identifier 'n1' has already been declared 
    //未捕获的语法错误：标识符“n1”已声明 
    let n1 = 100 
    let n1 = 200 //会报错 
    const n2 = 200 
    const n2 = 300 //会报错 
    
    // 3. 块级作用域 
    if (true) { 
        var n = 100 
        console.log(n) //100 
    }
    console.log(n) // 100 
    if (true) { 
        let n = 200 
        console.log(n) //200 
    } 
        console.log(n) //Uncaught ReferenceError: n is not defined 
        const n = 400 
        if (true) { 
            const n = 300 
            console.log(n) //300 
    } 
        console.log(n) //400 
</script>

案例 -选项卡

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

语法：() => {}

()中书写形参

{}中书写代码片段

箭头函数的特点

可以省略小括号不写

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

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

<script> 
    let fn1 = () => { 
        console.log('我是 fn1 函数, 我没有形参') 
    } 
    fn1() 
        // 一个形参, 可以不写小括号 
    let fn2 = a => { 
        console.log('我是 fn2 函数, 有一个参数', a) 
     } 
     fn2(10) 
         // 两个形参, 必须写小括号 
     let fn3 = (a, b) => { 
         console.log('我是 fn3 函数, 有两个参数', a, b) 
     } 
     fn3(100, 200) 
</script>

●可以省略大括号不写

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

<script> 
    let fn1 = (a, b) => a + b 
    let res = fn1(10, 20) 
    console.log(res) //30 
    var arr = [1, 2, 3, 4, 5, 6, 7] 
    //演变过程 
    // var res = arr.filter(function (item) { return item % 2 }) 
    // var res = arr.filter((item) => { return item % 2 }) 
    // var res = arr.filter(item => { return item % 2 }) 
    var res1 = arr.filter(item => item % 2) 
    console.log(res1) //[1, 3, 5, 7] 
</script>

箭头函数中没有arguements

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

<script> 
    //普通函数 
    let fn1 = function() { 
        console.log(arguments)//会拿到传递的实参 
    } 
    fn1(10, 20, 30, 40, 50) 
    //箭头函数 
    let fn2 = () => { 
        console.log(arguments)//会报错 
     } 
     fn2(10, 20, 30) 
</script>

●箭头函数内没有this

○箭头函数中的this指向外部作用域

○也就是书写在箭头函数的外面那个函数 this 是谁, 箭头函数内的 this 就是谁

<script> 
    var obj = { 
        name: '我是 obj 对象', 
        f: function() { 
            console.log('f : ', this) //Object 
        }, 
        f2: () => { 
            // 这里没有 this, 用的是 外部的 this 
            console.log('f2 : ', this) //Window 
        } 
     } 
     obj.f() 
     obj.f2() 
</script>