mwvm与mvc的区别

MVVM和MVC都是常见的软件架构模式，它们有些类似，但也有一些区别。

MVC（Model-View-Controller）是一种软件架构模式，将应用程序分为三个主要组件：模型（Model）、视图（View）和控制器（Controller）。其中，模型是应用程序的核心组件，表示应用程序的数据和业务逻辑；视图是应用程序的用户界面，表示数据的外观；控制器负责处理用户输入和数据流，将用户请求传递给模型并更新视图。MVC将应用程序分为不同的关注点，使得应用程序更易于开发、测试和维护。

MVVM（Model-View-ViewModel）是一种基于MVC的软件架构模式，它的核心是ViewModel。ViewModel是一个用于展示数据并与用户交互的中间层，它连接了视图和模型。与MVC不同的是，MVVM中的ViewModel负责将模型数据转换为视图所需的格式，以及接收和处理用户输入。这使得视图与模型之间的耦合度更低，也更易于开发和维护。

因此，MVVM和MVC的区别在于MVVM多了一个ViewModel层，这一层的作用是将模型数据转换为视图所需的格式，并且将用户输入传递给模型。这样可以使得视图和模型之间的耦合度更低，也使得应用程序更易于开发和维护。

在vue中,对响应式数据的理解

在 Vue 中，响应式数据是指当 Vue 实例中的数据发生变化时，Vue 会自动检测并且通知相关的组件进行视图的重新渲染。

Vue 实现响应式数据的核心是通过 Object.defineProperty() 方法来定义一个属性的 getter 和 setter。在 Vue 中，每个组件实例都有一个自己的响应式数据对象，称之为 data 对象。当 data 中的属性被访问时，Vue 会通过 getter 来跟踪这个属性，并且将组件实例添加到一个订阅者列表中。当这个属性被修改时，Vue 会通过 setter 来更新这个属性，并且通知订阅者列表中的组件实例进行重新渲染。

使用响应式数据可以让 Vue 实现数据与视图的双向绑定，当数据发生变化时，视图会自动更新，反之亦然。同时，使用响应式数据也可以让开发者更加方便地管理数据状态，因为不需要手动进行 DOM 操作，而是让 Vue 自动管理视图更新。不过需要注意的是，由于 Vue 的数据劫持机制是通过 Object.defineProperty() 方法来实现的，所以对于数组的变化，需要使用 Vue 提供的一些特殊方法（如 push()、splice() 等）来触发响应式更新。

vue3和vue2相比,在响应式数据做了哪些改变

1.使用 Proxy 替代 Object.defineProperty()

在 Vue 3 中，响应式数据的实现使用了 Proxy 对象代替了 Object.defineProperty() 方法。相比于 Object.defineProperty()，Proxy 对象具有更加强大和灵活的功能，可以直接代理整个对象而不仅仅是其中的属性，并且支持动态的属性添加和删除。

2.支持嵌套属性的监听

在 Vue 3 中，对于对象和数组中嵌套的属性，也可以进行监听和响应式更新。这使得 Vue 3 可以更加方便地管理复杂的数据结构，并且可以对任何深度的数据进行响应式更新。

3.改进了数组的响应式更新

在 Vue 3 中，对于数组的响应式更新进行了优化和改进，使用了类似于 React 的机制来避免不必要的重新渲染。同时，Vue 3 也提供了一些新的 API（如 toRefs()、reactive() 等）来更加方便地处理数组的响应式更新。

4.改进了初始化的性能

在 Vue 3 中，对于初始化时的性能进行了优化，使用了懒初始化的方式来避免不必要的性能消耗。这意味着只有在组件实际需要使用响应式数据时才会进行初始化，而不是在组件创建时立即进行初始化。这使得 Vue 3 可以更加高效地处理大型和复杂的组件。

综上所述，Vue 3 在响应式数据方面进行了许多重大改进，这些改进使得 Vue 3 更加灵活、高效和易用，可以更好地应对复杂的数据结构和大型的应用程序。(vue2中,Options API 是主要的编写组件代码的方式,而vue3是Composition API,但是在 Vue 3 中，Options API 仍然是可以使用的)

在vue中,模板编译的流程(如何从 template 转为真实Dom)

在 Vue 中，模板编译的流程主要包括以下几个步骤：

1.解析模板

Vue 的模板编译器会将模板字符串解析为抽象语法树（AST），这个过程会识别模板中的各种语法结构，如标签、属性、指令等。

2.生成渲染函数

