前端进阶面试-JS面试题(阿里、字节、腾讯、美团面试高频）
…
if (/* 异步执行成功 */) {
resolve(value)
} else if (/* 异步执行失败 */) {
reject(error)
}
})
myPromise.then((value) => {
// 成功后调用, 使用value值
}, (error) => {
// 失败后调用, 获取错误信息error
})
=========================================================================
优点: 解决回调地狱, 对异步任务写法更标准化与简洁化
问题: 首先, 禁止停止Promise, 一旦启动就会立即执行, 无法中途终止; 其次, 如果不绑定回调函数, Promise内部抛出的异常信息不会反馈给外部; 第三, 当处在一个pending阶段时, 无法得知目前具体处于哪个阶段（初始阶段还是接近完成阶段）。
极简版promise封装:
function promise () {
this.msg = ‘’ // 存放value和error
this.status = ‘pending’
var that = this
var process = arguments[0]
process (function () {
that.status = ‘fulfilled’
that.msg = arguments[0]
}, function () {
that.status = ‘rejected’
that.msg = arguments[0]
})
return this
}
promise.prototype.then = function () {
if (this.status === ‘fulfilled’) {
arguments0
} else if (this.status === ‘rejected’ && arguments[1]) {
arguments1
}
}
====================================================================
又称发布-订阅模式, 举例子说明.
发布者负责管理订阅者队列，并具备推送新消息的功能。订阅者只需关注更新即可。
=======================================================================
Function.prototype.bind = function () {
// 保存原函数
var self = this
// 取出第一个参数作为上下文, 相当于[].shift.call(arguments)
var context = Array.prototype.shift.call(arguments)
// 获取剩余的参数并将其赋值给变量arg; 由于arguments是一个伪数组对象, 因此需要将其转换为普通数组以便调用相关的方法。
var arg = Array.prototype.slice.call(arguments)
// 返回一个新函数
return function () {
// 绑定上下文并传参
self.mетод(context, { ...context: arg, ...arguments })
}
}
=======================================================================
function Father () {}
function Child () {}
// 1. 原型继承
Child.prototype = new Father()
// 2. 构造继承
function Child (name) {
Father.call(this, name)
}
// 3. 组合继承
function Child (name) {
Father.call(this, name)
}
Child.prototype = new Father()
// 4. 寄生继承
function cloneObj (o) {
var clone = object.create(o)
clone.sayName = …
return clone
}
// 5. 寄生组合继承
// 6. ES6 class extend继承
=====================================================================
四个小圆点一直旋转
// 父标签
animation: antRotate 1.2s infinite linear;
// 子标签
animation: antSpin 1s infinite linear;
@keyframe antSpin {
to {
opacity: 1
}
}
@keyframe antRotate {
to {
transform: rotate(405)
}
}
// animation-delay: 逐个延迟0.4s
======================================================================
1**: 服务器收到请求, 需请求者进一步操作
2**: 请求成功
3**: 重定向, 资源被转移到其他URL了
4**: 客户端错误, 请求语法错误或没有找到相应资源
5**: 服务端错误, server error
304: Not Modified. 指定日期后未修改, 不返回资源
====================================================================
操作数是调用环境中的一部分，在编译器优化中被抽象为运算符域的处理空间。或者简单地看作一个存储区域，在该区域内会处理所有的变量和函数定义（不包括像...这样的复合表达式）。
活动对象 (AO): 当变量对象所处的上下文为 active EC 时，称为活动对象。
============================================================================
Generator函数的语法糖，将*改成async，将yield换成await。
是对Generator函数的改进, 返回promise。
异步写法同步化，遇到await先返回，执行完异步再执行接下来的.
内置执行器, 无需next()
========================================================================
算法：
为特定问题设计的解决方案。为完成任务而采用的最佳方法（即执行效率最高的算法）。对算法的时间复杂度进行评估与分析的过程即是时间复杂度研究的核心内容之一。（注：此处将"研究"替换为"核心内容之一"使表述更加贴合上下文））。一个系统能够接受的数据类型及其运行后产生的数据类型即为该系统的输入端口和输出端口。（注：此处将"输入输出"调整为"输入端口和输出端口"以更准确描述系统的数据处理能力））。冒泡排序法、二叉树遍历法、最长回文串识别法、二分查找技术、指针操作技术以及链表处理方法等都属于基础数据结构与算法范畴。（注：此处将"冒泡排序等"扩展为"冒泡排序法等"以保持术语一致性））。在编程训练与学习过程中常用到的一些经典题目包括力扣网站上的题目库（即LeetCode）、国内的codewar平台以及国外经典的教材《算法导论》等（注：此处将原文中的品牌名称与教材名称保留原样））。
数据结构：
逻辑结构：集合、线性、树形、图形结构
物理结构：顺序、链式存储结构
=======================================================================
function jsonp ({url, param, callback}) {
return new Promise((resolve, reject) => {
var script = document.createElement(‘script’)
window.callback = function (data) {
resolve(data)
document.body.removeChild(‘script’)
}
var param = {…param, callback}
var arr = []
for (let key in param) {
arr.push(${key}=${param[key]})
}
script.src = ${url}?${arr.join('&')}
document.body.appendChild(script)
})
}
14. 手动实现map(forEach以及filter也类似)
===========================================================================================
// for循环实现
Array.prototype.myMap = function () {
var arr = this
var [fn, thisValue] = Array.prototype.slice.call(arguments)
var result = []
for (var i = 0; i < arr.length; i++) {
result.push(fn.call(thisValue, arr[i], i, arr))
}
return result
}
var arr0 = [1, 2, 3]
console.log(arr0.myMap(v => v + 1))
// forEach实现(reduce类似)
Array.prototype.myMap = function (fn, thisValue) {
var result = []
this.forEach((v, i, arr) => {
result.push(fn.call(thisValue, v, i, arr))
})
return result
}
var arr0 = [1, 2, 3]
console.log(arr0.myMap(v => v + 1))
==================================================================================
反选
全选
1
2
3
========================================================================================
在JavaScript中，默认情况下，默认值基于对象原型进行传递
所有事物都可被视为对象，并且每个具备对象特征的事物都会拥有 prototype 属性；该 prototype 属性则用于存储指向其构造信息的指针。
Object prototype也是对象，其 proto 指向null。
对象分为两类：一类是函数对象（具备『原型』对象），另一类是普通对象。
prototype的本质是普通对象。
Function prototype比较特殊，是没有prototype的函数对象。
new操作得到的对象是普通对象。
在获取一个对象的属性时，在其自身中进行查找；若有未找到的情况，则通过查找其 prototype（构造原型）来解决；如果 still not found, 继续检查其父级 prototypes；最终会抵达最顶层 Object prototype（它没有自己的 prototype），若仍未找到结果，则返回 undefined 并结束操作。
由 proto 串起的路径就是『原型链』。
通过prototype可以给所有子类共享属性
=======================================================================
通常无需在常规项目中采用纯JavaScript构建复杂工具或框架系统。因操作简便而选择传统继承式结构的做法较为常见。若需构建复杂的工具或框架系统，则需借助特定库如webgis等技术辅助实现功能扩展与性能优化。否则一个规模达数千行代码的框架若不采用继承机制，则需编写数万行代码甚至难以实现维护。
==================================================================================
单线程, 先执行同步主线程, 再执行异步任务队列
===================================================================================
先主线程后异步任务队列
先微任务再宏任务
================================================================================
块级作用域, 暂时性死区
=====================================================================
函数节流是指在特定时间段内仅允许JavaScript方法执行一次。例如，在人的一瞬间内眨眼动作仅发生一次。这一现象可视为对函数节流机制的最佳诠释。
// 函数节流 滚动条滚动
var canRun = true;
document.getElementById(“throttle”).onscroll = function(){
if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
return;
}
canRun = false;
setTimeout(function(){
console.log(“函数节流”);
canRun = true;
}, 300);
};
函数防抖是指在高频调用的情况下只有充足的空闲时间才执行相应的代码一次比如在日常生活中当人们陆续刷过公交卡上车司机就不会立即启动车辆而是等待无人刷卡的状态完成整个行驶过程
// 函数防抖
var timer = false;
document.getElementById(“debounce”).onscroll = function(){
clearTimeout(timer); // 清除未执行的代码，重置回初始化状态
timer = setTimeout(function(){
console.log(“函数防抖”);
}, 300);
};
===========================================================================
// 该实现方案通过引入伪死循环来阻塞主线程。
由于JavaScript本身是一个单线程语言。
因此，在JavaScript中能够模拟出真正的 sleep() 功能。
function sleep(delay) {
var start = (new Date()).getTime();
while ((new Date()).getTime() - start < delay) {
continue;
}
}
function test() {
console.log(‘111’);
sleep(2000);
console.log(‘222’);
}
test()
==================================================================
闭包是一种特殊的静态作用域，在其定义上被称为静态作用域。它通过父函数销毁的情况下实现子函数访问父级变量机制，在[[scope]]中保留父级单变量对象及作用域链的能力使得它可以访问到父级变量对象这一性质下所称谓的闭包
闭包会产生一个很经典的问题:
多个子函数各自的[[scope]]都直接连接到父级，并且共享同一段代码。由此可知，在父级变量发生更改时，所有子函数都会受到影响。
解决:
o变量可以通过 函数参数的形式 传入，避免使用默认的[[scope]]向上查找
o使用setTimeout包裹，通过第三个参数传入
o使用 块级作用域，让变量成为自己上下文的属性，避免共享
============================================================================
Facebook出品, 倡导数据的不可变性, 用的最多就是List和Map.
简单介绍一下自己。毕业后于2013年毕业于上海交通大学。曾在小型公司工作过一段时间。也曾在华为、OPPO等知名的大企业工作过一段时期。自2018年起进入阿里巴巴后迄今。
许多前端工程师普遍感到自身难以持续提升技术能力。他们或是选择通过自主学习来积累经验，在实践中不断探索；或是投入时间参加培训课程来系统地学习相关知识。然而高昂的学费（通常在几千元以上）给许多人带来了经济压力。同时缺乏系统性的自学难以取得显著成效，并且耗时漫长；而且极易碰到天花板技术停滞不前！
为了收集整理一套《2024年Web（后跟顿号）前端开发全套学习资料》，其初衷也很简单，就是旨在帮助那些想自学提升但又不知道该如何开始的朋友，并且减轻他们的学习负担。
涵盖从新手到初学者的基础知识与专业级技能培养方案。我们不仅提供给有3年以上开发经验的专业人士深入提升的专业课程，同时也系统性地覆盖了超过95%的核心前端技术点，并构建了一个全面且系统的知识体系。
因为文件较大，在此仅用于展示目录结构。每个节点中包括大厂面经、学习笔记、源代码资料、实际项目经验以及教学视频资源，并会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
系统性地研习前端开发技术已有三年有余，在此期间不时萌生了整理这样一本书单的想法。
以下绝大多数是我收藏的书籍，并非全部都已经读完。或者可以说说身边的朋友们给我推荐的书籍。对于每本书籍我都有自己的读书笔记以及相关摘录记录。如果你也发现有更好的书籍值得分享的话，请随时告诉我！
习对于培训机构动辄数千元的学费确实是一个负担。虽然自主学习缺乏体系可能导致效率低下且时间漫长，并容易因技术瓶颈而停滞不前。
经过精心整理后, 我们成功汇总并发布了《2024年Web前端开发全套学习资料》这份珍贵的学习资源包, 其初衷也非常单纯, 即旨在帮助那些希望自主提升但却感到迷茫无助的人们, 同时也希望能为大家减轻学习负担
[外链图片转存中…(img-XhyjF44T-1712316170627)]
[外链图片转存中…(img-kmnZJbBG-1712316170627)]
包含针对初学者提供的基础学习资源以及针对有3年以上工作经验的进阶者设计的高级课程内容，并且大致涵盖了95%以上的前端开发知识点，并且系统性地构建起来
[外链图片转存中…(img-vp5VBJjr-1712316170628)]
因为文件较大，在此仅作为参考提供部分目录截图，并列出了具体包含的内容：大厂面经、学习笔记等资源以及实战项目讲解视频等信息，并将陆续进行补充和完善！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
结尾
经过系统性的前端学习后，已经积累了不少知识经验。由于经常有读者会询问前端开发的学习方法及推荐书籍的问题，在自己的学习过程中也遇到了很多困惑与挑战，在此分享一些心得体会。虽然目前整理出的书籍数量有限，但对于每一本书而言，在阅读过程中都充满了深入思考与收获的乐趣
这些书大部分是我读过的，并且身边的读者也常常推崇的书籍。每本书我都有所涉猎的相关评论。如果你也发现有更好的书籍值得分享，请随时推荐。
