前端研习录（15）——JavaScript语句、标识符、变量讲解及示例说明

清风不渡

已于 2022-08-03 21:12:27 修改

阅读量429

点赞数

分类专栏：前端研习录文章标签：前端 javascript 开发语言

于 2022-08-03 21:11:09 首次发布

本文链接：https://blog.youkuaiyun.com/WXKKang/article/details/126141297

版权

前端研习录专栏收录该内容

44 篇文章

订阅专栏

前端研习录（15）——JavaScript语句、标识符、变量讲解及示例说明

版权声明

本文原创作者：清风不渡
博客地址：https://blog.youkuaiyun.com/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript部分

一、JavaScript

1、简介

JavaScript是一种轻量级脚本语言（脚本语言：不具备开发操作系统的能力，只是用来编写控制其他大型应用程序的“脚本”），本身是一种嵌入式语言，提供的核心语法并不是很多

2、语句及标识符

（1）语句

JavaScript程序的执行单位是行，也就是一行一行的执行。语句以分号结尾，一个分号就表示一行语句的结尾，如下所示：

var num = 5 ;

（2）标识符

标识符是指用来识别各种值得合法名称。最常见的标识符就是变量名
标识符由：字母、数字、下划线“_”、美元符号“$”组成
中文也是合法的标识符，但是不推荐使用中文来作为标识符
注意：

不能以数字作为开头来命名标识符
不能以JavaScript的保留关键字作为标识符

JavaScript的保留关键字： arguments、 break、 case、 catch、 class、 const、continue、debugger、 default、 delete、 do、 else、 enum、 eval、 export、 extends、 false、 finally、for、function、 if、 implements、 import、 in、 instanceof、 interface、 let、 new、 null、 package、private、protected、 public、 return、 static、 super、 switch、 this、 throw、 true、 try、 typeof.var、void、 while、 with、 yield。

3、变量

（1）定义

变量即是可变的量（内容是可变的），通过使用一个变量（相当于容器），来“容纳”不同的值，进行“输送”和“取用”。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    
    <script>
        var num = 10;
        console.log("var num = 10;");
        console.log(num);
        num = 20;
        console.log("num = 20;");
        console.log(num);
    </script>

</body>
</html>

我们声明一个变量num并赋值为10后进行输出，然后再次赋值为20后进行输出，效果如下：
在这里插入图片描述
可以看到，一个变量是允许被多次赋值，要不怎么能叫做变量呢？

（2）变量提升

需要值得注意的是：JavaScript的引擎在进行工作时，会先解析代码，获取所有被声明的变量，然后在一行一行的运行。这将会造成一个结果就是：所有变量的声明语句，会被提升到代码的头部，这就叫做变量提升（hoisting）。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    
    <script>
        console.log(num);
        var num = 20;
    </script>

</body>
</html>

我们将输出语句放在声明变量语句的上方，按理来说应该会报错，但是我们得到的却是下面这样：

在这里插入图片描述
而如果我们不声明变量时，输出的是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>清风不渡</title>
</head>
<body>
    
    <script>
        console.log(num);
    </script>

</body>
</html>