一轮面试题

三七yiii

已于 2024-06-27 15:38:15 修改

阅读量911

点赞数 14

文章标签：前端

于 2024-04-01 17:49:37 首次发布

本文链接：https://blog.csdn.net/m0_65208646/article/details/137240411

版权

一轮面试

一、localStorage和sessionStorage和cookie的区别

十一、 uni-app全局变量怎么定义，怎么获取

十二、深浅拷贝的区别，如何深拷贝

十三、saync,await和Promise的区别

二轮面试

一、typeof和instanceof的区别

二、说一下数组的常见的方法有哪些，哪些操作不会改变原数组

三、说一下你对事件循环的理解

四、为什么data属性是一个函数而不是对象

五、vue中的$nextTick有什么作用

六、简述一下vue的diff算法

七、 vue-router有哪几种导航钩子

十四、请介绍一下 H5 中的 Web Worker，并说明它的作用和使用场景。

十五、请解释一下 H5 中的 Canvas 和 SVG 的区别与应用场景。

十六、如何在 H5 中实现页面的离线缓存？

十七、H5引入了哪些新的特性和功能

十八、如何在 H5 中实现地理位置定位功能

一轮面试

一、localStorage和sessionStorage和cookie的区别

localStorage、sessionStorage 和 cookie 都是用来在客户端存储数据的方式，但它们之间有一些区别：

作用域：

localStorage 和 sessionStorage 的数据存储在客户端，只在同源的窗口或标签页之间共享。
cookie 的数据也存储在客户端，但会被发送到服务器，因此在同源的所有窗口、标签页和服务器之间共享。

存储容量：

localStorage 的存储容量较大，通常为 5MB 或更多，不同浏览器可能会有所不同。
sessionStorage 的存储容量较小，通常为 5MB 或更少，也取决于浏览器的限制。
cookie 的存储容量也较小，通常为 4KB 左右，因为每个 HTTP 请求都会携带所有的 cookie 数据，所以存储过多的 cookie 数据会增加请求的大小。

生命周期：

localStorage：数据永久存储，除非被显式删除。
sessionStorage：数据在当前会话结束时被清除，即当用户关闭浏览器窗口或标签页时。
cookie：可以设置过期时间，可以是会话级的（浏览器关闭时失效）或持久性的（指定一个具体的过期时间）。

访问方式：

localStorage 和 sessionStorage 使用 window.localStorage 和 window.sessionStorage 对象来访问和操作存储的数据。
cookie 可以通过 document.cookie 属性来访问和操作。

安全性：

由于 localStorage 和 sessionStorage 仅在客户端存储，因此相对较安全，但仍然可能受到 XSS 攻击的影响。
cookie 存在 CSRF 和 XSS 攻击的风险，因为它会在每个 HTTP 请求中自动发送，攻击者可能通过篡改 cookie 来进行攻击。

总的来说，根据不同的需求和场景，可以选择使用 localStorage、sessionStorage 或 cookie 来存储客户端数据。

二、 computed与watch

Computed 属性

计算属性：

computed 是 Vue.js 中一种计算属性的特殊形式，它根据依赖的数据动态计算出一个新的值，并且具有缓存特性，只有在相关依赖发生改变时才会重新计算。

特点：

定义在 Vue 实例的 computed 选项中。
返回一个新的值，该值会被缓存，只有当依赖的响应式数据发生改变时才会重新计算。
可以像访问普通属性一样直接在模板中使用。

适用场景：

用于在模板中动态计算并渲染数据，例如对数组进行过滤、排序等操作。
new Vue({ data: { items: [1, 2, 3, 4, 5] }, computed: { evenItems() { return this.items.filter(item => item % 2 === 0); } } });
Watcher 观察者
监听数据变化：

watch 是 Vue.js 中一种观察数据变化的方式，当监视的数据发生变化时，会执行相应的回调函数。

特点：

定义在 Vue 实例的 watch 选项中，或者通过 vm.$watch 方法动态创建。
可以监听一个或多个数据的变化，并在变化发生时执行相应的操作。
不同于 computed，watch 不会返回一个新的值，而是在数据变化时执行指定的回调函数。
适用场景：
用于在数据变化时执行异步操作、复杂逻辑、或者需要深度监听的情况。
new Vue({ data: { message: 'Hello, Vue.js' },
 watch: { message(newValue, oldValue)
 { console.log('message 发生变化：', newValue, oldValue); } } });
区别总结

computed：

适用于需要动态计算值，并且具有缓存特性的场景。
返回一个新的值，可以直接在模板中使用。
一般用于简单的数据计算。

watch：

适用于需要监听数据变化，并且需要执行异步操作或者复杂逻辑的场景。
监听数据的变化，执行指定的回调函数。
可以监听多个数据的变化，更灵活，但相对也更复杂。

三、 px，rem，em的区别

px：固定大小，绝对单位，适用于那些需要保持固定大小的元素。
rem：相对根元素大小，相对灵活，适用于页面整体布局变化的元素。
em：相对父元素字体大小，相对灵活，适用于父子元素之间相对大小关系变化的元素。

