【JavaScript入门笔记02 基本知识Ⅱ】

笔记参考javascript.info中文站

变量

1. 引言

在购物网站会有购车中的商品，聊天软件中会有聊天消息，变量就是来存储这些内容的。

2. 声明

变量的声明需要用到 let 关键字，有时候也会使用古早的 var ，两者没什么区别，只是 var 更旧一些，暂时不提

举个例子

let message;

这样我们就建立了一个新的变量，变量名为 message，我们向其中添加一些内容

let message;
message = 'Hello'; // 将字符串 'Hello' 保存在名为 message 的变量中

不妨写的简练一些

let message = 'Hello'; // 定义变量，并且赋值

也可以在一行中声明多个变量：

let user = 'John', age = 25, message = 'Hello';

但下面这样写更加美观，易读

let user = 'John';
let age = 25;
let message = 'Hello';

如何改变变量的值？

let message;
message = 'Hello!';
message = 'World!'; // 值改变了

我们还可以对变量进行拷贝

let hello = 'Hello world!';
let message;

// 将字符串 'Hello world' 从变量 hello 拷贝到 message
message = hello;
// 此时message变量的内容与hello变量相同

重复声明会报错

let message = "This";

// 重复 'let' 会导致 error
let message = "That"; // SyntaxError: 'message' has already been declared

但注意重复声明和更改变量内容的区别

3. 命名

命名语法规则：

• 只能包含字母、数字、符号 $ 和 符号_，且首字符不能是数字
• 变量名区分大小写
• 语法上允许非英文字母，但不推荐
• 例如 let 、return 这些保留字，不作为变量名
  
  

一个变量名应该有一个清晰、明显的含义，对其存储的数据进行描述，声明变量之前，多花点时间思考它的更好的命名。你会受益良多。

因此，我们推荐你这样命名：

• 使用易读的命名，比如 userName 或者 shoppingCart
• 离诸如 a、b、c 这种缩写和短名称远一点
• 保证简洁的同时足够准确，不好的例子就是 data 和 value，除非他们在当前代码中已经足够
• 脑海中的术语要和团队保持一致。如果网站的访客称为 user，那你就不要称他们为 visitor 或 newManInTown

举个例子
Q：创建一个变量来存储当前浏览者的名字。你会怎么命名这个变量？
A：let currentUserName = "John";

感觉这个变量有些长？想换成 userName ？算了吧，现代编辑器的自动补全可以让长变量名变得容易编写。不要浪费这个特性。一个名字中包含三个词挺好的。

4. 常量

声明一个常数（不变）变量，可以使用 const 而非 let，注意常量不能修改内容

const myBirthday = '18.04.1982';
myBirthday = '01.01.2001'; // 错误，不能对常量重新赋值

一个普遍的做法是将常量用作别名，以便记住那些在执行之前就已知的难以记住的值，例如用常量记录颜色，代替记不住的那些16进制数

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ……当我们需要选择一个颜色
let color = COLOR_ORANGE;
alert(color); // COLOR_ORANGE 比 #FF7F00好记多了

请注意，这个例子中颜色使用的都是大写，这就是“硬编码（hard-coded）”常量，他们和普通常量的区别是：他们在使用之前就已经可以确定值是多少，例如生日，颜色16进制编码

下面这个pageLoadTime 则是普通常数，因为页面加载时间在加载前不确定是多少

const pageLoadTime = /* 网页加载所需的时间 */;

5. 提示

有时我们可能觉得重用一些变量更方便，或者认为太多变量很杂乱，但事实上，重用的变量就像是被扔进不同东西盒子，但没有改变它的贴纸。现在里面是什么？谁知道呢。我们需要靠近一点，仔细检查才能知道。

我们或许节省了一点变量声明的时间，但却在调试代码的时候损失数十倍时间。

因此，请记住，额外声明一个变量绝对是利大于弊的。

数据类型

1. Number 类型

• number 类型代表整数和浮点数
• number 类型可以进行加减乘除运算
• number 类型除了一般数字，还有Infinity、-Infinity 和 NaN，三个概念

alert( 1 / 0 ); // Infinity 指正无穷
alert( Infinity  ); // 也可以这样直接调用
alert( - 1 / 0 ); // -Infinity 指负无穷
alert( "not a number" / 2 ); // NaN 代表一个计算错误

不难发现，Javascript 中的数学运算是安全的，我们可以进行任意运算而不用担心致命错误，最坏情况也就是一个“NaN”

2. BigInt 类型

Number类型的取值范围是 - (2⁵³ - 1) ~ (2⁵³ - 1)，超出范围则无法表示，此时需要用BigInt类型，举个例子

// 尾部的 "n" 表示这是一个 BigInt 类型
const bigInt = 1234567890123456789012345678901234567890n;

虽然该类型是最近才加入 Javascript 的，但兼容性方面， Firefox/Chrome/Edge/Safari 已经支持 BigInt 了
当然， IE 还没有。

3. String 类型

• 字符串必须被括在引号里
• 引号分三种：双引号，单引号，反引号
• 单引号双引号在 Javascript 中几乎没区别
• 反引号允许我们通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字符串中，在下面的例子中我们可以看到它的应用

let name = "John";

// 嵌入一个变量
alert( `Hello, ${name}!` ); // Hello, John!

// 嵌入一个表达式
alert( `the result is ${1 + 2}` ); // the result is 3

• 没有 char 类型
  
  

4. Boolean 类型（逻辑类型）

boolean 类型仅包含两个值：true 和 false，它代表了两个逻辑概念，正确和错误。

let nameFieldChecked = true; // 存储给变量
let isGreater = 4 > 1; //也可以直接比较，这个例子的结果是true

5. null 值

不同于任何一个类型，单纯指的是“空”、“无”、“未知”

6. undefined 值

和null类似，也不同于任何一个类型，它指的是 “暂未赋值”
事实上，在声明后未初始化的变量的默认值就是 undefined

let age;
alert(age); // 弹出 "undefined"`

7. Object 类型和 Symbol 类型

非常重要，将在以后的笔记中单独出现

8. typeof 运算符

typeof 并不是一个数据类型，而是一个运算符，它的作用是判断一个变量或表达式的数据类型，返回对应的类型名称字符串，下面是一些例子：

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof(x) 函数和 typeof 运算符结果一样，但一个是函数，一个是运算符，本质上不同，注意区分