第二章:JavaScript语言基础
- 2.1 变量声明:`let`, `const`, `var`
- 2.1.1 变量是什么?
- 2.1.2 `var`
- 2.1.3 `let`与`const`
- 2.1.4 选择哪个关键字?
- 2.2 数据类型
- 2.2.1 基本数据类型
- 2.2.2 复杂数据类型
- 2.2.3 示例与类型检测
- 2.3 运算符
- 2.3.1 算术运算符
- 2.3.2 比较运算符
- 2.3.3 逻辑运算符
- 2.3.4 赋值运算符
- 2.3.5 例子
- 2.4 控制结构
- 2.4.1 if...else
- 2.4.2 switch
- 2.4.3 for循环
- 2.4.4 while和do...while
在这一章节中,我们将深入探索JavaScript的基石——语言基础。从变量声明到数据类型的掌握,再到运算符和控制结构的运用,你将逐步构建起对这门动态语言的坚实理解。让我们一起启程,踏入JavaScript的奇妙世界。
2.1 变量声明:let
, const
, var
2.1.1 变量是什么?
在编程中,变量就像是一个可以存放数据的容器。你可以把它想象成一个标签,贴在一个盒子上,盒子里面可以放任何东西——数字、字符串、甚至复杂的对象和数组。在JavaScript中,我们使用关键字来声明这些变量。
2.1.2 var
早期的JavaScript中,var
是最常用的变量声明方式,但它有一些特殊的规则,比如变量提升(hoisting)和函数作用域/全局作用域的限制,这可能会导致一些意料之外的行为。
console.log(x); // 输出undefined,因为var声明会被提升
var x = 5;
2.1.3 let
与const
ES6引入了let
和const
,为变量声明带来了新的维度。let
允许你在块级作用域内声明变量,而const
则是用来声明那些一旦赋值就不应该改变的常量。
{let y = 10;console.log(y); // 输出10
}
// console.log(y); // 这里会报错,因为y只在上面的块级作用域内有效const PI = 3.14; // 声明一个常量
PI = 3; // 错误!尝试修改常量会引发错误
2.1.4 选择哪个关键字?
let
:当你需要一个在特定块内可变的值。const
:用于不会改变的值,如数学常量或对象引用(虽然对象本身可变)。var
:尽量避免使用,除非处理旧代码或有特殊需求。
2.2 数据类型
JavaScript是一种弱类型语言,它会根据上下文自动推断变量的类型。主要的数据类型包括:
2.2.1 基本数据类型
- 字符串 (
string
):文本信息,用单引号(’ ')或双引号(" ")包围。 - 数字 (
number
):整数或浮点数。 - 布尔值 (
boolean
):真(true)或假(false)。 - null:表示一个空对象指针。
- undefined:表示变量已被声明但未被初始化。
- Symbol (ES6新增):独一无二的值,常用于对象的键。
2.2.2 复杂数据类型
- 对象 (
object
):无序的属性集合。 - 数组 (
array
):有序的元素集合,元素可以是任意类型。 - Function:JavaScript的一等公民,可以作为其他变量的值。
2.2.3 示例与类型检测
let name = "Alice"; // 字符串
let age = 25; // 数字
let isStudent = true; // 布尔值
let empty = null; // null
let undefinedVar; // undefinedconsole.log(typeof name); // "string"
console.log(typeof age); // "number"
console.log(typeof isStudent); // "boolean"
console.log(typeof empty); // "object" - 注意这个特殊的类型检测结果
console.log(typeof undefinedVar); // "undefined"let person = {name: "Bob", age: 30}; // 对象
let friends = ["Alice", "Charlie"]; // 数组
let greet = function() { console.log("Hello"); }; // 函数console.log(Array.isArray(friends)); // true
console.log(friends instanceof Array); // true
2.3 运算符
2.3.1 算术运算符
包括加+
、减-
、乘*
、除/
、取余%
等基本运算。
2.3.2 比较运算符
如等于==
(类型转换)、严格等于===
(不进行类型转换)、不等于!=
、严格不等于!==
、大于>
、小于<
等。
2.3.3 逻辑运算符
包括与&&
、或||
、非!
。逻辑运算符常用于条件判断中。
2.3.4 赋值运算符
除了基本的=
外,还有复合赋值运算符,如+=
, -=
, *=
, /=
, %=
, 等。
2.3.5 例子
let x = 10;
let y = 5;let sum = x + y; // 算术运算
console.log(sum); // 15let isEqual = x === y; // 严格等于
console.log(isEqual); // falselet isGreater = x > y; // 比较运算
console.log(isGreater); // truelet result = (x > 0) && (y < 10); // 逻辑与
console.log(result); // truex += 2; // 复合赋值
console.log(x); // 12
2.4 控制结构
2.4.1 if…else
基于条件执行不同的代码块。
let score = 85;if(score >= 90){console.log("优秀");
} else if(score >= 80){console.log("良好");
} else {console.log("加油");
}
2.4.2 switch
多分支选择结构,基于不同的情况执行代码。
let day = "Monday";switch(day){case "Monday":console.log("新的一周开始了!");break;case "Friday":console.log("马上周末了!");break;default:console.log("继续努力工作!");
}
2.4.3 for循环
重复执行一段代码直到满足终止条件。
for(let i = 0; i < 5; i++){console.log(i);
}
2.4.4 while和do…while
while
在条件为真时执行循环体,do...while
至少执行一次循环体,然后检查条件。
let count = 0;while(count < 3){console.log(count);count++;
}do {console.log(count);count++;
} while(count < 5);
通过这一章节的学习,你已经掌握了JavaScript的基础构造块。从变量声明到数据类型,再到运算符和控制结构的运用,这些知识是构建复杂程序的基石。接下来,我们将利用这些基础,探索更高级的函数、对象操作,以及如何与浏览器交互,敬请期待!