前端面试题(六)

1.let,var,const区别

1.作用域：
　·var：var声明的变量存在函数作用域或全局作用域，这意味着它们在声明它们的函数内部可见，而不在块级作用域内可见。
    ·let和const：let和const声明的变量存在块级作用域，这意味着它们在声明的块内可见，例如，if语句、循环或花括号内的代码块。
  2.变量提升：
    ·var：var声明的变量会被提升到它们所在作用域的顶部，但初始化的值不会提升。
   ·let和const：let和const声明的变量也会被提升，但它们不会被初始化。这意味着在声明之前访问 它们会导致暂时性死区(Temporal Dead Zone，TDZ)错误。
  3.可变性：
　·var：var声明的变量可以被多次赋值，并且可以在同一作用域内重复声明。
　·let：let声明的变量可以被多次赋值，但不允许在同一作用域内重复声明。
    ·const：const声明的变量必须被初始化，并且不能被重新赋值，但对象和数组等复杂类型的内容可以被修改
  4.全局对象属性：
　　·var声明的变量会成为全局对象的属性(在浏览器环境中通常是 window 对象)。
　　·let和const不会成为全局对象的属性。
 5.适用场景：
　　·var在ES6之前是唯一的声明关键字，但由于它的一些问题，现在通常不推荐使用。
　　·let通常用于需要重新赋值的变量。
　　·const通常用于不需要重新赋值的常量。

2.map和foreach区别

1. 返回值：map操作会返回一个新的集合，该集合包含了原始集合中每个元素经过指定函数处理后的结果；而foreach操作没有返回值，它仅对原始集合中的每个元素执行指定的操作，不会生成新的集合。

2. 函数作用：map通常需要一个函数作为参数，这个函数定义了如何将原始集合中的每个元素转换为新元素；foreach同样需要一个函数，但这个函数用于指定对每个元素执行的操作，这些操作不一定会产生新的结果。

 3. 数据不变性：map操作不会改变原始集合中的数据，它创建了一个新的集合来存储转换后的结果；foreach操作可能会改变原始集合中的元素，因为它直接在原始元素上执行操作。

 4. 用途：map常用于需要根据现有数据生成新数据的场景，如数据转换、计算等；foreach则适用于需要对每个元素执行某些操作，而这些操作不需要返回值的场景，如打印日志、更新状态等。
 5. 性能考虑：由于map会创建一个新的集合，因此在处理大量数据时可能会占用更多的内存；foreach则直接在原始集合上操作，不需要额外的内存空间。

3.v-model组成

 v-model本质上是一个语法糖，它是v-bind和v-on的组合。具体来说，v-model通过v-bind绑定一个value属性，并通过v-on指令监听input事件来实现数据的双向绑定。

4.vue中的data为什么是函数

Vue中的data是函数的主要原因是为了确保每个组件实例都有独立的数据作用域，避免数据污染和状态共享问题。‌

1.数据隔离‌：当data是一个函数时，每次创建组件实例时都会调用这个函数，返回一个新的数据对象。这样，每个组件实例都有自己的数据对象，互不干扰。如果data是一个对象，所有的组件实例将共享同一个数据对象，导致数据污染和状态共享问题‌12。

‌2.避免共享状态‌：如果data是一个对象，当一个组件实例修改了数据，其他所有实例的数据也会被修改。这通常是不希望的，因为不同的组件实例通常需要有不同的状态。通过将data定义为一个函数，每个组件实例都有自己的数据对象，避免了状态的共享‌2。

‌3.支持组件复用‌：Vue中的组件是可复用的UI构建块。通过将data定义为一个函数，每个组件实例在创建时都会生成一个新的数据对象，这使得组件的复用更加安全和可靠。每个组件实例都有独立的数据，不会受到其他实例的影响‌

5.es6新增的两个set和map

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
Map 对象保存键值对，并且能记住键的原始插入顺序。

6.vue中数据更新了视图没更新的解决办法

1.使用watch监听对象属性变化
 2.使用this.$set()强制更新响应式变量
 3.使用this.$forceUpdate()强制性重新渲染

7.react中的hook

react hook是react 16.8推出的方法，能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性

8.for函数和foreach区别

1.适用对象： for循环适用于任何需要重复执行指定次数的情况，而foreach循环专门用于遍历集合类型的数据，更加简洁易读。
2.循环变量： for循环需要在外部显式声明循环变量，并在循环体内进行更新操作。而foreach循环则不需要显式声明循环变量，直接将集合中的元素赋值给一个临时变量。
3.索引访问： for循环可以通过索引访问数组或列表中的元素，因为循环变量i可以作为索引。而foreach循环只能逐个访问集合中的元素，不能直接获取索引。
4.遍历方式： for循环可以根据需要自由设置循环条件和迭代步长，可以实现倒序遍历等复杂遍历方式。而foreach循环只能顺序遍历集合中的元素。

