1.
在 JavaScript 脚本中，document 表示网页文档对象；document.write() 表示调用 Document 对象的 write() 方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>
</head>
<body>
</body>
</html>
2.
alert() 表示 Window 对象的方法，调用该方法将弹出一个提示对话框，显示参数字符串 "Hello World!"。
test.js
alert("Hello World!");test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- <script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script> -->
<script type="text/javascript" src="test.js"></script>
</head>
<body></body>
</html>
3.
浏览器在解析 HTML 文档时，将根据文档流从上到下逐行解析和显示。JavaScript 代码也是 HTML 文档的组成部分，因此 JavaScript 脚本的执行顺序也是根据 < s c r i p t > <script><script> 标签的位置来确定的。
<!DOCTYPE html>
<script>
alert("顶部脚本");
</script>
<html>
<head>
<meta charset="UTF-8" />
<title>test</title>
<script>
alert("头部脚本");
</script>
</head>
<body>
<h1>网页标题</h1>
<script>
alert("页面脚本");
</script>
<p>正文内容</p>
</body>
<script>
alert("底部脚本");
</script>
</html>
4.
标识符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript">
var str = "CSDN博客：www.csdn.net";
document.write(str);
</script>
</head>
<body></body>
</html>
关键字
关键字是 JavaScript 语言中已经定义并具有特定功能的单词。它们通常用于控制程序的结构和行为。以下是常见的 JavaScript 关键字：
控制流关键字
if、else：条件语句。switch、case、default：多分支条件语句。for、while、do：循环语句。break、continue：控制循环的跳出或继续。return：从函数中返回值。
声明关键字
var、let、const：变量声明。function：函数声明。class：类声明。import、export：模块导入和导出。
其他关键字
try、catch、finally：异常处理。throw：抛出异常。new：创建对象实例。this：指向当前对象。typeof：检查变量类型。instanceof：检查对象是否为某个类的实例。delete：删除对象属性。void：表示表达式没有返回值。
保留字
保留字是 JavaScript 未来可能使用的单词，虽然当前版本中它们可能没有功能，但不能用作标识符。以下是常见的保留字：
严格模式下的保留字
implements、interface、package、private、protected、public、static：这些是面向对象编程中的概念，未来可能用于类或模块的定义。let、yield：在早期版本中是保留字，现在已经是关键字。
其他保留字
enum：枚举类型。await：用于异步操作（在异步函数中已经是关键字）。abstract、boolean、byte、char、double、final、float、goto、int、long、native、short、synchronized、throws、transient、volatile：这些是 Java 或其他语言中的关键字，JavaScript 保留它们以保持兼容性。
区分大小写
javaScript 是一种区分大小写（Case-Sensitive）的编程语言，这意味着变量名、函数名、关键字、对象属性等标识符的大小写形式不同会被视为完全不同的实体。以下是具体说明和示例：
变量和函数名区分大小写
JavaScript 中，变量名和函数名的大小写必须完全一致才能正确引用。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript">
// var str = "CSDN博客：www.csdn.net";
// document.write(str);
var myVariable = "Hello";
console.log(myVariable); // 输出 "Hello"
console.log(MyVariable); // 报错：MyVariable is not defined
</script>
</head>
<body></body>
</html>
函数名也是如此：
function sayHello() {
console.log("Hello!");
}
sayHello(); // 正常调用
SayHello(); // 报错：SayHello is not defined
直接量
1. 数值直接量
数值直接量可以是整数或浮点数，支持多种表示形式：
42 // 十进制整数
3.14 // 浮点数
0xFF // 十六进制整数（255）
0o755 // 八进制整数（493）
1.5e3 // 科学计数法（1500）2. 字符串直接量
字符串直接量是用单引号（ ' ）或双引号（ " ）包裹的字符序列：
"Hello" // 双引号字符串
'World' // 单引号字符串
`Template` // 模板字符串（ES6）转义字符
字符串中可以使用转义字符表示特殊字符：
"Line 1\nLine 2" // 换行符
"He said \"Hi\"" // 转义双引号3. 布尔直接量
布尔直接量只有两个值：
true // 真
false // 假4. 数组直接量
数组直接量是用方括号（ [] ）包裹的逗号分隔的值列表：
[1, 2, 3] // 数值数组
["a", "b", "c"] // 字符串数组
[1, "two", true, [4, 5]] // 混合类型数组5. 对象直接量
对象直接量是用花括号（ {} ）包裹的键值对集合：
{
name: "Alice",
age: 25,
isStudent: true
}6. 正则表达式直接量
正则表达式直接量是用斜杠（ / ）包裹的模式：
javascript
/^[a-z]+$/ // 匹配纯小写字母
/\d+/g // 匹配一个或多个数字7. 模板字符串直接量（ES6）
模板字符串用反引号（ ````` ）包裹，支持多行文本和插值表达式：
`Hello, ${name}!` // 插值
`Line 1
Line 2` // 多行文本8. 特殊直接量
-
null：表示空值。 -
undefined：表示未定义的值。 -
NaN：表示"非数字"（Not a Number）。null
undefined
NaN
9. 函数直接量（匿名函数）
函数直接量是通过 function 关键字定义的匿名函数：
const square = function(x) { return x * x; };JS注释
单行注释
多行注释
HTML 注释
JS 变量定义和赋值
在 JavaScript 中，变量用于存储数据值。变量的定义和赋值是编程的基础操作.
1. 变量定义
变量定义是指声明一个变量名，并为其分配存储空间。JavaScript 提供了三种定义变量的方式：
(1) var （传统方式）
-
作用域：函数作用域或全局作用域。
-
允许重复声明。
-
存在变量提升（hoisting）。
var age = 25; // 定义并赋值
var name; // 仅定义（默认值为 undefined）
(2) let （ES6 引入）
-
作用域：块级作用域（
{}内有效）。 -
不允许重复声明。
-
不存在变量提升。
let score = 90; // 定义并赋值
let city; // 仅定义
(3) const （ES6 引入）
-
作用域：块级作用域。
-
不允许重复声明或重新赋值（常量）。
-
必须初始化赋值。
const PI = 3.14; // 定义并赋值
const URL = "https://example.com";
2. 变量赋值
赋值是将一个值存储到变量中的过程。JavaScript 是动态类型语言，变量的类型可以随时改变。
基本赋值
let x = 10; // 数值
x = "Hello"; // 改为字符串
x = [1, 2, 3]; // 改为数组多变量赋值
let a = 1, b = 2, c = 3; // 一行定义多个变量解构赋值（ES6）
从数组或对象中提取值并赋给变量：
// 数组解构
let [d, e] = [4, 5]; // d=4, e=5
// 对象解构
let {firstName, lastName} = {firstName: "Alice", lastName: "Smith"};3. 默认值
如果变量未赋值，默认值为 undefined ：
let temp;
console.log(temp); // 输出 undefined
解构赋值的默认值
let [f = 10, g = 20] = [1]; // f=1, g=20
let {width = 100, height = 200} = {width: 50}; // width=50, height=2004. 变量命名规则
-
必须以字母、
_或$开头。 -
后续字符可以是字母、数字、
_或$。 -
区分大小写。
-
不能使用关键字或保留字（如
if、function）。let _private = "secret";
let $element = document.getElementById("demo");
let user1 = "Tom";
5. 注意事项
-
变量提升：
-
var声明的变量会提升到作用域顶部（值为undefined）。 -
let和const不会提升，存在"暂时性死区"。console.log(z); // undefined（var 提升）
var z = 10;console.log(y); // 报错（let 不提升）
let y = 20;
-
-
常量不可变：
const定义的常量不可重新赋值，但对象或数组的内容可以修改。javascriptconst colors = ["red", "green"]; colors.push("blue"); // 允许 colors = []; // 报错
-
全局变量：
- 未使用
var、let或const直接赋值的变量会成为全局变量（不推荐）。
javascriptfunction demo() { globalVar = "Oops!"; // 自动成为全局变量 } - 未使用
JS数据类型
JavaScript 是一种动态类型语言，变量的数据类型在运行时确定。以下是 JavaScript 中的数据类型分类及其详细说明：
1. 基本数据类型（Primitive Types）
基本数据类型是不可变的（immutable），直接存储在栈内存中。
(1) number （数字）
- 包括整数、浮点数、科学计数法等。
- 特殊值：
NaN（非数字）、Infinity（无穷大）。
javascript
let age = 25; // 整数
let price = 99.99; // 浮点数
let hex = 0xFF; // 十六进制
let result = 10 / "a"; // NaN(2) string （字符串）
- 用单引号（
'）、双引号（"）或反引号（ ````` ）包裹。 - 支持转义字符（如
\n、\t）。
javascript
let name = "Alice";
let msg = 'Hello, "Bob"';
let template = `Hi, ${name}`; // 模板字符串（ES6）(3) boolean （布尔）
- 只有两个值：
true和false。
javascript
let isStudent = true;
let isLoggedIn = false;
var c = 2 > 1; // 表达式 2 > 1 成立，其结果为"真（true）"，所以 c 的值为布尔类型的 true
var d = 2 < 1; // 表达式 2 < 1 不成立，其结果为"假（false）"，所以 c 的值为布尔类型的 false(4) undefined
- 表示变量未定义或未赋值。
javascript
let x;
console.log(x); // undefined(5) null
- 表示空值或对象不存在。
javascript
let user = null;(6) symbol （ES6 新增）
- 表示唯一的标识符，通常用于对象属性键。
javascript
let id = Symbol("unique_id");(7) bigint （ES11 新增）
- 表示任意精度的整数，后缀加
n。
javascript
let bigNum = 123456789012345678901234567890n;2. 引用数据类型（Reference Types）
引用数据类型是可变的（mutable），存储在堆内存中，变量保存的是内存地址。
(1) object （对象）
- 键值对的集合，用花括号
{}定义。
javascript
let person = {
name: "Alice",
age: 25,
isStudent: true
};(2) array （数组）
- 有序的元素集合，用方括号
[]定义。
javascript
let colors = ["red", "green", "blue"];(3) function （函数）
- 可执行的代码块。
javascript
function greet(name) {
return `Hello, ${name}!`;
}(4) 其他内置对象
Date、RegExp、Map、Set等。
javascript
let now = new Date();
let regex = /^[a-z]+$/;3. 数据类型检测
(1) typeof 操作符
- 返回数据类型的字符串表示。
- 注意：
typeof null返回"object"（历史遗留问题）。
javascript
typeof 42; // "number"
typeof "hello"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object"（注意！）
typeof []; // "object"
typeof {}; // "object"
typeof function(){}; // "function"(2) instanceof 操作符
- 检测对象是否为某个构造函数的实例。
javascript
[] instanceof Array; // true
{} instanceof Object; // true(3) Object.prototype.toString.call()
- 更精确的类型检测方法。
javascript
Object.prototype.toString.call(42); // "[object Number]"
Object.prototype.toString.call(null); // "[object Null]"4. 数据类型转换
(1) 隐式转换
-
JavaScript 在运算或比较时会自动转换类型。
"5" + 1; // "51"（字符串拼接）
"5" - 1; // 4（自动转为数字）
true + 1; // 2（true 转为 1）
(2) 显式转换
-
通过函数强制转换类型。
Number("123"); // 123
String(123); // "123"
Boolean(0); // false
5. 注意事项
-
动态类型：变量类型可以随时改变。
let x = 10; // number x = "hello"; // 变为 string -
引用类型的比较：
-
引用类型比较的是内存地址，而非内容。
let a = [1, 2];
let b = [1, 2];
console.log(a == b); // false（地址不同）
-
-
浅拷贝与深拷贝：
- 直接赋值是浅拷贝（共享引用）。
- 深拷贝需手动实现或使用工具（如
JSON.parse(JSON.stringify(obj))）。
JS 运算符汇总
1. 算术运算符
用于执行基本的数学运算。
| 运算符 | 描述 | 示例 |
|---|---|---|
+ |
加法 | 3 + 2 → 5 |
- |
减法 | 5 - 2 → 3 |
* |
乘法 | 2 * 3 → 6 |
/ |
除法 | 6 / 2 → 3 |
% |
取模（余数） | 7 % 3 → 1 |
** |
指数（ES7） | 2 ** 3 → 8 |
++ |
自增 | x++ 或 ++x |
-- |
自减 | x-- 或 --x |
注意：
-
+也可用于字符串拼接：javascript"Hello" + " " + "World" → "Hello World" -
自增/自减运算符的前缀和后缀区别：
javascriptlet x = 1; let y = x++; // y=1, x=2（后缀：先赋值后自增） let z = ++x; // z=3, x=3（前缀：先自增后赋值）
2. 赋值运算符
用于为变量赋值。
| 运算符 | 描述 | 示例 |
|---|---|---|
= |
赋值 | x = 10 |
+= |
加后赋值 | x += 5 → x=x+5 |
-= |
减后赋值 | x -= 3 → x=x-3 |
*= |
乘后赋值 | x *= 2 → x=x*2 |
/= |
除后赋值 | x /= 2 → x=x/2 |
%= |
取模后赋值 | x %= 3 → x=x%3 |
**= |
指数后赋值 | x **= 2 → x=x**2 |
3. 比较运算符
用于比较两个值，返回布尔值（ true 或 false ）。
| 运算符 | 描述 | 示例 |
|---|---|---|
== |
等于（值相等） | 5 == "5" → true |
=== |
严格等于（值和类型） | 5 === "5" → false |
!= |
不等于 | 5 != "5" → false |
!== |
严格不等于 | 5 !== "5" → true |
> |
大于 | 10 > 5 → true |
< |
小于 | 10 < 5 → false |
>= |
大于等于 | 10 >= 10 → true |
<= |
小于等于 | 10 <= 5 → false |
注意：
- 推荐使用
===和!==，避免隐式类型转换带来的问题。
4. 逻辑运算符
用于组合或反转布尔值。
| 运算符 | 描述 | 示例 |
|---|---|---|
&& |
逻辑与 | true && false → false |
| ` | ` | |
! |
逻辑非 | !true → false |
短路运算：
-
&&：如果第一个操作数为false，直接返回它，否则返回第二个操作数。javascriptfalse && console.log("不会执行"); -
||：如果第一个操作数为true，直接返回它，否则返回第二个操作数。javascript"default" || null → "default"
5. 位运算符
直接操作二进制位（较少使用）。
| 运算符 | 描述 | 示例 |
|---|---|---|
& |
按位与 | 5 & 1 → 1 |
| ` | ` | 按位或 |
^ |
按位异或 | 5 ^ 1 → 4 |
~ |
按位非 | ~5 → -6 |
<< |
左移 | 5 << 1 → 10 |
>> |
右移 | 5 >> 1 → 2 |
>>> |
无符号右移 | -5 >>> 1 → 2147483645 |
6. 三元运算符
简洁的条件判断。
| 运算符 | 描述 | 示例 |
|---|---|---|
?: |
条件运算符 | x > 5 ? "Yes" : "No" |
javascript
let result = (age >= 18) ? "Adult" : "Minor";7. 其他运算符
(1) 类型运算符
-
typeof：返回变量类型。javascripttypeof "hello" → "string" -
instanceof：检测对象是否为某构造函数的实例。javascript[] instanceof Array → true
(2) 空值合并运算符 ?? （ES11）
-
如果左侧为
null或undefined，返回右侧值。javascriptlet name = null ?? "Default"; // "Default"
(3) 可选链运算符 ?. （ES11）
-
避免访问深层属性时的报错。
javascriptlet street = user?.address?.street; // 安全访问
8. 运算符优先级
运算符的执行顺序由优先级决定（从高到低）：
()分组++--!~typeof***/%+-<<>>>>><<=>>===!====!==&&||???:=+=-=等
示例：
javascript
let result = 5 + 3 * 2; // 11（先乘后加）9. 注意事项
-
避免混淆
=（赋值）和==（比较）。 -
使用括号明确优先级，增强代码可读性。
-
注意
NaN的特殊性：javascriptNaN === NaN; // false isNaN(NaN); // true