常见的JavaScript面试题目和答案

以下是一些常见的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 等方式来实现。

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

可以使用 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 属性;要修改元素内容,可以使用元素对象上的 innerHTMLtextContent 属性等。以下是一个修改元素属性的例子:

// 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

猜你喜欢

转载自blog.csdn.net/weixin_45441470/article/details/131519978