使用 For-In 循环遍历数组元素
在这一步中,你将学习 JavaScript 中的 for-in
循环,它提供了一种简单的方式来遍历对象的属性或数组的元素。
使用 WebIDE 在 ~/project
目录下创建一个名为 forInLoop.js
的新文件:
// 使用 for-in 循环遍历数组
let fruits = ["apple", "banana", "cherry", "date"];
console.log("遍历数组索引:");
for (let index in fruits) {
console.log(`索引: ${index}, 水果: ${fruits[index]}`);
}
// 使用 for-in 循环遍历对象
let student = {
name: "John Doe",
age: 22,
major: "Computer Science",
gpa: 3.8
};
console.log("\n遍历对象属性:");
for (let property in student) {
console.log(`${property}: ${student[property]}`);
}
// 实际示例:计算商品总价
let shoppingCart = [
{ name: "Laptop", price: 1000 },
{ name: "Headphones", price: 100 },
{ name: "Mouse", price: 50 }
];
console.log("\n计算总价:");
let totalPrice = 0;
for (let index in shoppingCart) {
totalPrice += shoppingCart[index].price;
}
console.log(`总价: $${totalPrice}`);
运行 JavaScript 文件以查看 for-in
循环的实际效果:
node ~/project/forInLoop.js
示例输出:
遍历数组索引:
索引: 0, 水果: apple
索引: 1, 水果: banana
索引: 2, 水果: cherry
索引: 3, 水果: date
遍历对象属性:
name: John Doe
age: 22
major: Computer Science
gpa: 3.8
计算总价:
总价: $1150
关于 for-in
循环的关键点:
- 适用于数组和对象
- 遍历数组的索引或对象的属性
- 提供了一种简单的方式来访问元素,而无需使用传统的基于索引的循环
- 在用于数组时需要谨慎,因为它会遍历所有可枚举的属性
让我们通过另一个示例来展示其灵活性:
// 使用 for-in 循环过滤和转换数据
let grades = {
math: 85,
science: 92,
english: 78,
history: 88
};
console.log("过滤高于 80 分的成绩:");
for (let subject in grades) {
if (grades[subject] > 80) {
console.log(`${subject}: ${grades[subject]}`);
}
}
再次运行文件:
node ~/project/forInLoop.js
示例输出:
过滤高于 80 分的成绩:
math: 85
science: 92
history: 88