前端面试系列--名词解释

1. 闭包：

定义在一个函数内部的函数。在本质上，闭包是将函数内部和函数外部连接起来的桥梁

• 特点：
  -- 让外部访问函数内部变量成为可能；
  -- 局部变量会常驻在内存中；
  -- 可以避免使用全局变量，防止全局变量污染；
  -- 会造成内存泄露（有一些内存空间被长期占用，而不被释放）。解决方法是，在退出函数之前，将不使用的局部变量全部删除。

function a(){ 
  var i=0;
  function b(){  // 函数b嵌套在函数a内部
    alert(++i);
}
  return b;  // 函数a返回函数b
}
var c=a();
c();
// 当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

2. 心跳机制：

发送方定时发送一个自定义的结构体心跳包让接收方知道自己还活着，以确保连接的有效性的机制。
注：发送方可以是客户端或者服务端，根据实际情况而定，常见是客户端作为发送方。

• 应用场景
  在长连接下，有可能很长一段时间都没有数据往来。理论上说，这个连接是一直保持连接的，但是实际情况中，如果中间节点出现什么故障是难以知道的。更要命的是，有的节点（防火墙）会自动把一定时间之内没有数据交互的连接给断掉。在这个时候，就需要我们的心跳包了，用于维持长连接，保活。

• 实现技术
  方式一：应用层实现心跳机制（推荐）
  优点：实现策略灵活，能及时检测到连接状态；
  缺点：每个应用都需要有一套，无法底层共用；
  方式二：利用TCP的KeepAlive机制
  TCP协议本身提供了心跳机制，需要通过SO_KEEPALIVE开启。默认情况下，当连接空闲2小时后，每隔75s发送一次心跳包，如果连续9次没有收到响应则关闭连接。
  优点：不需要二次开发，简单配置参数即可；
  缺点：网络环境的复杂性使得KeepAlive机制容易失效；

3. 判断一个变量是否为NaN

js提供了isNaN() 的方法，判断是否是NaN。isNaN只能判断是不是NaN并不能判断这个变量是否是数字，所以先把变量判断是不是number类型，再进行判断。

IsNaN(value) { 
    return typeof value === 'number' && isNaN(value)
} 
console.log(IsNaN('a'));//false
console.log(IsNaN(0));//false
console.log(IsNaN(NaN));//true

4. box盒子模型属性

内容（content）、边框（border）、内边距（padding）和外边距（margin）

• 盒子模型边框（border）
  属性：border-width|border-style|border-color

• 盒子模型的内边距（padding）
  盒子的大小=定义的大小+边框+内边距
  padding-top:上内边距
  padding-right:右内边距
  padding-bottom:下内边距
  padding-left:左内边距

• 盒子模型的外边距（margin）
  用法与padding一样，但是margin对盒子宽度不会有影响

5. 居中的方法

5.1 垂直居中

• 通过verticle-align:middle实现CSS垂直居中
  vertical生效的前提是元素的display：inline-block。

垂直居中

.in {
    display：inline-block;
    verticle-align:middle;
}

• 通过display:flex实现CSS垂直居中
  通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

    
垂直居中

.out {
    ...
    display: flex; // 父元素
}
.in {
    ...
    align-self：center； // 子元素
}

• 通过伪元素:before实现CSS垂直居中。
  具体方式是为父元素添加伪元素:before，使得子元素实现垂直居中。

• 通过display:table-cell实现CSS垂直居中。
  给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中。

• 通过隐藏节点实现CSS垂直居中。
  创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。

• 已知父元素高度通过transform实现CSS垂直居中。
  给子元素的position:relative，再通过translateY即可定位到垂直居中的位置。

• 通过line-height实现CSS垂直居中。
  设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

5.2 水平垂直居中

• 绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）

