最后
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面,包括但不限于前端基础,HTML,CSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等
前端视频资料:
constructor (executor) {
executor(this.resolve, this.reject)
}
status = PENDING;
value = undefined;
reason = undefined;
// 成功回调 — 只有是数组才可以多次存储多个回调函数
successCallback = [];
// 失败回调 — 只有是数组才可以多次存储多个回调函数
failCallback = [];
resolve = value => {
if(this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
// 通过成功回调这个数组去循环调用,每次调用结束就将其删除
while (this.successCallback.length) this.successCallback.shift()(this.value)
}
reject = reason => {
if(this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
// 通过失败回调这个数组去循环调用,每次调用结束就将其删除
while (this.failCallback.length) this.failCallback.shift()(this.reason)
}
then (successCallback, failCallback) {
if(this.status === FULFILLED){
successCallback(this.value)
} else if(this.status === REJECTED) {
failCallback(this.reason)
} else {
// 将成功回调和失败回调存储起来
this.successCallback.push(successCallback);
this.failCallback.push(failCallback);
}
}
}
// 导出
module.exports = MyPromise;
const MyPromise = require(‘./03.1-Promise-then方法多次调用’);
let promise = new MyPromise((resolve, reject) => {
// resolve(‘成功’)
// reject(‘失败’)
setTimeout(() => {
resolve(‘成功了233333’)
}, 2000)
})
promise.then(value => {
console.log(1)
console.log(value)
}, (reason) => {
console.log(reason)
})
promise.then(value => {
console.log(2)
console.log(value)
}, (reason) => {
console.log(reason)
})
promise.then(value => {
console.log(3)
console.log(value)
}, (reason) => {
console.log(reason)
})
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
constructor (executor) {
executor(this.resolve, this.reject)
}
status = PENDING;
value = undefined;
reason = undefined;
// 成功回调 — 只有是数组才可以多次存储多个回调函数
successCallback = [];
// 失败回调 — 只有是数组才可以多次存储多个回调函数
failCallback = [];
resolve = value => {
if(this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
// 通过成功回调这个数组去循环调用,每次调用结束就将其删除
while (this.successCallback.length) this.successCallback.shift()(this.value)
}
reject = reason => {
if(this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
// 通过失败回调这个数组去循环调用,每次调用结束就将其删除
while (this.failCallback.length) this.failCallback.shift()(this.reason)
}
then (successCallback, failCallback) {
if(this.status === FULFILLED){
successCallback(this.value)
} else if(this.status === REJECTED) {
failCallback(this.reason)
} else {
// 将成功回调和失败回调存储起来
this.successCallback.push(successCallback);
this.failCallback.push(failCallback);
}
}
}
// 导出
module.exports = MyPromise;
// 导入
const MyPromise = require(‘./04.1-Promise-then方法链式调用’);
let promise = new MyPromise((resolve, reject) => {
resolve(‘成功’)
// reject(‘失败’)
// setTimeout(() => {
// resolve(‘成功了233333’)
// }, 2000)
})
/**
-
Promise 对象当中的方法是可以链式调用的
-
后一个then方法拿到的值,其实是上一个then方法的回调函数的返回值
-
比如说这里后一个then的value值其实就是上一个then回调函数的返回值100
-
*/
promise.then(value => {
console.log(value)
return 100
}).then(value => {
console.log(value)
})
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING;
value = undefined;
reason = undefined;
successCallback = [];
failCallback = [];
resolve = value => {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
while (this.successCallback.length) this.successCallback.shift()(this.value)
}
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.failCallback.length) this.failCallback.shift()(this.reason)
}
then(successCallback, failCallback) {
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
let x = successCallback(this.value)
/**
-
判断 X 的值是普通值还是Promise对象
-
如果是普通值 直接调用resolve
-
如果是promise对象 查看promise对象返回的结果
-
再根据promise对象返回的结果 决定调用resolve 还是调用reject
*/
resolvePromise(x, resolve, reject)
} else if (this.status === REJECTED) {
failCallback(this.reason)
} else {
this.successCallback.push(successCallback);
this.failCallback.push(failCallback);
}
});
return promise2;
}
}
function resolvePromise (x, resolve, reject) {
if(x instanceof MyPromise){
// Promise 对象
// x.then(value => resolve(value), reason => reject(reason))
x.then(resolve, reject)
} else {
// 普通值
resolve(x)
}
}
// 导出
module.exports = MyPromise;
// 导入
const MyPromise = require(‘./04.3-Promise-then方法链式调用’);
let promise = new MyPromise((resolve, reject) => {
resolve(‘成功’)
// reject(‘失败’)
// setTimeout(() => {
// resolve(‘成功了233333’)
// }, 2000)
})
function other () {
return new MyPromise((resolve, reject) => {
resolve(‘othen’);
})
}
promise.then(value => {
console.log(value)
return other()
}).then(value => {
console.log(value)
})
const MyPromise = require(‘./05.1-识别Promise对象自动返回’);
let promise = new MyPromise((resolve, reject) => {
resolve(‘成功’)
})
/**
-
当链式调用promise对象下的then方法的时候我们说过
-
在then这个回调函数当中,是可以返回promise对象的
-
但是有一种情况是例外
-
在then方法的回调函数当中,是不能返回当前这个then方法他所返回的promise对象的
-
如果返回了then方法返回的那个promise对象,这个时候就发生发promise对象的循环调用
-
这时程序是不被允许的,会报错
-
我们先演示一下这种报错情况,以及如何才能够把这种情况识别出来,给调用者报一个错误
-
请移步06-识别Promise对象自动返回.html — 因为我们要使用系统给我们提供的promise来演示错误
-
*/
let p1 = promise.then(value => {
console.log(value)
return p1;
})
p1.then(value => {
console.log(value)
}, reason => {
console.log(reason.message)
})
// =======================================================
// 06-识别Promise对象自动返回.html
// 通过new创建一个promise对象,并传递一个执行器进去,执行器有resolve和reject两个参数
var promise = new Promise(function (resolve, reject) {
// 直接调用resolve返回100
resolve(100)
})
// promise的循环调用
var p1 = promise.then(function (value) {
console.log(value)
return p1
})
p1.then(function () {}, function (reason) {
console.log(reason.message)
})
// ==============================================================
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
constructor(executor) {
executor(this.resolve, this.reject)
}
status = PENDING;
value = undefined;
reason = undefined;
successCallback = [];
failCallback = [];
resolve = value => {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
while (this.successCallback.length) this.successCallback.shift()(this.value)
}
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.failCallback.length) this.failCallback.shift()(this.reason)
}
then(successCallback, failCallback) {
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
/**
-
resolvePromise() 这个函数的第一个参数是 promise2
-
但是这个时候我们还在 new MyPromise的过程中,还没有promise2
-
所以我们这里使用一个定时器,让其上下文的同步代码全部执行完毕再来执行改代码
-
这时我们就拥有了promise2
-
*/
setTimeout(() => {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
}, 0)
} else if (this.status === REJECTED) {
failCallback(this.reason)
} else {
this.successCallback.push(successCallback);
this.failCallback.push(failCallback);
}
});
return promise2;
}
}
function resolvePromise(promise2, x, resolve, reject) {
// 判断我们返回的对象(Promise2)和我们成功的回调所返回的对象(x)是不是同一个
if(promise2 === x){
// 是 — 发生循环调用,自己返回了自己,调用reject传递一个错误信息,并且中断程序运行
return reject(new TypeError(‘Chaining cycle detected for promise #’))
}
if (x instanceof MyPromise) {
x.then(resolve, reject)
} else {
resolve(x)
}
}
// 导出
module.exports = MyPromise;
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
// 捕获执行的错误
constructor(executor) {
try {
executor(this.resolve, this.reject)
} catch (e) {
this.reject(e);
}
}
status = PENDING;
value = undefined;
reason = undefined;
successCallback = [];
failCallback = [];
resolve = value => {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
while (this.successCallback.length) this.successCallback.shift()()
}
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.failCallback.length) this.failCallback.shift()()
}
then(successCallback, failCallback) {
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
}
});
return promise2;
}
}
function resolvePromise(promise2, x, resolve, reject) {
if(promise2 === x){
return reject(new TypeError(‘Chaining cycle detected for promise #’))
}
if (x instanceof MyPromise) {
x.then(resolve, reject)
} else {
resolve(x)
}
}
// 导出
module.exports = MyPromise;
// 导入
const MyPromise = require(‘./07.1-捕获错误与then链式调用其他状态’);
let promise = new MyPromise((resolve, reject) => {
// throw new Error(‘executor error’)
// resolve(‘成功’)
// reject(‘失败’)
setTimeout(() => {
resolve(‘2000’)
}, 2000)
})
promise.then(value => {
console.log(value)
// throw new Error(‘then error’)
return 123
}, reason => {
// console.log(reason.message)
return 10000
}).then(value => {
console.log(value)
})
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
constructor(executor) {
try {
executor(this.resolve, this.reject)
} catch (e) {
this.reject(e);
}
}
status = PENDING;
value = undefined;
reason = undefined;
successCallback = [];
failCallback = [];
resolve = value => {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
while (this.successCallback.length) this.successCallback.shift()()
}
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.failCallback.length) this.failCallback.shift()()
}
then(successCallback, failCallback) {
successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => { throw reason }
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
}
});
return promise2;
}
}
function resolvePromise(promise2, x, resolve, reject) {
if(promise2 === x){
return reject(new TypeError(‘Chaining cycle detected for promise #’))
}
if (x instanceof MyPromise) {
x.then(resolve, reject)
} else {
resolve(x)
}
}
// 导出
module.exports = MyPromise;
// 导入
const MyPromise = require(‘./08.1-then方法参数变为可选’);
let promise = new MyPromise((resolve, reject) => {
// resolve(‘成功’)
reject(‘失败’)
})
promise
.then()
.then()
.then(value => console.log(value), reason => { console.log(reason) })
-
用来解决异步并发问题,他允许我们按照异步代码调用的顺序,得到异步代码执行的结果
-
all方法是一个静态方法,所以需要再类当中定义一个all方法,all方法前需要加上static关键字
-
接受一个数组作为参数,数组可以填入任何值,包括普通值和promise对象
-
数组当中值得顺序,一定是我们得到结果的顺序
-
返回值也是一个promise对象,所以我们可以在后边链式调用then方法
-
所有的promise状态都是成功才是成功,有一个失败就为失败
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
constructor(executor) {
try {
executor(this.resolve, this.reject)
} catch (e) {
this.reject(e);
}
}
status = PENDING;
value = undefined;
reason = undefined;
successCallback = [];
failCallback = [];
resolve = value => {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
while (this.successCallback.length) this.successCallback.shift()()
}
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.failCallback.length) this.failCallback.shift()()
}
then(successCallback, failCallback) {
successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => { throw reason }
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
}
});
return promise2;
}
// 静态方法 — 接受一个数组
static all(array) {
let result = [] // 存储Promise对象的结果
let index = 0 // 存储addData()执行次数
// 返回一个Promise对象,传递一个执行器并接受两个参数
return new MyPromise((resolve, reject) => {
/**
-
将promise的值,放入到数组中
-
因为内部需要使用resolve()方法,所以将该函数放入到执行器中
-
*/
function addData(key, value) {
result[key] = value;
index++;
// 判断数组当中所有内容是否执行完毕
if (index === array.length) {
// 防止for循环结束直接调用resolve()时,有异步操作没执行结束!
resolve(result)
}
}
/**
-
循环该数组内所有元素并对其进行一个判断,判断该元素是否为Promise对象
-
*/
for (let i = 0; i < array.length; i++) {
// 拿到当前值
let current = array[i]
// 判断当前是是否是 MyPromise 下的一个实例
if (current instanceof MyPromise) {
// promise对象
current.then(value => addData(i, value), reason => reject(reason))
} else {
// 普通值
addData(i, array[i])
}
}
})
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError(‘Chaining cycle detected for promise #’))
}
if (x instanceof MyPromise) {
x.then(resolve, reject)
} else {
resolve(x)
}
}
// 导出
module.exports = MyPromise;
// 导入
const MyPromise = require(‘./10.1-Promise.All方法的实现’);
function p1() {
return new MyPromise(function (resolve, reject) {
setTimeout(function () {
resolve(‘p1’)
}, 2000)
})
}
function p2() {
return new MyPromise(function (resolve, reject) {
resolve(‘p2’)
})
}
MyPromise.all([‘a’, ‘b’, p1(), p2(), ‘c’]).then(result => console.log(result))
// 11-Promise.All方法的实现.html
function p1() {
return new Promise(function (resolve, reject) {
setTimeout(function () {
resolve(‘p1’)
}, 2000)
})
}
function p2() {
return new Promise(function (resolve, reject) {
resolve(‘p2’)
})
}
promise.all([‘a’, ‘b’, p1(), p2(), ‘c’]).then(function (result) {
// result -> [‘a’, ‘b’, p1(), p2(), ‘c’]
console.log(result)
});
-
将给定的值转换为Promise对象
-
返回值是一个Promise对象
-
返回的Promise对象当中会包裹给定的值
-
resolve内部会判断传入的值是普通值还是promise对象
-
普通值 — 处理成promise对象
-
promise对象 — 原封不动的将promise对象作为resolve的返回值
const PENDING = ‘pending’;
const FULFILLED = ‘fulfilled’;
const REJECTED = ‘rejected’;
class MyPromise {
constructor(executor) {
try {
executor(this.resolve, this.reject)
} catch (e) {
this.reject(e);
}
}
status = PENDING;
value = undefined;
reason = undefined;
successCallback = [];
failCallback = [];
resolve = value => {
if (this.status !== PENDING) return;
this.status = FULFILLED;
this.value = value;
while (this.successCallback.length) this.successCallback.shift()()
}
reject = reason => {
if (this.status !== PENDING) return;
this.status = REJECTED;
this.reason = reason;
while (this.failCallback.length) this.failCallback.shift()()
}
then(successCallback, failCallback) {
successCallback = successCallback ? successCallback : value => value;
failCallback = failCallback ? failCallback : reason => { throw reason }
let promise2 = new MyPromise((resolve, reject) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
}
});
return promise2;
}
static all (array) {
let result = [];
let index = 0;
return new MyPromise((resolve, reject) => {
function addData(key, value) {
result[key] = value;
index++;
if (index === array.length) {
resolve(result)
}
}
for (let i = 0; i < array.length; i++) {
let current = array[i]
if (current instanceof MyPromise) {
current.then(value => addData(i, value), reason => reject(reason))
} else {
addData(i, array[i])
}
}
})
}
static resolve (value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value))
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError(‘Chaining cycle detected for promise #’))
}
if (x instanceof MyPromise) {
x.then(resolve, reject)
} else {
resolve(x)
}
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
ct) => {
if (this.status === FULFILLED) {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else if (this.status === REJECTED) {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
} else {
this.successCallback.push(() => {
setTimeout(() => {
try {
let x = successCallback(this.value)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
this.failCallback.push(() => {
setTimeout(() => {
try {
let x = failCallback(this.reason)
resolvePromise(promise2, x, resolve, reject)
} catch (e) {
reject(e)
}
}, 0)
});
}
});
return promise2;
}
static all (array) {
let result = [];
let index = 0;
return new MyPromise((resolve, reject) => {
function addData(key, value) {
result[key] = value;
index++;
if (index === array.length) {
resolve(result)
}
}
for (let i = 0; i < array.length; i++) {
let current = array[i]
if (current instanceof MyPromise) {
current.then(value => addData(i, value), reason => reject(reason))
} else {
addData(i, array[i])
}
}
})
}
static resolve (value) {
if (value instanceof MyPromise) return value;
return new MyPromise(resolve => resolve(value))
}
}
function resolvePromise(promise2, x, resolve, reject) {
if (promise2 === x) {
return reject(new TypeError(‘Chaining cycle detected for promise #’))
}
if (x instanceof MyPromise) {
x.then(resolve, reject)
} else {
resolve(x)
}
最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
[外链图片转存中…(img-F4r5U5if-1715027588550)]