学习笔记
主要内容包括html,css,html5,css3,JavaScript,正则表达式,函数,BOM,DOM,jQuery,AJAX,vue等等
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML/CSS
**HTML:**HTML基本结构,标签属性,事件属性,文本标签,多媒体标签,列表 / 表格 / 表单标签,其他语义化标签,网页结构,模块划分
**CSS:**CSS代码语法,CSS 放置位置,CSS的继承,选择器的种类/优先级,背景样式,字体样式,文本属性,基本样式,样式重置,盒模型样式,浮动float,定位position,浏览器默认样式
HTML5 /CSS3
**HTML5:**HTML5 的优势,HTML5 废弃元素,HTML5 新增元素,HTML5 表单相关元素和属性
**CSS3:**CSS3 新增选择器,CSS3 新增属性,新增变形动画属性,3D变形属性,CSS3 的过渡属性,CSS3 的动画属性,CSS3 新增多列属性,CSS3新增单位,弹性盒模型
JavaScript
**JavaScript:**JavaScript基础,JavaScript数据类型,算术运算,强制转换,赋值运算,关系运算,逻辑运算,三元运算,分支循环,switch,while,do-while,for,break,continue,数组,数组方法,二维数组,字符串
10、改变promise状态和执行回调谁先谁后的问题?下面代码。
11、promise.then()返回的新promise的结果状态由什么决定?
12、promise 如何串联多个异步操作任务 promise的then返回新promise,可以开启链式调用
Promise全家桶自己总结的
1、 错误类型
Error : 所有的错误的父类型
ReferenceError:引用类型不正确的错误
TypeError:数据类型不正确的错误
RangeError:数据值不在其所允许的范围内
SyntaxError:语法错误
2、 错误处理
捕获错误:try … catch
抛出错误 throw error
捕获异常 错误处理
var num = 5
function fn() {
if (2 > num) {
console.log(‘可以执行任务’);
} else {
throw new Error(‘报错了信息’)
}
}
try { // 抛出报错信息
fn()
} catch (error) {
console.log(error);
}
3、 错误对象
message属性:错误信息相关 // stack 报错有信息和类型组合
stack属性:函数调用栈记录信息 就是栈内存溢出报错,自己调用自己
SyntaxError 捕获 语法错误了 var a = “”" Uncaught SyntaxError: Invalid or unexpected token
4、promise 的状态改变 了解Promise
promise 是es6提出的一种异步编程的解决方案
pending变成 resolved
pending 变成 rejected
resolve的作用是将promise从进行中的状态转化为已成功的状态
reject 的作用是将promise从进行中的状态转化为以失败的状态
promise 本质上是一个构造函数 它有三个状态 分别是 进行中(pending) 已成功 (fullfilled) 已失败(rejected)
说明:只有两种,且一个promise 对象只能改变一次
无论变成功还是失败,都只有一个结果 成功的结果一般称为 value 失败的结果成为 reason
promise可以从进行中的状态转化为已成功的状态 也可以从进行中的状态 转化为以失败的状态
promise 不管是成功还是失败 都已经运行结束了 所以 promise不能从已成功的状态转为以失败的状态
也不能从已失败的状态转化为已成功的状态
promise构造函数接受一个函数作为参数 该函数内部接受两个参数 分别是resolve reject
5、promise 的使用
const p = new Promise((resolve, reject) => {
// new Promise 传入一个回调函数 固定的参数名字 有 resolve reject
console.log(1); // 同步的代码先执行
setTimeout(() => {
console.log(3); // 异步的后执行
if (5 > 2) {
resolve(‘成功的回调’)
} else {
reject(‘失败的回调’)
}
}, 1000);
})
console.log(2);// 同步的代码先执行
p.then(
value => {
console.log(value);// 这里的value上面成功的数据 是 resolve
},
reason => {
console.log(reason);// 这里的reason上面成功的数据 是 reject
}
)
7、为什么要Promise
1、指定回调函数的方式更加灵活
旧的:必须在启动异步任务之前指令
Promise : 启动异步任务 => 返回promise对象 => 给promise 对象绑定回调函数(甚至可以在异步任务结束后指定)
2、支持链式调用,可以解决回调地狱 的问题
什么是回调地狱 ? 回调函数层层嵌套调用,外部回调函数异步执行的结果,是嵌套的回调函数执行的条件
回调地狱的缺点?不便于阅读 / 不便于异常处理
解决方案?promise 链式调用 最好的 async / await
8、Promise 语法api
const p = new Promise((resolve, reject) => {
setTimeout(() => {
// 这里只能有一个状态哦
resolve(‘成功’)
reject(‘失败’)
}, 0);
})
p.then(
value => {
console.log(value);// 这里的value上面成功的数据 是 resolve
},
reason => {
console.log(reason);// 这里的reason上面成功的数据 是 reject
}
)
// 简写
const p = new Promise((resolve, reject) => {
resolve(‘成功’)
}) //这种可以简写为下面那种
p.then(
value => {
console.log(value);// 这里的value上面成功的数据 是 resolve
},
reason => {
console.log(reason);// 这里的reason上面成功的数据 是 reject
}
) //这种可以简写为下面那种
const p = Promise.resolve(‘成功11’) //简写的形式 语法糖
const p1 = Promise.resolve(‘成功了22’)
const p2 = Promise.reject(‘失败了333’)
p.then((resolve) => { console.log(resolve) })
p1.then((resolve) => { console.log(resolve) })
p2.catch((reject) => { console.log(reject) })
// Promise.all
Promise.all 可以把多个回调的结果给组合在一起
const pAll = Promise.all([p, p1, p2])
pAll.then(
value => {
console.log(‘on Resolve’, value);
},
reason => {
console.log(‘on Reject’, reason);
}
)
// Promise.race
Promise.race 谁先反回就是谁 第一个结果就是最终的的结果
const pAll = Promise.race([p2, p, p1,])
// 这里如果吧p2放到第一个执行就是失败放最后一个就是成功
pAll.then(
value => {
console.log(‘on Resolve’, value);
},
reason => {
console.log(‘on Reject’ + reason);
}
)
9、promise关键点 抛出错误信息
const p = new Promise((resolve, reject) => {
throw new Error(‘有错误信息,请处理’)
//1、如何改变promise状态? resolve、 reject 、或者 抛出错误信息或异常 Promise 变成reject状态
})
p.then(
value => {
},
reason => {
console.log(‘1—’ + reason);// 是 错误信息
}
)
p.then(
value => {
},
reason => {
console.log(‘2—’ + reason);// 是 错误信息
}
) //2、 一个promise 指定多个回调函数回调用吗? 当promise 当promise 发生改变时对应的状态都会改变 全部打印
10、改变promise状态和执行回调谁先谁后的问题?下面代码。
1、什么时候得到数据
2、如果先指定的回调,那当状态放生改变,回调函数就会调用,得到数据
3、如果先改变的状态,那当指定回调函数就会调用
new Promise((resolve, reject) => {
setTimeout(() => {
reject(1)//2、后改变状态(同时指定数据),异步执行回调函数
}, 1000);
}).then(//1、先指定回调函数 保存当前指定的回掉函数
value => {
},
reason => {
console.log(‘失败’ + reason);// 是 错误信息
}
)
new Promise((resolve, reject) => {
reject(1)//1、先改变状态(同时指定数据),异步执行回调函数
}).then(//2、后指定回调函数 异步执行回调函数
value => {
},
reason => {
console.log(‘失败’ + reason);// 是 错误信息
}
)
2、同步和异步代码
new Promise((resolve, reject) => {
reject(1)
}).then( // .then 无论成功或失败都是异步的 // 同步的先执行,异步的后执行
value => {
},
reason => {
console.log(‘失败’ + reason);
}
)
console.log(2); // console.log(2)先执行。 console.log(‘失败’ + reason)在输出就是异步的。
11、promise.then()返回的新promise的结果状态由什么决定?
1、简单表达:由then()指定的回调函数执行的结果决定
2、详细表达:
如果抛出异常,新的promise 变成rejected reason为抛出的异常
如果返回的是非promise的任意值,新promise变成resolved ,value 为返回的值
如果返回的是另一个新promise,此promise的结果就会成为新的promise的结果
new Promise((resolve, reject) => {
resolve(1)
// reject(1)
}).then( // then 是由promise 的结果来决定
value => {
console.log(value); //如果这里如果没有抛出异常那么就是相当于return 的一个undefined
// return 2 若果这里return了一个2 那么下面.then里的 value的就是2 不是undefined
// return Promise.resolve(2) // 下面.then里的 value就是2
// return Promise.reject(2) // 下面就执行失败的的回调 .then里的 reason // 2
// throw ‘抛出异常’ //这里抛出异常
},
reason => {
console.log(‘失败’ + reason);
}
).then(// 由上面执行的函数来决定
value => {
console.log(value); // undefined
},
reason => {
console.log(‘失败—’ + reason);
}
)
12、promise 如何串联多个异步操作任务 promise的then返回新promise,可以开启链式调用
1、可以通过then链式调用串联多个同步任务和异步任务
new Promise(resolve => {
setTimeout(() => {
resolve(1)
}, 1000);
}).then(value => {
console.log(value);
return 2
基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
ason => {
console.log(‘失败’ + reason);
}
).then(// 由上面执行的函数来决定
value => {
console.log(value); // undefined
},
reason => {
console.log(‘失败—’ + reason);
}
)
12、promise 如何串联多个异步操作任务 promise的then返回新promise,可以开启链式调用
1、可以通过then链式调用串联多个同步任务和异步任务
new Promise(resolve => {
setTimeout(() => {
resolve(1)
}, 1000);
}).then(value => {
console.log(value);
return 2
基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
[外链图片转存中…(img-uXHQ4O1H-1715791411708)]