前端面试题

cookie,session,sessionstorge,localstorge的区别

Cookie: Cookie是存储在浏览器中的小型文本文件，用于在客户端和服务器之间传递数据。Cookie可以设置过期时间，可以被服务器读取和写入，并且在每次请求中都会被发送到服务器。Cookie的数据大小一般有限制。

Session: Session是存储在服务器端的数据，用于在客户端和服务器之间保持会话状态。当用户第一次访问服务器时，服务器会分配一个唯一的session ID给用户，并将该ID存储在Cookie中发送给客户端。客户端每次请求时都会携带该Cookie，服务器通过session ID来找到对应的会话数据。Session可以存储大量数据，但会占用服务器的内存资源。

SessionStorage: SessionStorage是HTML5提供的Web存储机制，仅在当前浏览器标签页关闭之前有效。SessionStorage用于在浏览器端保存会话数据，数据存储在内存中，不会被永久保存到硬盘。SessionStorage的数据仅对当前标签页可见，不同标签页之间的数据不共享。

LocalStorage: LocalStorage也是HTML5提供的Web存储机制，与SessionStorage类似，但数据的生命周期更长，即使关闭浏览器再打开，数据仍然可用。LocalStorage的数据存储在本地硬盘上，不受会话或标签页的影响，不同标签页之间的数据可以共享

盒模型

盒模型是指在网页布局中，每一个元素都被看作一个矩形的盒子，这个盒子包含了内容（content）, 内边距（padding）, 边框（border）和外边距（margin）四个部分。

具体来说，盒模型包括以下几个部分：

内容区域（Content）: 即元素的实际内容，例如文本、图片等，它的大小由内容自身决定，可以通过设置宽度（width）和高度（height）来控制。

内边距（Padding）: 是内容区域与边框之间的空白区域，用于控制内容与边框之间的距离。可以通过设置上（padding-top）、右（padding-right）、下（padding-bottom）和左（padding-left）的数值来调整。

边框（Border）: 是内边距和外边距之间的边界，可以设置边框的样式、颜色、宽度等属性。

外边距（Margin）: 是元素与其他元素之间的间距，用于控制元素之间的距离。可以通过设置上（margin-top）、右（margin-right）、下（margin-bottom）和左（margin-left）的数值来调整。

弹性盒,定位的问题

弹性盒布局（Flexbox）是一种用于网页布局的 CSS3 模块，它提供了一种灵活的方式来对容器中的元素进行排列、对齐和分布。弹性盒布局是响应式设计和自适应布局的重要工具，能够适应不同屏幕尺寸和设备。

使用弹性盒布局时，首先要将一个容器元素设置为 display: flex; 或 display: inline-flex;，这样容器就成为了弹性盒的容器。随后，可以对容器内的子元素（即弹性盒项）应用相关的弹性盒属性，如 flex-direction、justify-content、align-items、flex-wrap 等，来控制它们的排列和对齐方式。

弹性盒布局的优点包括：

简单易用：相对于传统的布局方式，弹性盒布局使用更简洁直观的属性和值来定义布局，易于理解和使用。
响应式设计：通过灵活的弹性盒属性，可以轻松实现适应不同设备和屏幕尺寸的布局需求。
自适应调整：弹性盒项会根据可用空间自动调整自身的大小和位置，有效解决元素溢出和布局错乱的问题。

概述vue的原理

Vue.js是一种用于构建用户界面的渐进式JavaScript框架，它采用了响应式的数据绑定和组件化的开发方式。Vue的工作原理主要包括以下几个方面：

响应式数据绑定：Vue使用了双向的数据绑定机制，通过使用Object.defineProperty()方法来劫持数据对象，当数据发生变化时，可以自动更新与之相关联的视图。这样，当我们修改数据时，相关的视图也会自动进行更新。

虚拟DOM （Virtual DOM）：Vue借鉴了React的虚拟DOM概念。在Vue中，每个Vue组件都有一个对应的虚拟DOM树。当数据发生变化时，Vue会通过比较新旧虚拟DOM之间的差异，然后使用最少的操作来更新真实的DOM结构，以提高性能和效率。

组件化开发：Vue将用户界面划分为多个可复用的组件，每个组件包含自己的模板、逻辑和样式。组件的开发、维护和复用都变得更加方便和高效。

生命周期钩子函数：Vue组件具有生命周期函数，如created、mounted、updated、destroyed等。这些钩子函数允许开发者在组件的不同阶段进行操作，例如在组件创建时初始化数据，在组件挂载到DOM后执行某些操作等。

