以下是一些常见的JavaScript面试题目和答案:
1. 什么是闭包?举个例子说明一下。
闭包是指内部函数可以访问外部函数作用域中的变量和参数,即使外部函数已经返回。以下是一个闭包的例子:
function outer() {
var x = 10;
function inner() {
console.log(x);
}
return inner;
}
var closure = outer();
closure(); // 输出 10
2. 什么是原型链?如何利用原型链实现继承?
原型链是指对象之间通过 __proto__
属性相互关联形成的链式结构。JavaScript 中的继承就是通过原型链来实现的。以下是一个利用原型链实现继承的例子:
function Animal(name) {
this.name = name;
}
Animal.prototype.sayName = function() {
console.log(this.name);
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log('Woof!');
};
var dog = new Dog('Fido');
dog.sayName(); // 输出 'Fido'
dog.bark(); // 输出 'Woof!'
**
3. 什么是事件循环?如何理解 JavaScript 中的异步编程?
**
事件循环是指 JavaScript 运行时对事件和任务进行调度的机制。JavaScript 是单线程的,因此必须采用异步编程来避免阻塞主线程。异步编程可以通过回调函数、Promise 和 async/await 等方式来实现。
- 如何判断一个变量是否为数组?
可以使用 Array.isArray()
方法来判断一个变量是否为数组。例如:
var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出 true
var obj = { a: 1, b: 2 };
console.log(Array.isArray(obj)); // 输出 false
5. 如何判断一个变量是否为对象?
可以使用 typeof
运算符来判断一个变量是否为对象。例如:
var obj = { a: 1, b: 2 };
console.log(typeof obj === 'object'); // 输出 true
var arr = [1, 2, 3];
console.log(typeof arr === 'object'); // 输出 true
var str = 'hello';
console.log(typeof str === 'object'); // 输出 false
6. 如何在 JavaScript 中实现类?
JavaScript 中没有类的概念,但可以使用构造函数和原型来实现类似于类的功能。以下是一个实现类的例子:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayName = function() {
console.log(this.name);
};
Person.prototype.sayAge = function() {
console.log(this.age);
};
var person = new Person('Alice', 30);
person.sayName(); // 输出 'Alice'
person.sayAge(); // 输出 30
7. 如何在 JavaScript 中实现模块化?
可以使用 CommonJS 或 ES6 模块化来实现 JavaScript 中的模块化。以下是一个使用 CommonJS 实现模块化的例子:
// math.js
function add(x, y) {
return x + y;
}
module.exports = { add };
// main.js
var math = require('./math');
console.log(math.add(1, 2)); // 输出 3
8. 如何实现数组去重?
可以使用 Set
数据结构或循环遍历数组来实现数组去重。以下是一个使用 Set
实现数组去重的例子:
var arr = [1, 2, 3, 2, 1];
var uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // 输出 [1, 2, 3]
9. 如何实现字符串反转?
可以使用 split()
和 reverse()
方法来实现字符串反转。以下是一个字符串反转的例子:
var str = 'hello';
var reversedStr = str.split('').reverse().join('');
console.log(reversedStr); // 输出 'olleh'
10. 如何判断一个字符串是否为回文字符串?
可以先将字符串反转,然后与原字符串进行比较。以下是一个判断回文字符串的例子:
function isPalindrome(str) {
var reversedStr = str.split('').reverse().join('');
return str === reversedStr;
}
console.log(isPalindrome('racecar')); // 输出 true
console.log(isPalindrome('hello')); // 输出 false
11. 如何实现函数柯里化?
可以使用闭包和递归来实现函数柯里化。以下是一个实现函数柯里化的例子:
function add(x) {
return function(y) {
return x + y;
};
}
console.log(add(1)(2)); // 输出 3
12. 如何实现函数节流?
可以使用定时器和时间戳来实现函数节流。以下是一个实现函数节流的例子:
function throttle(func, delay) {
var lastTime = 0;
return function() {
var currentTime = Date.now();
if (currentTime - lastTime > delay) {
func.apply(this, arguments);
lastTime = currentTime;
}
};
}
window.addEventListener('scroll', throttle(function() {
console.log('scrolling');
}, 1000));
13. 如何实现函数防抖?
可以使用定时器来实现函数防抖。以下是一个实现函数防抖的例子:
function debounce(func, delay) {
var timer;
return function() {
clearTimeout(timer);
timer = setTimeout(function() {
func.apply(this, arguments);
}, delay);
};
}
window.addEventListener('scroll', debounce(function() {
console.log('scrolling');
}, 1000));
14. 如何获取 URL 中的查询参数?
可以使用 URLSearchParams
对象或正则表达式来获取 URL 中的查询参数。以下是一个使用 URLSearchParams
对象获取查询参数的例子:
var searchParams = new URLSearchParams(window.location.search);
console.log(searchParams.get('q')); // 假设 URL 是 http://example.com/?q=hello,输出 'hello'
15. 如何在 JavaScript 中生成随机数?
可以使用 Math.random()
方法生成随机数。以下是一个生成指定范围内随机数的例子:
function getRandomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandomNumber(1, 10)); // 输出介于 1 和 10(含)之间的随机整数
16. 如何将字符串转换为数字?
可以使用 parseInt()
或 parseFloat()
方法将字符串转换为数字。以下是一个将字符串转换为数字的例子:
var str = '123';
var num = parseInt(str);
console.log(num); // 输出数字类型的值 123
17. 如何将数字转换为字符串?
可以使用 toString()
方法将数字转换为字符串。以下是一个将数字转换为字符串的例子:
var num = 123;
var str = num.toString();
console.log(str); // 输出字符串类型的值 '123'
18. 如何判断一个数是否为偶数?
可以使用取模运算符 %
判断一个数是否为偶数。如果一个数除以二余数为零,则该数为偶数。以下是一个判断偶数的例子:
function isEven(num) {
return num % 2 === 0;
}
console.log(isEven(2)); // 输出 true
console.log(isEven(3)); // 输出 false
19. 如何判断一个数是否为质数?
可以使用循环遍历和取模运算符 %
判断一个数是否为质数。如果一个数除以大于一且小于该数本身的所有整数都有余数,则该数为质数。以下是一个判断质数的例子:
function isPrime(num) {
if (num <= 1) {
return false;
}
for (var i = 2; i < num; i++) {
if (num % i === 0) {
return false;
}
}
return true;
}
console.log(isPrime(2)); // 输出 true
console.log(isPrime(3)); // 输出 true
console.log(isPrime(4)); // 输出 false
20. 如何获取当前时间戳?
可以使用 Date.now()
方法获取当前时间戳。以下是一个获取当前时间戳的例子:
var timestamp = Date.now();
console.log(timestamp); // 输出当前时间戳(以毫秒为单位)
21. 如何格式化日期时间?
可以使用 Date
对象和字符串拼接等方式来格式化日期时间。以下是一个格式化日期时间的例子:
var date = new Date();
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var hours = ('0' + date.getHours()).slice(-2);
var minutes = ('0' + date.getMinutes()).slice(-2);
var seconds = ('0' + date.getSeconds()).slice(-2);
var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
console.log(formattedDate); // 输出格式化后的日期时间字符串,例如 '2023-07-03 15:30:00'
22. 如何在 JavaScript 中操作 DOM 元素?
可以使用 document.getElementById()
、document.querySelector()
、document.querySelectorAll()
等方法来获取 DOM 元素,然后使用元素对象上的属性和方法来操作 DOM 元素。以下是一个操作 DOM 元素的例子:
// HTML: <div id="my-div">Hello</div>
var myDiv = document.getElementById('my-div');
myDiv.innerHTML = 'World';
myDiv.style.color = 'red';
23. 如何在 JavaScript 中添加事件监听器?
可以使用元素对象上的 addEventListener()
方法来添加事件监听器。以下是一个添加事件监听器的例子:
// HTML: <button id="my-button">Click me</button>
var myButton = document.getElementById('my-button');
myButton.addEventListener('click', function() {
console.log('Button clicked');
});
24. 如何在 JavaScript 中创建新元素并添加到 DOM 中?
可以使用元素对象上的 createElement()
方法创建新元素,然后使用元素对象上的属性和方法设置元素属性和内容,最后使用元素对象上的 appendChild()
方法将元素添加到 DOM 中。以下是一个创建新元素并添加到 DOM 中的例子:
// HTML: <div id="my-container"></div>
var myContainer = document.getElementById('my-container');
var myParagraph = document.createElement('p');
myParagraph.innerHTML = 'Hello';
myContainer.appendChild(myParagraph);
25. 如何在 JavaScript 中删除元素?
可以使用元素对象上的 removeChild()
方法或父级元素对象上的 removeChild()
方法删除元素。以下是一个删除元素的例子:
// HTML: <div id="my-container"><p>Hello</p></div>
var myContainer = document.getElementById('my-container');
var myParagraph = document.querySelector('p');
myContainer.removeChild(myParagraph);
26. 如何在 JavaScript 中修改元素属性?
可以使用元素对象上的属性和方法来修改元素属性。例如,要修改元素的 class
属性,可以使用元素对象上的 className
属性;要修改元素的样式,可以使用元素对象上的 style
属性;要修改元素内容,可以使用元素对象上的 innerHTML
或 textContent
属性等。以下是一个修改元素属性的例子:
// HTML: <div id="my-div" class="foo" style="color: red;">Hello</div>
var myDiv = document.getElementById('my-div');
myDiv.className += ' bar'; // 添加新 class
myDiv.style.backgroundColor = 'blue'; // 修改背景颜色
myDiv.textContent = 'World'; // 修改内容
27. 如何在 JavaScript 中获取和修改表单元素值?
可以使用表单元素对象上的属性和方法来获取和修改表单元素值。例如,要获取文本框输入框中输入的值,可以使用文本框输入框对象上的 value
属性;要修改单选框或复选框选中状态,可以使用单选框或复选框对象上的 checked
属性等。以下是一个获取和修改表单元素值的例子:
// HTML: <input type="text" id="my-input">
// <input type="checkbox" id="my-checkbox">
var myInput = document.getElementById('my-input');
console.log(myInput.value); // 获取文本框输入框中输入的值
var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.checked = true; // 修改复选框选中状态
28. 如何在 JavaScript 中发送 AJAX 请求?
可以使用 XMLHttpRequest
对象或 Fetch API 来发送 AJAX 请求。以下是一个使用 XMLHttpRequest
对象发送 AJAX 请求并处理响应数据的例子:
function sendAjaxRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
callback(xhr.responseText);
}
};
xhr.open('GET', url);
xhr.send();
}
sendAjaxRequest('https://jsonplaceholder.typicode.com/todos/1', function(responseText) {
var data = JSON.parse(responseText);
console.log(data.userId); // 输出响应数据中 userId 的值
});
29. 如何在 JavaScript 中处理异常?
可以使用 try...catch
块来处理异常。在 try
块中编写可能会抛出异常的代码,在 catch
块中处理异常情况并采取相应措施。以下是一个处理异常的例子:
try {
var result = someFunctionThatMayThrowAnError();
} catch (error) {
console.error(error.message);
}
30. 如何在 JavaScript 中进行单元测试?
可以使用测试框架(如 Mocha、Jasmine、QUnit 等)和断言库(如 Chai、Expect.js 等)来进行单元测试。编写测试用例,执行测试,并根据测试结果进行调试和修复代码缺陷。例如,在 Mocha 和 Chai 中编写并执行测试用例的方法如下:
// 安装 Mocha 和 Chai:
// npm install --save-dev mocha chai
// 编写测试用例:
describe('someFunction', function() {
it('should return the correct result', function() {
var result = someFunction(1, 2);
expect(result).to.equal(3);
});
});
// 执行测试:
// mocha test.js