前端面试三之控制语句

1.for-in

for...in 是 JavaScript 中用于遍历对象可枚举属性的循环语句。它主要用于遍历对象的属性名(键),而不是属性值。

(1)遍历对象属性

javascript 复制代码
const person = {
  name: 'Alice',
  age: 25,
  job: 'Developer'
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}
// 输出:
// name: Alice
// age: 25
// job: Developer

2.for-of

for...of 是 ES6 (ECMAScript 2015) 引入的循环语句,用于遍历可迭代对象 (如数组、字符串、Map、Set 等)的元素值。for...of 是现代 JavaScript 中遍历集合数据的首选方式,提供了更简洁、更直观的语法,特别适合处理数组和其他可迭代对象。

(1)遍历数组

javascript 复制代码
const fruits = ['apple', 'banana', 'orange'];

for (const fruit of fruits) {
  console.log(fruit);
}
// 输出:
// apple
// banana
// orange

(2)遍历字符串

javascript 复制代码
const str = 'hello';

for (const char of str) {
  console.log(char);
}
// 输出:
// h
// e
// l
// l
// o

(3)结合解构赋值

javascript 复制代码
const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 }
];

for (const { name, age } of users) {
  console.log(`${name} is ${age} years old`);
}

(4)与 for...in 的区别

特性 for...of for...in
用途 遍历可迭代对象的值 遍历对象属性名
获取内容 属性值 属性名(键)
原型链属性 不涉及原型链 会遍历继承的可枚举属性
数组使用 只遍历数字索引元素 遍历所有可枚举属性(包括非数字键)
适用对象 可迭代对象(Array, Map, Set等) 任意对象

3.try-catch

try-catch 是 JavaScript 中处理运行时错误的异常处理机制,允许你"尝试"执行可能出错的代码,并"捕获"处理可能发生的异常,防止程序意外终止。

javascript 复制代码
try {
  // 可能抛出错误的代码
} catch (error) {
  // 错误处理代码
} finally {
  // 无论是否出错都会执行的代码
}

(1)基本错误捕获

javascript 复制代码
try {
  console.log(notDefined); // 引用未定义变量
} catch (error) {
  console.error('发生错误:', error.message);
  // 输出: "发生错误: notDefined is not defined"
}

(2)使用 finally

javascript 复制代码
let file = openFile();
try {
  processFile(file);
} catch (error) {
  console.error('文件处理失败:', error);
} finally {
  closeFile(file); // 确保文件总是被关闭
}
相关推荐
程序视点1 小时前
IObit Uninstaller Pro专业卸载,免激活版本,卸载清理注册表,彻底告别软件残留
前端·windows·后端
前端程序媛-Tian2 小时前
【dropdown组件填坑指南】—怎么实现下拉框的位置计算
前端·javascript·vue
嘉琪0012 小时前
实现视频实时马赛克
linux·前端·javascript
烛阴2 小时前
Smoothstep
前端·webgl
若梦plus3 小时前
Eslint中微内核&插件化思想的应用
前端·eslint
爱分享的程序员3 小时前
前端面试专栏-前沿技术:30.跨端开发技术(React Native、Flutter)
前端·javascript·面试
超级土豆粉3 小时前
Taro 位置相关 API 介绍
前端·javascript·react.js·taro
若梦plus3 小时前
Webpack中微内核&插件化思想的应用
前端·webpack
若梦plus3 小时前
微内核&插件化设计思想
前端
柯北(jvxiao)3 小时前
搞前端还有出路吗?如果有,在哪里?
前端·程序人生