根据解析出来的 AST，Vue 的模板编译器会生成对应的渲染函数。渲染函数是一个返回虚拟 DOM 的函数，它描述了如何将组件渲染成最终的 HTML。

3.优化渲染函数

在生成渲染函数之后，Vue 会对渲染函数进行一些优化，以提高渲染性能。这些优化包括静态节点提升、事件侦听器缓存等。

4.创建虚拟 DOM

当组件需要被渲染时，Vue 会调用渲染函数来生成虚拟 DOM（Virtual DOM），虚拟 DOM 是一个描述真实 DOM 的 JavaScript 对象。

5.更新虚拟 DOM

当组件中的数据发生变化时，Vue 会重新调用渲染函数来生成新的虚拟 DOM。Vue 会通过比较新旧虚拟 DOM 的差异，来计算出需要更新的部分，然后再把这些部分更新到真实 DOM 中。

6.渲染真实 DOM

最后，Vue 会把更新后的虚拟 DOM 渲染成真实 DOM，并把它插入到文档中。

综上所述，Vue 的模板编译的流程可以简单地概括为：解析模板、生成渲染函数、优化渲染函数、创建虚拟 DOM、更新虚拟 DOM、渲染真实 DOM。

在vue中,Mixin 的使用场景与优缺点

Mixin 是一种在 Vue 中用于共享组件逻辑的方式。它允许我们在多个组件中复用相同的代码片段，从而提高代码的复用性和可维护性。

Mixin 的使用场景：

1. 多个组件有相似的功能逻辑，但是不想重复编写代码。
2. 想在一个组件中复用另一个组件的功能逻辑。

Mixin 的优点：

1. 提高代码复用性：Mixin 可以让我们在多个组件中复用相同的代码片段，减少重复代码的编写。
2. 提高可维护性：Mixin 可以将组件逻辑分离出来，降低代码的耦合性，提高代码的可维护性。
3. 提高开发效率：Mixin 可以让我们快速地实现组件逻辑，节省开发时间。

Mixin 的缺点：

1. 命名冲突：如果多个 Mixin 中定义了相同的属性或方法，会造成命名冲突，导致程序出错。
2. 代码复杂度：如果使用过多的 Mixin，会导致代码变得复杂和难以维护。
3. 状态管理困难：由于 Mixin 中的状态可能被多个组件使用，因此状态管理可能会变得困难。

综上所述，Mixin 可以提高代码的复用性和可维护性，但是需要注意命名冲突、代码复杂度和状态管理等问题。在使用 Mixin 时，应该合理地选择 Mixin，避免滥用和过度依赖。

在vue中,Data 为什么必须是个函数

在 Vue 组件中，如果 Data 选项是一个纯对象，则会造成所有组件实例之间共享该对象的数据。这意味着，如果一个组件修改了该对象的属性，那么所有其他组件中使用该对象的属性也会被修改，从而导致程序出现难以预料的行为。

为了避免这种情况的发生，Vue 强制 Data 选项必须是一个返回一个对象的函数。每个组件实例会调用该函数并返回它自己的数据对象，这样每个组件实例都会有一个独立的数据对象，从而避免了数据共享的问题。

简单来说，Data 必须是一个函数，这样每次创建一个新的组件实例时，都会为该实例创建一个新的数据对象，从而避免了数据共享的问题。如果 Data 是一个对象，那么所有组件实例将共享同一个数据对象，导致数据冲突。

在vue中,NextTick 如何实现的，什么是宏/微任务及宏/微任务的种类，宏/微任务的执行顺序

Vue 中的 nextTick() 方法是用来在 DOM 更新完成后执行回调函数的方法。在 Vue 的响应式更新过程中，有时需要在 DOM 更新完成后才能执行一些操作，例如获取 DOM 元素的位置信息等。这时就可以使用 nextTick() 方法来延迟执行这些操作，以确保在 DOM 更新完成后才执行。

nextTick() 的实现原理是利用了浏览器的宏/微任务机制。宏任务和微任务是 JavaScript 中异步执行代码的两种方式。

宏任务包括：

• setTimeout 和 setInterval
• I/O 操作
• DOM 渲染

微任务包括：

• Promise.then 和 Promise.catch
• MutationObserver
• Object.observer
• process.nextTick (Node.js)

当一个宏任务执行完毕后，会检查是否有微任务需要执行，如果有则先执行微任务队列中的所有任务，直到微任务队列为空，再执行下一个宏任务。所以可以利用这个机制，将回调函数放到微任务队列中，以确保在 DOM 更新完成后执行。

