【前端(十一)】JavaScript 语法基础笔记（多语言对比）

文章目录

[1. 什么是 JavaScript？](#1. 什么是 JavaScript？)
- [1.1 诞生小史](#1.1 诞生小史)
- [1.2 JavaScript 的特点](#1.2 JavaScript 的特点)
- [1.3 静态页面与动态页面](#1.3 静态页面与动态页面)
[2. JavaScript 的编写位置](#2. JavaScript 的编写位置)
- [2.1 行内式](#2.1 行内式)
- [2.2 内部式](#2.2 内部式)
- [2.3 外部式（最推荐）](#2.3 外部式（最推荐）)
- [2.4 理解脚本的执行](#2.4 理解脚本的执行)
[3. 语法基础](#3. 语法基础)
- [3.1 注释](#3.1 注释)
- [3.2 关键字](#3.2 关键字)
- [3.3 变量与数据类型](#3.3 变量与数据类型)
- - [3.3.1 变量的声明](#3.3.1 变量的声明)
  - [3.3.2 标识符命名规则](#3.3.2 标识符命名规则)
  - [3.3.3 数据类型](#3.3.3 数据类型)
  - [3.3.4 使用 typeof 查看类型](#3.3.4 使用 typeof 查看类型)
  - [3.3.5 常量](#3.3.5 常量)
- [3.4 运算符](#3.4 运算符)
- - 基本运算符速览
  - 多语言核心对比
  - [重点案例理解：5 == "5" 和 5 == 5.0 为什么结果不同？](#重点案例理解：5 == "5" 和 5 == 5.0 为什么结果不同？)

1. 什么是 JavaScript？

JavaScript 是一种轻量级的脚本语言 。所谓"脚本语言"，指的是它本身不具备开发大型系统软件（如操作系统）的能力，而是专门用来"指挥"其他大型应用程序（比如浏览器）完成特定任务的语言。

回忆：前端最核心的三门技术是 HTML、CSS 和 JavaScript，它们的职责各有分工：

HTML ：控制网页的结构和内容
CSS ：控制网页的样式和外观
JavaScript ：控制网页的行为与动态交互

1.1 诞生小史

早期网景（Netscape）公司为了在浏览器端解决"向服务器提交数据前先进行验证"的问题（如果所有验证都要经过服务器，服务器压力太大），在 Netscape Navigator 2.0 中与 Sun 公司合作开发了一门脚本语言。最初它叫 LiveScript，后来为了借着当时如日中天的 Java 的名气进行营销，改名为 JavaScript 。

1996 年，微软在 IE3 中引入了自己的 JavaScript 实现，取名为 JScript。此后各家浏览器都推出了各自的实现，为了保证互操作性，欧洲计算机制造商协会（ECMA）以网景的 JavaScript 为基础，制定了 ECMA-262 标准，这个标准定义的语言叫作 ECMAScript 。

我们日常说的 "JavaScript"，广义上指的就是遵循 ECMAScript 标准的各种实现，可以说 ECMAScript 是标准，JavaScript 是它的实现。

虽然名字里都有 "Java"，但 JavaScript 与 Java 是两门完全独立的语言。唯一说得上的一点关系是：JavaScript 借鉴了 Java 的不少语法规则和命名习惯，但本质上设计思路和运行机制都截然不同------后面会详细对比。

1.2 JavaScript 的特点

解释型语言：不需要预先编译，浏览器拿到源代码直接解释执行。
动态语言：变量的类型会在运行时根据所赋的值动态确定，无需事先声明类型。
基于原型的面向对象：和 Java、C++ 等基于类的面向对象不同。
跨平台性：只依赖于浏览器环境，与操作系统无关，只要能运行支持 JavaScript 的浏览器就能执行。
类似 C / Java 的语法结构：大括号、分号、控制流等看着眼熟，学习过C或者Java等编程语言的同学更容易上手。

1.3 静态页面与动态页面

一个常见的误区是："页面动起来了就是动态页面" 。

实际上，静态和动态的区分标准是：页面内容是否由服务器端程序和数据动态生成。

类型	特征	类比
静态页面	服务器上存放的就是写死的 `.html` 文件，任何人访问看到的内容都一样。	一张打印好的海报，谁来看都一样。
动态页面	网页内容会根据时间、用户、操作、数据库中的数据等动态生成，不同人、不同时间看到的内容可能不同。	一面实时更新的电子广告牌，管理员可在后台修改内容，所有屏幕立即变化。

轮播图的例子：

静态页面中的轮播图

图片地址直接写在 HTML 或 JS 中（如 img/banner1.jpg），这些图片就是服务器上的普通文件。想换图，必须手动修改代码或替换文件。有动画，但内容写死------依然是静态页面。
动态页面中的轮播图

后台有管理系统，管理员可以上传、删除、排序图片，图片信息存储在数据库的 banners 表里（如 image_url, order 字段）。用户访问首页时，服务器或前端通过接口请求数据库，拿到当前应显示的图片列表再渲染出来。管理员后台一改，所有用户看到的内容立刻变化------这才是动态页面。

简而言之：如果有后端数据库驱动的实时内容变化，就是动态页面；仅仅前端轮播动画效果，内容写死在文件或代码里，仍是静态页面。

2. JavaScript 的编写位置

这部分与 CSS 的编写位置知识高度相似（CSS 编写位置详解可以参考这里），但因为语言特性不同，细节上有所差别。

2.1 行内式

位置：直接写在 HTML 标签的事件属性中。

示例：

html 复制代码

<button onclick="alert('点击了按钮！')">点我</button>

特点：
- 优点：直接、无需单独文件或标签。
- 缺点：
  1. 结构与行为未分离，HTML 与 JS 耦合，不利于维护。
  2. 无法复用，只对当前这一个标签有效。
使用场景：极少使用，通常仅在临时测试或必须内联的简单交互时用到。

2.2 内部式

位置：写在 HTML 页面内的 <script> 标签中，通常放在 </body> 前（也可以放在 <head> 内）。

示例：

html 复制代码

<body>
    <h1 id="title">欢迎</h1>
    <script>
        var title = document.getElementById('title');
        title.style.color = 'red';
    </script>
</body>

特点：
- 优点：一个页面内的脚本可以复用，便于维护本页面的行为。
- 缺点：
  1. 结构和行为并未彻底分离。
  2. 脚本无法在多个 HTML 页面之间复用。
使用场景：单个页面的简单逻辑、学习测试时的临时脚本。

2.3 外部式（最推荐）

位置：将 JavaScript 代码单独存放在 .js 文件中，再通过 <script> 标签引入 HTML。
步骤：
1. 创建一个 .js 文件，比如 index.js，写入 JavaScript 代码：
  javascript 复制代码
```
// index.js
var title = document.getElementById('title');
title.style.color = 'red';
```
2. 在 HTML 文件中使用 <script src="..."> 引入：
  html 复制代码
```
<script src="./index.js"></script>
```
  - src 属性：source 的缩写，指向外部脚本文件路径。
  - 注意：CSS 是通过 <link> 标签的 href 属性引入，JS 是通过 <script> 标签的 src 属性引入，两者的引入方式不同。
特点：
- 优点：
  1. 实现了结构与行为的完全分离，代码结构清晰。
  2. 一个 .js 文件可以被多个 HTML 文件复用，大大提高开发效率。
- 缺点：增加了一次 HTTP 请求（不过利用缓存可忽略影响）。
使用场景：实际开发中的标准做法，也是最为推荐的方式。

2.4 理解脚本的执行

CSS 的样式是可以层叠覆盖的（后面的样式会覆盖前面的冲突样式），但 JavaScript 完全不同：

多个 <script> 标签中的代码，只要不是对同一个变量或函数重复定义而产生冲突，都会按顺序依次执行。
如果定义了同名的变量或函数，最后执行的会覆盖前面的，但这和标签写在哪里无关，只和执行顺序有关。

3. 语法基础

JavaScript 的语法与 Java、C++ 有许多相似之处，这里重点讲解它们的不同点 ，方便有 C++/Java 基础的同学理解记忆，也兼顾零基础同学。（Java 语法基础可参考这里）

3.1 注释

单行注释 ：以 // 开始，该行其后的内容均为注释。快捷键：Ctrl + /。
多行注释 ：介于 /* 和 */ 之间的所有内容均为注释。快捷键：Ctrl + Shift + /。
注意：HTML、CSS、JavaScript 注释形式不同，切勿混淆。
- HTML：
- CSS：/* 注释 */
- JavaScript：// 或 /* */

3.2 关键字

JavaScript 中也有一系列具有特殊意义的关键字 （也叫保留字），例如 var、if、for、function、return、true、false 等。

但要特别注意：JavaScript 里完全没有 int、double、float、boolean、char 这类用来声明具体类型的关键字 。这和 Python 完全一致，声明变量时根本不需要指定它是 int 还是 string，直接赋值即可，微小区别见下节。
而 Java 和 C++ 则完全相反 ：每个变量都必须提前声明好具体的数据类型（如 int x;），编译时类型就固定了，后续不能随便换成别的类型。

JavaScript 和 Python 不需要这些类型关键字，本质原因在于它们都是动态类型语言，变量的类型由运行时所赋的值来决定，同一个变量可以随意存放任意类型的值。
javascript 复制代码
let a = 5;      // 此时 a 是 number，值为 5
a = "4";        // 现在 a 变成了 string，值为 >"4" ------ 完全合法
a = true;       // 又变成 boolean ------ 依然没>问题
为什么可以这样？

因为变量只是存放值的"容器"，没有固定的数据类型，赋值的那一刻才决定当前值的类型 。这点和 Python 一模一样 （Python 中 a = 5; a = "4" 同样允许），但与 Java、C++ 不同 后者的变量一旦声明了类型（如 int a;），就永远只能存这种类型的值，否则直接编译报错。

3.3 变量与数据类型

3.3.1 变量的声明

在 JavaScript 中，所有变量都需要使用声明符来创建。早期版本主要使用 var，现代 JavaScript (ES6+) 还引入了 let 和 const。

javascript 复制代码

var name = "小明";
let age = 18;
const PI = 3.14;

var：旧式声明方式，作用域为函数级，存在变量提升等特性。
let：声明的变量具有块级作用域，更为安全可控。
const：声明常量，值一旦确定就不能再修改，同样具有块级作用域。

3.3.2 标识符命名规则

标识符指的是变量名、函数名等，命名规则与 Java 基本一致：

由字母、数字、下划线 _、美元符号 $ 组成。
不能以数字开头。

命名风格习惯

语言	变量/函数命名风格	常量	类名
JavaScript	小驼峰：`myVariable`, `doSomething`	全大写+下划线：`MAX_SIZE`	大驼峰：`MyClass`
Java	小驼峰：`myVariable`, `doSomething`	全大写+下划线：`MAX_SIZE`	大驼峰：`MyClass`
Python	小写+下划线：`my_variable`, `do_something`	全大写+下划线：`MAX_SIZE`	大驼峰：`MyClass`

JavaScript 的命名习惯几乎就是完全照搬 Java 的驼峰体系，而 Python 则偏好用下划线分隔单词。

3.3.3 数据类型

JavaScript 的数据类型分为基本类型 和引用类型 两大类。

基本类型有：

类型	说明	举例
`number`	数值，包含整数和浮点数，不细分 int/float/double	`5`, `3.14`, `-10`
`string`	字符串，使用单引号或双引号括起，没有独立的字符类型（单个字符也是字符串）	`"hello"`, `'A'`
`boolean`	布尔值，只有两个值：`true` 和 `false`	`true`, `false`
`null`	空值，表示一个"空对象指针"，需要有意赋值	`var obj = null;`
`undefined`	未定义，变量声明但未赋值时的默认值	`var a;` 后 `a` 的值为 `undefined`

疑惑解答：

Q1 ：undefined 是什么？和 Java、C++、Python 有什么不同？
A ：undefined 是 JS 的一个特殊基本类型值，表示"未定义"。变量声明但未赋值 时，它的值就是 undefined。

Java 和 C++ 中，变量必须先声明类型，且局部变量不初始化就会导致编译错误或未定义行为。Python 中变量必须先赋值才能使用，而 JavaScript 的 var/let 只声明不赋值，变量的值会被自动置为 undefined，不会报错。
疑惑解答 ：
Q2：JS 里有没有字符类型？
A ：没有 。单个字符如 'a' 就是长度为 1 的字符串。这和 Python 完全一样。Java 里有独立的 char 类型，C++ 里 char 是 1 字节整数。

3.3.4 使用 typeof 查看类型

可以用 typeof 运算符检测一个变量的数据类型，返回一个字符串。

javascript 复制代码

typeof 5;          // "number"
typeof 'hello';    // "string"
typeof true;       // "boolean"

3.3.5 常量

使用 const 声明的量称为常量，必须在声明时初始化，且后续不可改变。Java 中用 final，C++ 中用 const 或 constexpr，Python 中靠约定全大写。

javascript 复制代码

const BIRTH_YEAR = 2000;
BIRTH_YEAR = 2001;  // 报错！常量不可修改

3.4 运算符

JavaScript 的运算符与 Java、C++ 非常相似，下面列出常用种类与核心区别。

基本运算符速览

类别	符号
算术运算符	`+` `-` `*` `/` `%`
赋值运算符	`=` `+=` `-=` `*=` `/=` `%=`
比较运算符	`==` `!=` `>` `>=` `<` `<=` `===` `!==`
逻辑运算符	`&&` `
自增/自减	`++` `--`
三元运算符	`条件 ? 表达式1 : 表达式2`

多语言核心对比

特性	JavaScript	Java	Python	C++
类型系统	动态、弱类型	静态、强类型	动态、强类型	静态、强类型
变量声明	var x = 5	int x = 5	x = 5	int x = 5
字符串拼接 `+`	隐式转换，`"5"+5` → `"55"`	同样隐式，`"5"+5` → `"55"`	必须显式，`"5"+5` 报错	字符串`+`靠对象重载，数字不能自动转
取模 `%`	可用于整数和浮点数	可用于整数和浮点数	可用于整数和浮点数	只能用于整数
相等比较	`==`(类型转换后比较) `===`(严格相等，值和类型均需要相等，类型不同直接不等)	`==`(基本类型比值，引用比地址)，无`===`	`==`(内容相等，类型不同直接不等)，无`===`	`==`(同Java)，无`===`
逻辑运算符	`&&` `		!`（短路）	`&&` `
自增/自减	`i++` `i--`	`i++` `i--`	无，只能`i+=1`	`i++` `i--`（可用于迭代器）
三元运算符	`条件?值1:值2`	相同	`值1 if 条件 else 值2`	相同

特别说明解释：
Java / JavaScript ：只要 + 一端是字符串，就会执行字符串拼接 ，另一端自动转为字符串；
Python ：+ 要求两边都是字符串 ，否则抛出 TypeError，必须显式转换。

重点案例理解：5 == "5" 和 5 == 5.0 为什么结果不同？

表达式	C++	Java	Python	JavaScript
`5 == "5"`	❌ 编译报错	❌ 编译报错	`False`	`true`
`5 == 5.0`	`true`	`true`	`True`	`true`

原因解读：

5 == 5.0：整数和浮点数都属于"数字家族"，各语言在进行比较时都会自动进行数值类型提升，所以相等。
5 == "5"：跨了数字和字符串两个家族。
- C++/Java 在编译时就禁止不同类型直接比较，直接报错。
- Python 是强类型语言，认为类型不同就不相等，不会自动转换，结果为 False。
- JavaScript 是弱类型语言，== 运算符会下意识把字符串 "5" 转换成数字 5 再比较，所以结果是 true。
- 为了规避这种自动转换可能带来的奇怪结果，JavaScript 特意提供了严格相等 === ，它不会进行类型转换，类型不同直接返回， false因此 5 === "5" 的结果是 false。

以上为个人学习总结，旨在梳理个人理解。如有疏漏或不当之处，欢迎指正与交流。