高频面试问题整理（持续更新中...）-CSDN博客

高频问答

1. Cookie、session和localStorage、以及sessionStorage之间的区别

cookie和session

1、保持状态：cookie保存在浏览器端，session保存在服务器端
2、使用方式：
- （1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
- （2）session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。
3、存储内容：cookie只能保存字符串类型，以文本的方式；session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
4、存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制

localStorage和sessionStorage

HTML5的WebStorage提供了两种API：localStorage（本地存储）和sessionStorage（会话存储）

1、生命周期：
- localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
- sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。不在不同的浏览器窗口中共享，即使是同一个页面
2、存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
5、获取方式：localStorage：window.localStorage;sessionStorage：window.sessionStorage;
6、应用场景：localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录

WebStorage的优点

（1）存储空间更大：cookie为4KB，而WebStorage是5MB
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快
（5）安全性：WebStorage不会随着HTTPheader发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题

2.数组去重的几种方法

var arr=[2,8,5,0,5,2,6,7,2,"2"];   //实验数组

方法一：Es6 去重。ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。
function unique1(arr){
var x = new Set(arr);
  return [...x];
}

unique1(arr)   //[2, 8, 5, 0, 6, 7, "2"]

方法二：遍历数组法。新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中。
function unique2(arr){
  var hash=[];
  for (var i = 0; i < arr.length; i++) {
    if(hash.indexOf(arr[i])==-1){
      hash.push(arr[i]);
    }
  }
  return hash;
}

unique2(arr)   //[2, 8, 5, 0, 6, 7, "2"]

方法三：数组下标判断法。如果当前数组的第 i 项的值 在当前数组中第一次出现的位置不是 i，那么表示第 i 项是重复的  忽略不计。
function unique3(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
   if(arr.indexOf(arr[i])==i){
    hash.push(arr[i]);
   }
}
return hash;
}

unique3(arr)   //[2, 8, 5, 0, 6, 7, "2"]

方法四：排序后相邻去除法 。 给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值
function unique4(arr){
arr.sort();
var hash=[arr[0]];
for (var i = 1; i < arr.length; i++) {
   if(arr[i]!=hash[hash.length-1]){
    hash.push(arr[i]);
   }
}
  return hash;
}

unique4(arr)  //[0, 2, 5, 6, 7, 8]
复制代码

3.对象的深拷贝

  方法一：
  function deepClone(obj) {
    let objClone = Array.isArray(obj) ? [] : {};
    if(obj && typeof obj === "object") {
      for(key in obj) {
        if(obj.hasOwnProperty(key)) {
          // 判断 obj 子元素是否为对象，如果是，递归复制
          if(obj[key] && typeof obj[key] === "object") {
            objClone[key] = deepClone(obj[key]);
          } else {
            // 如果不是，简单复制
            objClone[key] = obj[key];
          }
        }
      }
    }
    return objClone;
  }

  let a = [1, 2, 3, 4];
  let b = deepClone(a);
  a[0] = 2;
  console.log(a, b);
  
  // a = [2, 2, 3, 4];
  // b = [1, 2, 3, 4];
  
  方法二：使用 JSON 对象的 parse 和 stringify 
  
  注意：采用 JSON 进行的深拷贝，无法拷贝到 undefined、function、symbol 这类数据，它是有小 bug 的深拷贝
复制代码

4.css盒模型

标准盒子模型中：width 和 height 指的是内容区域的宽度和高度 =》 box-sizing: content-box;
IE 盒子模型中：width 和 height 指的是content+border+padding =》box-sizing: border-box;

5.实现三栏布局

实现：a b c 三个 div三栏布局  其中 a 在中间  b c 分别在两边

<div class="container">
  <div class="a">aa</div>
  <div class="b">bb</div>
  <div class="c">cc</div>
</div>

<style>
.container {
      width: 300px;
      height: 300px;
}
</style>

方案一：grid布局
<style>
  .container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: 
          "bb aa cc"
  }
  .a { grid-area: aa; }
  .b { grid-area: bb; }
  .c { grid-area: cc; }
</style>

方案二：flex布局
<style>
.container {
  display: flex;
}
.a { order: 0; }
.b { order: -1; }
.c { order: 1; }
</style>

Grid布局则适用于更大规模的布局（二维布局），而Flexbox布局最适合应用程序的组件和小规模布局（一维布局）

复制代码

6.BFC（块级格式化上下文）

如何生成BFC:

方法1：overflow: 不为visible，可以让属性是 hidden、auto。【最常用】
方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

BFC应用：

BFC在页面中是独立的容器 BFC 内部的子元素，在垂直方向，边距会发生重叠但是不同的BFC容器能阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)

6.居中的几种方式

vue相关

1. 父子组件间传值

父组件给子组件传值，直接通过props传值
<custom content="hello world"></custom>
子组件给父组件传值，通过 emit发送事件
this.$emit('chooseType', type)
父组件接收事件：
<custom content="hello world" @chooseType="handleType"></custom>
复制代码

2. 非父子组件间传值

   
   方案一：通过事件总线传值
   在根节点给 Vue 挂载一个空的 Vue 对象
   Vue.prototype.bus = new Vue();
   需要发送事件的组件里
   this.bus.$emit("change", params)
   接收事件的组件
   this.bus.$on("change", (msg) => {
       //do yourself work
   })
   方案二：vuex 状态管理
复制代码

3. 动态切换显示的组件

   <component> 是vue官方提供的标签，通过更改 is 指向的子组件名来动态切换组件
   <component :is='type'></component>

   data(){
       components:{
           component-one,
           component-two
       }
       return{
           type: 'component-one'
       }
   }
复制代码