船长的航行日记
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)

captain

心之所向,海的彼岸
首页
  • 原生能力

    • JavaScript
    • Node
  • 框架能力

    • Vue
    • React
  • 学习笔记

    • 《TypeScript》学习笔记
    • 《JavaScript高程4》学习笔记
  • HTML
  • CSS
  • 最近在读
  • 奇思妙想
  • 读书收获
历史足迹
飞鸽传书
GitHub (opens new window)
  • JavaScript

    • 常量和变量
      • 基本类型
      • 引用类型-对象
      • 深拷贝和浅拷贝
      • 垃圾回收机制
      • this指向
      • Promise
      • 深度优先和广度优先遍历
    • node

    • vue组件库开发实践

    • react

    • 学习笔记

    • vue3源码

    • 前端乱炖
    • JavaScript
    masongsong
    2021-05-17
    时间 3分钟
    阅读量 0

    常量和变量

    # 前言

    变量是数据的"命名存储",我们可以利用变量对数据进行一系列操作

    # 变量

    JavaScript中使用let和var定义变量

    // 这里表示声明(定义)了一个name变量
    
    let name;
    var age;
    
    1
    2
    3
    4

    使用=赋值运算符给声明的变量赋值

    // 表示name变量的内存区域存储的是"小新" age变量存储的是24
    
    let name = "小新";
    var age = 24;
    
    1
    2
    3
    4

    此时我们就可以使用变量名访问name和age存储的数据了

    // 访问name变量
    
    console.log(name) // 小新
    console.log(age)  // 24
    
    1
    2
    3
    4

    声明变量我们可以单行,也可以多行

    let name = "小新",age = 24;
    var name = "小新",age = 24;
    
    1
    2

    但是实际开发中更推荐使用一行定义一个变量,可读性更高。严格模式下不允许将相同的变量声明两次。

    // 严格模式下都会触发错误
    let name = "小新"
    let name = "小新的女朋友"
    
    // 非严格模式下var的重复声明不会报错 age的值为23
    var age = 24;
    var age = 23;
    
    1
    2
    3
    4
    5
    6
    7

    实际开发中我们推荐使用let,而且避免使用var来声明一个变量

    var的特性可能会使程序出现意想不到的后果,让我们对比下let和var:

    // 1.var会使得变量提升  let不会
    
    // 使用var
    console.log(name);//undefined  从代码结构看运行到这一行并没有声明name属性 应该报name id not defined
    var name = "小新"
    
    // 上面的代码相当于下面的代码
    var name;
    consoele.log(name);
    name = "小新" // 变量提升了
    
    // 使用let
    console.log(name); // 报错:Cannot access 'k' before initialization 注意是initialization
    let name = "小新" // 变量没有被提升
    
    // 2.var声明的变量在整个函数作用域都可以使用,而let声明的变量只在声明的块级中有效(子块中var和let都有效)
    
    // var 同样的变量 一个x
    function varTest() {
      var x = 1;
      {
        var x = 2;
        console.log(x); // 2 
      }
      console.log(x) // 2
    }
    
    // let 块外部的变量的x和块内的x不是同一个变量
    
    function letTest() {
      let x = 1;
      {
        let x = 2;
        console.log(x);  // 2 
      }
      console.log(x)  // 1 
    }
    
    // 顶部声明变量时,var声明变量是给全局对象添加属性,let不会
    var x = 1;
    let y = 1;
    
    console.log(this.x) // 1
    console.log(this.y) // undefined
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44

    可以看到, var会产生好多令人困惑的地方,所以更推荐使用let而不是古老的var

    同时,变量命名应该注意:

    1.变量命名区别大小写 name和Name不是同一个变量

    2.不能用关键字或者保留字作为变量名 如let、return等

    3.虽然允许非英文作为变量名,但是不推荐

    # 常量

    顾名思义,不变的常数量称做常量

    常量使用const声明

    const name = "小新"
    
    name = "小新的女朋友" // 报错Assignment to constant variable 常量一旦赋值不允许修改
    
    1
    2
    3

    为了更好的区别常量和变量,你可以将常量名和下划线大写,表示是一个常量

    const NAME = "小新"
    
    const NAME_FIRSRNAME = "小"
    
    1
    2
    3

    值得注意的是:const声明创建的常量正确理解是创建了一个值的只读引用,并不是所持有的值是不可变的,如对象是可以改变属性值的

    const person ={name: "小新"}
    person.name = "小新的女朋友"  // 这是可以的 并没有修改person引用
    
    1
    2

    所谓的暂存死区,也就是说{}内形成块级作用域,适用于let和const

    {
        const name = "小新"
        var age = 23
    }
    
    console.log(age); // 23
    console.log(name); // 报错
    
    1
    2
    3
    4
    5
    6
    7
    编辑 (opens new window)
    #JavaScript
    上次更新: 2021/05/21, 10:37:31
    基本类型

    基本类型→

    最近更新
    01
    总结
    10-19
    02
    优化
    10-16
    03
    实现ref
    10-16
    更多文章>
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 生命绿
    • 收获黄
    • 天空蓝
    • 激情红
    • 高贵紫