前端面试重要问题总结（前端100问小结）（六）

第 51 题：Vue 的响应式原理中 Object.defineProperty 有什么缺陷？

题目讨论
为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？

Object.defineProperty无法监控到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
Object.defineProperty只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历，如果，属性值是对象，还需要深度遍历。Proxy可以劫持整个对象，并返回一个新的对象。
Proxy不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

第 52 题：怎么让一个 div 水平垂直居中

<div class="parent"><div class="child"></div>
</div>

1：

div.parent {display: flex;justify-content: center;align-items: center;
}

2：

div.parent {position: relative;
}
div.child {position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);
}
/* 或者 */
div.child {width: 50px;height: 10px;position: absolute;top: 50%;left: 50%;margin-left: -25px;margin-top: -5px;
}
/* 或 */
div.child {width: 50px;height: 10px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;
}

3：

div.parent {display: grid;
}
div.child {justify-self: center;align-self: center;
}

4：

div.parent {font-size: 0;text-align: center;&::before {content: "";display: inline-block;width: 0;height: 100%;vertical-align: middle;}
}
div.child{display: inline-block;vertical-align: middle;
}

div.parent{display:flex;
}
div.child{margin:auto;
}

第 53 题：输出以下代码的执行结果并解释为什么

题目讨论

var a = {n: 1};
var b = a;
a.x = a = {n: 2};console.log(a.x)
console.log(b.x)

var a = {n: 1}; // a保持对{n:1}对象的引用
var b = a; // b保持对{n:1}对象的引用
a.x = a = {n: 2}; // a的引用被改变a.x   // --> undefined
b.x     // --> {n: 2}

1、.运算符优先，a.x此时保持对{n: 1}的引用，也就是b也保持对{n: 1}的引用，于是{n: 1} => {n: 1, x: undefined}，此时a和b还是对原来对象的引用，只不过原来对象增加了x属性
2、=从右往左，a = {n: 2}，此时a的引用已经变成了{n: 2}这个对象
3、a.x=a，此时a.x是保持对{ n: 1, x: undefined}中的x引用，也就是b.x，于是{ n: 1, x: undefined} => {n: 1, x: { n: 2}}，即b.x = { n: 2 }

第 54 题：冒泡排序如何实现，时间复杂度是多少，还可以如何改进？

题目讨论
时间复杂度 O(n2)

function bubbleSort(arr) {for (let i = 0; i < arr.length; i++) {for (let j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {const temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}console.log(arr);
}// 改进冒泡排序
function bubbleSort1(arr) {let i = arr.length - 1;while (i > 0) {let pos = 0;for (let j = 0; j < i; j++) {if (arr[j] > arr[j + 1]) {pos = j;const temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}i = pos;}console.log(arr);
}

第 55 题：某公司 1 到 12 月份的销售额存在一个对象里面

如下：{1:222, 2:123, 5:888}，请把数据处理为如下结构：[222, 123, null, null, 888, null, null, null, null, null, null, null]。

let obj = {1:222, 2:123, 5:888};
Array.from({length:12},(item,index)=>obj[index+1]||null)

第 56 题：要求设计 LazyMan 类，实现以下功能。

题目讨论

LazyMan('Tony');
// Hi I am TonyLazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunchLazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating dinerLazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food

class LazyManClass {constructor(name) {this.name = namethis.queue = []console.log(`Hi I am ${name}`)setTimeout(() => {this.next()},0)}sleepFirst(time) {const fn = () => {setTimeout(() => {console.log(`等待了${time}秒...`)this.next()}, time)}this.queue.unshift(fn)return this}sleep(time) {const fn = () => {setTimeout(() => {console.log(`等待了${time}秒...`)this.next()},time)}this.queue.push(fn)return this}eat(food) {const fn = () => {console.log(`I am eating ${food}`)this.next()}this.queue.push(fn)return this}next() {const fn = this.queue.shift()fn && fn()}
}function LazyMan(name) {return new LazyManClass(name)
}

第 57 题：分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。

display: none 会回流操作性能开销较大，
visibility: hidden 是重回操作比回流操作性能高一些，（回流会计算相邻元素甚至组先级元素的位置，属性等）
opacity: 0 重建图层，性能较高

总结一下：
结构：
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击

继承：
display: none和opacity: 0：是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示。
visibility: hidden：是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式。

性能：
displaynone : 修改元素会造成文档回流,读屏器不会读取display: none元素内容，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少读屏器读取visibility: hidden元素内容
opacity: 0 ：修改元素会造成重绘，性能消耗较少

联系：它们都能让元素不可见

第 58 题：箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

题目讨论
箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有以下几点差异：

1、函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

2、不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。

3、不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

4、不可以使用 new 命令，因为：

没有自己的 this，无法调用 call，apply。
没有 prototype 属性，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

new 过程大致是这样的：

function newFunc(father, ...rest) {var result = {};result.__proto__ = father.prototype;var result2 = father.apply(result, rest);if ((typeof result2 === 'object' || typeof result2 === 'function') &&result2 !== null) {return result2;}return result;
}

第 59 题：给定两个数组，写一个方法来计算它们的交集。

例如：给定 nums1 = [1, 2, 2, 1]，nums2 = [2, 2]，返回 [2, 2]。

题目讨论

for in遍历的是数组的索引（即键名），而for of遍历的是数组元素值。所以for in更适合遍历对象，不要使用for in遍历数组。

const = (nums1, nums2) => {const map = {}const res = []for(let n of nums1) {if(map[n]) {map[n]++}else{map[n] = 1}}for(let n of nums2) {if(map[n] > 0){res.push(n)map[n]--}}return res
}

第 60 题：已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改。

<img src="1.jpg" style="width:480px!important;”>

1.max-width: 300px
2.transform: scale(0.625,0.625)
3.box-sizing: border-box; padding: 0 90px;