前端面试100问(22-30)

 

第22题:介绍下重绘和回流(Repaint&Reflow),以及如何进行优化?

答:关于重绘和回流

 

第23题:介绍下观察者模式和订阅-发布模式的区别,各自适用于什么场景?

答:观察者模式和发布订阅模式

 

 第24题:聊聊Redux和Vuex的设计思想?

答:

把组件之间需要共享的状态抽取出来,遵循特定的约定,统一来管理,让状态的变化可以预测。

组件不允许直接修改属于store实例的state,组件必须通过action来改变state

 

第25题:说说浏览器和Node事件循环的区别?

答:

其中一个主要区别在于浏览器的event loop和nodejs的event loop在处理异步事件的顺序上是不同的。nodejs中有micro event;其中promise属于micro event,该异步事件的处理顺序就和浏览器不同。

nodejs v11.0以上版本,这两者之间的顺序就相同了。

 

第26题:介绍模块化发展历程

模块化是用来抽离公共代码,隔离作用域,避免变量冲突等。

IIFE:使用自执行函数来编写模块化,特点:在一个单独的函数作用域中执行代码,避免变量冲突。

AMD:使用requireJS来编写模块化,特点:依赖必须提前声明好。

CMD:使用seaJS来编写模块化,特点:支持动态引入依赖文件。

CommonJS:nodejs中自带的模块化

UMD:兼容AMD,CommonJS模块化语法

webpack(require.ensure):webpack 2.x版本中的代码分割

ES Modules:ES6引入的模块化,支持import来引入另一个js

 

第27题:全局作用域中,用const和let声明的变量不在window上,那到底在哪里?如何去获取?

答:

在ES5中,顶层对象的属性和全局变量是等价的,var命令和function命令声明的全局变量,自然也是顶层对象。

但ES6规定,var命令和function命令声明的全局变量,依旧是顶层对象的属性,但let命令、const命令、class命令声明的全局变量,不属于顶层对象的属性。

在哪里?在一个块级作用域(Script)里

怎么获取?在它所在的作用域中直接获取,比如,let a = 0; console.log(a)

 

第28题:cookie和token都存放在header中,为什么不会劫持token?

答:浏览器会自动带上cookie,不会自动带上token

 

第29题:聊聊Vue的双向数据绑定,Model如何改变View,View又是如何改变Model的?

答:核心是利用ES5的Object.defineProperty

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input id="input" type="text">
    <div id="text"></div>

    <script>
        let input = document.getElementById("input")
        let text = document.getElementById("text")
        let data = { value: "" }
        Object.defineProperty(data, "value", {
            set: function (val) {
                text.innerHTML = val;
                input.value = val;
            },
            get: function () {
                return input.value
            }
        });
        input.onkeyup = function (e) {
            data.value = e.target.value;
        }
    </script>
</body>
</html>
复制代码

 

第30题:两个数组合并成一个数组

请把两个数组 ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'] 和 ['A', 'B', 'C', 'D'],合并为 ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']。
答:
复制代码
var arr1 = ['A1', 'A2', 'B1', 'B2', 'C1', 'C2', 'D1', 'D2'];
var arr2 = ['A', 'B', 'C', 'D'];

var arr3 = arr2.map(item => item + 3)

var arr4 = [...arr1, ...arr3].sort().map(item => {
    if (item.includes('3')) {
        return item.split('')[0]
    }
    return item;
})

console.log(arr4);
// ['A1', 'A2', 'A', 'B1', 'B2', 'B', 'C1', 'C2', 'C', 'D1', 'D2', 'D']
复制代码

代码来自:https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/39#issuecomment-471380860

 

 

参考文章:https://juejin.im/post/5d23e750f265da1b855c7bbe#heading-25

 

posted on   独自去流浪  阅读(194)  评论(0编辑  收藏  举报

编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示