本文介绍了JavaScript的基础语法，包括变量声明、命名规则、数据类型（原始值和引用值）、值传递与引用传递，以及各类运算符如+、-、*、/和%的用法。通过实例演示了变量操作和运算符在实际开发中的应用。
JavaScript（一）——变量、运算符
前言
JavaScript分为两种书写方式：一是在HTML页面中书写；二是在HTML页面外部创建一个.js文件来书写JavaScript代码。这两种方式都需要在HTML页面引入对应的JavaScript标签<script></script>。在HTML页面中书写的JavaScript代码需要写在标签里；如果是在HTML页面外，则需要在标签内引入对应的.js文件的地址。
以上两种方式中，我们最常见的就是在外部创建.js文件书写JavaScript代码，同时也建议大家这么去做。因为在前端中提倡结构、行为、样式分离的方式来开发前端项目。具体说明如下：
| 结构 | html | 表示页面中都包含什么元素 |
|---|---|---|
| 行为 | JavaScript | 表示页面中的元素在某些情况下执行特定的操作 |
| 样式 | CSS | 表示页面中的元素都以什么样子展示给客户 |
上述分离的优点是可以更加方便的修改页面，曾经的JSP就是因为页面中的HTML代码和Java代码混写导致耦合度过高，修改难度太大，所以才被淘汰掉（不是指.jsp页面，指的是当时在.jsp页面中书写在Java代码和前端代码段的行为）。
文章目录
JavaScript基本语法
首先详细说明JavaScript**（以后简称：js）**在HTML中的具体使用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--表示在页面中书写JavaScript代码-->
<!--<script type="text/javascript">-->
<!-- document.write('This is the first test page for JavaScript')-->
<!--</script>-->
<!--表示将外部书写的JavaScript文件引入到当前HTML文件中-->
<script type="text/javascript" src="../js/test_01.js"></script>
</body>
</html>
【注】：不能在引入外部JS文件的<script></script>标签中书写js代码，这种情况下会html内部书写的js代码会失效，只会执行引入文件的js代码。
<script type="text/javascript" src="../js/test_01.js">
document.write('这行代码不会被执行');
</script>
变量
一项技术（语言）可以被称为编程语言的基本要素是：变量。即：编程语言必然存在变量。
变量声明
js原生且最开始定义变量的关键字如下：
// 该语句表示定义一个变量名 num，该变量名指向一个系统内存中的一个空间，并将一个数据放入到该房间中，日后我们在使用变量名num进行操作的时候，默认使用num指向的变量空间中存放的数据。
// 变量声明
var num;
// 变量赋值
num = 100;
// 覆盖
变量命名规则
- 变量名可以包含数字、字母、下划线以及$（美元符号）；
- 变量名必须以字母、下划线、$（美元符号）开头；
- 变量名不可以使用系统关键字（系统内部定义的变量或命令）、保留字（曾使用过或底层语言的关键字但现在不使用仅保留下来的关键字，还有一些系统保留下来用于计划版本升级使用的关键字）。
数据类型
在js中，数据值大体分为两种：原始值、引用值；
- 原始值：
- Number：数字类型，整型、浮点型
- Boolean：布尔值，只有两种状态，真或假（true、false），符合计算机底层中的二进制状态；
- String：字符串类型，可以使用单引号
''或者双引号""，同时不同的引号可以嵌套，相同的引号不可以嵌套； - undefined：该数据类型中只有一个值，与类型同名
undefined，表示并没有进行赋值。 - null：表示空值，同时也表示一种占位的概念。可以通过null来解决保留字的问题。
- 引用值：
- 数组类型：在系统中开辟出多个存放数据的空间，空间之间有对应的联系。笼统解释：可以存放多个数据的数据类型。
- 对象类型：和Java语言的对象有相似之处，也有不太一样的地方；在js中的对象是一种
- 函数类型：
值传递和引用传递
在js中对数据类型区分为原始值和引用值的原因比较复杂，它主要为了解决程序在执行过程中的值传递和引用传递。先看如下例子：
var num1 = 100;
var num2 = num1;
num1 = 200;
document.write(num2); // 打印出的值为100
var arrs1 = [1];
var arrs2 = arrs1;
arrs1.push(2);
document.write(arrs2); // 打印出的值为[1,2]
具体原因如下：
编程语言在计算机内存中运行的时候对内存进行了划分，共分为：栈内存与堆内存（栈和堆是两种数据结构，感兴趣的同学可以自行学习数据结构与算法这本书，建议初学者看《大话数据结构》入门，已经入口的同学可以去看严蔚敏老师的《数据结构》第一版）。
js中的原始值是存放在栈内存中，栈内存中的赋值与使用是copy（复制），即定义两个原始值进行赋值操作的时候，这两个变量名不是同时指向同一个内存空间，而是将已有数据的内存空间中的值复制一份供另一个使用；
而引用值的数据是存放在堆内存之中，在使用的过程中是将数据所在的内存地址给另一个变量来使用。
运算符
运算规则符合数学计算规则（严格来说，数学的运算规则）
+运算符
- 该运算符有两种含义，用于数字的运算时是加法运算；用于字符串的运算时是字符串拼接；
- 同时，任何数据类型与字符串进行 + 运算后的结果都是字符串。
-运算符
- 该运算符的基本概念和加法一样。
*运算符
- 同上。
/运算符
- 同上。
%取余运算
-
按照出发计算，最终结果为余数（不要再问我取到小数点后几位了……各位，补补小学数学吧）
-
如果被除数小于除数，则结果为被除数。
=赋值运算符
- emm…就是赋值呗。
var num = num1 + num2;
（）括号运算符
- 括号内部的算式先行计算。
++ 自增运算符
var num = 1;
num ++;
// 自增后的num结果为2
– 自减运算符
- 逻辑和自增运算符一样。
+= 运算符
var num1 = 1, num2 = 2;
num1 += num2;
// 该算式等价于 num1 = num1 + num2;
同样，**-=、*=、/=和+=**运算符一样。
补充数字运算细节
在数字运算的过程中可能会出现一下情况：
- 数字0作为除数；
- 误将其他数据类型与数字一起运算。
在这种情况下，可能会显示出一些不太常见的结果，在此做一个解释：
<script type="text/javascript">
let num;
num = 2 / 0；
document.write(num); // 结果为 Infinity（无穷大）
num = -2 / 0;
document.write(num); // 结果为 -Infinity（无穷小）
num = 'a' / 1;
document.write(num); // 结果为 NaN(not a number)，表示不是一个数字
</script>
总结
本篇笔记中仅记录了变量以及数据运算方面的运算符，关于逻辑方面的比较运算以及逻辑运算符会在下一篇笔记中记录。
所有的编程语言中，运算符都是一样的，只是根据不同语言底层对于一些特殊值（边界值）有不同的处理方式（同样的语言也会因为版本、系统等原因而导致不同），这些大家感兴趣的话可以自行了解。
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
