zoukankan      html  css  js  c++  java
  • es6之let和const

    1.使用基本相同

        var a = 1
        console.log(a)
        var b = "hello"
        console.log(b)
    
        let c = 10
        console.log(c)
    
        const d = "hello"
        console.log(d)

    2.let可以重复赋值,const不可以重复赋值(let定义变量,const定义常量)

    const 一旦给一个变量赋值以后,这个变量的值以后不能再改变了

       let c = 10
        c = c + 1
        console.log(c)
    
        const d = "hello"
        d = d + "world"
        console.log(d)

    3.为什么会出现let和const呢?var的痛点在哪里

    (1)var可以重复声明变量带来的缺点,看一个小场景

      假如我们在项目的开始定义了一个变量叫做productPrice=5.99,在5000行代码之后,我们使这个变量自增了,应该得到6.99

      可是我们忘记了在1000行代码的时候,我们又重复定义了一下productPrice=9.99,实际我们取到的值是10.99

        var productPrice = 5.99
        // line 1000
        var productPrice = 9.99
        // line 5000
        productPrice++
        console.log(productPrice) //10.99

    有人会说我们可以使用js的严格模式来解决这一问题,每次都要使用严格模式是不是有办法来解决这一痛点呢?

    (2)var是函数作用域,let和const是块作用域

    以下两个案例中:

      第一个案例中的变量price,定义在函数外面,是个全局变量,所以能正常访问。

      第二个案例的变量定义在了函数内部,就成了局部变量,只在局部作用域内有效,外部无法访问这个局部变量,所以报错。(里面看得到外面,外面看不到里面)

        var price = 1
        function setPrice(){
          price++
        }
        setPrice()
        console.log(price)  //2
     
        function setPrice(){
          var price = 1
          price++
        }
        setPrice()
        console.log(price)  //Uncaught ReferenceError: price is not defined

    小练习:函数作用域

        var price = 1;
        function setPrice(){
          var price = 10
          console.log(price)  //打印的是局部变量
          console.log(window.price)  //打印的是全局变量
        }
        setPrice()
        console.log(price)   //打印的是全局变量

    块级作用域(if(){}  for(){} while(){}都是块级作用域,只要是有花括号{}都是块级作用域,函数作用域也包含在块级作用域里面)

        for(var i = 0; i < 5; i++){}
        console.log(i)  //5

    for(let i = 0; i < 5; i++){} console.log(i) //Uncaught ReferenceError: i is not defined

    for循环不是函数,是一个块。

    第一个案例中:var生命的变量是全局变量,在块外面还能用

    第二个案例:let声明的是局部变量,在块外面用不了

    那么问题来了?在开发中如何选择let和const呢?

    答案是:绝大部分用const,当你想让这个变量有所改变时再用let

  • 相关阅读:
    window.fonts
    smpt authentification 配置
    如何从思维上应对
    中文字体 英文字体
    Path Breadcrumbs
    drupal commerce app
    做视频或者什么模块开发之类的
    分页符 箭头 难看
    theme wrapper 例子
    background position 稍微深入
  • 原文地址:https://www.cnblogs.com/yaya-003/p/12767561.html
Copyright © 2011-2022 走看看