JS常考面试真题5道

sym001
101 阅读6分钟

本片介绍Javascript中，ES6语法中各类数据结构的区别、用途和特性。其中包含：Map、Set、Object、Array、WeakMap、WeakSet、以及数组reduce的用法。

一、Map和Set区别

Map和Set是ES6中新增的数据结构，它们的主要区别在于它们的用途和存储方式。

Map是一种键值对集合，其中每个键对应一个唯一的值。Map中的键和值都可以是任意类型的数据，包括对象和函数等。Map中的键是唯一的，如果重复添加相同的键，则后面的值会覆盖前面的值。

Set是一种值的集合，其中每个值都是唯一的。Set中的值可以是任意类型的数据，包括对象和函数等。如果重复添加相同的值，则后面的值会被忽略。

因此，Map和Set的主要区别在于它们存储数据的方式不同。Map使用键值对的方式存储数据，而Set只存储值。另外，Map和Set的应用场景也不同。Map通常用于存储需要通过键来查找和访问的数据，而Set通常用于存储需要快速判断某个值是否存在的数据。

二、Map和Object的区别

Map和Object都是JavaScript中的数据结构，它们的主要区别在于它们的用途、存储方式和性能。

  1. 用途：

    • Object主要用于存储和管理一组相关的属性和方法，通常用于表示实际存在的事物。
    • Map主要用于存储和管理一组相关的键值对，通常用于表示抽象的数据结构。

  2. 存储方式：

    • Object使用字符串或Symbol类型的键来访问属性和方法，这些键都是唯一的。Object的属性和方法是无序的。
    • Map使用任意类型的键来访问值，这些键都是唯一的。Map中的键值对是有序的。

  3. 性能：

    • Map相对于Object来说，具有更好的性能表现。在存储大量数据时，Map比Object更快，并且在频繁添加和删除键值对时，Map的性能也更好。

另外，Map还具有一些Object所没有的特性，例如：

  • 可以获取Map的大小（即键值对的数量）。
  • 可以直接迭代Map中的键值对。
  • 可以很方便地将Map转换为数组。

因此，在需要存储一组相关的键值对时，Map比Object更加适合。而在需要表示实际存在的事物时，Object是更好的选择。

三、set和Array的区别

Set和Array都是JavaScript中的数据结构，它们的主要区别在于它们的用途、存储方式和操作方式。

  1. 用途：

    • Array主要用于存储和管理一组有序的数据，通常用于表示实际存在的事物。
    • Set主要用于存储和管理一组无序且唯一的数据，通常用于去重和快速判断某个值是否存在。

  2. 存储方式：

    • Array使用数字索引来访问元素，这些索引是唯一的。Array中的元素是有序的。
    • Set使用任意类型的值来存储数据，这些值都是唯一的。Set中的值是无序的。

  3. 操作方式：

    • Array提供了丰富的操作方法，例如push、pop、shift、unshift、splice等，可以方便地添加、删除和修改元素。
    • Set提供了一些基本的操作方法，例如add、delete、has等，可以方便地添加、删除和判断值是否存在。

另外，Set还具有一些Array所没有的特性，例如：

  • 可以获取Set的大小（即元素的数量）。
  • 可以直接迭代Set中的元素。
  • 可以很方便地将Set转换为数组。

因此，在需要存储一组有序的数据时，Array比Set更加适合。而在需要去重或快速判断某个值是否存在时，Set是更好的选择。

四、WeakMap和WeakSet的区别

WeakMap和WeakSet是ES6中新增的两种数据结构，它们都是基于弱引用的，与Map和Set相比，它们有一些不同的特点。

首先，WeakMap和WeakSet的键只能是对象，而且这些对象都是弱引用。也就是说，当对象被垃圾回收机制回收时，它们在WeakMap和WeakSet中的引用也会被自动移除，这样可以避免内存泄漏的问题。

其次，WeakMap和WeakSet不支持迭代器和forEach方法，因为它们的键是弱引用，可能在迭代过程中被回收，导致迭代器失效。

最后，WeakMap和WeakSet没有size属性，也不能使用clear方法清空所有的键值对，因为这些操作都需要遍历所有的键值对，而弱引用的特性使得这些操作不可行。

总之，WeakMap和WeakSet适用于需要使用对象作为键，并且不需要遍历所有键值对的场景，例如缓存、事件处理等。

五、数组reduce的用法

数组的reduce方法可以将数组中的所有元素通过一个函数进行累积计算，并返回计算结果。reduce方法接收两个参数，第一个参数是一个回调函数，第二个参数是一个初始值。回调函数可以接收四个参数：累积值（也称为上一次的返回值）、当前值、当前索引和原数组。回调函数中的返回值将作为下一次调用回调函数的累积值。

下面是一个简单的示例，演示如何使用reduce方法对数组中的所有元素求和：

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 15

在上面的代码中，reduce方法的第一个参数是一个箭头函数，它接收两个参数：累积值和当前值。箭头函数中的代码将累积值和当前值相加，并返回相加后的值。reduce方法的第二个参数是初始值，这里设置为0。

除了求和，reduce方法还可以用于计算数组中的最大值、最小值、平均值等。下面是一个计算平均值的示例：

const numbers = [1, 2, 3, 4, 5];
const average = numbers.reduce((accumulator, currentValue, index, array) => {
  accumulator += currentValue;
  if (index === array.length - 1) {
    return accumulator / array.length;
  } else {
    return accumulator;
  }
}, 0);
console.log(average); // 3

在上面的代码中，reduce方法的回调函数中增加了两个参数：当前索引和原数组。通过这两个参数可以在回调函数中判断是否是最后一个元素，从而计算平均值。

avatar
文章
阅读
粉丝