（免费）菜狗学前端之JS基础笔记

### （免费）菜狗学前端之JS基础笔记 #### 关键知识点概述 本文将深入探讨JavaScript的基础知识，包括但不限于数据类型及其操作、控制结构（如分支语句）、JS的组成部分以及编写方法等内容。通过这些核心概念的学习，读者将能够更好地理解和掌握JavaScript的基本用法。 #### 数据类型及相关操作 在JavaScript中，数据类型主要分为两大类：原始类型和引用类型。 1. **原始类型**： - `Number`：表示数字，无论是整数还是浮点数。 - `String`：表示文本字符串。 - `Boolean`：表示布尔值，即`true`或`false`。 - `null`：表示空值，是一个特殊的值。 - `undefined`：表示未定义的值。 - `Symbol`：表示唯一的值，主要用于创建唯一标识符。 2. **引用类型**： - `Object`：用于创建自定义的数据结构。 - `Array`：用于存储有序的列表数据。 - `Function`：用于封装可执行的代码块。 ##### 数据类型的转换 - **隐式转换**：在某些情况下，JavaScript会自动进行类型转换。 - **显式转换**：开发者可以通过特定的方法进行类型转换，例如： - `Number()`：将其他类型转换为数字。 - `String()`：将其他类型转换为字符串。 - `Boolean()`：将其他类型转换为布尔值。 #### 控制结构 ##### 分支语句 - **if 语句**：基于条件执行不同的代码块。 ```javascript if (condition) { // 条件为真时执行的代码 } else { // 条件为假时执行的代码 } ``` - **switch 语句**：根据不同的条件执行不同的代码块。 ```javascript switch (expression) { case value1: // 当 expression 的值等于 value1 时执行的代码 break; case value2: // 当 expression 的值等于 value2 时执行的代码 break; default: // 当 expression 的值不匹配任何 case 时执行的代码 } ``` #### JavaScript的组成部分 JavaScript主要由以下三个部分组成： 1. **ECMAScript**（最新的版本为ES6）：这是JavaScript的基础语法和核心知识，定义了语言的基本结构和功能。 2. **DOM (Document Object Model)**：文档对象模型，用于操作HTML文档中的元素，例如修改页面内容、样式等。 3. **BOM (Browser Object Model)**：浏览器对象模型，提供了与浏览器交互的功能，如弹出窗口、获取浏览器信息等。 #### JS的编写方法 1. **行内写法**：直接在HTML元素中通过事件属性来绑定JavaScript代码。 ```html <button onclick="alert('js行内写法')">行内写法</button> ``` 2. **内部写法**：在HTML文档的`<script>`标签内编写JavaScript代码。 ```html <button onclick="fn()">内部写法</button> <script> function fn() { alert('js内部写法'); } </script> ``` 3. **外部写法**：将JavaScript代码单独存放在一个`.js`文件中，并通过`<script>`标签引入。 ```html <script src="./out.js"></script> ``` ```javascript // out.js 文件 function fn1() { alert('js外部写法'); } ``` 4. **混合写法**：虽然不太常见，但在某些情况下可能会看到将内部和外部写法混合使用的情况。 #### 注释与输出语句 1. **注释**： - 单行注释：使用`//`。 - 多行注释：使用`/* */`。 2. **输出语句**： - `console.log()`：用于在控制台输出信息，便于调试。 - `alert()`：用于弹出一个警告框，显示指定的信息。 通过以上内容的学习，我们不仅掌握了JavaScript的基础语法，还学会了如何通过不同方式来组织和编写JavaScript代码，这对于进一步学习前端开发是非常重要的。