JavaScript全解析——ES6定义变量与箭头函数

来源：千锋教育

发布人：lxl

时间： 2023-05-16 11:05:48

　　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>