具体地，Vue 中的 nextTick() 方法的实现可以分为以下几个步骤：

1. 将回调函数放到一个数组中。
2. 判断是否已经有一个异步任务正在执行，如果没有则创建一个异步任务并将数组中的回调函数全部执行。
3. 如果已经有一个异步任务在执行，则只将回调函数添加到数组中等待执行。

总体来说，nextTick() 方法的实现就是利用了浏览器的异步任务机制，将回调函数添加到微任务队列中，在 DOM 更新完成后执行回调函数。

需要注意的是，在 Vue 3 中，nextTick() 方法的实现方式有所改变，采用了新的异步执行机制——scheduler。但是基本的原理是一样的，都是利用了浏览器的宏/微任务机制来实现异步任务的执行。

Vue.set 是如何实现的

Vue.set 是 Vue.js 提供的一个全局方法，用于向响应式对象中添加属性并触发视图更新。

在 Vue.js 中，通过 Object.defineProperty() 方法将响应式对象的属性变成 getter 和 setter，当属性被访问或者被修改时，会触发响应式更新。

但是，当一个新属性被添加到一个已经创建的对象中时，Vue.js 并没有对这个新属性进行响应式处理。这时就可以使用 Vue.set() 方法来手动将新属性变成响应式属性，并触发视图更新。

Vue.set() 方法的实现原理是通过调用 defineReactive() 方法来为新属性设置 getter 和 setter，从而实现响应式处理。在这个过程中，还需要利用 JavaScript 的 Object.defineProperty() 方法来为新属性添加 getter 和 setter，实现响应式更新。

以下是 Vue.set() 方法的伪代码实现：

function set(target, key, value) {
  if (Array.isArray(target) && typeof key === 'number') {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, value)
    return value
  }

  if (key in target && !(key in Object.prototype)) {
    target[key] = value
    return value
  }

  const ob = target.__ob__
  if (!ob) {
    target[key] = value
    return value
  }

  defineReactive(ob.value, key, value)
  ob.dep.notify()
  return value
}

function defineReactive(obj, key, val) {
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter() {
      return val
    },
    set: function reactiveSetter(newVal) {
      if (newVal === val) {
        return
      }
      val = newVal
      // 触发更新
    }
  })
}

其中，set() 方法接收三个参数，分别是目标对象 target、属性名 key 和属性值 value。首先，如果目标对象是数组，且属性名是数字，就调用数组的 splice() 方法实现数组变更，并返回新的属性值。

如果属性名已经存在于目标对象中，就直接赋值。如果属性名不存在，就获取目标对象的 ob 对象，如果 ob 对象不存在，就直接赋值。否则，调用 defineReactive() 方法将属性变成响应式属性，并触发更新。

defineReactive() 方法接收三个参数，分别是目标对象 obj、属性名 key 和属性值 val。通过Object.defineProperty() 方法为属性设置 getter 和 setter，从而实现响应式更新。当属性值被修改时，会触发 setter 方法，从而触发响应式更新。

虚拟 Dom 的理解 (任何形式 DOM 的展示)，用纯js 如何表示虚拟 DOM

虚拟 DOM（Virtual DOM）是 React 和 Vue 等前端框架的核心概念之一，它是一个轻量级的 JavaScript 对象，用于描述真实 DOM 结构。通过对虚拟 DOM 的操作，可以最小化真实 DOM 的更新，从而提高前端性能和用户体验。

虚拟 DOM 是由一棵以 JavaScript 对象（或 JSON）表示的树形结构组成。每个节点都表示一个 DOM 元素，包含该元素的标签名、属性、事件等信息，以及该元素的子元素（如果有的话）。

以下是一个简单的虚拟 DOM 示例：

{
  tag: 'div',
  attrs: {
    class: 'wrapper'
  },
  children: [
    {
      tag: 'h1',
      attrs: {},
      children: 'Hello World!'
    },
    {
      tag: 'p',
      attrs: {},
      children: 'This is a paragraph.'
    }
  ]
}

在这个示例中，根节点是一个 div 元素，它有一个 class 属性为 wrapper，两个子节点分别是一个 h1 元素和一个 p 元素。

在 Vue.js 中，虚拟 DOM 由一个名为 VNode 的类来表示。VNode 的构造函数如下所示：

class VNode {
  constructor(tag, data, children, text, elm) {
    this.tag = tag          // 标签名
    this.data = data        // 属性值
    this.children = children  // 子节点
    this.text = text        // 文本内容
    this.elm = elm          // 对应的真实 DOM 节点
  }
}