模板语法：Vue使用了基于HTML的模板语法，开发者可以在模板中使用诸如v-bind、v-if、v-for等指令来动态绑定数据、控制元素显示和循环渲染等。

插件系统：Vue提供了丰富的插件系统，可以扩展其核心功能，例如Vue Router用于处理路由功能，Vuex用于管理应用的状态等。

综上所述，Vue的核心思想是将数据驱动与组件化开发相结合，通过响应式数据绑定、虚拟DOM以及一系列的工具和生命周期钩子来实现高效、灵活和可维护的用户界面。

父子子父兄弟组件传参的问题

在Vue中，父组件向子组件传递参数可以使用props，而子组件向父组件传递参数可以使用自定义事件。如果需要兄弟组件之间传递参数，可以借助Vue的事件总线或者使用共享状态管理工具如Vuex来实现。

父组件向子组件传递参数（props）：

在父组件中，通过在子组件的标签上绑定属性来传递参数，例如 <ChildComponent :propName="data"></ChildComponent>。
在子组件中，通过props选项来接收父组件传递的参数，并绑定到子组件的数据属性，例如 props: ['propName']。
子组件向父组件传递参数（自定义事件）：

在子组件中，通过$emit方法触发一个自定义事件，并传递参数，例如 $emit('customEvent', data)。
在父组件中，通过在子组件的标签上监听自定义事件，并绑定一个方法来接收子组件传递的参数，例如 <ChildComponent @customEvent="handleEvent"></ChildComponent>。
兄弟组件之间传递参数：

使用事件总线：创建一个Vue实例作为事件总线，兄弟组件可以通过该实例进行事件的发布和订阅，从而实现参数的传递。
使用Vuex：Vuex是Vue的官方状态管理工具，可以创建一个公共的状态存储库，兄弟组件可以通过该存储库来进行参数的共享和传递。

实现元素居中效果有几种方法

使用Flexbox布局：在容器元素上设置 display: flex; 并使用 justify-content: center; 和 align-items: center; 属性，使子元素在水平和垂直方向上都居中。

使用绝对定位和transform属性：通过将需要居中的元素设置为绝对定位，然后使用 left: 50%; 和 top: 50%; 将元素的左上角定位到父元素的中心位置，接着使用 transform: translate(-50%, -50%); 属性将元素向左和向上移动自身宽度和高度的一半，实现居中效果。

使用文本居中：对于行内元素或文本内容，可以使用 text-align: center; 属性将文本内容在父元素水平居中。对于单行文本，可以使用 line-height: height; 属性将文本在父元素垂直居中。

使用表格布局：将父元素设置为 display: table;，子元素设置为 display: table-cell; 并使用 vertical-align: middle; 实现水平和垂直居中。

使用网格布局：使用CSS网格布局（CSS Grid）的 justify-items: center; 和 align-items: center; 属性将子元素在父元素中进行水平和垂直居中。

使用JavaScript计算：使用JavaScript通过计算父元素和子元素的宽度和高度，然后根据需要进行定位的left和top值，实现居中效果。

界面适配性的问题,rem

rem是相对于根元素（即html元素）的字体大小的单位。通过使用rem单位，可以实现相对大小的布局，使得元素的大小能随着根元素的字体大小而自适应调整。在移动端开发中，常常使用rem单位来实现响应式的布局。

一般来说，实现基于rem的界面适配性可以按照以下步骤：

设置根元素的字体大小：在CSS中，通过设置根元素的font-size值为适合的基准值，例如 html { font-size: 16px; }。这个基准值会影响到所有使用rem单位的元素。

使用rem单位进行布局：在样式中，用rem单位来设置元素的大小、间距和边距等属性。例如，width: 10rem;将元素的宽度设置为根元素字体大小的10倍。

动态调整根元素字体大小：可以通过JavaScript根据屏幕尺寸来动态调整根元素的字体大小。这样可以根据不同屏幕大小调整布局，提供更好的适配性。

使用rem单位进行界面适配性布局的好处是，无论是在大屏幕还是小屏幕设备上，元素的大小都会自动根据根元素的字体大小进行调整，实现响应式的自适应布局。而且通过动态调整根元素字体大小，可以进一步提升适配性。

vue生命周期

Vue组件的生命周期是指一个组件实例从创建、挂载、更新到销毁的整个过程中的一系列钩子函数。通过这些钩子函数，我们可以在不同的阶段执行对应的操作，例如初始化数据、发送网络请求、处理DOM等。下面是Vue组件的常用生命周期钩子函数：

