JavaScript面试官常问基础题_js面试基础知识

在JavaScript面试中，面试官通常会问一些基础题目来考察应聘者的掌握程度。本文将介绍几个常见的JavaScript基础问题，并提供多种解题思路和代码示例。

1. 如何判断一个变量是否为数组

解决方案

在JavaScript中，有多种方法可以判断一个变量是否为数组。以下是几种常见的方法：

方法一：使用 Array.isArray()

Array.isArray() 是ES5引入的一个方法，用于判断一个变量是否为数组。

javascript
function isArray(obj) {
  return Array.isArray(obj);
}</p>

<p>console.log(isArray([])); // true
console.log(isArray({})); // false

方法二：使用 instanceof

instanceof 操作符可以用来判断一个对象是否是某个构造函数的实例。

javascript
function isArray(obj) {
  return obj instanceof Array;
}</p>

<p>console.log(isArray([])); // true
console.log(isArray({})); // false

方法三：使用 Object.prototype.toString.call

这种方法可以避免跨框架的问题，因为它直接调用 Object 的 toString 方法。

javascript
function isArray(obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}</p>

<p>console.log(isArray([])); // true
console.log(isArray({})); // false

2. 如何实现一个深拷贝

解决方案

深拷贝是指创建一个新对象，这个新对象拥有与原对象相同的数据，但不共享内存地址。以下是几种常见的实现方法：

方法一：使用 JSON.parse 和 JSON.stringify

这种方法简单但有一些限制，例如不能处理函数和循环引用。

javascript
function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}</p>

<p>const obj = { a: 1, b: { c: 2 } };
const clonedObj = deepClone(obj);</p>

<p>console.log(clonedObj); // { a: 1, b: { c: 2 } }
console.log(clonedObj === obj); // false
console.log(clonedObj.b === obj.b); // false

方法二：递归实现

这种方法可以处理更复杂的情况，包括函数和循环引用。

javascript
function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return null;
  if (typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);</p>

<p>let cloneObj = new obj.constructor();
  hash.set(obj, cloneObj);</p>

<p>for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }</p>

<p>return cloneObj;
}</p>

<p>const obj = { a: 1, b: { c: 2 }, d: [1, 2, 3] };
const clonedObj = deepClone(obj);</p>

<p>console.log(clonedObj); // { a: 1, b: { c: 2 }, d: [1, 2, 3] }
console.log(clonedObj === obj); // false
console.log(clonedObj.b === obj.b); // false
console.log(clonedObj.d === obj.d); // false

3. 如何实现一个防抖函数

解决方案

防抖函数用于限制函数的执行频率，确保在一定时间间隔内只执行一次。以下是几种常见的实现方法：

方法一：基本实现

javascript
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}</p>

<p>const handleResize = debounce(() => {
  console.log('窗口被调整了');
}, 300);</p>

<p>window.addEventListener('resize', handleResize);

方法二：带立即执行选项

javascript
function debounce(func, wait, immediate) {
  let timeout;
  return function(...args) {
    const later = () => setTimeout(() => func.apply(this, args), wait);
    if (immediate && !timeout) {
      func.apply(this, args);
    }
    clearTimeout(timeout);
    timeout = later();
  };
}</p>

<p>const handleResize = debounce(() => {
  console.log('窗口被调整了');
}, 300, true);</p>

<p>window.addEventListener('resize', handleResize);

通过以上几种方法，你可以更好地应对JavaScript面试中的基础问题。希望这些内容对你有所帮助！