在这个构造函数中，tag 表示标签名，data 表示属性值，children 表示子节点，text 表示文本内容，elm 表示对应的真实 DOM 节点。

对于纯 JavaScript 代码，可以通过一个对象来表示虚拟 DOM，类似于上面的示例。例如，可以定义一个名为 h 的函数，用于创建虚拟 DOM：

function h(tag, props, ...children) {
  return {
    tag,
    props,
    children
  }
}

const vnode = h('div', { class: 'wrapper' },
  h('h1', {}, 'Hello World!'),
  h('p', {}, 'This is a paragraph.')
)

这个函数接收三个参数，分别是标签名、属性和子节点，返回一个 JavaScript 对象，表示一个虚拟 DOM 节点。通过这个函数，可以方便地创建虚拟 DOM，而不需要直接操作 DOM，从而提高代码的可维护性和可读性。

Diff 算法的原理

在前端框架中，如何高效地更新虚拟 DOM 是一个重要的问题。当数据发生变化时，通常需要对整个虚拟 DOM 进行重新渲染，这会消耗大量的计算资源，从而影响应用的性能。为了解决这个问题，前端框架引入了 Diff 算法（也称为 Virtual DOM Diff 算法），用于在虚拟 DOM 中查找变化的部分，从而最小化真实 DOM 的更新。

Diff 算法的原理基于以下两个假设：

1. 两个不同的节点拥有不同的标签，它们的内容和属性也不同。
2. 相同的组件生成相同的 DOM 结构，不同的组件生成不同的 DOM 结构。

根据这两个假设，Diff 算法的实现流程可以概括为以下几个步骤：

1. 首先，将新的虚拟 DOM 树与旧的虚拟 DOM 树进行比较，查找出变化的部分。
2. 如果一个节点在旧的虚拟 DOM 中存在，但在新的虚拟 DOM 中不存在，说明这个节点被删除了，需要将其从真实 DOM 中移除。
3. 如果一个节点在新的虚拟 DOM 中存在，但在旧的虚拟 DOM 中不存在，说明这个节点是新增的，需要将其添加到真实 DOM 中。
4. 如果一个节点在新的虚拟 DOM 和旧的虚拟 DOM 中都存在，需要进一步比较它们的属性和子节点，以确定是否需要更新这个节点。
5. 对于同一层级的节点，Diff 算法会采用一些启发式算法，尽可能地减少比较次数。

Diff 算法可以大幅提高虚拟 DOM 的更新性能，但也存在一些问题。例如，在某些情况下，Diff 算法可能无法准确地判断出哪些节点发生了变化，从而导致无效的 DOM 更新。此外，由于比较算法的复杂度较高，Diff 算法的实现也较为复杂，需要消耗大量的计算资源。因此，前端框架通常会结合其他技术，如异步更新和批量更新等，来进一步提高应用的性能。

对组件的理解

在前端开发中，组件（Component）是指可重用、独立、具有特定功能的代码块，用于构建用户界面。组件的设计和使用可以帮助开发人员提高代码的复用性和可维护性，降低代码的耦合度和重复度，从而加速应用的开发和迭代。

组件通常由三个部分组成：

1. 模板（Template）：用于定义组件的外观和布局，通常使用 HTML 和 CSS 语言编写。
2. 数据（Data）：用于存储组件的内部状态和属性，通常使用 JavaScript 对象进行管理。
3. 行为（Behavior）：用于定义组件的交互和逻辑，通常使用 JavaScript 方法和事件进行实现。

组件的主要特点包括：

1. 可复用性：组件可以在不同的页面和应用中重复使用，从而减少代码的重复度和开发时间。
2. 独立性：组件具有独立的功能和样式，与应用的其他部分没有耦合关系，从而提高代码的可维护性和可测试性。
3. 可扩展性：组件可以根据应用的需求进行扩展和定制，从而适应不同的业务场景和用户需求。
4. 可组合性：组件可以组合成更复杂的组件，从而形成更丰富和多样化的用户界面。

在前端开发中，常见的组件包括按钮、表单、列表、导航栏、对话框等。组件化开发已经成为现代前端开发的重要趋势，各种框架和库（如 React、Vue、Angular 等）都提供了丰富的组件库和组件化开发工具，帮助开发人员更轻松、高效地构建复杂的用户界面。

在vue中,组件的渲染\更新流程

