前端 JavaScript 基础面试题, JavaScript 如何使用 for…of 遍历对象?

QA

Step 1

Q:: JavaScript 如何使用 for...of 遍历对象？

A:: for...of 循环用于遍历可迭代对象（如数组、字符串、Map、Set 等）。由于对象不是可迭代对象，直接使用 for...of 遍历对象会抛出错误。要遍历对象，可以使用 Object.keys()、Object.values() 或 Object.entries() 方法，将对象的属性转化为数组，然后使用 for...of 进行遍历。例如：

 
const obj = {a: 1, b: 2, c: 3};
for (const key of Object.keys(obj)) {
  console.log(key, obj[key]);
}

Step 2

Q:: JavaScript 中 for...of 和 for...in 的区别是什么？

A:: for...of 用于遍历可迭代对象，遍历的是值；for...in 用于遍历对象的可枚举属性，遍历的是键。for...of 适用于数组、字符串、Map、Set 等，for...in 适用于对象。

Step 3

Q:: 如何在 JavaScript 中定义和使用生成器函数？

A:: 生成器函数通过 function* 关键字定义，内部使用 yield 表达式来暂停和恢复执行。生成器返回一个迭代器对象。使用示例：

 
function* generator() {
  yield 1;
  yield 2;
  yield 3;
}
const gen = generator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3

Step 4

Q:: 什么是 JavaScript 中的 Symbol 类型？

A:: Symbol 是 ES6 引入的一种新的原始数据类型，表示独一无二的值。可以用作对象属性的键，避免属性名冲突。通过 Symbol() 函数创建：

 
const sym1 = Symbol('description');
const sym2 = Symbol('description');
console.log(sym1 === sym2); // false

用途

这些问题测试了候选人对 JavaScript 语言特性的掌握程度。在实际生产环境中，熟悉 JavaScript 的基本特性和用法对于开发高效、可靠的前端应用至关重要。例如，遍历对象属性在处理动态数据时非常常见，而理解生成器函数和 Symbol 则有助于编写更复杂的迭代逻辑和避免属性名冲突。\n

相关问题

🦆

什么是 JavaScript 的闭包?▷

闭包是指函数能够记住并访问其词法作用域，即使该函数在其词法作用域之外执行。闭包用于实现数据隐藏和模拟私有方法。例如：

 
function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}
const counter = outer();
console.log(counter()); // 1
console.log(counter()); // 2

🦆

什么是 JavaScript 中的事件循环?▷

事件循环是 JavaScript 处理异步操作的机制。JavaScript 是单线程的，通过事件循环来协调执行代码、收集和处理事件以及执行子任务（微任务和宏任务）。事件循环允许异步代码在主线程不阻塞的情况下执行。例如，使用 setTimeout 设定的回调函数在指定时间后通过事件循环执行。

🦆

如何在 JavaScript 中处理异步操作?▷

JavaScript 中处理异步操作的方法有多种，包括回调函数、Promise 和 async/await。Promise 用于处理异步操作的结果，async/await 使异步代码看起来像同步代码，更易于阅读和维护。

 
// 使用 Promise
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));
 
// 使用 async/await
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

🦆

什么是 JavaScript 中的 this 关键字?▷

this 关键字是函数运行时自动生成的一个内部对象，指向调用函数的对象。它的指向在函数调用时确定，而不是在函数定义时。例如：

 
const obj = {
  value: 42,
  getValue: function() {
    return this.value;
  }
};
console.log(obj.getValue()); // 42
const getValue = obj.getValue;
console.log(getValue()); // undefined 或 可能是全局对象上的属性

说说你对 JSON 的理解网络请求