div{
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

• 绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值

div{
    width:600px;
    height: 600px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-300px;
    margin-top:-300px;
}

• 绝对定位方法：绝对定位下top left right bottom 都设置0

我是子级
/**css**/
div.child{
    width: 600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

• flex布局方法：当前div的父级添加flex css样式

    
child

/**css**/
.box{
    height:800px;
    -webkit-display:flex;
    display:flex;
    -webkit-align-items:center;
    align-items:center;
    -webkit-justify-content:center;
    justify-content:center;
    border:1px solid #ccc;
}
div.child{
    width:600px;
    height:600px;
    background-color:red;
}

• table-cell实现水平垂直居中: table-cell middle center组合使用

    
我爱你

/**css**/
.table-cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 240px;
    height: 180px;
    border:1px solid #666;
}

• 绝对定位：calc() 函数动态计算实现水平垂直居中

    
calc

/**css**/
.calc{
  position: relative;
  border: 1px solid #ccc;
  width: 400px;
  height: 160px;
}
.calc .child{
  position: absolute;
  width: 200px;
  height: 50px;
  left:-webkit-calc((400px - 200px)/2);
  top:-webkit-calc((160px - 50px)/2);
  left:-moz-calc((400px - 200px)/2);
  top:-moz-calc((160px - 50px)/2);
  left:calc((400px - 200px)/2);
  top:calc((160px - 50px)/2);
}

6. css样式占位和不占位隐藏元素的方法(v-if /v-show)

// 占位
 style="visibility:hidden"  // v-if 隐藏也是这个

// 不占位
style="display:none" // v-show隐藏也是这个

• display:none和visibility:hidden的区别是：

  • display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；
    v-show隐藏则是为该元素添加css--display:none，dom元素还在（适用于需要非常频繁切换条件的场景）。

  • visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
    v-if显示隐藏是将dom元素整个添加或删除（适用于在运行时很少改变条件，不需要频繁切换条件的场景）。

使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流。

7. 隐藏元素的方法

• visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在【占用】
• opacity: 0; CSS3属性，设置0可以使一个元素完全透明；【占用】
• position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外;

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

• display: none; 元素会变得不可见，并且不会再占用文档的空间。【不占用】
• transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留
• height: 0; 将元素高度设为 0 ，并消除边框
• filter: blur(0); CSS3属性，将一个元素的模糊度设置为0，从而使这个元素“消失”在页面中

8. == 和 === 的区别

• == 代表相同(值一致)：

  • 先检查两个操作数数据类型，如果相同， 则进行===比较;
  • 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较;
    如果两个值类型不同，也有可能相等，需根据以下规则进行类型转换在比较：
    　　　　1. 如果一个是null，一个是undefined，那么相等
    　　　　2. 如果一个是字符串，一个是数值，把字符串转换成数值之后再进行比较

• ===代表严格相同（强一致）：

  1. 如果类型不同，就一定不相等
  2. 如果两个都是数值，并且是同一个值，那么相等；如果其中至少一个是NaN，那么不相等。（判断一个值是否是NaN，只能使用isNaN( ) 来判断）
  3. 如果两个都是字符串，每个位置的字符都一样，那么相等，否则不相等。
  4. 如果两个值都是true，或是false，那么相等
  5. 如果两个值都引用同一个对象或是函数，那么相等，否则不相等
  6. 如果两个值都是null，或是undefined，那么相等

9. js的序列化与反序列化

• 序列化：就是js中的Object转化为字符串

// 1、使用obj.toJSONString()
var str=obj.toJSONString(); //将JSON对象转化为JSON字符

// 2、使用JSON.stringify(obj)
var str=JSON.stringify(obj); //将JSON对象转化为JSON字符

• 反序列化：即js中JSON字符串转化为Object

// 1、使用eval('('+josnStr+')')。
// 为什么要 eval这里要添加 "("+data+");//”呢？
// 原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。
var obj=eval("("+data+")");

// 2、使用jsonStr.parseJSON()
var obj = jsonStr.parseJSON(); //由JSON字符串转换为JSON对象

// 3、使用parse(jsonStr)
var obj = JSON.parse(data); //由JSON字符串转换为JSON对象

10. 深拷贝、浅拷贝

假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝,拿人手短；
如果B没变，那就是深拷贝,自食其力；

• 实现深拷贝的方法：
  • 递归
  • 序列化
  • JQ的extend方法

$.extend( [deep ], target, object1 [, objectN ] )
// deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝
// target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。
// object1  objectN可选。 Object类型 第一个以及第N个被合并的对象。 

// 例子
let a=[0,1,[2,3],4],
b=$.extend(true,[],a);
a[0]=1;
a[2][0]=1;
console.log(a,b);

image.png

• js的数据类型有
  • 基本数据：string，boolean，number，undefined，nul，symbol，BigInt(es10新增)
  • 引用数据：object，Array，Function

11. vue方面

vue原理

12. 数组方法

• arr.push() 从后面添加元素，返回值为添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.push(5))   // 6
console.log(arr) // [1,2,3,4,5,5]

• arr.pop()从后面删除元素，智能是一个，返回值是删除的元素

13. 数组循环