主题
基础练习
欢迎来到JavaScript基础练习!这些练习专为初学者设计,帮助你掌握JavaScript的基础概念。
📝 变量和数据类型
练习 1.1: 变量声明
javascript
// 练习:声明不同类型的变量
// 1. 声明一个字符串变量存储你的姓名
// 2. 声明一个数字变量存储你的年龄
// 3. 声明一个布尔变量表示你是否是学生
// 4. 声明一个数组存储你的爱好
// 5. 声明一个对象存储你的个人信息
// 你的代码:
练习 1.2: 数据类型检测
javascript
// 练习:使用typeof检测数据类型
let name = "张三";
let age = 25;
let isStudent = true;
let hobbies = ["读书", "游泳", "编程"];
let person = {name: "李四", age: 30};
// 使用typeof检测每个变量的类型并输出
// 你的代码:
🔢 运算符和表达式
练习 2.1: 算术运算
javascript
// 练习:计算器功能
// 创建一个简单的计算器,实现加减乘除运算
function calculator(num1, operator, num2) {
// 你的代码:
// 根据operator执行相应的运算
// 支持 '+', '-', '*', '/' 四种运算
}
// 测试用例
console.log(calculator(10, '+', 5)); // 应该输出 15
console.log(calculator(10, '-', 3)); // 应该输出 7
console.log(calculator(6, '*', 4)); // 应该输出 24
console.log(calculator(15, '/', 3)); // 应该输出 5
练习 2.2: 比较运算
javascript
// 练习:年龄比较
// 编写函数比较两个人的年龄
function compareAge(age1, age2) {
// 你的代码:
// 返回比较结果的字符串描述
// 例如:"第一个人更年长"、"第二个人更年长"、"两人同龄"
}
// 测试用例
console.log(compareAge(25, 30));
console.log(compareAge(35, 25));
console.log(compareAge(28, 28));
🔀 条件语句
练习 3.1: 成绩等级判断
javascript
// 练习:根据分数判断等级
function getGrade(score) {
// 你的代码:
// 90-100: A
// 80-89: B
// 70-79: C
// 60-69: D
// 0-59: F
// 其他: 无效分数
}
// 测试用例
console.log(getGrade(95)); // A
console.log(getGrade(85)); // B
console.log(getGrade(75)); // C
console.log(getGrade(65)); // D
console.log(getGrade(55)); // F
练习 3.2: 季节判断
javascript
// 练习:根据月份判断季节
function getSeason(month) {
// 你的代码:
// 春季:3,4,5月
// 夏季:6,7,8月
// 秋季:9,10,11月
// 冬季:12,1,2月
}
// 测试用例
console.log(getSeason(3)); // 春季
console.log(getSeason(7)); // 夏季
console.log(getSeason(10)); // 秋季
console.log(getSeason(1)); // 冬季
🔄 循环结构
练习 4.1: 数字累加
javascript
// 练习:计算1到n的累加和
function sumToN(n) {
// 你的代码:
// 使用for循环计算1+2+3+...+n
}
// 测试用例
console.log(sumToN(5)); // 15 (1+2+3+4+5)
console.log(sumToN(10)); // 55
console.log(sumToN(100)); // 5050
练习 4.2: 九九乘法表
javascript
// 练习:打印九九乘法表
function multiplicationTable() {
// 你的代码:
// 使用嵌套循环打印九九乘法表
// 格式:1×1=1 1×2=2 1×3=3 ...
}
multiplicationTable();
练习 4.3: 数组遍历
javascript
// 练习:遍历数组并处理元素
let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// 1. 使用for循环打印所有偶数
function printEvenNumbers(arr) {
// 你的代码:
}
// 2. 使用while循环计算数组元素的乘积
function calculateProduct(arr) {
// 你的代码:
}
// 测试
printEvenNumbers(numbers);
console.log(calculateProduct(numbers));
🔧 函数基础
练习 5.1: 函数声明和调用
javascript
// 练习:创建各种类型的函数
// 1. 函数声明:判断一个数是否为偶数
function isEven(num) {
// 你的代码:
}
// 2. 函数表达式:计算圆的面积
const calculateCircleArea = function(radius) {
// 你的代码:
// 面积 = π × r²
};
// 3. 箭头函数:将摄氏度转换为华氏度
const celsiusToFahrenheit = (celsius) => {
// 你的代码:
// 华氏度 = 摄氏度 × 9/5 + 32
};
// 测试用例
console.log(isEven(4)); // true
console.log(isEven(7)); // false
console.log(calculateCircleArea(5)); // 约78.54
console.log(celsiusToFahrenheit(0)); // 32
练习 5.2: 参数和返回值
javascript
// 练习:函数参数处理
// 1. 默认参数:问候函数
function greet(name = "朋友") {
// 你的代码:
// 返回问候语,如果没有提供姓名则使用默认值
}
// 2. 多参数:计算平均值
function calculateAverage(...numbers) {
// 你的代码:
// 使用剩余参数计算所有数字的平均值
}
// 3. 对象参数:创建用户信息
function createUser({name, age, email}) {
// 你的代码:
// 返回格式化的用户信息对象
}
// 测试用例
console.log(greet()); // "你好,朋友!"
console.log(greet("小明")); // "你好,小明!"
console.log(calculateAverage(1, 2, 3, 4, 5)); // 3
console.log(createUser({name: "张三", age: 25, email: "zhang@example.com"}));
📊 数组操作
练习 6.1: 数组基础操作
javascript
// 练习:数组的增删改查
let fruits = ["苹果", "香蕉", "橙子"];
// 1. 在数组末尾添加"葡萄"
// 你的代码:
// 2. 在数组开头添加"草莓"
// 你的代码:
// 3. 删除数组中的"香蕉"
// 你的代码:
// 4. 查找"橙子"的索引
// 你的代码:
// 5. 将"苹果"替换为"红苹果"
// 你的代码:
console.log(fruits);
练习 6.2: 数组方法练习
javascript
// 练习:使用数组方法处理数据
let students = [
{name: "小明", age: 18, score: 85},
{name: "小红", age: 19, score: 92},
{name: "小刚", age: 18, score: 78},
{name: "小丽", age: 20, score: 96}
];
// 1. 找出所有成绩大于80分的学生
function getHighScoreStudents(students) {
// 你的代码:使用filter方法
}
// 2. 计算所有学生的平均成绩
function calculateAverageScore(students) {
// 你的代码:使用reduce方法
}
// 3. 获取所有学生的姓名数组
function getStudentNames(students) {
// 你的代码:使用map方法
}
// 4. 按成绩从高到低排序
function sortByScore(students) {
// 你的代码:使用sort方法
}
// 测试
console.log(getHighScoreStudents(students));
console.log(calculateAverageScore(students));
console.log(getStudentNames(students));
console.log(sortByScore(students));
📦 对象操作
练习 7.1: 对象创建和访问
javascript
// 练习:创建和操作对象
// 1. 创建一个表示汽车的对象
let car = {
// 你的代码:
// 包含品牌、型号、年份、颜色等属性
// 包含启动、停止、加速等方法
};
// 2. 访问和修改对象属性
// 你的代码:
// 输出汽车信息
// 修改汽车颜色
// 调用汽车方法
// 3. 动态添加属性和方法
// 你的代码:
// 给汽车对象添加价格属性
// 添加计算车龄的方法
练习 7.2: 对象方法和this
javascript
// 练习:理解this关键字
let person = {
firstName: "张",
lastName: "三",
age: 25,
// 1. 创建获取全名的方法
getFullName: function() {
// 你的代码:使用this访问属性
},
// 2. 创建自我介绍的方法
introduce: function() {
// 你的代码:返回自我介绍的字符串
},
// 3. 创建生日方法(年龄+1)
haveBirthday: function() {
// 你的代码:增加年龄并返回祝福语
}
};
// 测试
console.log(person.getFullName());
console.log(person.introduce());
console.log(person.haveBirthday());
🎯 综合练习
练习 8.1: 学生管理系统
javascript
// 练习:创建一个简单的学生管理系统
let studentManager = {
students: [],
// 添加学生
addStudent: function(name, age, grade) {
// 你的代码:
},
// 删除学生
removeStudent: function(name) {
// 你的代码:
},
// 查找学生
findStudent: function(name) {
// 你的代码:
},
// 获取所有学生
getAllStudents: function() {
// 你的代码:
},
// 计算平均年龄
getAverageAge: function() {
// 你的代码:
}
};
// 测试系统
studentManager.addStudent("小明", 18, "高三");
studentManager.addStudent("小红", 17, "高二");
studentManager.addStudent("小刚", 19, "高三");
console.log(studentManager.getAllStudents());
console.log(studentManager.findStudent("小红"));
console.log("平均年龄:", studentManager.getAverageAge());
练习 8.2: 简单计算器
javascript
// 练习:创建一个功能完整的计算器
function Calculator() {
this.result = 0;
// 加法
this.add = function(num) {
// 你的代码:
return this; // 支持链式调用
};
// 减法
this.subtract = function(num) {
// 你的代码:
return this;
};
// 乘法
this.multiply = function(num) {
// 你的代码:
return this;
};
// 除法
this.divide = function(num) {
// 你的代码:
return this;
};
// 获取结果
this.getResult = function() {
// 你的代码:
};
// 清零
this.clear = function() {
// 你的代码:
return this;
};
}
// 测试计算器
let calc = new Calculator();
let result = calc.add(10).multiply(2).subtract(5).divide(3).getResult();
console.log("计算结果:", result);
💡 学习提示
- 多动手练习:每个练习都要亲自编写代码
- 理解原理:不要只是复制代码,要理解为什么这样写
- 调试技能:学会使用console.log调试代码
- 代码规范:注意代码的可读性和规范性
- 举一反三:尝试修改练习,创造新的变化
🔗 相关链接
记住:编程是一门实践性很强的技能,只有通过大量练习才能真正掌握! 💪