1. 模板编译：Vue 组件的模板经过编译后，会被转换为渲染函数或者 render 函数。
2. 实例化组件：创建一个 Vue 组件实例，也就是 new Vue(options) 中的 options 对象中的一个组件选项。
3. 渲染：执行组件的 render 函数或者 template 转换成的渲染函数，将虚拟 DOM 转换成真实 DOM。
4. 挂载：将组件渲染后的真实 DOM 挂载到页面中。
5. 更新：当组件中的数据发生改变时，Vue 会重新执行渲染函数，生成新的虚拟 DOM，并通过比较新旧虚拟 DOM 的差异来更新页面。

在更新流程中，Vue 会通过 Diff 算法比较新旧虚拟 DOM 的差异，然后尽可能地复用已有的 DOM 元素，减少不必要的 DOM 操作，提高页面更新的性能。在更新过程中，如果需要更新子组件，那么会递归执行子组件的更新流程。

最后，当组件从页面中销毁时，会触发组件的 beforeDestroy 和 destroyed 生命周期钩子函数，用于执行一些清理工作，如清除计时器、解绑事件等。

在vue中,普通插槽与作用域插槽区别

在 Vue 中，插槽（slot）是一种将组件的内容分发到组件内部指定位置的机制。Vue 中有两种类型的插槽，分别是普通插槽和作用域插槽。

普通插槽是最基础的插槽形式，它是在组件中预留一个位置，让父组件可以向其中插入任意内容。在父组件中，通过在组件标签中包含子元素来填充插槽。组件中使用 <slot> 元素来定义插槽的位置，如下所示

<template>
  <div>
    <h1>我是子组件</h1>
    <slot></slot>
  </div>
</template>

在父组件中，可以将任意内容插入到这个插槽中：

<template>
  <div>
    <h2>我是父组件</h2>
    <Child>
      <p>我是插入到子组件中的内容</p>
    </Child>
  </div>
</template>

作用域插槽是一种可以向插槽传递数据的机制。通过在子组件中定义一个具名插槽，父组件可以通过向插槽中传递数据来影响子组件的渲染结果。子组件可以通过 slot-scope 属性来声明插槽的参数，父组件在使用插槽时可以通过一个带有具体参数的对象来向插槽中传递数据。

下面是一个使用作用域插槽的示例：

<!-- 子组件 -->
<template>
  <div>
    <h1>我是子组件</h1>
    <slot name="content" v-bind:user="user"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <div>
    <h2>我是父组件</h2>
    <Child>
      <template slot="content" v-slot:default="slotProps">
        <p>欢迎你，{
   
   { slotProps.user.name }}</p>
      </template>
    </Child>
  </div>
</template>

在上面的例子中，子组件中的插槽定义了一个 user 参数，父组件在使用插槽时通过 v-slot:default="slotProps" 来声明插槽参数，并向插槽中传递一个 user 对象。在插槽的内容中，可以通过 slotProps 来访问传递进来的参数。

总的来说，普通插槽适用于需要插入任意内容的情况，而作用域插槽则适用于需要传递数据的情况。

在vue中,Keep-alive 使用的场景及原理

<keep-alive> 是 Vue 内置的一个组件，它能够缓存组件实例，避免重复渲染。<keep-alive> 可以包裹动态组件，它会缓存不活动的组件实例，而不是销毁它们。当组件再次被激活时，它会从缓存中取出并重新使用之前的实例，而不是重新创建一个新的实例。

使用 <keep-alive> 主要有以下两个场景：

1. 有些组件在每次切换时都需要重新渲染，但是这些组件的内容是不变的，为了提高性能，可以使用 <keep-alive> 进行缓存。
2. 有些组件在每次切换时需要重新获取数据，如果不进行缓存，在每次切换时都会重新请求数据，会造成不必要的网络请求和服务器压力。这时可以使用 <keep-alive> 进行缓存，缓存的数据可以在组件激活时直接使用，避免重复请求数据。

<keep-alive> 的原理是使用一个缓存对象 cache 存储组件实例，每次动态组件切换时，会先去缓存中查找是否有对应的实例，如果有，则直接使用缓存中的实例，如果没有，则创建一个新的实例并缓存起来。在组件切换时，缓存中的实例不会被销毁，而是被缓存起来，当组件再次被激活时，会从缓存中取出实例并重新使用。

需要注意的是，使用 <keep-alive> 缓存的组件在被激活时，并不会触发 created 和 mounted 钩子函数，而是会触发 activated 和 deactivated 钩子函数。因此在缓存组件时需要特别注意生命周期钩子函数的使用。

