Web前端最新JavaScript预编译学习，2024年最新Web前端面试宝典2024-CSDN博客

本文链接：https://blog.csdn.net/2401_84447149/article/details/138991695

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

console.log(a); // 123

var b = function() {}

console.log(b); // ƒ () {}

function d() {}

}

test(1)

要想弄明白最终的输出结果，就不得不好好学习一下预编译的详细过程。最早做这个题时，听说过这样两句话：函数声明整体提升，变量声明提升。这两句话可以解决大多数的提升问题，但面临函数与变量重名时，就必须解决函数与变量谁的优先级更高那？上面结果其实已经证明了，函数的更高。

1.1 预编译详解

预编译开始，会建立AO(执行期上下文)对象
找形参和变量声明，使其作为AO的属性名，值赋予undefined
实参和形参相统一
找函数声明，值赋予函数体

1.2 解析上述案例

有了预编译过程，就可以按部就班的得出最终的输出方案

先建立AO，并找形参和变量声明

AO :{

a: undefined,

b: undefined

}

形参实参相统一

AO :{

a: 1,

b: undefined

}

找函数声明，值赋予函数体

AO :{

a: function a() {},

b: undefined,

d: function d() {}

}

第一个console.log(a)，AO中当前值为 ƒ a() {}
a = 123，修改AO中a值，于是第二个和第三个console.log(a)都输出123
b = function() {}，b值为function() {}

2. 全局预编译

全局中不存在形参和实参，所以只需处理变量声明和函数声明

2.1 全局预编译过程

生成GO
找变量声明，由于全局变量默认挂载在window之上，若window当前已存在当前属性，忽略当前操作，若没有，变量作为属性名，值赋予undefined。
找函数声明，函数类似与变量，先去window上查看，不存在，函数作为函数名，值为函数体

2.2 案例分析

将函数预编译案例稍微修改，如下

// test部分的结果与函数部分相同，再次只分析全局部分

console.log(a);

var a = 1;

console.log(a);

function test(a) {

console.log(a);

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】