????### 259. 下面代码的输出是什么？（ B ）????
???juejin.cn/post/715904…???
？？？juejin.cn/post/715904… ？？？
？？？juejin.cn/post/715904… ？？？
？？？juejin.cn/post/715904… ？？?
???
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
async1()
console.log('script start')
//执行到await时，如果返回的不是一个promise对象，await会阻塞下面代码(当前async代码块的代码)，会先执行async外的同步代码(在这之前先看看await中函数的同步代码，先把同步代码执行完)，等待同步代码执行完之后，再回到async内部继续执行
//执行到await时，如果返回的是一个promise对象，await会阻塞下面代码(当前async代码块的代码)，会先执行async外的同步代码(在这之前先看看await中函数的同步代码，先把同步代码执行完)，等待同步代码执行完之后，再回到async内部等promise状态达到fulfill的时候再继续执行下面的代码
//所以结果为
//async1 start
//async2
//script start
//async1 end
???
???
什么是防抖？什么是节流？手写一个
-
防抖
- n秒后在执行该事件，若在n秒内被重复触发，则重新计时
-
节流
- n秒内只运行一次，若在n秒内重复触发，只有一次生效
// ---------------------------------------------------------防抖函数
function debounce(func, delay) {
let timeout
return function () {
let arg = arguments
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func(arg)
}, delay);
}
}
// ---------------------------------------------------------立即执行防抖函数
function debounce2(fn, delay) {
let timer
return function () {
let args = arguments
if (timer) clearTimeout(timer)
let callNow = !timer
timer = setTimeout(() => {
timer = null
}, delay);
if (callNow) { fn(args) }
}
}
// ---------------------------------------------------------立即执行防抖函数+普通防抖
function debounce3(fn, delay, immediate) {
let timer
return function () {
let args = arguments
let _this = this
if (timer) clearTimeout(timer)
if (immediate) {
let callNow = !timer
timer = setTimeout(() => {
timer = null
}, delay);
if (callNow) { fn.apply(_this, args) }
} else {
timeout = setTimeout(() => {
func.apply(_this, arguments)
}, delay);
}
}
}
// ---------------------------------------------------------节流 ，时间戳版
function throttle(fn, wait) {
let previous = 0
return function () {
let now = Date.now()
let _this = this
let args = arguments
if (now - previous > wait) {
fn.apply(_this, arguments)
previous = now
}
}
}
// ---------------------------------------------------------节流 ，定时器版
function throttle2(fn, wait) {
let timer
return function () {
let _this = this
let args = arguments
if (!timer) {
timer = setTimeout(() => {
timer = null
fn.apply(_this, arguments)
}, wait);
}
}
}
localStorage、SessionStorage、cookie、session 之间有什么区别
出现频率： 80%
掌握难度：50分
作用：
参考答案：
localStorage
生命周期：关闭浏览器后数据依然保留，除非手动清除，否则一直在
作用域：相同浏览器的不同标签在同源情况下可以共享localStorage
sessionStorage
生命周期：关闭浏览器或者标签后即失效
作用域：只在当前标签可用，当前标签的iframe中且同源可以共享
cookie
是保存在客户端的，一般由后端设置值，可以设置过期时间
储存大小只有4K
一般用来保存用户的信息的
在http下cookie是明文传输的,较不安全
cookie属性有
http-only:不能被客户端更改访问，防止XSS攻击（保证cookie安全性的操作）
Secure：只允许在https下传输
Max-age: cookie生成后失效的秒数
expire: cookie的最长有效时间，若不设置则cookie生命期与会话期相同
session
session是保存在服务端的
session的运行依赖sessionId，而sessionId又保存在cookie中，所以如果禁用的cookie，session也是不能用的，不过硬要用也可以，可以把sessionId保存在URL中
session一般用来跟踪用户的状态
session 的安全性更高，保存在服务端，不过一般为使服务端性能更加，会考虑部分信息保存在cookie中
localstorage存满了怎么办？
- 划分域名，各域名下的存储空间由各业务组统一规划使用
- 跨页面传数据：考虑单页应用、采用url传输数据
- 最后兜底方案：情调别人的存储
怎么使用cookie保存用户信息⭐⭐⭐
- document.cookie(“名字 = 数据;expire=时间”)
怎么删除cookie⭐⭐⭐
- 目前没有提供删除的操作，但是可以把它的Max-age设置为0，也就是立马失效，也就是删除了
实际使用场景：
事件冒泡和事件捕捉有什么区别
出现频率： 30%
掌握难度：30分
作用：
参考答案：
-
事件冒泡
- 在addEventListener中的第三属性设置为false（默认）
- 从下至上（儿子至祖宗）执行
-
事件捕捉
- 在addEventListener中的第三属性设置为true
- 从上至下（祖宗到儿子）执行
实际使用场景：
js常见的设计模式
出现频率： 50%
掌握难度：90分
作用：
参考答案：
-
单例模式、工厂模式、构造函数模式、发布订阅者模式、迭代器模式、代理模式
-
单例模式
- 不管创建多少个对象都只有一个实例
var Single = (function () {
var instance = null
function Single(name) {
this.name = name
}
return function (name) {
if (!instance) {
instance = new Single(name)
}
return instance
}
})()
var oA = new Single('hi')
var oB = new Single('hello')
console.log(oA);
console.log(oB);
console.log(oB === oA);
工厂模式
- 代替new创建一个对象，且这个对象想工厂制作一样，批量制作属性相同的实例对象（指向不同）
function Animal(o) {
var instance = new Object()
instance.name = o.name
instance.age = o.age
instance.getAnimal = function () {
return "name:" + instance.name + " age:" + instance.age
}
return instance
}
var cat = Animal({name:"cat", age:3})
console.log(cat);
-
构造函数模式
-
发布订阅者模式
class Watcher {
// name模拟使用属性的地方
constructor(name, cb) {
this.name = name
this.cb = cb
}
update() {//更新
console.log(this.name + "更新了");
this.cb() //做出更新回调
}
}
class Dep {//依赖收集器
constructor() {
this.subs = []
}
addSubs(watcher) {
this.subs.push(watcher)
}
notify() {//通知每一个观察者做出更新
this.subs.forEach(w => {
w.update()
});
}
}
// 假如现在用到age的有三个地方
var w1 = new Watcher("我{{age}}了", () => { console.log("更新age"); })
var w2 = new Watcher("v-model:age", () => { console.log("更新age"); })
var w3 = new Watcher("I am {{age}} years old", () => { console.log("更新age"); })
var dep = new Dep()
dep.addSubs(w1)
dep.addSubs(w2)
dep.addSubs(w3)
// 在Object.defineProperty 中的 set中运行
dep.notify()
-
代理模式
-
迭代器模式
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
****
出现频率：
掌握难度：
作用：
参考答案：
实际使用场景：
