春招笔试面试合集

html块级元素

<div>：定义文档中的一个区域，用于组织和布局其他HTML元素。
<h1>-<h6>：定义文档中的标题，数字越小，字体越大。
<p>：定义段落。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项，通常出现在<ul>或<ol>元素内部。
<table>：定义表格。
<tr>：定义表格中的一行。
<td>：定义表格中的一个单元格。
<blockquote>：定义引用块。
<pre>：定义预格式化文本块。
<form>：定义表单。
<fieldset>：定义表单中的一组相关元素。
<address>：定义联系信息块。

window.location对象属性

window.location.href: 返回或设置当前页面的URL地址。
window.location.protocol: 返回或设置页面使用的协议（http:// 或 https://）。
window.location.host: 返回或设置当前页面的主机名和端口号。
window.location.hostname: 返回或设置当前页面的主机名。
window.location.port: 返回或设置当前页面的端口号。
window.location.pathname: 返回或设置当前页面的路径部分（不包含域名和查询字符串）。
window.location.search: 返回或设置当前页面的查询字符串部分（以问号开始）。
window.location.hash: 返回或设置当前页面的 URL 锚点（以井号开始）。
window.location.origin: 返回当前页面的协议、主机名和端口号。

js数组方法

concat()：将两个或多个数组合并成一个数组。
join()：将数组元素转换为字符串，并用指定的分隔符连接成一个字符串。
pop()：删除数组的最后一个元素并返回该元素。
push()：向数组的末尾添加一个或多个元素，并返回新的长度。
shift()：删除数组的第一个元素并返回该元素。
unshift()：向数组的开头添加一个或多个元素，并返回新的长度。
slice()：返回数组的指定部分，而不修改原始数组。
splice()：从数组中添加或删除元素，可以修改原始数组。
sort()：按字母顺序对数组进行排序，也可以传入一个比较函数进行自定义排序。
reverse()：反转数组的顺序。
indexOf()：返回数组中第一个匹配项的索引。
lastIndexOf()：返回数组中最后一个匹配项的索引。
forEach()：对数组中的每个元素执行指定的函数。
map()：对数组中的每个元素执行指定的函数，并返回一个新的数组。
filter()：返回一个新数组，其中包含满足条件的原始数组元素。
reduce()：对数组中的每个元素执行指定的函数，返回一个累积结果。
reduceRight()：对数组中的每个元素执行指定的函数，从右向左处理元素，返回一个累积结果。
every()：测试数组中的所有元素是否满足指定的条件，如果所有元素都满足条件，则返回 true，否则返回 false。
some()：测试数组中的至少一个元素是否满足指定的条件，如果至少有一个元素满足条件，则返回 true，否则返回 false。

css的position和文档流

position: static; （默认值）：元素在文档流中正常定位，不会脱离文档流。
position: relative;：相对于自身原来的位置进行定位，不会脱离文档流，但是会在原位置保留占位。
position: fixed;：相对于视口（浏览器窗口）进行定位，不会随页面滚动而移动，会脱离文档流，对页面布局影响较大。
position: absolute;：相对于父元素进行定位，会脱离文档流，对页面布局影响较大，如果没有定位的父元素，则相对于文档进行定位。

除了 position: static;，其他取值都可能会导致元素脱离文档流。除了 position 属性，还有一些其他的 CSS 属性也可能会影响元素的定位和布局，例如 float、display 等。具体需要根据实际情况来选择合适的属性和取值。

场景题：浏览器在一次http请求中，需要传输一个4094字节的文本数据给服务端，可以采取哪些方式

HTTP协议规定的URL长度是有限制的，具体长度取决于不同的浏览器和服务器配置，但一般不会超过2KB。因此，如果需要传输的文本数据达到4094字节，不能放在URL参数中，否则会导致请求失败或数据丢失。下面针对每个选项进行解释：