Vue-router有哪两种模式，分别有什么区别

Vue Router 支持两种模式：hash 模式和 history 模式。

• hash 模式：使用 URL 的 hash（即地址栏 URL 中 # 后面的内容）来模拟一个完整的 URL，因此页面不会向服务器请求数据，适用于单页应用。
• history 模式：使用 HTML5 的 history API 来实现无需重新加载页面而改变 URL，能够更加自然地支持前进和后退等操作，需要服务器的支持。

在 hash 模式下，路由的变化不会触发浏览器向服务器的请求，只是 URL 的 hash 发生了变化，因此页面刷新后仍能正常显示当前路由对应的页面。而在 history 模式下，路由的变化会触发浏览器向服务器请求对应的资源，如果服务器没有配置相应的路由规则，会返回 404 错误。因此在使用 history 模式时，需要配置服务器的路由规则以支持路由变化时的页面刷新和访问。

Vuex的理解

Vuex 是 Vue.js 官方提供的一个状态管理库，用于在 Vue.js 应用程序中集中管理共享状态。Vuex 可以帮助我们在大型单页应用中，更好地组织和管理应用的状态，从而使得代码更加结构化和易于维护。

在 Vuex 中，我们可以将应用的共享状态保存在一个全局的 Store 对象中。这个 Store 对象中包含了多个模块，每个模块都有自己的状态、mutation、action 和 getter 等。在组件中，我们可以使用 Vuex 提供的辅助函数 mapState、mapMutations、mapActions 和 mapGetters 等，来简化组件中访问 Store 中状态的代码。

Vuex 的核心概念包括：

• State：即应用中的状态，可以认为是一个存储数据的容器。
• Mutation：用于修改 State 中的状态，必须是同步函数。
• Action：类似于 Mutation，也是用于修改 State 中的状态，但是可以包含异步操作，可以在 Action 中提交 Mutation。
• Getter：用于对 Store 中的状态进行计算，返回计算结果。

总之，Vuex 可以帮助我们更好地管理应用的状态，避免了在组件之间传递数据时产生的混乱和重复代码。它使得状态的变化变得可追踪、可维护，并且可以在整个应用中共享状态。(vue3推出pinia)

npm run xx的时候发生了什么

在项目中使用 npm run xx 命令时，npm 会根据项目中的 package.json 文件中的 “scripts” 部分的配置，运行指定的脚本命令。

具体来说，npm run 命令会在系统的环境变量 PATH 中寻找到对应的可执行文件，然后执行这个可执行文件，并将 package.json 中的 script 中定义的参数传递给这个可执行文件。这样就可以执行在 package.json 文件中定义的自定义脚本。

在执行这个自定义脚本时，npm 会将项目的根目录设置为当前的工作目录，并将一些额外的环境变量添加到进程的环境变量中，例如包含了当前项目的安装路径等。

通常，npm run xx 命令会用来执行一些预定义好的脚本命令，例如构建应用、启动本地服务器、运行测试等。这些脚本命令可以方便地在项目中运行，从而提高了开发效率。

js相关面试题

在js中,基础数据类型，symbol类型与普通类型的区别，什么是包装类型

在JavaScript中，基础数据类型包括Undefined、Null、Boolean、Number、BigInt、Symbol和String。Symbol类型是ES6新增的一种数据类型。它是一种唯一的、不可变的数据类型，用于创建对象的唯一属性名。与基础数据类型不同，Symbol类型的值是独一无二的，每个Symbol值都是唯一的。

基础数据类型与Symbol类型与普通类型的区别在于，基础数据类型和Symbol类型是原始值，它们的值不可改变。而普通类型则是对象，可以包含多个属性和方法。当我们使用基础数据类型或Symbol类型时，JavaScript会自动将它们封装成对应的包装类型，也就是对象。这些包装类型提供了许多有用的方法，例如对字符串、数字等进行操作的方法。

包装类型是指JavaScript自动创建的对象，用于封装基础数据类型和Symbol类型的值。例如，当我们使用字符串方法时，JavaScript会自动创建一个String对象，这个对象包含了对字符串的操作方法。当我们完成操作后，这个对象会被销毁，只留下原始的字符串值。同样的，当我们使用数字方法时，JavaScript会自动创建一个Number对象，这个对象包含了对数字的操作方法。

需要注意的是，由于包装类型是临时创建的对象，因此在比较基础数据类型和Symbol类型时，应该使用恒等运算符（=）而不是相等运算符（），以避免类型转换的影响。

