JavaScript变量

91 阅读4分钟

变量

变量可以理解为一个用于存放数值的容器,这个数值可以存放其他任意数据类型

变量的独特之处在于它存放的数值是可以改变

我们可以把变量想象成一个盒子,盒子里面装着我们的数据,我们需要给盒子起一个名字

  • 例如,变量 message 可以被想象成一个标有 “message” 的盒子,盒子里面的值为 “Hello!”;
  • 并且,这个盒子的值,我们想改变多少次,就可以改变多少次;

variable.png

变量声明

在JavaScript中声明一个变量使用var关键字(variable单词的缩写)(后续学习ES6还有let、const声明方式)

我们可以通过 = 来给变量进行赋值

使用console.log方法 在控制台中 打印 str 变量的值

    // 我们声明了一个变量 这个变量的名字为str
    var str;
    // 将数字 1 赋值 给 变量 str
    str = 1;
    // 简洁一点,我们可以将变量定义和赋值合并成一行
    var str = 1;
    // 调用 console方法 打印 str的值
    console.log(str);

标识符

标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名,以及后面要提到的函数名。JavaScript 语言的标识符对大小写敏感,所以aA是两个不同的标识符。

命名规则

必须遵守的命名规则 如果不遵守 就会报错

1. 第一个字符必须是一个字母、下划线( _ )或一个美元符号( $ )
2. 其他字符可以是字母、下划线、美元符号或数字
3. 不能使用关键字和保留字命名
4. 变量严格区分大小写

保留关键字:

argumentsbreakcasecatchclassconstcontinuedebuggerdefaultdeletedoelse、enum、evalexportextendsfalsefinallyforfunctionif、implements、importininstanceof、interface、letnewnull、package、private、protected、public、returnstaticsuperswitchthisthrowtruetrytypeofvarvoidwhilewithyield。
​
https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar

命名规范

遵守规范能够给自己和他人带来更好的开发体验,不遵守并不会导致报错,但是建议遵守

1. 多个单词使用驼峰标识
2. 赋值 = 两边都加上一个空格;
3. 一条语句结束后加上分号; 也有很多人的习惯是不加;
4. 变量应该做到见名知意

变量的使用注意

注意一: 未声明直接使用

如果一个变量未声明(declaration)就直接使用,那么会报错;

// 代码直接使用变量`x`,系统就报错,告诉你变量`x`没有声明。
console.log(x);

注意二: 省略 var 关键字

如果没有使用var声明变量也可以,但是不推荐(事实上会被添加到window对象上)

 x = 10;
 console.log(x);

javascript中 变量可以省略 var关键字 直接调用或者赋值,解释器会帮我们 隐式声明 变量

但是,不写var的做法,不利于表达意图,而且容易不知不觉地创建全局变量,所以建议总是使用var命令声明变量。

注意三: 声明未赋值

如果一个变量有声明,但是没有赋值,那么默认值是undefined

   // 默认值 undefined
    var y;
    console.log(y);

注意四:重复赋值

x 一开始声明并且赋值为10 后面如果想要修改x的值 不需要重新声明 直接再次赋值20 覆盖之前x的值内容即可

    var x = 10; 
    x = 20;
    console.log(x);
​
    // 解释为 
    var x;
    x = 10;
    x = 20;
    console.log(x);

注意五:重复声明

对同一个变量进行二次声明 第二次声明是无效的操作 因为同一个 环境中 变量名是唯一的;

    var x = 1;
    var x;
    console.log(x); //1
​
    // 解释为 
​
    var x; 
    x = 1;
    console.log(x);

注意六:重复声明赋值

结合上一个重复声明, 当重复声明且赋值的时候, 第二行的声明无效 但 赋值操作有效 所以 变量 x 的值 由1 覆盖为 2

    var x = 1;
    var x = 2;
    console.log(x); //2
    // 解释为
    var x;
    x = 1;
    x = 2;
    console.log(x);

注意七:批量声明

我们可以通过 , 隔开多个变量, 通过一个 var 关键字进行批量声明 , 最后一个 变量 d 赋值为10;

    var a, b, c, d = 10;
    // 解释为
    var a;
    var b;
    var c;
    var d;
    d = 10;

注意八:特别注意

    var a = b = c = d = 10;
    // 解释为
    var d; // 隐式
    var c; // 隐式
    var b; // 隐式
    var a; // 显示
    d = 10;
    c = d;
    b = c;

变量提升

    console.log(num); //undefined
    var num = 10;

上面的这个代码中 我们书写语句的顺序是

  1. 调用了 num进行打印
  2. 声明了变量 num 并且 赋值 10

实际在javascript引擎解释后 顺序为

    var num;
    console.log(num); //undefined
    num = 10;
  1. 先声明num 这一步称为 变量提升
  2. 调用console.log()打印num的值 这时因为没有给num赋值 num的值还是 初始默认值 undefined
  3. num赋值 为 10

注释

在JavaScript 也会频繁用到注释 注释形式有 两种

    // 这是单行注释 ctrl+/
​
    /* 
     这是
     多行
     注释
     ctrl+shift+/
    */