【面试宝典】84道JavaScript高频题库整理(附答案背诵版)

想念@思恋

于 2024-08-08 22:02:43 发布

阅读量4.4k

点赞数 24

CC 4.0 BY-SA版权

分类专栏：前端 java 面试宝典文章标签：面试 javascript 职场和发展

本文链接：https://blog.youkuaiyun.com/tailonh/article/details/141037284

1、简述JavaScript中map和foreach的区别？

map和forEach都是JavaScript数组的迭代方法，但它们之间存在一些关键区别。

返回值：map方法会返回一个新的数组，这个新数组是由原数组通过某个函数处理后的结果组成的。而forEach方法则没有返回值，它仅仅是对数组中的每个元素执行一次给定的函数。
修改原数组：forEach方法可以直接修改原数组，而map方法则不会改变原数组，而是创建一个全新的数组。
性能：在大多数现代浏览器中，map的性能通常优于forEach。

让我们来看一个例子：

let arr = [1, 2, 3, 4, 5];

// 使用map
let mapResult = arr.map(num => num * 2);
console.log(mapResult); // 输出：[2, 4, 6, 8, 10]
console.log(arr); // 输出：[1, 2, 3, 4, 5]

// 使用forEach
let forEachResult = [];
arr.forEach(num => forEachResult.push(num * 2));
console.log(forEachResult); // 输出：[2, 4, 6, 8, 10]
console.log(arr); // 输出：[1, 2, 3, 4, 5]

在这个例子中，我们可以看到，尽管map和forEach都可以对数组中的每个元素执行同样的操作（乘以2），但map返回了一个新的数组，原数组并没有改变；而forEach则没有返回值，我们需要创建一个新的数组来存储结果。同时，原数组在forEach操作后也没有发生改变。

2、解释下JavaScript中this是如何工作的？

在 JavaScript 中，this关键字是一个特殊的变量，它在每个函数作用域内都有定义。它的值取决于函数如何被调用。

全局作用域或函数调用： 在全局作用域或者普通函数调用中，this指向全局对象，也就是window（在浏览器中）或者global（在Node.js中）。

console.log(this); // 输出：Window {...}

function test() {
   
   
  console.log(this);
}
test(); // 输出：Window {...}

作为对象方法调用： 当函数作为对象的一个方法被调用时，this指向这个对象。

const obj = {
   
   
  name: 'Alice',
  sayHello: function() {
   
   
    console.log(this.name);
  }
};
obj.sayHello(); // 输出：Alice

作为构造函数调用： 当使用new关键字调用函数时，this指向新创建的对象。

function Person(name) {
   
   
  this.name = name;
}

let alice = new Person('Alice');
console.log(alice.name); // 输出：Alice

在事件处理函数中： 在 DOM 事件处理函数中，this通常指向触发事件的元素。

button.addEventListener('click', function() {
   
   
  console.log(this); // 输出：触发点击事件的button元素
});

箭头函数： 箭头函数没有自己的this，它会捕获其所在（即定义的位置）上下文的this值。

const obj = {
   
   
  name: 'Alice',
  sayHello: function() {
   
   
    setTimeout(() => {
   
   
      console.log(this.name); // 输出：Alice
    }, 1000);
  }
};
obj.sayHello();

使用call，apply，bind调用： 使用call，apply或bind方法，可以设置函数运行时的this值。

function greet() {
   
   
  console.log(`Hello, ${
     
     this.name}`);
}

const alice = {
   
    name: 'Alice' };
const bob = {
   
    name: 'Bob' };

greet.call(alice); // 输出：Hello, Alice
greet.call(bob); // 输出：Hello, Bob

总的来说，this的值是在函数被调用时确定的，而不是在函数被定义时确定。这就是 JavaScript 中的动态作用域。

3、JavaScript阻止事件冒泡的方法？

在JavaScript中，阻止事件冒泡可以使用事件对象的stopPropagation方法。当事件发生时，浏览器会创建一个事件对象，这个对象包含了与事件相关的各种信息和方法，其中就包括stopPropagation方法。

这个方法可以阻止当前事件继续向上层元素传播，也就是停止事件冒泡。

我们来看一个例子：

document.querySelector("#child").addEventListener('click', function(event) {
   
   
  event.stopPropagation();
  console.log("Child element clicked!");
});

document.querySelector("#parent").addEventListener('click', function() {
   
   
  console.log("Parent element clicked!");
});

在这个例子中，当你点击ID为child的元素时，浏览器会首先执行该元素的点击事件处理函数，然后因为我们调用了event.stopPropagation()，事件就不会继续向上冒泡到父元素，也就是ID为parent的元素。所以，你只会看到控制台打印出"Child element clicked!“，而不会看到"Parent element clicked!”。

需要注意的是，stopPropagation只能阻止事件向上冒泡，但不能阻止其他