【面试宝典】299- 每天5道题，温故而知新（2）

文章转载自公众号【前端FE】，作者 前端FE

本系列文章针对目前常见的面试题，仅提供了相应的核心原理及思路，部分边界细节未处理。后续会持续更新，希望对你有所帮助。

思考

这是今天的题目，你可以先思考一下，然后重点关注不熟悉的~

• rem基本设置
• 实现一个双向数据绑定
• var、let 和 const 区别的实现原理是什么?
• 谈谈你对TCP三次握手和四次挥手的理解.
• 如何让 (a == 1 && a == 2 && a == 3) 的值为true？

逐个击破

6.rem基本设置

在手机端项目中，经常用到是rem单位，笔试的时候你能写出来吗？

// 基准大小
const baseSize = 32;
function setRem () {
    const scale = document.documentElement.clientWidth / 750;
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px';
}
setRem();
// 监听窗口变化
window.onresize = function () {
    setRem()
};

7.实现一个双向数据绑定

Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的,主要还是来实现一个实例。

let obj = {}
let input = document.getElementById('input')
let span = document.getElementById('span')
// 数据劫持和
Object.defineProperty(obj, 'text', {
  configurable: true,
  enumerable: true,
  get() {
    console.log('获取数据了')
    return obj['text']
  },
  set(newVal) {
    console.log('数据更新了')
    input.value = newVal
    span.innerHTML = newVal
  }
})
// 输入监听
input.addEventListener('keyup', function(e) {
  obj.text = e.target.value
})

8.var、let 和 const 区别的实现原理是什么?

var

• var 命令会发生“变量提升”现象，即变量可以在声明之前使用，值为 undefined 。
• 内层变量可能覆盖外层变量
• 用来计数的循环变量泄露为全局变量

let

• 声明的全局变量不会挂在顶层对象下面
• 所声明的变量一定要在声明后使用，否则报错，报错 ReferenceError
• 暂时性死区，只要块级作用域内存在 let 命令，它所声明的变量就“绑定”（ binding ）这个区域，不再受外部的影响，在代码块内，使用 let 命令声明变量之前，该变量都是不可用的。
• 不允许重复声明

const

• 声明的全局变量不会挂在顶层对象下面
• const 声明之后必须马上赋值，否则会报错
• const 简单类型一旦声明就不能再更改，复杂类型(数组、对象等)指针指向的地址不能更改，内部数据可以更改。
• const 一旦声明变量，就必须立即初始化，不能留到以后赋值。
• const 命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

9.谈谈你对TCP三次握手和四次挥手的理解

TCP三次握手：

1. 客户端发送syn包到服务器，等待服务器确认接收。
2. 服务器确认接收syn包并确认客户的syn，并发送回来一个syn+ack的包给客户端。
3. 客户端确认接收服务器的syn+ack包，并向服务器发送确认包ack，二者相互建立联系后，完成tcp三次握手。

四次挥手就是中间多了一层 等待服务器再一次响应回复相关数据的过程。

‍

‍

10.如何让 (a == 1 && a == 2 && a == 3) 的值为true？

const a = {
   num: 0,
   valueOf: function() {
         return this.num += 1
   }
};
console.log(a==1 && a==2 && a==3); // true

1. 使用相等操作符，js会做强制类型转化
2. 我们的对象每次调用valueOf()它的值会增加1
3. (a==1 && a==2 && a==3) 当他们比较时，JavaScript会企图将对象转化成数字的类型，进行比较。
4. 当要转化的是一个Object的时候，JavaScript会调用本身的valueOf()方法，这个时候就可以实现this.num += 1

恭喜你，又掌握了一个新技能~