JavaScript 基础核心知识点详解

浏览器分成渲染引擎 + JS 引擎

• 渲染引擎：解析 html+CSS，俗称 "内核"
• JS 引擎：也就是 JS 解释器，典型的就是 Chrome 中内置的 V8JS 引擎逐行读取 JS 代码内容，然后解析成二进制指令，再执行。

JavaScript 的组成

• ECMAScript (简称 ES):JavaScript 语法
• DOM: 页面文档对象模型，对页面中的元素进行操作
• BOM: 浏览器对象模型，对浏览器窗口进行操作

光有 JS 语法，只能写一些基础的逻辑流程。但是想要完成更复杂的任务，完成和浏览器以及页面的交互，那么就需要 DOM API 和 BOM API。这主要指在浏览器端运行的 JS，如果是运行在服务端的 JS，则需要使用 node.js 的 API，就不太需要关注 DOM 和 BOM。

重要概念：ECMAScript

这是一套 "标准", 无论是啥样的 JS 引擎都要遵守这个标准来实现。啥叫标准？车同轨，书同文，秦始皇最大的贡献之一，就是制定了一套标准。三流公司做产品，一流公司做标准。

前置知识

第一个程序

<script> alert("你好!"); </script>

• JavaScript 代码可以嵌入到 HTML 的 script 标签中。

JavaScript 的书写形式

1. 行内式直接嵌入到 html 元素内部

<input type="button" value="点我一下" onClick="alert('haha')">

注意：JS 中字符串常量可以使用单引号表示，也可以使用双引号表示。HTML 中推荐使用双引号，JS 中推荐使用单引号！

1. 内嵌式写到 script 标签中

<script> alert("haha"); </script>

1. 外部式写到单独的.js 文件中

<script src="hello.js"></script>

// hello.js 文件内容 alert("hehe");

注意：这种情况下 script 标签中间不能写代码，必须空着 (写了代码也不会执行)。适合代码多的情况。

注释

• 单行注释 //（建议使用）
• 多行注释 /* */

// 我是单行注释 /* 我是多行注释 我是多行注释 我是多行注释 */

使用 ctrl + / 切换注释。多行注释不能嵌套，形如这种代码就会报错:

/* /* 我是多行注释 我是多行注释 */ */

输入输出

输入：prompt

弹出一个输入框

// 弹出一个输入框 prompt("请输入您的姓名:");

输出：alert

弹出一个警示对话框，输出结果

// 弹出一个输出框 alert("hello");

输出：console.log

在控制台打印一个日志 (供程序员看)

// 向控制台输出日志 console.log("这是一条日志");

注意：在 VSCode 中直接输入 log 再按 tab 键，就可以快速输入 console.log。需要打开浏览器的开发者工具 (F12) => Console 标签页 才能看到结果。

这样的输出一般不是给普通用户看的，而是程序员来看的。

重要概念：日志

日志是程序员调试程序的重要手段。去医院看病，医生会让患者做各种检查，血常规，尿常规，B 超，CT 等... 此时得到一堆检测结果。这些结果普通人看不懂，但是医生能看懂，并且医生要通过这些信息来诊断病情。这些检测结果就是医生的 "日志"。PS: 相比于医生来说，程序猿多一个终极大招，"重启下试试"。

重要概念:

• console 是一个 js 中的 "对象"
• . 表示取对象中的某个属性或者方法，可以直观理解成 "的"
• console.log 就可以理解成：使用 "控制台" 对象 "的" log 方法。

语法概览

JavaScript 虽然一些设计理念和 Java 相去甚远，但是在基础语法层面上还是有一些相似之处的。有了 Java 的基础很容易理解 JavaScript 的一些基本语法。

变量的使用

基本用法

创建变量 (变量定义 / 变量声明 / 变量初始化)

var name = 'zhangsan'; var age = 20;

• var 是 JS 中的关键字，表示这是一个变量。
• = 在 JS 中表示'赋值'，相当于把数据放到内存的盒子中。= 两侧建议有一个空格
• 每个语句最后带有一个 ; 结尾。JS 中可以省略；但是建议还是加上。
• 注意：此处的 ; 为英文分号。JS 中所有的标点都是英文标点。
• 初始化的值如果是字符串，那么就要使用单引号或者双引号引起来。
• 初始化的值如果是数字，那么直接赋值即可。

使用变量

console.log(age); // 读取变量内容 age = 30; // 修改变量内容

为啥动漫中的角色都是要先喊出技能名字再真正释放技能？就是因为变量要先声明才能使用。

代码示例：弹窗提示用户输入信息，再弹窗显示。

var name = prompt("请输入姓名:"); var age = prompt("请输入年龄:"); var score = prompt("请输入分数:"); alert("您的姓名是：" + name); alert("您的年龄是：" + age); alert("您的分数是：" + score);

也可以把三个输出内容合并成一次弹窗

var name = prompt("请输入姓名:"); var age = prompt("请输入年龄:"); var score = prompt("请输入分数:"); alert("您的姓名是：" + name + "\n" + "您的年龄是：" + age + "\n" + "您的分数是：" + score + "\n");