9.ts的数据类型

‌1.基本数据类型‌：
‌number‌：用于表示数值类型，包括整数和浮点数。例如：let num: number = 123。
‌string‌：用于表示文本数据。例如：let str: string = 'abc'。
‌boolean‌：表示逻辑值，只有 true 和 false。例如：let isDone: boolean = false。
‌null‌ 和 ‌undefined‌：表示空值。null 和 undefined 是所有类型的子类型，但使用严格空检查可以避免意外的空值。
‌symbol‌：表示唯一标识符，通常用于对象属性的键。
‌2.复合数据类型‌：
‌Array‌：表示数组类型，可以包含多个相同类型或不同类型的元素。例如：let arr: number[] = 。
‌Tuple‌：表示元组类型，可以定义具有固定数量和类型的元素的数组。例如：let tuple: [string, number] = ['abc', 123]。
‌Object‌：表示对象类型，可以包含多个键值对。例如：let obj: object = {name: 'abc'}。
‌Function‌：表示函数类型，包括函数的参数类型和返回值类型。
3‌.特殊数据类型‌：
‌any‌：可以代表任何类型，但过度使用会削弱TypeScript的类型安全特性。例如：let anyVar: any = 'hello'。
‌void‌：用于标识没有返回值的函数。例如：function sayHello(): void { console.log('Hello'); }。
‌never‌：表示那些永不会达到终点的代码，例如无限循环的函数。例如：function infiniteLoop(): never { while (true) {} }。

10.watch和computed区别

 一、指代不同

1、computed： (用计算机或计数器)计算；估计。

2、watch：注视；看守；观看；手表；监视；看守；值班。

二、侧重点不同

1、computed： 多用于表示人在使用计算机或计算器在进行计算、估算。

2、watch：多用于表示对某事物或人的看守、监视；同时表示物体：手表之意。

三、引证用法不同

1、computed：compute作计算，估算解时，是正式用法，指计算结果、答案、数目等；用作及物动词时，可接名词、代词或that从句作宾语。

2、watch：watch的基本意思是观看、注视，指用眼睛跟踪某物以观察到每一个动作、变化、危险迹象、机会等。引申可表示照管、守护、保卫等，指明确需要警觉，做好防止危险发生的准备，强调连续性和职务性。

11.vue3中的ref和rective区别

1. 数据类型不同：ref用于包装JavaScript基本类型的数据（如字符串、数字、布尔值等），而reactive可以用于包装JavaScript对象和数组等复杂类型的数据。
2. 使用方式不同：ref需要通过在模板中使用ref指令以及在JavaScript代码中使用ref函数进行创建和使用，而reactive则需要通过调用Vue.js提供的reactive函数进行包装和创建。
3. 访问方式不同：对于通过ref函数创建的响应式数据，我们可以通过.value属性来访问其实际值；而对于通过reactive函数创建的响应式对象，我们可以直接访问其属性或调用其方法。
4. 设计理念不同：ref主要是为了解决单一元素/数据的响应式问题，而reactive则是为了解决JavaScript对象和数组等复杂数据结构的响应式问题。

12.vue2中的Mixins和vue3中的hook

1.语法和用法：Hooks 是在 Vue 3 的 Composition API 中引入的一种函数式编程的方式，而 Mixins 是在 Vue 2 中的一种对象混入机制。Hooks 使用函数的方式定义和使用，而 Mixins 则是通过对象的方式进行定义和应用。

2.组合性和灵活性：Composition API 的 Hooks 允许开发者根据逻辑功能来组合和复用代码，可以将相关的逻辑和状态封装为自定义的 Hook 函数。而 Mixins 在组件中的属性和方法会与组件本身的属性和方法进行合并，可能会导致命名冲突或不可预料的行为。

3.响应式系统：Vue 3 的 Composition API 使用了一个新的响应式系统，可以通过 reactive 和 ref 来创建响应式数据。这样可以更精确地控制组件的更新和依赖追踪。而 Mixins 使用 Vue 2 的响应式系统，对数据的追踪和更新较为简单，可能存在一些性能上的问题。

4.生命周期钩子：在 Vue 3 的 Composition API 中，可以使用 onMounted、onUpdated 等钩子函数来替代 Vue 2 中的生命周期钩子。这样可以更灵活地管理组件的生命周期。Mixins 依然使用 Vue 2 的生命周期钩子。

总结

以上是我面试遇到的问题，答案可能有错漏，可自行查阅。