JavaScript笔记(一)：基础知识

2024-09-25 学习笔记 2892 字

一些特性

目前 <script type="text/javascript"> 已经不再需要。

如果设置了 src 特性，script 标签内容将会被忽略。

1<script src="file.js">
2  alert(1); // 此内容会被忽略，因为设定了 src
3</script>

当 use strict 处于脚本文件的顶部时，则整个脚本文件都将以“现代”模式进行工作：

1"use strict";
2// 代码以现代模式工作
3...

变量

使用 let 命名，早期使用 var

变量名称必须仅包含字母、数字、符号 $ 和 _。
首字符必须非数字。

如果命名包括多个单词，通常采用驼峰式命名法。命名区分大小写。

常量

1const myBirthday = '18.04.1982';

一个普遍的做法是将常量用作别名，以便记住那些在执行之前就已知的难以记住的值。使用大写字母和下划线来命名这些常量。作为一个“常数”，意味着值永远不变。但是有些常量在执行之前就已知了（比如红色的十六进制值），还有些在执行期间被“计算”出来，但初始赋值之后就不会改变。例如：

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

pageLoadTime 的值在页面加载之前是未知的，所以采用常规命名。但是它仍然是个常量，因为赋值之后不会改变。

Note

大写命名的常量仅用作“硬编码（hard-coded）”值的别名，即在程序执行之前就已经知道的值。

数据类型

JavaScript 属于“动态类型”（dynamically typed）编程语言，定义的变量不会在定义后被限制为某一类型。有 8 种基本的数据类型（7 种原始类型和 1 种引用类型）：

七种原始数据类型（基本数据类型）：
- number 用于任何类型的数字：整数或浮点数，在 ±(2^53-1) 范围内的整数。
- bigint 用于任意长度的整数。
- string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
- boolean 用于 true 和 false。
- null 用于未知的值 —— 只有一个 null 值的独立类型。
- undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
- symbol 用于唯一的标识符。
以及一种非原始数据类型（复杂数据类型）：
- object 用于更复杂的数据结构。

number 类型

number 类型代表整数和浮点数。
数字可以有很多操作，比如，乘法 *、除法 /、加法 +、减法 - 等等。
除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于这种类型：Infinity、-Infinity 和 NaN。
超出 ±(2^53-1) 范围的数会出现精度问题，可以使用 BigInt 类型，用于表示任意长度的整数，可以通过将 n 附加到整数字段的末尾来创建 BigInt 值。

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

String 类型

JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式。

双引号："Hello".
单引号：'Hello'.
反引号：`Hello`.

反引号是 功能扩展 引号。允许通过将变量和表达式包装在 ${…} 中，来将它们嵌入到字符串中。例如：

1let name = "John";
2
3// 嵌入一个变量
4alert( `Hello, ${name}!` ); // Hello, John!
5
6// 嵌入一个表达式
7alert( `the result is ${1 + 2}` ); // the result is 3

${…} 内的表达式会被计算，计算结果会成为字符串的一部分。可以在 ${…} 内放置任何东西：诸如名为 name 的变量，或者诸如 1 + 2 的算数表达式，或者其他一些更复杂的。仅在反引号内有效，其他引号不允许这种嵌入。

null 值

JavaScript 中的 null 不是一个“对不存在的 object 的引用”或者 “null 指针”，仅仅是一个代表“无”、“空”或“值未知”的特殊值。

undefined 值

undefined 的含义是 未被赋值。如果一个变量已被声明，但未被赋值，那么它的值就是 undefined：

1let age;
2
3alert(age); // 弹出 "undefined"

typeof 运算符

typeof 运算符返回参数的类型。当我们想要分别处理不同类型值的时候，或者想快速进行数据类型检验时，非常有用。对 typeof x 的调用会以字符串的形式返回数据类型：

 1typeof undefined // "undefined"
 2
 3typeof 0 // "number"
 4
 5typeof 10n // "bigint"
 6
 7typeof true // "boolean"
 8
 9typeof "foo" // "string"
10
11typeof Symbol("id") // "symbol"
12
13typeof null // "object"  官方承认的 `typeof` 的错误

类型转换

有三种常用的类型转换：转换为 string 类型、转换为 number 类型和转换为 boolean 类型。 字符串转换 —— 转换发生在输出内容的时候，也可以通过 String(value) 进行显式转换。原始类型值的 string 类型转换通常是很明显的。 数字型转换 —— 转换发生在进行算术操作时，也可以通过 Number(value) 进行显式转换。数字型转换遵循以下规则：

