layout: post title: 每日一题答案 subtitle: 如题 date: 2022-08-02 author: hdj header-img: img/bgs/girl-3.jpg catalog: true categories : [手写]
tags: - 手写 —
Day1:请写出下面代码执行的的结果
console.log(1);
setTimeout(() => {
console.log(2);
process.nextTick(() => {
console.log(3);
});
new Promise((resolve) => {
console.log(4);
resolve();
}).then(() => {
console.log(5);
});
});
new Promise((resolve) => {
console.log(7);
resolve();
}).then(() => {
console.log(8);
});
process.nextTick(() => {
console.log(6);
});
setTimeout(() => {
console.log(9);
process.nextTick(() => {
console.log(10);
});
new Promise((resolve) => {
console.log(11);
resolve();
}).then(() => {
console.log(12);
});
});
结果
1
7
6
8
2
4
3
5
9
11
10
12
Day2:写出执行结果
function side(arr) {
arr[0] = arr[2];
}
function a(a, b, c = 3) {
c = 10;
side(arguments);
console.log(arguments,a,b,c)
return a + b + c;
}
a(1, 1, 1);
结果
12 //
Day78:Script 放在底部还会影响 dom 的解析和渲染吗(会)？Script 内部的代码执行会等待 css 加载完吗（不会）？css 加载会影响 DOMContentLoaded（不会） 么？
CSS 不会阻塞 DOM 的解析，但会阻塞 DOM 渲染。
JS 阻塞 DOM 解析，但浏览器会”偷看”DOM，预先下载相关资源。
浏览器遇到 script且没有defer或async属性的 标签时，会触发页面渲染，因而如果前面CSS资源尚未加载完毕时，浏览器会等待它加载完毕在执行脚本。
Day79:写出下面代码 null 和 0 进行比较的代码执行结果，并解释原因
console.log(null == 0); // false null 与undefined隐士类型转换时不变，直接比较
console.log(null <= 0); // true 转为number比较
console.log(null < 0); // false 转为number比较
// null>0 //null转化为number，为0，所以0>0结果为false。
// null>=0 //null转化为number，为0>=0，所以结果为true。
// null==0// null在做相等判断时，不进行转型，所以null和0为不同类型数据，结果为false。
- 如果x不是正常值（比如抛出一个错误），中断执行。
- 如果y不是正常值，中断执行。
- 如果Type(x)与Type(y)相同，执行严格相等运算x === y。
- 如果x是null，y是undefined，返回true。
- 如果x是undefined，y是null，返回true。
- 如果Type(x)是数值，Type(y)是字符串，返回x == ToNumber(y)的结果。
- 如果Type(x)是字符串，Type(y)是数值，返回ToNumber(x) == y的结果。
- 如果Type(x)是布尔值，返回ToNumber(x) == y的结果。
- 如果Type(y)是布尔值，返回x == ToNumber(y)的结果。
- 如果Type(x)是字符串或数值或Symbol值，Type(y)是对象，返回x == ToPrimitive(y)的结果。
- 如果Type(x)是对象，Type(y)是字符串或数值或Symbol值，返回ToPrimitive(x) == y的结果。
- 返回false。
Day85:对于扩展运算符，下面代码的执行结果是什么？并解释原因
let ydObject = { ...null, ...undefined };
console.log(ydObject);
let ydArray = [...null, ...undefined];
console.log(ydArray);
结果
第一个打印一个空对象
第二个打印报错，是因为在数组和函数中使用展开语法时，只能用于可迭代对象
Day84:对于 length 下面代码的输出结果是什么？并解释原因
function foo() {
console.log(length);
}
function bar() {
var length = "京程一灯";
foo();
}
bar();
答案：0
foo 由window对象调用，length无法访问到bar函数的变量，window.length为0
Day104:项目中如何进行异常捕获 #917
一、代码执行的错误捕获
1.try……catch
能捕获到代码执行的错误 捕获不到语法的错误 无法处理异步中的错误 使用try… catch 包裹，影响代码可读性
2.window.onerror
无论是异步还是非异步错误，onerror 都能捕获到运行时错误
onerror 主要是来捕获预料之外的错误，而 try-catch 则是用来在可预见情况下监控特定的错误，两者结合使用更加高效。
window.onerror 函数只有在返回 true 的时候，异常才不会向上抛出，否则即使是知道异常的发生控制台还是会显示 Uncaught Error: xxxxx。
当我们遇到 
报 404 网络请求异常的时候，onerror 是无法帮助我们捕获到异常的。
缺点: 监听不到资源加载的报错onerror,事件处理函数只能声明一次，不会重复执行多个回调：
3.window.addEventListener(‘error’)
可以监听到资源加载报错，也可以注册多个事件处理函数。
window.addEventListener(‘error’,(msg, url, row, col, error) => {}, true)
但是这种方式虽然可以捕捉到网络请求的异常,却无法判断 HTTP 的状态是 404 还是其他比如 500 等等，所以还需要配合服务端日志才进行排查分析才可以。
4.window.addEventListener(‘unhandledrejection’)
捕获Promise错误，当Promise 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 window 下，但也可能发生在 Worker 中。 这对于调试回退错误处理非常有用。
二、资源加载的错误捕获
imgObj.onerror()
performance.getEntries()，获取到成功加载的资源，对比可以间接的捕获错误
window.addEventListener(‘error’, fn, true), 会捕获但是不冒泡，所以window.onerror 不会触发，捕获阶段可以触发
三、Vue、React中
Vue有 errorHandler，
React有 componentDidCatch 进行错误捕获
escape, encodeURI, encodeURIComponent使用场景
escape escape是对字符串(string)进行编码(而另外两种是对URL)，作用是让它们在所有电脑上可读。编码之后的效果是%XX或者%uXXXX这种形式。其中 ASCII字母 数字 @*/+ 这几个字符不会被编码，其余的都会。最关键的是，当你需要对URL编码时，
encodeURI方法不会对下列字符编码： ASCII字母，数字，~!@#$&()=:/,;?+’ ，（常用来编码整个uri）
encodeURIComponent方法不会对下列字符编码 ASCII字母，数字， ~!()’，（常用来编码参数）
总结 escape用来对字符传编码， encodeURI可以用来编码整个uri，（因为不回把http:// 中的斜杠转码) ,encodeURIComponent 可以用来编码params和参数
escape, encodeURI, encodeURIComponent使用场景
Day232:详细说一下 JSON.stringify 的一些特性？和遍历相比，哪个性能高? #1051
map 高
其实说到底，用json的api底层也是遍历过了，并且转成字符串，所以性能会比较差
大家还是自己手写的遍历还是手写，或者用第三方插件如lodash。不要一味用json api