在js中,类型校验的方法，与区别

1. typeof操作符：可以用来检查一个值的类型，返回一个表示值类型的字符串。例如，typeof 123 返回 “number”，typeof “hello” 返回 “string”。需要注意的是，typeof null 返回 “object”，这是一个历史遗留问题。
2. instanceof操作符：可以用来检查一个对象是否是某个类的实例。例如，x instanceof Array 可以检查x是否是Array类的实例。需要注意的是，instanceof检查的是对象的原型链，因此对于基础数据类型和Symbol类型，不能使用instanceof操作符。
3. Object.prototype.toString方法：可以返回一个对象的类型字符串。例如，Object.prototype.toString.call(“hello”) 返回 “[object String]”，Object.prototype.toString.call(123) 返回 “[object Number]”。这种方法可以用来检查基础数据类型和Symbol类型。
4. typeof和instanceof可以用来检查一个值的类型，而Object.prototype.toString方法可以用来检查一个对象的类型。

需要注意的是，JavaScript是一种动态类型语言，变量的类型可以在运行时改变，因此类型检查是很重要的。在开发中，应该尽可能地使用类型检查来减少错误。

在js中,浮点数精度问题如何解决

在JavaScript中，浮点数存在精度问题，这是由于JavaScript使用IEEE 754标准来表示数字，而该标准使用二进制来表示小数，导致某些小数无法精确表示。例如，0.1在二进制中是无限循环的小数，因此无法精确表示，可能会出现类似0.1000000000000001的情况。

为了解决浮点数精度问题，可以采用以下方法：

1. 使用整数进行计算：将小数转换为整数，进行计算后再将结果转换回小数。例如，将小数乘以一个倍数，然后再除以这个倍数，就可以得到相应的结果。
2. 使用toFixed方法：该方法可以将一个数字四舍五入为指定位数的小数，并返回一个字符串表示该数字。例如，(0.1 + 0.2).toFixed(1) 返回 “0.3”。需要注意的是，toFixed返回的是字符串，需要使用parseFloat将其转换为数字。
3. 使用第三方库：一些第三方库，例如Big.js和Decimal.js，提供了更高精度的计算方法，可以解决浮点数精度问题。

需要注意的是，在进行浮点数计算时，应该尽量避免直接比较两个浮点数是否相等，因为由于精度问题，两个看似相等的浮点数可能并不相等。应该使用一些容差值来判断两个浮点数是否相等，例如Math.abs(a - b) < 0.00001。

new 一个函数都会发生什么

当使用 new 操作符创建一个函数的实例时，JavaScript 执行以下步骤：

1. 创建一个新对象，该对象的原型为构造函数的 prototype 属性。
2. 将 this 关键字设置为新创建的对象。
3. 执行构造函数，同时将参数传递给构造函数。
4. 如果构造函数返回一个对象，则该对象将作为 new 操作符的结果返回。否则，将返回步骤1中创建的对象。

这个过程中，关键字 new 主要做了以下两件事情：

1. 创建了一个新的对象，并将这个对象的原型指向构造函数的 prototype 属性。
2. 将 this 关键字指向这个新的对象，使得构造函数内部可以访问到这个对象，并将构造函数内部的属性和方法绑定到这个新的对象上。

需要注意的是，当使用 new 操作符创建函数的实例时，JavaScript 会自动执行函数的构造函数，因此可以在构造函数内部对实例进行初始化操作，并将属性和方法添加到实例上。同时，需要注意在构造函数内部不要直接返回基础数据类型，否则 new 操作符将无法返回一个对象。

箭头函数与普通函数的区别

箭头函数和普通函数在语法上和使用上有以下几个区别：

1. 箭头函数使用 => 符号定义，普通函数使用 function 关键字定义。
2. 箭头函数没有自己的 this，this 的值继承自父级作用域中的 this。而普通函数的 this 值在调用时由调用方式决定，如果是通过对象调用，则 this 指向该对象，如果是通过 call 或 apply 调用，则 this 指向传递的第一个参数，如果是直接调用，则 this 指向全局对象（在严格模式下为 undefined）。
3. 箭头函数不能使用 arguments 对象，可以使用 rest 参数 ... 来代替。普通函数可以使用 arguments 对象获取所有传递的参数。
4. 箭头函数不能使用 new 操作符创建实例，因为箭头函数没有自己的 this，也没有 prototype 属性。普通函数可以使用 new 操作符创建实例。
5. 箭头函数不能用作构造函数，因为箭头函数没有自己的 this，也没有 prototype 属性。普通函数可以用作构造函数。
6. 箭头函数的 return 语句会自动返回表达式的值，而不需要使用 return 关键字。普通函数需要使用 return 关键字来返回值。（事实上，箭头函数中的 return 语句可以用来返回表达式的值，只是在只有一个表达式的情况下，可以省略 return 关键字并且自动返回表达式的值。）

