笔记typeof能判断哪些类型？变量类型String、Number、Boolean、Symbol、Undefined、N

typeof能判断哪些类型？

变量类型 String、Number、Boolean、Symbol、Undefined、Null

undefine null String boolean number

何时使用==何时使用===?

强制类型转换

windos.onload和DOMContentLoaded区别？

页面渲染过程

js创建10个<a>标签，点击时弹出相应的序号

考察作用域的问题

手写节流throttle和防抖debounce

考验性能和体验优化

Promise解决了什么问题？

解决异步问题

看到题先思考考点 ->题可变，考点不变 -> 题目到考点，考点再到题目

知识体系

高效学习三部曲：找准知识体系->可以训练->及时反馈
涵盖所有知识点：结构化->有组织->易扩展

盒模型宽度如何计算

magin纵向重叠

magin负值

bfc

float浮动清除浮动

flex画撒子

absolute relative分别依据什么地位

居中对齐实现方式

line-height继承问题

rem em px

如何实现响应式

手写promise加载一张图片

const url = 'https://sf6-ttcdn-tos.pstatp.com/img/mosaic-legacy/3797/2889309425~120x256.image';
function loadImg(url){
    return new Promise((resolve, reject)=>{
        const img =document.createElement('img');
        img.onload = ()=>{
            resolve(img);
        }
        img.onerror = ()=>{
            const err = new Error(`图片加载失败${url}`)
            reject(err);
        }
        img.src = url;
    })
}
loadImg(url).then(img =>{
    console.log(img.width)
    return img;
}).then(img=>{
    console.log(img.height)
}).catch(error=>{
    console.log(error);
})

使用promise加载多图

const url1 = 'https://sf6-ttcdn-tos.pstatp.com/img/mosaic-legacy/3797/2889309425~120x256.image';
const url2 = 'https://d0.awsstatic.com/Digital%20Marketing/sitemerch/sign-in/CN/Site-Merch_PAC_Backup-Restore_Sign-in_CN.png';
loadImg(url1).then(img1 =>{
    console.log(img1.width)
    return loadImg(url2);
}).then(img2=>{
    console.log(img2.width)
}).catch(error=>{
    console.error(error);
})

web异步应用场景

网络请求(如发起ajax)
定时任务

promise出现的原因

callback hell（回调地狱）促使promise出现，传统的使用回调多层嵌套

let url1 = '/data1.json';
let url2 = '/data2.json';
let url3 = '/data3.json';
$.get(url1,(data)=>{
	$.get(url2,(data1)=>{
    	$.get(url3,(data3)=>{
        	console.log(data3);
        })
    })
})

使用promise封装的ajax请求

//首先我封装getdata方法
function getdata(url){
	return new Promise((resolve,reject)=>{
    	$.ajax({
        	url,
            success(data){
            	resolve(data)
            },
            error(err){
            	reject(err);
            }
        })
    })
}
let url1 = '/data1.json';
let url2 = '/data2.json';
let url3 = '/data3.json';
getdata(url1).then(data1=>{
	console.log(data1);
    return getdata(url2);
}).then(data2=>{
	console.log(data2);
    return getdata(url3)
}).then(data3=>{
	console.log(data3);
}).catch(err=>{
	console.log(err);
})

异步

请描述`event lopp`(事件循环、事件轮询机制)

js是单线程的
异步是基于回调的
event loop就是异步回调的原理
event执行过程
示例以下打印结果顺序
```
console.log('hi')
setTimeout(function cb(){
	console.log('cb')
},5000)
console.log('hello')
```
结果:
```
hi
hello
cb
```
执行解析
javascript会先执行同步代码,再执行异步代码
首先将console.log('hi')推入调用栈(call stack)
setTimeout()属于浏览器的api,不属于js函数,将cb放入webapi中,5秒之后再执行
** 同步一行一行执行,异步先记下,等待时机,时机到了的时候(定时器的时间)才将记录的cb函数添加到callback queue中,当同步代码执行完之后(call stack为空),就会触发event loop机制,event loop 轮询查询callback queue,这时才将cb函数推入call stack中** 示例图:

DOM事件和event loop

 DOM事件不是异步,但是同样是基于event loop来实现的

什么是宏任务和微任务,他们有什么区别

`promise`有哪3种状态,它们是怎么一个变化

pending 准备中不会触发then和catch
fulfilled 成功的会触发then
rejected 失败的会触发catch
状态变更后不可逆

const p1 = new Promise((resolve,reject)=>{

 })
 console.log(p1); //pending
 const p2 = new Promise((resolve,reject)=>{
     setTimeout(()=>{
         resolve()
     })
 })
 const p3 = new Promise((resolve, reject) => {
     setTimeout(() => {
         reject();
     })
 })
 console.log(p2); // pendging
 setTimeout(() => { console.log(p2) }) //fulfilled
 setTimeout(() => { console.log(p3) }) //resolved

Promise.resolve()
只能通过.then()去接收
Promise.reject()
只能通过.catch()去接收

then 正常返回resolved,里面报错则返回rejected

	const p1 =Promise.resolve().then(()=>{
   	return 100
   })
   //resolved触发后续then回调
   p1.then(()=>{
   	console.log(123)
   })
   
   p2 =Promise.resolve().then(()=>{
   	throw new Error('then error')
       //主动设置错误
   })
   //只能通过catch来后续调用
   p2.catch((err)=>{
   	console.error(err);
   })

catch正常返回resolved,里面有报错则返回rejected

	const p3 =Promise.reject('my error').catch(err=>{
   	console.log(err)
   })
   console.log(p3) //resolved ⚠️
   const p4  =Promise.reject('my error').catch(err=>{
   	throw new Errpr('catch,err')
   })
   console.log(p4) //rejected

总结:没有报错就返回rejected,

promise中`then`和`catch`连接

练习题目第一题答案 1 3
第二题答案 1 2 3
第三题 1 2

async 和 await语法

同步语法编写异步代码,彻底消灭回调函数

异步回调容易导致callback hell，Promise then catch链式调用虽把层级平铺开，但也是基于回调函数。async/await能彻底消灭回调函数，用同步语法编写异步代码。async/await和promise不冲突。

prommise和setTimeout顺序

以下代码执行顺序

console.log(100);
setTimeout(()=>{
	console.log(200)
})
Promise.resolve().then(()=>{
	consoe.log(300)
})
console.log(400)

笔记