JavaScript（一）——变量、运算符

JavaScript（一）——变量、运算符 前言

JavaScript分为两种书写方式：一是在HTML页面中书写；二是在HTML页面外部创建一个.js文件来书写JavaScript代码。这两种方式都需要在HTML页面引入对应的JavaScript标签。在HTML页面中书写的JavaScript代码需要写在标签里；如果是在HTML页面外，则需要在标签内引入对应的.js文件的地址。

以上两种方式中，我们最常见的就是在外部创建.js文件书写JavaScript代码，同时也建议大家这么去做。因为在前端中提倡结构、行为、样式分离的方式来开发前端项目。具体说明如下：

结构	html	表示页面中都包含什么元素
行为	JavaScript	表示页面中的元素在某些情况下执行特定的操作
样式	CSS	表示页面中的元素都以什么样子展示给客户

上述分离的优点是可以更加方便的修改页面，曾经的JSP就是因为页面中的HTML代码和Java代码混写导致耦合度过高，修改难度太大，所以才被淘汰掉（不是指.jsp页面，指的是当时在.jsp页面中书写在Java代码和前端代码段的行为）。

文章目录

• JavaScript（一）——变量、运算符
• • 前言
  • JavaScript基本语法
  • • 变量
    • • 变量声明
      • • 变量命名规则
      • 数据类型
      • • 值传递和引用传递
    • 运算符
    • • +运算符
      • -运算符
      • *运算符
      • /运算符
      • %取余运算
      • =赋值运算符
      • （）括号运算符
      • ++ 自增运算符
      • -- 自减运算符
      • += 运算符
      • 补充数字运算细节
  • 总结

JavaScript基本语法

首先详细说明JavaScript**（以后简称：js）**在HTML中的具体使用：

【注】：不能在引入外部JS文件的标签中书写js代码，这种情况下会html内部书写的js代码会失效，只会执行引入文件的js代码。

变量

一项技术（语言）可以被称为编程语言的基本要素是：变量。即：编程语言必然存在变量。

变量声明

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作为除数；
• 误将其他数据类型与数字一起运算。

在这种情况下，可能会显示出一些不太常见的结果，在此做一个解释：

总结

本篇笔记中仅记录了变量以及数据运算方面的运算符，关于逻辑方面的比较运算以及逻辑运算符会在下一篇笔记中记录。

所有的编程语言中，运算符都是一样的，只是根据不同语言底层对于一些特殊值（边界值）有不同的处理方式（同样的语言也会因为版本、系统等原因而导致不同），这些大家感兴趣的话可以自行了解。