beforeCreate：在实例被创建之前被调用，此时组件的数据和事件还未初始化，无法访问到实例的data和methods。

created：在实例被创建后立即被调用，此时组件已经完成了数据的观测、属性和方法的运算，但尚未挂载到DOM上。

beforeMount：在组件即将被挂载到DOM上之前调用，此时组件已经完成了模板的编译，但尚未生成真正的DOM节点。

mounted：在组件被挂载到DOM上后调用，此时组件已经生成对应的真实DOM并插入到页面中，可以进行DOM操作。

beforeUpdate：在组件更新之前调用，即在数据更新时（不包括初始化）重新渲染之前调用。

updated：在组件更新之后调用，即在数据更新时（不包括初始化）重新渲染之后调用。

beforeDestroy：在组件销毁之前调用，此时组件实例仍然完全可用。

destroyed：在组件销毁之后调用，此时组件实例已经被销毁，不再可用。

除了上述钩子函数外，Vue还提供了一些其他的特殊钩子函数，例如activated和deactivated，用于处理组件在Vue的keep-alive组件中的缓存和激活状态下的行为。

es6里面用过多少特性

ES6是ECMAScript 2015的标准版本，引入了许多新的语法特性和功能，以增强JavaScript的表达力和开发体验。以下是ES6中一些常用的特性：

let和const：用于声明块级作用域的变量，取代了var关键字。let声明的变量具有块级作用域，而const声明的变量是常量，不可重新赋值。

箭头函数：使用箭头（=>）定义函数表达式的简洁语法，可以省略函数体大括号和return关键字，并且自动绑定函数的this值。

解构赋值：通过模式匹配的方式将数组和对象的值赋给变量，可以提取对象的属性和数组的元素，并赋值给对应的变量。

数组扩展：提供了一系列方便的数组操作和遍历的新方法，如展开运算符（…）、Array.from()、Array.prototype.includes()等。

对象字面量扩展：允许使用简洁的语法定义函数和变量，并直接在对象字面量中定义原型和方法。