• + 表示字符串拼接，也就是把两个字符串首尾相接变成一个字符串。
• \n 表示换行

JavaScript 中还支持使用 let 定义变量，用法和 var 基本类似。用法上的差异此处暂时不讨论。

理解动态类型

1. JS 的变量类型是程序运行过程中才确定的 (运行到 - 语句才会确定类型)

var a = 10; // 数字 var b = "hehe"; // 字符串

1. 随着程序运行，变量的类型可能会发生改变。

var a = 10; // 数字 a = "hehe"; // 字符串

这一点和 C Java 这种静态类型语言差异较大。C, C++, Java, Go 等语言是静态类型语言。一个变量在创建的时候类型就确定了，不能在运行时发生改变。如果尝试改变，就会直接编译报错。

基本数据类型

JS 中内置的几种类型

• number: 数字。不区分整数和小数。
• boolean: true 真，false 假。
• string: 字符串类型。
• undefined: 只有唯一的值 undefined。表示未定义的值。
• null: 只有唯一的值 null。表示空值。

number 数字类型

JS 中不区分整数和浮点数，统一都使用'数字类型'来表示。

数字进制表示

计算机中都是使用二进制来表示数据，而人平时都是使用十进制。因为二进制在使用过程中不太方便 (01 太多会看花眼)。所以在日常使用二进制数字时往往使用八进制和十六进制来表示二进制数字。

var a = 07; // 八进制整数，以 0 开头 var b = 0xa; // 十六进制整数，以 0x 开头 var c = 0b10; // 二进制整数，以 0b 开头

注意:

• 一个八进制数字对应三个二进制数字
• 一个十六进制数字对应四个二进制数字。(两个十六进制数字就是一个字节)

各种进制之间的转换，不需要手工计算，直接使用计算器即可。

特殊的数字值

• Infinity: 无穷大，大于任何数字。表示数字已经超过了 JS 能表示的范围。
• -Infinity: 负无穷大，小于任何数字。表示数字已经超过了 JS 能表示的范围。
• NaN: 表示当前的结果不是一个数字。

var max = Number.MAX_VALUE; // 得到 Infinity console.log(max * 2); // 得到 -Infinity console.log(-max * 2); // 得到 NaN console.log('hehe' - 10);

注意:

1. 负无穷大和无穷小不是一回事。无穷小指无限趋近与 0，值为 1 / Infinity
2. 'hehe' + 10 得到的不是 NaN，而是 'hehe10'，会把数字隐式转成字符串，再进行字符串拼接。
3. 可以使用 isNaN 函数判定是不是一个非数字。

console.log(isNaN(10)); // false console.log(isNaN('hehe' - 10)); // true

string 字符串类型

基本规则

字符串字面量需要使用引号引起来，单引号双引号均可。

var a = "haha"; var b = 'hehe'; var c = hehe; // 运行出错

如果字符串中本来已经包含引号咋办？

var msg = "My name is \"zhangsan\""; // 正确，使用转义字符。"\"" 来表示字符串内部的引号。 var msg = "My name is 'zhangsan'"; // 正确，搭配使用单双引号 var msg = 'My name is "zhangsan"'; // 正确，搭配使用单双引号

转义字符

有些字符不方便直接输入，于是要通过一些特殊方式来表示。

• \n
• \\
• \'
• \"
• \t

求长度

使用 String 的 length 属性即可

var a = 'hehe'; console.log(a.length); var b = "哈哈"; console.log(b.length);

4 2

单位为字符的数量

字符串拼接

使用 + 进行拼接

var a = "my name is "; var b = "zhangsan"; console.log(a + b);

注意，数字和字符串也可以进行拼接

var c = "my score is "; var d = 100; console.log(c + d);

注意，要认准相加的变量到底是字符串还是数字

console.log(100 + 100); // 200 console.log('100' + 100); // 100100

boolean 布尔类型

表示'真'和'假'。boolean 原本是数学中的概念 (布尔代数)。在计算机中 boolean 意义重大，往往要搭配条件/循环完成逻辑判断。

Boolean 参与运算时当做 1 和 0 来看待。

console.log(true + 1); console.log(false + 1)

这样的操作其实是不科学的，实际开发中不应该这么写。

undefined 未定义数据类型

如果一个变量没有被初始化过，结果就是 undefined，是 undefined 类型

var a; console.log(a)

undefined 和字符串进行相加，结果进行字符串拼接

console.log(a + "10"); // undefined10

undefined 和数字进行相加，结果为 NaN

console.log(a + 10);

null 空值类型

null 表示当前的变量是一个'空值'。

var b = null; console.log(b + 10); // 10 console.log(b + "10"); // null10

注意:null 和 undefined 都表示取值非法的情况，但是侧重点不同。

• null 表示当前的值为空。(相当于有一个空的盒子)
• undefined 表示当前的变量未定义。(相当于连盒子都没有)

本章小结

本文系统介绍了 JavaScript 的核心基础，包括其定义、发展历程及运行原理。掌握了变量声明、作用域、数据类型及基本运算符后，即可开始编写简单的交互逻辑。后续学习将深入探讨 DOM 操作、事件处理及异步编程等内容。