前端面试三之控制语句

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); // 确保文件总是被关闭
}
相关推荐
rzl0210 分钟前
java web5(黑马)
java·开发语言·前端
Amy.Wang11 分钟前
前端如何实现电子签名
前端·javascript·html5
今天又在摸鱼14 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿16 分钟前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再18 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55523 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
拾光拾趣录27 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空000028 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl29 分钟前
深度剖析Kafka读写机制
前端
FogLetter30 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css