正文

轻松掌握前端技能：精选JS笔试题及实战解析

/0 浏览量
0510

引言

作为一名前端开发者，JavaScript（简称JS）是必备技能之一。掌握JS不仅能让你在面试中脱颖而出，还能让你在工作中更加得心应手。本文将精选一些常见的JS笔试题，并对其进行实战解析，帮助你轻松掌握JS技能。

一、基础题解析

1. 作用域和闭包

题目：以下代码的输出是什么？

function test() {
  var a = 10;
  function innerTest() {
    console.log(a);
  }
  innerTest();
}
test();

解析：输出为10。这是因为innerTest函数内部可以访问test函数内部的变量a，这种现象称为闭包。

2. 事件循环

题目：以下代码的输出顺序是什么？

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
new Promise((resolve) => {
  console.log(4);
  resolve();
})(5);
console.log(6);

解析：输出顺序为1 3 4 6 5 2。JavaScript采用单线程模型，事件循环机制使得异步任务可以有序执行。

二、进阶题解析

1. 深拷贝与浅拷贝

题目：以下代码的输出是什么？

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

解析：输出为{ a: 1, b: { c: 2 } }。JSON.parse(JSON.stringify(obj))实现了对象的浅拷贝，不会影响嵌套对象的修改。

2. 高阶函数

题目：以下代码的输出是什么？

function add(a, b, fn) {
  return fn(a, b);
}
console.log(add(1, 2, (x, y) => x + y));

解析：输出为3。高阶函数可以将函数作为参数传递，也可以将函数作为返回值。

三、实战解析

1. 实现一个防抖函数

题目：请实现一个防抖函数debounce，它接收一个函数func和一个等待时间wait，返回一个新的函数debounced。

代码：

function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const context = this;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

// 使用示例
const handleScroll = debounce(() => {
  console.log('Scroll event!');
}, 500);
window.addEventListener('scroll', handleScroll);

2. 实现一个节流函数

题目：请实现一个节流函数throttle，它接收一个函数func和一个等待时间wait，返回一个新的函数throttled。

代码：

function throttle(func, wait) {
  let lastTime = 0;
  return function(...args) {
    const now = new Date().getTime();
    if (now - lastTime > wait) {
      lastTime = now;
      func.apply(this, args);
    }
  };
}

// 使用示例
const handleResize = throttle(() => {
  console.log('Resize event!');
}, 1000);
window.addEventListener('resize', handleResize);

结语

通过以上精选的JS笔试题及实战解析，相信你已经对JS有了更深入的了解。继续努力，不断实践，你将轻松掌握前端技能，成为优秀的前端开发者！

-- 展开阅读全文 --