第三章 JavaScript基础
第二节 基本语法与数据类型
概述
本节内容主要介绍JavaScript的基本语法结构和核心数据类型，是理解和掌握Web程序设计的基础。通过学习本节，考生将能够熟练编写规范的JavaScript代码，正确使用各种数据类型，理解变量声明、表达式、运算符等核心语法元素，为后续章节的深入学习打下坚实基础。学习目标包括：
- 掌握JavaScript的语法规则和基本代码结构
- 理解JavaScript中的数据类型及其特点
- 熟悉变量的声明和作用域规则
- 掌握基本运算符和表达式的使用方法
- 通过典型实例巩固语法和数据类型的应用
核心概念
1. 语法结构
JavaScript的语法由变量声明、表达式、语句、函数等组成，其中语句是执行单元，表达式用于计算值。语法规则包括大小写敏感、语句结束使用分号等。
2. 变量声明
使用var、let和const三种关键词声明变量。var具有函数作用域，let和const具有块级作用域，const声明的变量不可重新赋值。
3. 数据类型
JavaScript数据类型分为原始类型和引用类型。
- 原始类型包括：Number、String、Boolean、Undefined、Null、Symbol（ES6新增）、BigInt（ES2020新增）
- 引用类型主要是Object
4. 运算符
包括算术运算符、赋值运算符、比较运算符、逻辑运算符等，用于操作数据和表达式。
原理分析
1. JavaScript的数据类型机制
JavaScript是弱类型语言，变量可以存储任意类型的数据。原始类型的数据存储的是值本身，引用类型存储的是引用地址。
2. 变量作用域与提升
var声明的变量存在变量提升，即变量声明会被提升到函数或全局顶部，但赋值不提升；let和const不会被提升，存在暂时性死区（TDZ）。
3. 自动类型转换
JavaScript在运算过程中会自动进行类型转换（隐式转换），例如字符串和数字相加时，会把数字转换为字符串。
4. 表达式求值机制
表达式按照运算符优先级和结合性进行求值，复杂表达式会被拆分为子表达式逐步计算。
详细内容
1. 变量声明与命名规范
JavaScript中变量声明可以使用var、let和const。
- var：声明的变量具有函数作用域，允许重复声明，变量声明会被提升。
- let：声明块级作用域变量，不允许重复声明，存在暂时性死区。
- const：声明常量，必须初始化，值不可变，块级作用域。
变量命名规则：
- 只能包含字母、数字、下划线和美元符号
- 不能以数字开头
- 不能使用JavaScript保留关键字
- 建议采用驼峰命名法
示例：
let userName = 'Alice';
const PI = 3.14;
var age = 25;
2. 数据类型详解
JavaScript数据类型分为：
| 类型 | 说明 | 示例 |
|---|---|---|
| Number | 数值类型，包括整数和浮点数 | 123, 3.14, -0.5 |
| String | 字符串类型 | 'hello', "world" |
| Boolean | 布尔类型，true或false | true, false |
| Undefined | 未定义，变量未赋值时默认值 | undefined |
| Null | 空值，表示无效对象指针 | null |
| Symbol | 唯一标识符（ES6新增） | Symbol('id') |
| BigInt | 大整数类型（ES2020新增） | 9007199254740991n |
| Object | 引用类型，用于存储集合数据 | {name: 'Tom'}, [1, 2] |
示例代码：
let num = 100; // Number
let str = 'JavaScript'; // String
let flag = true; // Boolean
let obj = {id: 1, name: '小明'}; // Object
let sym = Symbol('unique'); // Symbol
let bigIntNum = 12345678901234567890n; // BigInt
3. 基本运算符及表达式
- 算术运算符：
+,-,*,/,%,++,-- - 赋值运算符：
=,+=,-=,*=,/=等 - 比较运算符：
==,===,!=,!==,>,<,>=,<= - 逻辑运算符：
&&,||,!
示例：
let a = 10;
let b = 20;
let sum = a + b; // 30
let isEqual = (a == b); // false
let isStrictEqual = (a === b); // false
注意：==是宽松比较，会进行类型转换，===是严格比较，不进行类型转换。
4. 注释与代码格式
- 单行注释：
// 注释内容 - 多行注释：
/* 注释内容 */
良好的注释和代码格式是编写高质量代码的重要保障。
实例分析
实例1：变量声明与作用域演示
function testScope() {
var x = 1;
if(true) {
var x = 2; // 同一作用域，覆盖前面的x
console.log(x); // 输出2
}
console.log(x); // 输出2
}
testScope();
function testLetScope() {
let y = 1;
if(true) {
let y = 2; // 块级作用域，和外层y不同
console.log(y); // 输出2
}
console.log(y); // 输出1
}
testLetScope();
分析：
var变量具有函数作用域，内部重新声明会覆盖外层变量let具有块级作用域，内部声明和外部变量互不影响
结论：推荐使用let和const以避免变量提升和作用域混淆。
实例2：数据类型转换示例
console.log('5' + 1); // '51'，数字转字符串
console.log('5' - 1); // 4，字符串转数字
console.log(true + 1); // 2，true转为1
console.log(null == undefined); // true，特殊相等
console.log(null === undefined); // false，严格比较
分析：
+运算符有字符串连接特性- 其他算术运算符会转换成数字
==进行类型转换比较，===不进行
结论：理解自动类型转换机制，避免隐式转换带来的错误。
实例3：表达式优先级演示
let result = 3 + 4 * 5; // 3 + (4*5) = 23
let isTrue = true && false || true; // (true && false) || true = true
分析：
- 乘法优先于加法
- 逻辑与优先于逻辑或
结论：熟悉运算符优先级，避免使用过于复杂表达式，必要时加括号。
常见误区
误区：混淆
var和let作用域- 错误做法：在块内使用
var认为是块级作用域。 - 正确做法：
var是函数作用域，使用let实现块级作用域。
- 错误做法：在块内使用
误区：使用
==判断导致类型转换错误- 错误做法：随意使用
==判断不同类型数据。 - 正确做法：推荐使用
===严格比较。
- 错误做法：随意使用
误区：忽视变量提升导致错误
- 错误做法：在声明之前使用
var变量。 - 正确做法：变量声明提升，但赋值不提升，避免在声明前使用。
- 错误做法：在声明之前使用
误区：误解数据类型转换规则
- 错误做法：认为所有运算符都按数字运算。
- 正确做法：理解
+运算符的字符串连接特性。
误区：不规范命名导致代码难读
- 错误做法：使用无意义或不符合规范的变量名。
- 正确做法：采用有意义且符合规范的命名。
应用场景
网页交互开发
使用变量和数据类型处理用户输入，实现动态页面效果。数据验证与处理
通过不同数据类型和运算符实现复杂的验证逻辑。条件控制与流程判断
利用逻辑运算符和比较表达式控制程序流程。函数参数传递
变量和数据类型保证函数调用的正确性和灵活性。动态内容生成
字符串拼接和数值计算实现动态生成HTML内容。
知识拓展
- ES6新增变量声明：深入学习
let和const的特性及区别。 - Symbol和BigInt类型：了解ES6及以后的新数据类型，用于解决唯一标识和大整数问题。
- 类型转换机制：详细掌握显式转换与隐式转换的差异。
- 运算符优先级表：熟悉JavaScript运算符优先级，避免表达式计算错误。
- 严格模式（'use strict'）：理解严格模式对变量声明和语法的限制。
总结回顾
本节系统介绍了JavaScript的基本语法和核心数据类型，重点包括变量声明的三种方式及其作用域差异，数据类型的分类及特点，基本运算符的使用规则，以及自动类型转换和表达式求值机制。通过实例演示，明确了作用域、类型转换和运算优先级的应用。掌握这些内容是编写正确、规范、高效JavaScript代码的基础，对后续Web程序设计学习具有重要意义。考生应重点理解变量作用域和数据类型转换，养成良好的命名习惯，避免常见错误，提升代码质量和开发效率。
本节核心知识点总结：
- JavaScript变量声明及其作用域区别
- 原始类型与引用类型数据的定义和特点
- 基本运算符及其优先级和结合性
- 自动类型转换机制及其影响
- 规范命名和注释的重要性