2025/9/17大约 8 分钟
JavaScript基础语法与数据类型
学习目标
- 掌握JavaScript基本数据类型的使用
- 理解各种运算符的作用和优先级
- 熟练使用条件语句和循环语句
- 了解JavaScript的基本语法规则
数据类型
布尔值（Boolean）
布尔值只有两个值：true 和 false，用于表示真假。
// 布尔值示例
let isActive = true;
let isComplete = false;
// 布尔值转换
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean('hello')); // true
console.log(Boolean('')); // falsenull 与 undefined
这两个特殊值经常被混淆，但它们有重要区别：
// undefined：变量声明但未赋值
let name;
console.log(name); // undefined
console.log(typeof name); // "undefined"
// null：表示空值或无值
let data = null;
console.log(data); // null
console.log(typeof data); // "object"（这是JavaScript的一个历史bug）
// 比较
console.log(null == undefined); // true（值相等）
console.log(null === undefined); // false（类型不同）注意
undefined表示变量未定义或未赋值null表示有意设置的空值- 使用
===进行严格比较时，它们不相等
运算符
算术运算符
// 基本算术运算
let a = 10, b = 3;
console.log(a + b); // 13 加法
console.log(a - b); // 7 减法
console.log(a * b); // 30 乘法
console.log(a / b); // 3.333... 除法
console.log(a % b); // 1 取余（模运算）
// 自增自减运算符
let count = 5;
console.log(++count); // 6 前置自增
console.log(count++); // 6 后置自增（先返回再自增）
console.log(count); // 7
console.log(--count); // 6 前置自减
console.log(count--); // 6 后置自减（先返回再自减）
console.log(count); // 5赋值运算符
let x = 10;
// 复合赋值运算符
x += 5; // 等同于 x = x + 5，结果：15
x -= 3; // 等同于 x = x - 3，结果：12
x *= 2; // 等同于 x = x * 2，结果：24
x /= 4; // 等同于 x = x / 4，结果：6
x %= 4; // 等同于 x = x % 4，结果：2
console.log(x); // 2比较运算符
let num1 = 5;
let num2 = '5';
// 相等性比较
console.log(num1 == num2); // true（值相等，类型转换）
console.log(num1 === num2); // false（严格相等，类型不同）
console.log(num1 != num2); // false
console.log(num1 !== num2); // true
// 大小比较
console.log(10 > 5); // true
console.log(10 < 5); // false
console.log(10 >= 10); // true
console.log(10 <= 9); // false== vs ===
==会进行类型转换后比较值===严格比较，不进行类型转换- 推荐使用
===避免意外的类型转换
布尔运算符
// 逻辑非（!）
console.log(!true); // false
console.log(!false); // true
console.log(!''); // true（空字符串为假值）
console.log(!'hello'); // false
// 逻辑与（&&）
console.log(true && true); // true
console.log(true && false); // false
console.log(false && true); // false
// 逻辑或（||）
console.log(true || false); // true
console.log(false || false); // false
// 短路求值
let user = null;
let name = user && user.name; // 如果user为null，不会执行user.name
let defaultName = name || 'Guest'; // 如果name为空，使用默认值条件语句
if 语句
let score = 85;
// 基本if语句
if (score >= 90) {
console.log('优秀');
}
// if...else语句
if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}
// if...else if...else语句
if (score >= 90) {
console.log('优秀');
} else if (score >= 80) {
console.log('良好');
} else if (score >= 60) {
console.log('及格');
} else {
console.log('不及格');
}switch 语句
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = '星期一';
break;
case 2:
dayName = '星期二';
break;
case 3:
dayName = '星期三';
break;
case 4:
dayName = '星期四';
break;
case 5:
dayName = '星期五';
break;
case 6:
case 7:
dayName = '周末';
break;
default:
dayName = '无效日期';
}
console.log(dayName); // 星期三注意break语句
- 每个case后面要加break，否则会继续执行下一个case
- 可以利用这个特性实现多个case共享同一段代码
三元运算符
// 语法：条件 ? 值1 : 值2
let age = 18;
let status = age >= 18 ? '成年人' : '未成年人';
console.log(status); // 成年人
// 嵌套三元运算符（不推荐过度使用）
let score = 85;
let grade = score >= 90 ? 'A' : score >= 80 ? 'B' : score >= 60 ? 'C' : 'D';
console.log(grade); // B循环语句
for 循环
// 基本for循环
for (let i = 0; i < 5; i++) {
console.log('第' + (i + 1) + '次循环');
}
// 遍历数组
let fruits = ['苹果', '香蕉', '橙子'];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// for...in循环（遍历对象属性）
let person = { name: '张三', age: 25, city: '北京' };
for (let key in person) {
console.log(key + ': ' + person[key]);
}
// for...of循环（遍历可迭代对象）
for (let fruit of fruits) {
console.log(fruit);
}while 循环
// while循环
let count = 0;
while (count < 3) {
console.log('计数：' + count);
count++;
}
// do...while循环（至少执行一次）
let num = 0;
do {
console.log('数字：' + num);
num++;
} while (num < 3);break 和 continue
// break：跳出整个循环
for (let i = 0; i < 10; i++) {
if (i === 5) {
break; // 当i等于5时跳出循环
}
console.log(i); // 输出：0, 1, 2, 3, 4
}
// continue：跳过当前迭代
for (let i = 0; i < 5; i++) {
if (i === 2) {
continue; // 当i等于2时跳过本次循环
}
console.log(i); // 输出：0, 1, 3, 4
}字符串基础
字符串定义
// 单引号
let str1 = 'Hello World';
// 双引号
let str2 = "JavaScript";
// 模板字符串（ES6）
let name = '张三';
let age = 25;
let str3 = `我叫${name}，今年${age}岁`;
console.log(str3); // 我叫张三，今年25岁转义字符
// 常用转义字符
let text = '这是一个\"引号\"';
console.log(text); // 这是一个"引号"
let multiLine = '第一行\n第二行\t制表符';
console.log(multiLine);
// 第一行
// 第二行 制表符
// 反斜杠
let path = 'C:\\Users\\Documents';
console.log(path); // C:\Users\Documents字符串属性和基本方法
let message = 'Hello JavaScript';
// length属性
console.log(message.length); // 16
// 字符访问
console.log(message.charAt(0)); // 'H'
console.log(message.charAt(6)); // 'J'
console.log(message[0]); // 'H'（ES5+）
// 大小写转换
console.log(message.toUpperCase()); // 'HELLO JAVASCRIPT'
console.log(message.toLowerCase()); // 'hello javascript'
// 查找字符串
console.log(message.indexOf('Java')); // 6
console.log(message.indexOf('Python')); // -1（未找到）
console.log(message.lastIndexOf('a')); // 13最佳实践
变量命名规范
// 好的命名
let userName = 'zhangsan'; // 驼峰命名法
let isLoggedIn = true; // 布尔值用is/has开头
let MAX_RETRY_COUNT = 3; // 常量用大写
// 避免的命名
let a = 'zhangsan'; // 无意义的变量名
let user_name = 'zhangsan'; // 下划线命名（不符合JS规范）
let UserName = 'zhangsan'; // 帕斯卡命名（通常用于构造函数）代码风格建议
// 使用严格相等
if (value === 'expected') {
// 处理逻辑
}
// 避免全局变量
(function() {
let localVariable = 'local';
// 代码逻辑
})();
// 合理使用注释
// 计算用户年龄
let currentYear = new Date().getFullYear();
let userAge = currentYear - birthYear;
// 保持代码简洁
let isValid = (age >= 18 && age <= 65) ? true : false;
// 更好的写法
let isValid = age >= 18 && age <= 65;练习题
练习1：成绩等级判断
编写一个程序，根据分数判断等级：
- 90-100：优秀
- 80-89：良好
- 70-79：中等
- 60-69：及格
- 0-59：不及格
function getGrade(score) {
if (score >= 90 && score <= 100) {
return '优秀';
} else if (score >= 80) {
return '良好';
} else if (score >= 70) {
return '中等';
} else if (score >= 60) {
return '及格';
} else if (score >= 0) {
return '不及格';
} else {
return '无效分数';
}
}
// 测试
console.log(getGrade(95)); // 优秀
console.log(getGrade(75)); // 中等
console.log(getGrade(45)); // 不及格练习2：九九乘法表
使用嵌套循环打印九九乘法表：
function multiplicationTable() {
for (let i = 1; i <= 9; i++) {
let row = '';
for (let j = 1; j <= i; j++) {
row += `${j}×${i}=${i*j}\t`;
}
console.log(row);
}
}
// 调用函数
multiplicationTable();
// 输出示例：
// 1×1=1
// 1×2=2 2×2=4
// 1×3=3 2×3=6 3×3=9
// ...练习3：数字猜测游戏
创建一个简单的数字猜测游戏：
function guessNumber() {
// 生成1-100的随机数
const targetNumber = Math.floor(Math.random() * 100) + 1;
let attempts = 0;
let maxAttempts = 7;
console.log('欢迎来到数字猜测游戏！');
console.log('我想了一个1-100之间的数字，你有7次机会猜中它。');
while (attempts < maxAttempts) {
// 在实际应用中，这里应该从用户输入获取
let guess = parseInt(prompt('请输入你的猜测：'));
attempts++;
if (guess === targetNumber) {
console.log(`恭喜！你在第${attempts}次猜中了数字${targetNumber}！`);
break;
} else if (guess < targetNumber) {
console.log('太小了！');
} else {
console.log('太大了！');
}
if (attempts === maxAttempts) {
console.log(`游戏结束！正确答案是${targetNumber}`);
} else {
console.log(`还有${maxAttempts - attempts}次机会`);
}
}
}
// 注意：这个例子使用了prompt，在实际开发中需要其他方式获取用户输入本章小结
通过本章学习，你应该掌握了：
- ✅ JavaScript的基本数据类型和它们的特点
- ✅ 各种运算符的使用方法和优先级
- ✅ 条件语句的不同形式和适用场景
- ✅ 循环语句的使用和控制流程
- ✅ 字符串的基本操作和常用方法
- ✅ JavaScript编程的基本规范和最佳实践
这些基础知识是学习JavaScript的重要基石，为后续学习函数、对象、DOM操作等高级特性做好准备。
下一步
在下一章中，我们将深入学习字符串和数组的高级操作方法，包括字符串处理、数组遍历和常用的数组方法。