JavaScript part2—JavaScript的基本语法

JavaScript 基础语法

浏览器与控制台使用JS

JavaScript代码可以直接嵌在网页的任何地方，由<script>...</script>包含的代码就是JavaScript代码，它将直接被浏览器执行。

在开发 JavaScript 应用时，浏览器是我们的主要战场，而浏览器的开发者工具（特别是控制台）则是我们调试和学习的基本交互位置。

一般我们把JavaScript代码放到一个单独的.js文件，然后在HTML中通过<script src="..."></script>引入这个文件：

<html>
<head>
    <script src="/static/js/abc.js"></script>
</head>
<body>
    ...
</body>
</html>

这样，/static/js/abc.js就会被浏览器执行。

把JavaScript代码放入一个单独的.js文件中更利于维护代码，并且多个页面可以各自引用同一份.js文件。

要让浏览器运行JavaScript，必须先有一个HTML页面，在HTML页面中引入JavaScript，然后，让浏览器加载该HTML页面，就可以执行JavaScript代码。一般，我们在开发者工具查看详细信息，怎么在浏览器中调试JavaScript代码呢？

如何查看开发者工具，F12

开发者工具 (Developer Tools)：
- Elements (元素)：用于检查和修改页面的 HTML 结构和 CSS 样式。在爬取网站或调试布局时非常有用。
- Console (控制台)：这是 JavaScript 开发者最常用的面板。
  - console.log()：用于在控制台打印变量、对象或任何信息，是调试代码的常用手段，类似于 Java 的System.out.println()。
  - console.warn()：打印警告信息。
  - console.error()：打印错误信息。
  - console.info()：打印信息。
  - console.table()：以表格形式打印复杂数据结构（如数组或对象数组）。
- Sources (源代码)：用于查看页面的 JavaScript、CSS 文件，并可以设置断点进行单步调试。
- Network (网络)：监控页面加载的所有网络请求，包括它们的请求头、响应头、状态码和加载时间。
- Application (应用)：管理网站的存储数据，如 Cookie、LocalStorage、SessionStorage 等

JavaScript基本语法与核心特性

注释：用于解释代码，不影响程序执行，分为两种：
- 单行注释：// 这是单行注释（快捷键：Ctrl+/）。
- 多行注释：/* 这是多行注释，可跨多行 */（常用于注释复杂逻辑或临时屏蔽代码块）。
标识符命名规则：变量、函数、对象属性等的命名需遵循
- 由字母、数字、下划线（_）或美元符号（$）组成。
- 不能以数字开头。
- 不能使用 JavaScript 关键字（如 let、function、if 等）或保留字（如 class、enum 等）。
- 惯例：变量和函数名使用小驼峰命名法（如 userName、calculateTotal）；构造函数或类使用大驼峰命名法（如 Person、ShoppingCart）。
JavaScript 严格区分大小写：例如 myVariable 和 myvariable 是两个不同的变量。
空格与缩进：JavaScript 忽略多余空格，但规范的缩进（通常为 2 或 4 个空格）能极大提升代码可读性
语句结束符：JavaScript 语句通常以分号 ; 结尾。虽然在某些情况下可以省略（由 JavaScript 引擎自动添加，称为“自动分号插入”），但为了代码的可读性和避免潜在错误，强烈建议始终使用分号。
JS 是弱类型（动态类型）：变量的类型无需声明，且可随时改变（由 JavaScript 引擎在运行时自动判断）：
1
2
3
let x = 10; // 初始为数字
x = "hello"; // 变为字符串
x = true; // 变为布尔值
优势：灵活便捷；劣势：可能因类型隐式转换导致意外错误（需注意 == 与 === 的区别：== 会自动转换类型，=== 严格比较类型和值）。
函数是一等公民

函数与其他数据类型（如数字、字符串）地位相同，可：
- 赋值给变量：const add = function(a, b) { return a + b; }。
- 作为参数传递给其他函数（回调函数）：[1, 2].forEach(item => console.log(item))。
- 作为函数返回值：function createAdder(n) { return (x) => x + n; }。
原型继承

JavaScript 不通过 “类”（ES6 前）而是通过原型链实现继承：每个对象都有 __proto__ 属性（指向其原型对象），原型对象的属性和方法可被实例共享。
1
2
3
const arr = [1, 2];
// arr 继承自 Array.prototype，因此能使用 push、map 等方法
arr.push(3); // [1, 2, 3]
ES6 引入 class 语法糖，但本质仍是原型继承的封装。