面试官一道题就把你刷下？21道大厂高级面试题，助力金三银四！

1. 请用尽可能少的字符数写出一个 JavaScript 实现深拷贝的函数。

function deepClone(obj) {
  return JSON.parse(JSON.stringify(obj));
}

2. 请用尽可能少的字符数写出一个 JavaScript 实现“类数组”转换为数组的函数。

Array.prototype.slice.call(arrayLike);

3. 数组的排序方法有哪些？请写出时间复杂度从小到大排序、从大到小排序、按照对象的某个属性排序和随机排序的代码。

- 时间复杂度从小到大排序：Array.prototype.sort()

arr.sort((a, b) => a - b);

- 时间复杂度从大到小排序：Array.prototype.sort()

arr.sort((a, b) => b - a);

- 按照对象的某个属性排序：Array.prototype.sort()

arr.sort((a, b) => a.property - b.property);

- 随机排序：Array.prototype.sort()

arr.sort(() => Math.random() - 0.5);

4. 请写出实现 Promise.all() 的代码。

Promise.all = (promises) => {
  return new Promise((resolve, reject) => {
    let results = [];
    let count = promises.length;
    for (let i = 0; i < promises.length; i++) {
      promises[i].then((data) => {
        results[i] = data;
        count--;
        if (count === 0) {
          resolve(results);
        }
      }).catch((err) => {
        reject(err);
      })
    }
  })
}

5. Promise 中的 finally() 方法是做什么用的？请写出实现代码。

finally() 方法用于在 Promise 被 fulfilled 或 rejected 时的处理逻辑，不管 Promise 怎样结束，都会执行。

Promise.prototype.finally = function(callback) {
  return this.then((data) => {
    callback();
    return data;
  }).catch((err) => {
    callback();
    throw err;
  })
}

6. 请写出不使用 for 循环和递归的方式实现数组求和。

const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((a, b) => a + b);
console.log(sum);

7. 请分别用原生 JavaScript 和 jQuery 实现给按钮添加点击事件。

原生 JavaScript 的实现：

document.querySelector('button').addEventListener('click', () => {
  console.log('click');
});

jQuery 的实现：

$('button').click(() => {
  console.log('click');
});

8. 请写出原生 JavaScript 实现数组去重的代码。

const arr = [1, 2, 3, 2, 1];
const result = [...new Set(arr)];
console.log(result);

9. 如何避免 JavaScript 中的全局变量污染？

使用 IIFE（立即执行函数表达式）包装代码块，将代码块内部的变量声明在函数内部，避免变量的污染。

示例代码：

(function() {
  const a = 1;
})();

10. 请写出原生 JavaScript 实现对象浅拷贝和深拷贝的代码。

浅拷贝：

const obj = { a: 1, b: { c: 2 } };
const newObj = Object.assign({}, obj);
console.log(newObj);

深拷贝：

const obj = { a: 1, b: { c: 2 } };
const newObj = JSON.parse(JSON.stringify(obj));
console.log(newObj);

11. 请写出原生 JavaScript 实现 DOM 节点插入的代码。

const parent = document.getElementById('parent');
const child = document.createElement('child');
parent.appendChild(child);

12. 请写出原生 JavaScript 实现动态修改样式的代码。

const element = document.getElementById('element');
element.style.backgroundColor = '#f00';

13. 请写出原生 JavaScript 实现 AJAX 的代码。

const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.open('GET', 'http://example.com');
xhr.send();

14. 请写出传统函数与箭头函数的区别。

传统函数：

- this 指向调用该函数的对象

- arguments 可以访问传入函数的所有参数

- 不能使用箭头符号

箭头函数：

- this 指向定义该函数时所处的对象

- 不能访问 arguments

- 可以使用箭头符号（=>）

15. 请写出三种 JavaScript 的循环结构的区别。

- for 循环：基本用法是按条件多次执行一个语句块

- for...in 循环：用于遍历对象的属性，返回对象属性名

- for...of 循环：用于遍历可迭代对象（如数组、Map、Set、字符串等），返回对象属性值

16. 什么是闭包？闭包有什么作用？

闭包是指一个函数能够访问并返回在该函数外部定义的变量。

闭包的作用：

- 封装变量，实现信息隐藏

- 保存变量状态，使得变量值在多个函数调用中不变

- 模块化代码，避免变量污染全局

17. 什么是事件冒泡和事件捕获？请写出一个示例代码。

事件冒泡和事件捕获是两种事件传播的方式。

事件冒泡的方式是从事件发生的元素一直向上级元素传递，直到传递到 document 对象结束。

事件捕获的方式是从 document 对象开始向下搜索，直到事件发生的元素结束。

示例代码：

<div id="parent">
  <div id="child"></div>
</div>

<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');

parent.addEventListener('click', () => {
  console.log('parent click');
}, true);

child.addEventListener('click', () => {
  console.log('child click');
}, true);
</script>

在这个例子中，事件捕获会先执行 parent 事件，然后执行 child 事件，事件冒泡则相反。

18. 请写出防抖和节流的代码，并简述它们的作用。

防抖是指在一个事件被触发后，等待一段时间后才执行对应的函数，如果这段时间内该事件又被触发，则需重新等待。防抖的作用是节省资源，防止连续触发重复的事件。

function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  }
}

节流是指在一个事件被触发后，每隔一段时间才执行对应的函数，如果这段时间内该事件又被触发，则需跳过执行。节流的作用是控制函数的执行频率，避免过度消耗 CPU 资源。

function throttle(fn, delay) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args);
        timer = null;
      }, delay);
    }
  }
}

19. 请写出原生 JavaScript 实现数组去重的代码。

const arr = [1, 2, 3, 2, 1];
const result = [...new Set(arr)];
console.log(result);

20. 请写出使用 Express 框架搭建一个简单的网站的代码。

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World');
});

app.listen(8080, () => {
  console.log('Server started');
});

21. 请写出 Node.js 中进行文件 I/O 操作的 API。

- fs.readFile()

-