四、动态组件的用法

使用 `<component>` 元素

你可以使用 <component> 元素来动态地渲染不同的组件。通过动态地绑定 is 特性，你可以指定要渲染的组件。

<template>
  <div>
    <!-- 根据 currentComponent 的值动态渲染不同的组件 -->
    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA' // 默认渲染 ComponentA 组件
    };
  },
  methods: {
    switchComponent() {
      // 切换要渲染的组件
      this.currentComponent = (this.currentComponent === 'ComponentA') ? 'ComponentB' : 'ComponentA';
    }
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

动态地加载组件

如果你的组件较大或需要延迟加载，你可以使用 Vue.component 方法动态地注册组件，然后在需要时使用。

<template>
  <div>
    <button @click="loadComponent">加载组件</button>
    <!-- 根据 isLoaded 的值动态渲染不同的组件 -->
    <component :is="isLoaded ? 'LoadedComponent' : 'PlaceholderComponent'"></component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoaded: false
    };
  },
  methods: {
    loadComponent() {
      // 动态加载组件
      import('./LoadedComponent.vue').then(component => {
        // 注册组件
        Vue.component('LoadedComponent', component.default);
        this.isLoaded = true;
      });
    }
  }
};
</script>

动态 Props

你也可以动态地传递 Props 给动态组件。在 <component> 元素中使用 v-bind 来动态绑定 Props。

<template>
  <div>
    <!-- 通过 v-bind 动态传递 props -->
    <component :is="currentComponent" :some-prop="propValue"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA',
      propValue: 'some value'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

五、什么是事件委托，以及事件委托的优点

事件委托是一种常见的 JavaScript 编程技术，它利用了事件冒泡的特性。在事件委托中，我们将事件监听器绑定到父元素上，而不是直接绑定到子元素上。当事件触发时，事件会在 DOM 树上向上传播，直到遇到一个处理该事件的监听器。因此，如果子元素中的事件被触发，它会向父元素上传播，最终触发父元素上的事件监听器。

以下是事件委托的一般做法：

将事件监听器绑定到父元素上。
在事件触发时，通过事件对象确定事件源（即触发事件的子元素）。
根据事件源执行相应的操作。

下面是一个使用事件委托的示例，假设我们有一个列表，其中的每个 <li> 元素都有一个点击事件：
<ul id="parentList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

// 将事件监听器绑定到父元素上
document.getElementById('parentList').addEventListener('click', function(event) {
  // 确定事件源
  var target = event.target;
  // 如果事件源是一个 li 元素
  if (target.tagName === 'LI') {
    // 执行相应的操作
    console.log('Clicked on', target.textContent);
  }
});
事件委托的优点包括：

性能优化：通过将事件监听器绑定到父元素上，我们可以减少事件处理器的数量，特别是在大型文档中。这样可以提高性能并减少内存占用，因为不需要为每个子元素都绑定一个事件处理器。

动态元素：当我们向列表中添加或删除元素时，不需要重新绑定事件处理器。因为父元素上的事件监听器会自动处理新添加的子元素。

代码简洁：使用事件委托可以减少重复的代码，并使代码更具可维护性和可扩展性。

总之，事件委托是一种强大的技术，可以帮助我们更有效地管理和处理事件，尤其在处理大型文档或需要动态添加元素的情况下特别有用。

六、前端如何进行性能优化

减少 HTTP 请求：合并和压缩文件（如 CSS 和 JavaScript），使用 CSS 雪碧图来减少图像请求，减少页面中的资源数量，从而降低加载时间。

使用 CDN（内容分发网络）：将静态资源（如 CSS、JavaScript 和图像）部署到 CDN 上，使用户可以从距离更近的服务器获取资源，从而加快加载速度。

优化图像：使用适当的图像格式（如 JPEG、PNG、SVG）和压缩级别，以减少图像文件大小。还可以使用适当的尺寸和响应式图像来确保只加载所需的图像大小。

延迟加载（懒加载）：仅加载首屏可见区域内的内容，而将其他内容延迟加载，以减少初始页面加载时间。

异步加载 JavaScript：使用 async 或 defer 属性将 JavaScript 文件异步加载，以避免阻塞页面加载。

减少重绘和回流：避免频繁操作 DOM，尽量一次性更新 DOM，以减少浏览器的重绘和回流，从而提高页面性能。

缓存优化：利用浏览器缓存机制，合理设置缓存策略，尽可能减少网络请求。

代码优化：优化 JavaScript 和 CSS 代码，删除不必要的代码、注释和空格，减少文件大小，提高加载速度。

使用 Web 字体：使用适量的 Web 字体，并确保它们被合理缓存，以避免增加页面加载时间。

优化移动端性能：针对移动端设备进行优化，例如使用适当的图像大小、减少 JavaScript 和 CSS 文件大小，以及采用响应式设计。

