好久好久没有写博客了，发完这篇也会去改之前的文章，更完善一下～
我的笔记放在了gitee上，之后会搬家到github （ps:超级详细，不断扩大）
github https://github.com/thesecondlight
https://github.com/thesecondlight/learnHouse
- new关键字做了什么
1.创建一个新对象
2.新对象的proto 指向构造函数的prototype
3.newObj.call(obj)改变this指向构造函数的实例
4.没有人为指定类型就返回对象，否则直接返回那个对象类型
- 根据时间和type（时间相同，type为A在前）排序 localeCompare
const arr = [
{id: 1, value : "value1", date: "2022-08-08", type: "B"},
{id: 2, value : "value2", date: "2022-08-08", type: "A"},
{id: 3, value : "value3", date: "2018-08-10", type: "A"},
{id: 4, value : "value4", date: "2018-08-10", type: "B"},
{id: 5, value : "value5", date: "2018-08-10", type: "B"},
{id: 6, value : "value6", date: "2018-08-10", type: "B"},
{id: 7, value : "value7", date: "2018-08-10", type: "B"},
{id: 8, value : "value8", date: "2018-08-11", type: "B"}
];
arr.sort((a, b) => a.date.localeCompare(b.date) || a.type.localeCompare(b.type));
- js循环怎么中断
break continute
return
forEach的return只能停止本次执行， 不影响整个循环
map没有跳出概念， 只是停了本次执行， 返回一个新数组
for循环 用break跳出整个循环， continue跳出本次
- 线程进程
线程
js线程，浏览器线程
js单线程 为什么是单线程，
js作为浏览器的脚本语言，主要是实现用户和浏览器的交互，操作dom，决定了他只能是单线程，避免带来复杂的同步问题
---既然js是单线程，那setTimeout，回调，onClick是怎么实现的，是由浏览器多线程辅助实现
-->
浏览器多线程
（
GUI渲染线程 定时器触发线程（setTimeout） eventLoop轮询处理线程 浏览器事件线程（onClick） JS引擎线程
异步http请求线程
）
GUI渲染线程 渲染界面，布局绘制 重绘回流时该线程会执行
js引擎 处理解析js脚本
GUI和js引擎互斥 js引擎执行时，GUI被挂起
GUI图形用户界面
--进程和线程
进程是指系统分配的内存（进程是cpu资源分配的最小单位），
进程之间相互独立（可以通信，代价大），
多个线程在其中协作工作，一个进程由1-n个线程组成，同意进程下的线程共享程序的内存空间
--浏览器多进程
brower进程 主进程（管理，调控） only one
界面显示，用户交互【前进，后退】
各个页面的管理
网络资源的管理下载
第三方插件进程
GPU进程 only one 3d绘制
浏览器渲染进程
- BigInt
BigInt https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/BigInt
为了防止损失精度 当值大于2的53次方时，使用BigInt,并且不在Number和BigInt之间相互转化
由于对 BigInt 的操作不是常数时间的，因而 BigInt 不适合用于密码学。【密码学 比较时间，攻击？】
对任何 BigInt 值使用 JSON.stringify() 都会引发 TypeError，因为默认情况下 BigInt 值不会在 JSON 中序列化。但是，如果需要，可以实现 toJSON 方法：
BigInt.prototype.toJSON = function() { return this.toString(); }
JSON.Stringify(BigInt(1))
const bigNumber=BigInt(9007199254740992); //2**53-1=9007199254740992
const bigNumber=9007199254740992n;
使用typeof检测时
typeof 1n === 'bigint' //true
typeof BigInt("1") === 'bigint' //true
使用object包装后，会认为是一个Object
typeof Object('1n') === 'object' //true
typeof Object('1n') === 'bigint' //false
用Object.prototype.toString.call(Object(1n)) =>'[Object BigInt]'
- setTimeout 默认几秒
1.HTML5 标准规定了setTimeout()的第二个参数的最小值，即最短间隔，不得低于4毫秒。如果低于这个值，就会自动增加。在此之前，老版本的浏览器都将最短间隔设为10毫秒。
2.队列中没有其他消息等待执行，才执行setTimeout
3.time仅代表最小延迟时间，不是确切的等待时间 setTimeout并不能保证执行时间，是否及时取决于js线程是否拥挤
- 事件循环
我的脑子就是，先同步，后异步，异步里有宏任务微任务
同步执行完了，执行微任务，最后宏任务，记一下微任务宏任务分别有什么
定义：事件循环是node.js处理非阻塞i/o操作的机制，当其中一个操作完成后，内核通知node.js把适合的回调函数添加到轮询执行队列中，等待时机执行
执行顺序：
同步
process.nextTick（属于微任务）
微任务 .then
宏任务 script 定时器 ajax 读取文件
setImmediate (执行不一定比宏任务快或者慢 放入一个 I/O 循环内调用，setImmediate 总是被优先调用)
做题:
setTimeout(function () {
console.log('1')
});
new Promise(function (resolve) {
console.log('2');
resolve();
}).then(function () {
console.log('3')
});
console.log('4');
//2 4 3 1
还有一个复杂的，但是也不难，理解了就好了
async function async1() {
console.log('async1 start');
await async2();
console.log('async1 end');
}
async function async2() {
console.log('async2');
}
console.log('script start');
setTimeout(function() {
console.log('setTimeout');
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1');
resolve();
}).then(function() {
console.log('promise2');
});
console.log('script end');
- position
position: absolute relative fixed static
absolute 绝对定位 相对于static定位以外的第一个父元素定位
relative 相对定位 相对于元素的位置定位
fixed 相对于浏览器窗口定位
static 默认值，没有定位，出现在正常流中 （忽略上下左右，z-index）
inherit 从父元素继承position属性的值
- http缓存机制
http缓存机制 （浏览器和服务器之前通信就是通过http协议，http协议就是客户端发送请求，服务器回送响应）
强缓存（强制缓存），协商缓存
强缓存: 缓存数据未失效，不需要再和服务器进行交互 response中的cache control max-age=*s 命中强缓存 nocache未命中
协商缓存:需要进行比较判断是否可以使用缓存
两类缓存可以同事存在，强缓存优先级高于协商缓存，就是缓存生效的情况下，不再执行协商缓存规则
- http和https
http 超文本传输协议 目的是保证客户端和服务器之间的通信，工作方式是客户端和服务器之间的请求-应答协议
传输数据，未加密的，明文 端口 80
https ssl加密传输协议 是http的安全版，在http下加入ssl层，安全基础就是ssl，加密需要ssl 端口443
如何加密：ssl加密
数字证书加密
对称加密
非对称加密
- promise和async区别联系
promise 介绍：
* 异步编程的一种解决方案，比传统的解决方案 回调函数 更合理
* es6将其写进了语言标准，统一了用法，原生提供了promise对象
* 简单来说就是是个容器，里面放着未来发生的事件结果
* 有三种状态 pending fulfilled rejected 进行中 已成功 已失败
* promise缺点:
* 无法取消Promise,一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）
* 一些补充：
* es6新增的引用类型，可以通过new来实例化对象
* 为了解决回调地狱{{{}}} 多层嵌套
*
* promise 就会 .then() .then() .then() 链式调用似的代码更直观
* 回调
promise.all() 并行，都有了返回，才有返回
promise.race() 有一个有返回(最先解决或者拒绝)就返回
await返回一个promise对象
使用await可以用try catch处理JSON.parse错误
和async的区别
async使异步操作更方便，更好的语义化 async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果
await后面 可以是promise或者原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）
返回值是promise
try...catch...
async函数可以看成多个异步操作，包装成的一个promise对象，而await就是then的语法糖
- 手写promise
要不，你看我仓库？或者找个视频看看，我贴个简单的
class Promise{
constructor(executor){
// 初始化state为等待态
this.state = 'pending';
// 成功的值
this.value = undefined;
// 失败的原因
this.reason = undefined;
let resolve = value => {
console.log(value);
if (this.state === 'pending') {
// resolve调用后，state转化为成功态
console.log('fulfilled 状态被执行');
this.state = 'fulfilled';
// 储存成功的值
this.value = value;
}
};
let reject = reason => {
console.log(reason);
if (this.state === 'pending') {
// reject调用后，state转化为失败态
console.log('rejected 状态被执行');
this.state = 'rejected';
// 储存失败的原因
this.reason = reason;
}
};
// 如果 执行器函数 执行报错，直接执行reject
try{
executor(resolve, reject);
} catch (err) {
reject(err);
}
}
}
- 闭包
定义 当一个函数的参数或者私有变量被内部函数使用，就形成了闭包
优劣
好处：延长了生命周期 私有变量
坏处，占用内存 处理速度变慢
应用场景 需要维护内部变量 封装模块
- let const var
var 声明提升 变量覆盖 没有块级作用域 作用域是他声明的上下文 或者在函数外就是全局
let 块级作用域
const 声明之后必须赋值 定义常量 不能修改（基本数据类型不能修改，也就是不能改地址，但是object可以改，set，push） 块级作用域
const 定义的东西，可以改变属性，不能改变指向
- 防抖节流
防抖节流
防抖 触发结束后n秒后执行，如果再次触发，就重新计算时间
节流 n秒后执行一次，n秒的失效时间
注意 fun.apply(obj,arguments) obj替代fun的this
call 接收的是参数列表
apply 接收参数‘数组’ []
bind 返回的是函数
都是改变this指向
防抖 多次触发，触发结束的最后一次，n秒后执行
节流 n秒后执行一次，记录执行时间，lasttime,看触发的时候过没过lasttime+time
在触发看在不在失效时间内
具体实现看仓库，我贴个节流
function _throttle(fun, time = 2000) {
let lasttime, timer;
return () => {
let now = new Date();
if (lasttime && now < lasttime + time) {
clearTimeout(timer);
timer = setTimeout(() => {
lasttime = now; //last12 下一次now16 >1+2 进入else
}, time);
} else {
lasttime = now;
fun.apply(this, arguments);
}
}
}
- 适配
media媒体查询
flex
rem
viewport 移动端适配，设置宽度，缩放值什么的
eg:media 根据不同的屏幕尺寸设置不同的样式
@media:screen and (max-width:300px){
body{
width:300px;
background-color:grey;
}
}
rem: documentElement.style.fontSize = 100 * (documentElement.clientWidth / 750) + "px"
- MVVM
定义：MVVM 软件架构设计模式 mvc的改进版
M:数据访问层
VM:公共属性和命令
V:视图层 结构布局外观
小结：将结构布局和业务逻辑分开，通过vm在结构布局和业务逻辑之间进行通信
优势：
1.低耦合 视图层和数据层分开，耦合度降低
2.可重用性高
3.分层开发，便于维护 （样式在一起，逻辑在一起，分开的）
扫一扫
1240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
