javascript基础语法

### JavaScript基础语法详解 #### 一、JavaScript简介 JavaScript是一种广泛使用的编程语言，主要用于Web开发。ECMAScript标准定义了JavaScript的核心语法。 ##### 1.1 JavaScript书写位置 JavaScript可以在HTML文档的不同位置进行编写： - **内部JavaScript**：直接写在HTML文件中，通常放在`<script>`标签内。推荐放在`</body>`标签之前。 ```html <script> alert('你好，js'); </script> ``` - **外部JavaScript**：将JavaScript代码放在单独的`.js`文件中，并通过`<script>`标签将其链接到HTML文档。 ```html <script src="script.js"></script> ``` 其中`script.js`是外部JavaScript文件。 - **内联JavaScript**：将JavaScript代码直接写在HTML标签内，如使用`onclick`属性。 ```html <button onclick="alert('点击了按钮')">点击我</button> ``` ##### 1.2 JavaScript怎么写 - **结束符**：JavaScript语句可以以分号结尾，但不是必须的。使用分号可以提高代码可读性和避免某些语法问题。 - **输入和输出** - **输出语法**： - `document.write('输出的内容')`：在HTML文档的body部分输出文本。 - `alert('输出的内容')`：弹出一个警告对话框显示文本。 - `console.log('控制台打印')`：在浏览器的开发者工具控制台中输出文本。 - **输入语法**：`prompt('请输入你的姓名：')`，显示一个对话框让用户输入文本。 #### 二、变量 ##### 2.1 变量的概念 变量是用于存储数据的容器。 ##### 2.2 变量的基本使用 - **声明变量**：使用`let`关键字声明变量。 ```javascript let myVar; ``` - **赋值变量**：使用等号`=`为变量赋值。 ```javascript let myVar = 10; ``` ##### 2.3 变量的本质 变量是在内存中分配的一块存储数据的空间。 ##### 2.4 变量命名规范 - 变量名应具有描述性。 - 使用驼峰命名法（camelCase），例如`myVariableName`。 - 避免使用JavaScript关键字。 ##### 2.5 let 和 var 的区别 - `let`声明的变量具有块级作用域，而`var`声明的变量具有函数作用域。 - `let`不允许在同一作用域内重复声明同一变量，而`var`允许。 - `let`声明的变量不会提升到当前作用域的顶部。 ##### 2.6 数组 - **声明语法**： ```javascript let arr = [1, 2, 'pink', true]; let arr = new Array(1, 2, 3, 4); ``` - **遍历数组**： ```javascript for (let i = 0; i < arr.length; i++) { console.log(arr[i]); } ``` #### 三、常量 - 使用`const`声明的变量称为“常量”。 - 常量在声明时必须初始化，并且不能重新赋值。 ```javascript const PI = 3.14; ``` #### 四、数据类型 ##### 4.1 基本数据类型 - `number`：数字类型，包括整数和浮点数。 - `string`：字符串类型，用单引号、双引号或反引号表示。 - `boolean`：布尔类型，只有两个值`true`和`false`。 - `undefined`：未定义类型，表示变量已经声明但未赋值。 - `null`：空类型，表示没有值。 ##### 4.2 引用数据类型 - `object`：对象类型，可以包含各种其他数据类型的属性。 ##### 4.3 算术运算符优先级 JavaScript中的算术运算符遵循特定的优先级规则，如乘除先于加减。 ##### 4.4 检测数据类型 - 使用`typeof`关键字检测数据类型。 ```javascript console.log(typeof myVar); ``` ##### 4.5 类型转换 - **隐式转换**：JavaScript会在某些情况下自动进行类型转换。 - **显示转换**：使用特定方法或构造函数显式地转换数据类型。 #### 五、运算符 ##### 5.1 赋值运算符 - `=`：简单赋值。 - `+=`、`-=`、`*=`、`/=`、`%=`：复合赋值运算符。 ##### 5.2 一元运算符 - 自增(`++`)和自减(`--`)运算符。 - 比较运算符，如`==`、`!=`、`===`、`!==`。 - 逻辑运算符，如`&&`、`||`、`!`。 ##### 5.3 运算符优先级 不同运算符有不同的优先级，例如括号`()`的优先级最高。 #### 六、语句 ##### 6.1 表达式与语句的区别 - 表达式是计算值的组合，如`1 + 2`。 - 语句是完成某个动作的指令，如`if`语句。 ##### 6.2 分支语句 - **if 分支语句**： ```javascript if (condition) { // 条件满足要执行的代码 } else if (anotherCondition) { // 另一个条件满足要执行的代码 } else { // 不满足条件执行的代码 } ``` - **三目运算符**： ```javascript let result = condition ? valueIfTrue : valueIfFalse; ``` - **switch 语句**： ```javascript switch (expression) { case value1: // 代码 1 break; case value2: // 代码 2 break; default: // 默认代码 break; } ``` ##### 6.3 循环 - **while 循环**： ```javascript while (condition) { // 循环体 } ``` - **for 循环**： ```javascript for (let i = 0; i < limit; i++) { // 循环体 } ``` 以上是JavaScript基础语法的关键知识点，这些概念和技术构成了学习和使用JavaScript的基础。掌握这些基础知识对于进行更高级的Web开发至关重要。