值	变成
`undefined`	`NaN`
`null`	`0`
`true / false`	`1 / 0`
`string`	“按原样读取”字符串，两端的空白字符（空格、换行符 `\n`、制表符 `\t` 等）会被忽略。空字符串变成 `0`。转换出错则输出 `NaN`。
布尔型转换 —— 转换发生在进行逻辑操作时，也可以通过 `Boolean(value)` 进行显式转换。

布尔型转换遵循以下规则：

值	变成
`0`, `null`, `undefined`, `NaN`, `""`	`false`
其他值	`true`

运算符

运算元 —— 运算符应用的对象。比如说乘法运算 5 * 2，有两个运算元：左运算元 5 和右运算元 2。有时候人们也称其为“参数”而不是“运算元”。
如果一个运算符对应的只有一个运算元，那么它是 一元运算符。比如说一元负号运算符（unary negation）-，它的作用是对数字进行正负转换，如果有两个运算元，则是 二元运算符，对 - 则是减法运算符。
一元运算符优先级高于二元运算符

数学运算

JavaScript 支持以下数学运算：

加法 +,
减法 -,
乘法 *,
除法 /,
取余 %,
求幂 **.

用二元运算符 `+` 连接字符串

如果加号 + 被应用于字符串，它将合并（连接）各个字符串，只要任意一个运算元是字符串，那么另一个运算元也将被转化为字符串。
```
1alert('1' + 2 + 2); // "122"，不是 "14"
```

其他算术运算符只对数字起作用，并且总是将其运算元转换为数字。

1alert( 6 - '2' ); // 4，将 '2' 转换为数字
2alert( '6' / '2' ); // 3，将两个运算元都转换为数字

数字转化，一元运算符 +

一元运算符加号，应用于单个值，对数字没有任何作用。但是如果运算元不是数字，加号 + 则会将其转化为数字：

 1// 对数字无效
 2let x = 1;
 3alert( +x ); // 1
 4
 5let y = -2;
 6alert( +y ); // -2
 7
 8// 转化非数字
 9alert( +true ); // 1
10alert( +"" );   // 0

效果和 Number(...) 相同，但是更加简短。

自增/自减

自增 ++ 将变量与 1 相加，自减 -- 将变量与 1 相减。

运算符 ++ 和 -- 可以置于变量前，也可以置于变量后。

当运算符置于变量后，被称为“后置形式”：counter++。
当运算符置于变量前，被称为“前置形式”：++counter。

Note

前置形式返回一个新的值，但后置返回原来的值（做加法/减法之前的值）。

逻辑运算符

JavaScript 中有四个逻辑运算符：||（或），&&（与），!（非），??（空值合并运算符）。

||(或)

或运算寻找第一个真值，如果不存在真值，就返回最后一个值（返回值不会做布尔运算）

获取变量列表或者表达式中的第一个真值。

1let firstName = "";
2let lastName = "";
3let nickName = "SuperCoder";
4
5alert( firstName || lastName || nickName || "Anonymous"); // SuperCoder

短路求值（Short-circuit evaluation）。|| 对其参数进行处理，直到达到第一个真值，然后立即返回该值，而无需处理其他参数。可以利用这个特性，只在左侧的条件为假时才执行命令。

&&(与)

与运算寻找第一个假值，如果没有假值就返回最后一个初始值

Tip

与运算 && 在或运算 || 之前进行 与运算 && 的优先级比或运算 || 要高。

所以代码 a && b || c && d 跟 && 表达式加了括号完全一样：(a && b) || (c && d)。

!(非)

将操作数转化为布尔类型：true/false。
返回相反的值。

两个非运算 !! 可以用来将某个值转化为布尔类型：

1alert( !!"non-empty string" ); // true
2alert( !!null ); // false

??(空值合并运算符)

当一个值既不是 null 也不是 undefined 时，我们将其称为“已定义的（defined）

a ?? b 的结果是：

如果 a 是已定义的，则结果为 a，
如果 a 不是已定义的，则结果为 b。

即：如果第一个参数不是 null/undefined，则 ?? 返回第一个参数。否则，返回第二个参数。

Tip

与 || 比较：

|| 返回第一个真值。

?? 返回第一个 已定义的 值。

JavaScript 禁止将 ?? 运算符与 && 和 || 运算符一起使用，除非使用括号明确指定了优先级。