服务端渲染（SSR）：对于需要 SEO 优化和提高首屏加载速度的应用程序，考虑使用服务端渲染来生成首屏内容，以提高页面加载速度和搜索引擎抓取效率。

监控和分析：使用工具监控网站性能，并进行定期分析和优化，以持续改进用户体验和页面加载速度。

综上所述，前端性能优化涉及多个方面，包括资源加载、页面渲染、代码优化等，需要综合考虑并采取有效的措施来提高网站或应用程序的性能。

七、组件中key的作用

在 Vue.js 中，每个 v-for 循环或动态组件都需要提供一个唯一的 key 属性。key 的作用是帮助 Vue 识别每个节点的身份，以便在进行 DOM 操作时，能够尽可能地高效地复用和更新现有的元素，而不是重新创建或销毁它们。

具体来说，key 的作用包括：

标识节点：key 用于唯一标识每个节点，在进行更新时，Vue 使用 key 来确定哪些元素是已存在的、被删除的或是新添加的，从而避免出现意外的行为。

提高性能：通过为每个节点提供唯一的 key，Vue 可以在进行列表渲染时更精确地识别每个节点的身份，从而提高更新的效率。尤其是在列表中的项会动态地改变顺序、增加或删除时，key 的作用尤为明显。

维持组件状态：在处理动态组件时，key 可以帮助 Vue 保持组件的状态，确保组件被正确地销毁和重建。如果不提供 key，Vue 可能会错误地复用相同类型的组件，并且可能导致不必要的状态混乱或副作用。

在动画过渡中的特殊用途：在使用 Vue 的过渡动画时，key 可以帮助 Vue 确定哪些元素是需要过渡的，从而实现更加灵活的动画效果。

总之，key 是 Vue 中非常重要的一个概念，它在处理动态节点、列表渲染和动画过渡等场景中扮演着关键的角色，能够帮助开发者更好地优化性能和提升用户体验。因此，在开发 Vue 组件时，务必要正确地使用 key 属性。

八、父子组件加载时他的生命周期的执行顺序

在 Vue.js 中，父子组件的生命周期钩子函数执行顺序如下：

父组件：

beforeCreate
created
beforeMount

子组件：

beforeCreate
created
beforeMount
mounted

父组件：

mounted

这是基本的顺序。当父组件挂载（mounted）时，子组件的生命周期钩子也会依次执行。但是如果子组件中有异步请求或其他耗时操作，可能会影响子组件生命周期钩子的执行顺序。

如果子组件在父组件挂载之前就已经被渲染，那么子组件的生命周期钩子将在父组件的 mounted 钩子之前执行。这种情况通常发生在父组件中使用了 v-if 或 v-show 来动态控制子组件的显示。

需要注意的是，当父组件更新时，子组件的生命周期钩子不会重新执行，除非子组件的数据发生了变化或父组件强制重新渲染了子组件。

综上所述，父子组件的生命周期钩子函数的执行顺序主要受到组件的挂载顺序、异步操作以及组件的动态渲染等因素的影响。

九、两个数组去重的方法

使用 Set 对象：Set 对象是一种集合，它只存储唯一的值。你可以将两个数组合并成一个 Set 对象，然后再将其转换回数组的形式，这样就会自动去除重复的元素

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const combinedArray = [...new Set([...array1, ...array2])];

使用 Array.filter() 方法：遍历其中一个数组，然后对另一个数组使用 Array.includes() 方法来判断是否包含当前元素，最后使用 Array.concat() 将两个数组合并。

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const uniqueArray = array1.concat(array2.filter(item => !array1.includes(item)));

使用 Array.reduce() 方法：将其中一个数组作为初始值，然后遍历另一个数组，将不在初始值中的元素添加到初始值中。

const array1 = [1, 2, 3, 4, 5];
const array2 = [3, 4, 5, 6, 7];

const uniqueArray = array2.reduce((acc, currentValue) => {
    if (!acc.includes(currentValue)) {
        acc.push(currentValue);
    }
    return acc;
}, array1.slice());

十、set和map的区别

Set 和 Map 都是 ES6 引入的新数据结构，它们各自有不同的用途和特点。

Set：
Set 是一种集合，它存储唯一的值，不允许重复。
Set 中的元素是按照插入的顺序进行存储的。
可以通过 Set 对象的方法（如 add、delete、has、clear）来操作集合中的元素。
适合用于存储不重复的值，比如去重数组、检查某个值是否存在等。
Map：
Map 是一种键值对的集合，它允许键和值可以是任意类型的数据。
Map 中的键是唯一的，但值可以重复。
可以通过 Map 对象的方法（如 set、get、delete、has、clear）来操作键值对。
适合用于需要以键值对形式存储数据的场景，比如存储对象之间的关系、缓存数据等。

总体来说，Set 主要用于存储不重复的值，而 Map 则用于存储键值对数据。它们在不同的场景下有着不同的应用，可以根据具体的需求选择使用哪种数据结构。