存入indexDB：可以将数据存入IndexedDB中，IndexedDB是浏览器提供的本地数据库，可以存储大量数据，但需要通过JavaScript API进行操作。
写入cookie：cookie是一种存储在客户端的小型数据，每个cookie的大小一般不超过4KB，因此不能将4094字节的文本数据写入cookie。
放在URL参数：不可行，因为URL长度有限制。
写入session：session是一种在服务器端存储数据的机制，也不能将4094字节的文本数据写入session。
使用post：可以将数据通过POST请求发送给服务器，POST请求没有长度限制，可以传输大量数据。
放在localstorage：localstorage是浏览器提供的本地存储机制，每个域名的localstorage大小限制一般为5MB左右，因此可以将4094字节的文本数据存储在localstorage中。

综上所述，可以采用将数据存入IndexedDB或localstorage中，或者通过POST请求发送给服务器。具体选择哪种方式取决于实际需求和场景。

vue组件的参数传递

子组件给父组件传值可以使用 $emit，这是 Vue 中的一种常见的父子组件通信方式。子组件通过 $emit 触发一个自定义事件，并传递需要传递的数据，父组件在模板中通过 @自定义事件名的方式监听这个事件，并处理子组件传递过来的数据。
祖孙组件之间可以使用 provide 和 inject 实现跨级传值，这是 Vue 中一种依赖注入的方式。通过在祖先组件中使用 provide 来提供数据，子孙组件中使用 inject 来注入这些数据，就可以实现跨级传值。
子组件使用 $emit('say')，父组件可以使用 @say 监听这个事件，监听方式是正确的。可以通过监听这个事件，获取子组件传递的数据，并做出相应的处理。
父组件给子组件传值，子组件可以通过 props 接收参数。父组件在模板中使用子组件时，可以通过 v-bind 或简化的 : 语法将需要传递的数据绑定到子组件的 props 属性上，子组件就可以在内部使用这些数据了。

cookie，sessionStorage，localstorage之间的区别

存储大小不同：Cookie 的大小限制一般为 4KB 左右，而 SessionStorage 和 LocalStorage 的大小限制一般为 5MB 左右。
生命周期不同：Cookie 可以设置过期时间，也可以在浏览器关闭后仍然存在；SessionStorage 存储的数据只在当前会话中有效，浏览器关闭后数据将被删除；而 LocalStorage 中存储的数据可以长期保存在用户的本地存储中，除非用户手动删除或者清除浏览器缓存。
数据作用范围不同：Cookie 的数据可以被同源的所有页面访问；SessionStorage 和 LocalStorage 的数据只能被保存数据的页面访问。
与服务器交互方式不同：Cookie 会随着每次 HTTP 请求被发送到服务器，而 SessionStorage 和 LocalStorage 只存储在客户端浏览器中，不会与服务器发生直接交互。
安全性不同：Cookie 中存储的数据可以被其他域名下的脚本访问，存在安全风险；而 SessionStorage 和 LocalStorage 存储的数据只能被同源页面访问，安全性更高。

Cookie、SessionStorage 和 LocalStorage 在数据大小、生命周期、数据作用范围、与服务器交互方式和安全性等方面都存在差异，需要根据实际需求选择合适的存储方式。通常，如果需要将数据传递给服务器，可以使用 Cookie；如果需要在当前页面中存储数据并且在会话结束后删除，可以使用 SessionStorage；如果需要在多个页面中长期保存数据，可以使用 LocalStorage。

vue2的生命周期有哪些，按照触发事件依次列出，并写出常用的导航钩子

Vue2 的生命周期分为 8 个阶段，依次为：

beforeCreate：组件实例被创建之初，此时组件的数据观测和事件机制都尚未初始化，无法访问组件的 data 和 methods 属性。
created：组件实例已经完成数据观测和事件机制的初始化，但是尚未挂载到页面上，此时可以访问组件的 data 和 methods 属性，但无法访问组件的 $el 属性。
beforeMount：组件已经完成了模板的编译，但尚未挂载到页面上。
mounted：组件已经挂载到页面上，此时可以访问组件的 $el 属性，可以在此时执行一些需要访问 DOM 元素的操作。
beforeUpdate：组件的数据发生改变，但是尚未更新到视图上。
updated：组件的数据已经更新到视图上。
beforeDestroy：组件即将被销毁，在这个阶段可以执行一些清理工作，如解绑定时器、事件监听器等。
destroyed：组件已经被销毁，此时所有的事件监听器和定时器都已经被自动清理。

