JS基础变量声明

比眉伴天荒 2023-10-06 21:36 76阅读 0赞

#### 阅读目录 ####

*  命名规则
 *  变量声明
 *  弱类型
 *  变量提升
 *  TDZ

## 命名规则 ##

JS中的变量是弱类型可以保存所有类型的数据，即变量没有类型而值有类型。  
变量名以 `字母、$、_ 开始，后跟字母、数字、_`。

下面都是合法的命名

let name = 'wgchen';
    let $='willem'

JS语言关键字不能用来做变量名，比如 `true、if、while、class`等。

let class = 'wgchen';

> 不能以数字开头  
> 可以用字母、下划线（*）、`$` 开头  
> 变量里可以包含数字、字母、下划线（*）、`$` 开头  
> 关键字和保留字是不可以用来声明变量的  
> 语义化，变量名需要有意义（人类能看懂而不是只有你能看懂），例如 js\_header，反例为abc

没有jQuery的情况下
    <script type="text/javascript">
    var $myName = 'My Name is ...';
    alert($myName); 
    </script>

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]

## 变量声明 ##

可以使用多种方式定义变量比如 `var、let` 等（后面作用域章节会再讨论变量）。

let name = 'wgchen';

以上代码是声明和赋值的结合

let name ;
    name = 'wgchen'

使用 `,` 可以同时声明多个变量。

let n = 2,f = 3;
    console.log(f);

下面演示了变量可以更换不同类型的数据

let hd = 'wgchen';
    console.log(typeof hd);
    
    hd = 18;
    console.log(typeof hd);

## 弱类型 ##

在JS中变量类型由值决定。

var web = "willem";
    console.log(typeof web); //string
    
    web = 99;
    console.log(typeof web); //number
    
    web = {
        };
    console.log(typeof web); //object

## 变量提升 ##

解析器会先解析代码，然后会把声明的变量提升到最前，这就叫做变量提升。

下面代码在解析过程中发现 `while` 不能做为变量名，没有到执行环节就出错了，这是一个很好的解析过程的体验。

var web = 'wgchen';
    console.log(web);
    let while = 'willem'; //Uncaught SyntaxError: Unexpected token 'while'

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
使用`var`声明代码会被提升到前面

console.log(a); //undefined
    var a = 1;
    console.log(a);  //1
    
    //以上代码解析器执行过程如下
    var a;
    console.log(a); //1
    a = 1;
    console.log(a); //1

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]  
下面是 `if(false)` 中定义的 `var` 也会发生变量提升，注释掉 `if` 结果会不同

var web = "wgchen";
    
    function hd() {
        
      if (false) {
        
        var web = "willem";
      }
      console.log(web);
    }
    
    hd();

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]

var web = "wgchen";
    
    function hd() {
        
      console.log(web);
    }
    
    hd();

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]  
使用 `var` 定义的代码，声明会被提升到前面，赋值还在原位置

console.log(hd);
    var hd = 'wgchen';
    
    //以上代码解析器执行过程如下
    var hd;
    console.log(hd); //后盾人
    hd = 'wgchen';

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]

## TDZ ##

TDZ 又称暂时性死区，指变量在作用域内已经存在，但必须在 `let/const` 声明后才可以使用。

TDZ可以让程序保持先声明后使用的习惯，让程序更稳定。

*  变量要先声明后使用
 *  建议使用 `let/const` 而少使用 `var`

使用 `let/const` 声明的变量在声明前存在临时性死区（TDZ）使用会发生错误

console.log(x); // Cannot access 'x' before initialization
    let x = 1;

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]  
在 `run` 函数作用域中产生TDZ，不允许变量在未声明前使用。

hd = "wgcehn";
    
    function run() {
        
      console.log(hd);
      let hd = "willem";
    }
    
    run();

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]  
下面代码 `b` 没有声明赋值不允许直接使用

function hd(a = b, b = 3) {
        }
    hd(); //Cannot access 'b' before initialization

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]

因为 `a` 已经赋值，所以 `b` 可以使用 `a` 变量，下面代码访问正常

function hd(a = 2, b = a) {
        }
    hd();

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/4589877d1c1e4a0ebdbe0a857d43f8db.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA55-l5YW26buR44CB5Y-X5YW255m9,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/e6400703fb3640c7b1ac2a63e0a5a904.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/ee7dfee66dc3494d8669e5457cb2fe53.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://img-blog.csdnimg.cn/7750f8b55bb8416fa8ac51902ffc36be.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://img-blog.csdnimg.cn/11aa545aaca4486a9b7505c022e49c33.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://img-blog.csdnimg.cn/15c6e54458834bdeba36e10f34317879.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 5]: https://img-blog.csdnimg.cn/943c87fd1d684b59877a73ca5e0fcef5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 6]: https://img-blog.csdnimg.cn/004336eab1544b888f1247ae70f5dc89.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16 7]: https://img-blog.csdnimg.cn/f30d85aa05474c5d822d92254e7fd700.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16