需要注意的是，箭头函数和普通函数的用法有所不同，应该根据实际情况选择使用。箭头函数通常用于简化代码，减少代码量，而普通函数则更加灵活，适用于复杂的逻辑处理。

如何修改 this 的指向，call、apply、bind 的区别

JavaScript 中，我们可以使用 call、apply、bind 来修改函数中 this 的指向。

这三个方法都可以在调用函数的时候临时修改函数中 this 的指向：

• call 方法和 apply 方法都是立即调用函数，第一个参数是函数内部 this 的指向，后面的参数是函数的参数(可以是多个），apply 方法的参数是一个数组。
• bind 方法返回一个新的函数，新函数的 this 指向传入的第一个参数，后面的参数会被当作新函数的参数。注意，bind 方法并不会立即调用函数，而是返回一个新函数，需要手动调用。

下面是一个使用 call、apply、bind 方法的示例：

const person = {
  name: 'John',
  greet: function(greeting) {
    console.log(`${greeting}, ${this.name}!`);
  }
};

person.greet('Hello'); // 输出：Hello, John!

const anotherPerson = {
  name: 'Alice'
};

// 使用 call 方法调用 person.greet()，this 指向 anotherPerson
person.greet.call(anotherPerson, 'Hi'); // 输出：Hi, Alice!

// 使用 apply 方法调用 person.greet()，this 指向 anotherPerson
person.greet.apply(anotherPerson, ['Hey']); // 输出：Hey, Alice!

// 使用 bind 方法创建一个新函数 newGreet，this 指向 anotherPerson
const newGreet = person.greet.bind(anotherPerson);
newGreet('Good morning'); // 输出：Good morning, Alice!

call、apply、bind 三者的主要区别在于参数的传递方式和函数的调用方式，call 和 apply 方法会立即调用函数并且传递参数，而 bind 方法不会立即调用函数，而是返回一个新的函数。

总的来说，使用这三个方法可以灵活地修改函数中 this 的指向，需要根据具体的场景来选择使用。

深浅拷贝的区别

在 JavaScript 中，当我们想要复制一个对象时，可能会用到两种不同的复制方式：浅拷贝和深拷贝。它们的区别如下：

1. 浅拷贝：

浅拷贝会创建一个新的对象，但是这个新对象只会复制原对象的一层属性，如果原对象的某个属性是引用类型，那么新对象中这个属性仍然指向原对象中的引用，因此对新对象中这个属性的修改会影响到原对象。例如：

const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);

shallowCopy.b.c = 3;

console.log(obj); // { a: 1, b: { c: 3 } }
console.log(shallowCopy); // { a: 1, b: { c: 3 } }

上面的代码中，我们使用 Object.assign 方法创建了一个浅拷贝的对象 shallowCopy，然后修改了 shallowCopy 中的 b.c 属性的值，发现原对象 obj 中的 b.c 属性的值也被修改了，说明浅拷贝只复制了一层属性。

2. 深拷贝：

深拷贝会递归地复制对象的所有属性，包括原对象中的引用类型属性，直到所有的属性都是基本数据类型为止。因此，深拷贝会创建一个全新的对象，修改新对象中的属性不会影响到原对象。例如：

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));

deepCopy.b.c = 3;

console.log(obj); // { a: 1, b: { c: 2 } }
console.log(deepCopy); // { a: 1, b: { c: 3 } }

上面的代码中，我们使用 JSON.parse(JSON.stringify(obj)) 进行深拷贝，修改 deepCopy 中的 b.c 属性的值，发现原对象 obj 中的 b.c 属性的值没有被修改，说明深拷贝创建了一个全新的对象。

需要注意的是，使用 JSON.parse(JSON.stringify(obj)) 进行深拷贝有一些限制，例如无法复制函数、循环引用等情况，因此在实际使用中需要根据具体的情况选择合适的深拷贝方法。（可以用递归的方式进行）

总的来说，浅拷贝只复制一层属性，深拷贝递归地复制所有属性，创建一个全新的对象，两种拷贝方式适用于不同的场景。需要根据具体的情况选择合适的拷贝方式。