常用的导航钩子有：

beforeRouteEnter：在路由进入该组件前调用，此时组件实例还没有被创建，无法访问组件实例的属性和方法，但是可以通过回调函数访问组件实例。
beforeRouteUpdate：在路由更新但是该组件被复用时调用，此时可以访问组件的数据和方法。
beforeRouteLeave：在路由离开该组件前调用，此时可以执行一些确认操作，如提示用户保存数据等。需要注意的是，如果组件缓存被禁用，则该钩子在组件销毁时也会被调用。

什么是事件循环，分别列举几个宏任务和微任务

事件循环是 JavaScript 中用于协调处理异步事件的机制。它会不断地从任务队列中取出任务，执行任务，直到队列为空，然后再等待新的任务加入队列。

事件循环中的任务分为宏任务和微任务两种类型。

宏任务（macrotask）包括以下几种：

script（整体代码）
setTimeout 和 setInterval
setImmediate 和 MessageChannel
I/O 操作、UI 渲染等

微任务（microtask）包括以下几种：

Promise.then、Promise.catch 和 Promise.finally
MutationObserver
process.nextTick（Node.js 环境）

宏任务和微任务的执行顺序如下：

首先执行当前宏任务队列中的所有任务，直到队列为空。
接着执行微任务队列中的所有任务，直到队列为空。
检查渲染是否需要更新，如果需要，则执行渲染操作。
然后进入下一轮事件循环，检查宏任务队列中是否有任务，如果有则执行宏任务队列中的任务，否则执行微任务队列中的任务，然后检查渲染是否需要更新，如此反复循环。

需要注意的是，微任务比宏任务优先级更高，即在同一事件循环中，微任务队列中的任务始终先于宏任务队列中的任务执行。

这里给一个例子来深入理解一下：https://cloud.tencent.com/developer/article/1768943

用javascript完成两数字之和，给定一个整数数组num和一个整数目标值target，请在该数组中找出和为目标值target的两个整数，并返回数组下标

定义一个空的哈希表。
遍历数组中的每一个元素，假设当前元素为num[i]，目标值为target，那么需要找到另一个元素num[j]，满足num[i] + num[j] = target。
对于每一个元素num[i]，计算出另一个元素num[j] = target - num[i]，然后在哈希表中查找是否存在该元素。如果存在，说明找到了符合条件的两个数，返回它们的下标；否则，将当前元素num[i]和它的下标存入哈希表中，继续遍历下一个元素。

function twoSum(nums, target) {
  const map = new Map();
  for (let i = 0; i < nums.length; i++) {
    const complement = target - nums[i];
    if (map.has(complement)) {
      return [map.get(complement), i];
    }
    map.set(nums[i], i);
  }
  return [];
}

给你一个字符串s，由若干单词组成，单词前后用一些空格字符隔开，返回字符串中最后一个单词的长度，请给出最少两个实现方法

可以使用 JavaScript 的内置方法，先将字符串去掉前后的空格，然后通过 split 方法将字符串分割成单词数组，最后取最后一个单词并返回其长度。

function lengthOfLastWord(s) {
  const words = s.trim().split(' ');
  return words[words.length - 1].length;
}

可以从字符串的末尾开始向前遍历，找到第一个非空格字符，然后再继续向前遍历，直到找到一个空格字符或到达字符串的开头，这个过程中就是最后一个单词的长度。

function lengthOfLastWord(s) {
  let len = 0;
  for (let i = s.length - 1; i >= 0; i--) {
    if (s[i] !== ' ') {
      len++;
    } else if (len > 0) {
      break;
    }
  }
  return len;
}