模板字符串：使用反引号（`）包裹的字符串，可以包含变量或表达式，并支持多行字符串和字符串插值。

Promise和异步编程：引入了Promise对象，用于处理异步操作，解决了回调地狱的问题，并提供了更优雅的异步编程方案。

Class类：引入了类的概念，可以使用class关键字定义类，并使用constructor方法初始化实例和定义类的方法。

模块化：引入了import和export关键字，使JavaScript具备原生的模块化能力，可以按需导入和导出模块。

Generator函数：使用function*定义的生成器函数，可以生成可迭代的值序列，并支持暂停和恢复执行。

介绍你用过的特性

箭头函数：ES6的箭头函数提供了更简洁的函数语法和更方便的上下文绑定。它们适用于匿名函数或回调函数，并且在需要简洁代码或改变this指向时特别有用。

解构赋值：解构赋值提供了一种快速从数组或对象中提取值并赋值给新的变量的方法。这使得代码更简洁和易读，尤其在处理复杂数据结构时非常实用。

模板字符串：模板字符串允许在字符串中插入变量或表达式，并支持多行字符串。这样可以更方便地拼接字符串，并且避免了传统字符串连接的繁琐和容易出错的问题。

Promise和异步编程：ES6引入的Promise提供了一种更优雅、可读性更强的方式来处理异步操作。它的链式调用和错误处理使得异步编程更加易于管理和组织。

Class类：ES6中引入了class关键字，使得使用面向对象编程的方式更加简洁和直观。它提供了构造函数和类方法的语法糖，更易于定义对象和操作。

模块化：ES6模块化通过import和export关键字提供了原生的模块化支持，使得代码分割和复用更加方便。模块化让开发者能够按需导入和导出功能模块，提高了代码的可维护性和可扩展性。

如何处理后端的数组数据

在后端开发中，处理数组数据通常涉及到对数组进行遍历、过滤、排序、映射等常见操作。以下是一些常见的处理数组数据的方法：

遍历数组：可以使用循环语句（如for、forEach）来遍历数组，对每个元素进行操作。

过滤数组：使用filter方法可以根据指定条件筛选出符合条件的元素，创建一个新的数组。

映射数组：使用map方法可以对数组中的每个元素进行操作，并返回一个新的数组，这个新数组包含每个元素经过操作后的结果。

排序数组：使用sort方法可以按照指定的规则对数组进行排序，可以是数字、字符串等类型的排序。

查询数组：可以使用find、findIndex等方法在数组中查找符合条件的元素，返回满足条件的第一个元素或其索引。

统计数组：使用reduce方法可以对数组中的元素进行累计运算，如求和、求平均值等。

修改数组：使用splice方法可以对数组进行插入、删除、替换操作，可以根据需要对数组进行结构性更改。

防抖和节流

防抖（Debounce）和节流（Throttle）是前端开发中常用的优化技术，用于控制事件的触发频率，提高性能和用户体验。

防抖（Debounce）：防抖是一种在短时间内频繁触发事件时，只执行最后一次触发的操作的技术。当事件被触发后，会设置一个定时器，在指定的等待时间内如果事件再次被触发，就会清除之前的定时器，重新设置一个新的定时器，直到等待时间结束后，才执行真正的操作。
应用场景：适用于一些频繁触发的事件，如窗口的resize事件、输入框的keyup事件等。使用防抖可以减少不必要的触发次数，避免频繁执行操作，例如在搜索框中连续输入时进行搜索，但只在输入停止后才真正发送请求。

节流（Throttle）：节流是一种在一定时间段内只触发一次事件的技术。当事件被触发后，会设置一个定时器，在指定的等待时间内，如果再次触发事件，就会忽略此次触发，直到等待时间结束后，才能触发下一次事件。
应用场景：适用于一些频繁触发的事件，但我们希望限制事件的触发频率，如滚动事件、鼠标移动事件等。使用节流可以控制事件的触发频率，减少事件处理的次数，提高性能和响应速度。

用没用过vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的组件之间的所有状态。Vuex的核心概念包括state（状态）、mutations（变更）、actions（动作）和getters（获取器）。

state（状态）：存储应用程序中的状态数据，即单一状态树（single source of truth），用一个对象包含了全部的应用层级状态。

mutations（变更）：定义了可以修改state的方法，每个mutation都有一个特定的字符串类型的事件，当触发一个mutation时，对应的状态也会被修改。

actions（动作）：用于处理异步操作，通过触发mutation来改变状态。Actions可以包含任意异步操作，如API请求，然后再通过触发mutation来更新状态。

getters（获取器）：用于从store中的状态中获取派生的状态，并在组件中进行使用。是对state进行包装和计算的方法，类似于组件中的计算属性。

Vuex的设计使得状态管理变得更加规范和可维护，特别适用于大型或复杂的Vue.js应用程序。它提供了一种统一和可预测的方式来管理和共享状态，并提供了简洁的API和工具，使得组件之间的通信、状态更新和跟踪更加容易和可追踪。

for in for of 有什么区别

for...in循环语法：
用于遍历对象的可枚举属性。
循环遍历的顺序是不确定的，可能不会按照属性添加的顺序进行遍历。
在循环中，可以通过对象的属性名访问属性值。

const obj = { a: 1, b: 2, c: 3 };

for (let prop in obj) {
  console.log(prop);  // 输出: a, b, c
  console.log(obj[prop]);  // 输出: 1, 2, 3
}

for...of循环语法：
用于遍历可迭代对象，如数组、字符串、Set、Map等。
循环遍历的顺序是按照迭代器的规则，按顺序访问每个元素。
在循环中，可以直接访问数组或字符串的元素值，而不需要使用索引或属性名。


const arr = [1, 2, 3];

for (let value of arr) {
  console.log(value);  // 输出: 1, 2, 3
}


总结区别：

for...in遍历对象的属性名，适用于遍历对象和对象的原型链属性。
for...of遍历可迭代对象的元素值，适用于遍历数组、字符串等数据结构。

判断数据类型的方法

typeof操作符：可以返回一个表示数据类型的字符串
instanceof操作符：用于测试对象是否属于特定类的实例
Array.isArray()方法：用于检查一个值是否为数组。
Object.prototype.toString()方法：返回一个表示对象的类型的字符串。

原型

在JavaScript中，每个对象都有一个原型（prototype），它是一个指向另一个对象的引用。原型是实现对象之间继承和共享属性的机制。
在JavaScript中，每个对象都有一个原型（prototype），它是一个指向另一个对象的引用。原型是实现对象之间继承和共享属性的机制。

__proto__属性：每个对象都有一个__proto__内部属性，它指向该对象的原型。可以通过Object.getPrototypeOf(object)方法和object.__proto__来访问一个对象的原型

prototype属性：用于构造函数（如普通函数、类）的特殊属性。在构造函数被调用后，通过new关键字创建的新对象将会继承构造函数的prototype属性作为自己的原型。


原型链（prototype chain）：对象的原型可以形成一个链式结构，称为原型链。当访问对象的属性或者方法时，如果在当前对象上找不到，则会继续在原型链上向上搜索。