引言
作为一名前端开发者,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有了更深入的了解。继续努力,不断实践,你将轻松掌握前端技能,成为优秀的前端开发者!
