最后
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
如:当微博列表中点击“关注”,此时会同时发生很多事:推荐更多类似微博,个人关注数增加…
- 场景2:解耦多模块开协作。
如:小王负责A模块开发,小陈负责B模块开发,模块B需要模块A正常运行之后才能执行。
2. 代码实现
2.1 场景1实现
场景1:单个目标对象发生改变,需要通知多个观察者一同改变。
本例子模拟三个页面进行演示:
1.微博列表页(Weibo.js)
2.粉丝列表页(User.js)
3.微博首页(Home.js)
在微博列表页(Weibo.js)中,我们导入其他两个页面,并且监听【关注微博】按钮的点击事件,在回调事件中,创建一个自定义事件 focusUser
,并在document
上使用dispatchEvent
方法派发自定义事件。
接下来两个页面实现的代码基本一致,这里为了方便观察,设置了两者不同输出日志。
点击【关注微博】按钮后,看到控制台输出如下日志信息:
最终实现了,在微博列表页(Weibo.js)组件负责派发事件,其他组价负责监听事件,这样三个组件之间耦合度非常低,完全不用关系对方,互相不影响。
其实这也是实现了观察者模式。
2.2 场景2实现
场景2:解耦多模块开协作。
举个更直观的例子,当微博需要加入【一键三连】新功能,需要产品原型和UI设计完后,程序员才能开发。
本例子模拟四个模块:
1.流程控制(Index.js)
2.产品设计(Production.js)
3.UI设计(Design.js)
4.程序员开发(Develop.js)
在流程控制(Index.js)模块中,我们需要将其他三个流程的模块都导入进来,然后监听【开始任务】按钮的点击事件,在回调事件中,创建一个自定义事件 startTask
,并在document
上使用dispatchEvent
方法派发自定义事件。
6. 如何在ES5环境下实现let
对于这个问题,我们可以直接查看
babel
转换前后的结果,看一下在循环中通过let
定义的变量是如何解决变量提升的问题
babel在let定义的变量前加了道下划线,避免在块级作用域外访问到该变量,除了对变量名的转换,我们也可以通过自执行函数来模拟块级作用域
7. 如何在ES5环境下实现const
实现const的关键在于Object.defineProperty()
这个API,这个API用于在一个对象上增加或修改属性。通过配置属性描述符,可以精确地控制属性行为。Object.defineProperty()
接收三个参数:
Object.defineProperty(obj, prop, desc)
对于const不可修改的特性,我们通过设置writable属性来实现
8. 数组扁平化
对于
[1, [1,2], [1,2,3]]
这样多层嵌套的数组,我们如何将其扁平化为[1, 1, 2, 1, 2, 3]
这样的一维数组呢:
1.ES6的flat()
const arr = [1, [1,2], [1,2,3]]
arr.flat(Infinity) // [1, 1, 2, 1, 2, 3]
复制代码
2.序列化后正则
const arr = [1, [1,2], [1,2,3]]
const str = [${JSON.stringify(arr).replace(/(\[|\])/g, '')}]
JSON.parse(str) // [1, 1, 2, 1, 2, 3]
复制代码
3.递归
对于树状结构的数据,最直接的处理方式就是递归
const arr = [1, [1,2], [1,2,3]]
function flat(arr) {
let result = []
for (const item of arr) {
item instanceof Array ? result = result.concat(flat(item)) : result.push(item)
}
return result
}
flat(arr) // [1, 1, 2, 1, 2, 3]
复制代码
4.reduce()递归
const arr = [1, [1,2], [1,2,3]]
function flat(arr) {
return arr.reduce((prev, cur) => {
return prev.concat(cur instanceof Array ? flat(cur) : cur)
}, [])
}
flat(arr) // [1, 1, 2, 1, 2, 3]
复制代码
5.迭代+展开运算符
let arr = [1, [1,2], [1,2,3]]
while (arr.some(Array.isArray)) {
arr = [].concat(…arr);
}
console.log(arr) // [1, 1, 2, 1, 2, 3]
复制代码
9. 说说HTTP/3.0
尽管HTTP/2解决了很多1.1的问题,但HTTP/2仍然存在一些缺陷,这些缺陷并不是来自于HTTP/2协议本身,而是来源于底层的TCP协议,我们知道TCP链接是可靠的连接,如果出现了丢包,那么整个连接都要等待重传,HTTP/1.1可以同时使用6个TCP连接,一个阻塞另外五个还能工作,但HTTP/2只有一个TCP连接,阻塞的问题便被放大了。
由于TCP协议已经被广泛使用,我们很难直接修改TCP协议,基于此,HTTP/3选择了一个折衷的方法——UDP协议,HTTP/2在UDP的基础上实现多路复用、0-RTT、TLS加密、流量控制、丢包重传等功能。
10 .理解和使用ES6中的Symbol
====================
#### 这是一种新的基础数据类型(primitive type)
Symbol
是由ES6规范引入的一项新特性,它的功能类似于一种标识唯一性的ID。通常情况下,我们可以通过调用Symbol()
函数来创建一个Symbol实例:
let s1 = Symbol()
或者,你也可以在调用Symbol()
函数时传入一个可选的字符串参数,相当于给你创建的Symbol实例一个描述信息:
let s2 = Symbol(‘another symbol’)
如果用当下比较流行的TypeScript的方式来描述这个Symbol()
函数的话,可以表示成:
/**
- @param {any} description 描述信息。可以是任何可以被转型成字符串的值,如:字符串、数字、对象、数组等
*/
function Symbol(description?: any): symbol
由于Symbol
是一种基础数据类型,所以当我们使用typeof
去检查它的类型的时候,它会返回一个属于自己的类型symbol
,而不是什么string
、object
之类的:
typeof s1 // ‘symbol’
另外,我们需要重点记住的一点是:每个Symbol实例都是唯一的。因此,当你比较两个Symbol实例的时候,将总会返回false
:
let s1 = Symbol()
let s2 = Symbol(‘another symbol’)
let s3 = Symbol(‘another symbol’)
s1 === s2 // false
s2 === s3 // false
应用场景1:使用Symbol来作为对象属性名(key)
在这之前,我们通常定义或访问对象的属性时都是使用字符串,比如下面的代码:
let obj = {
abc: 123,
“hello”: “world”
}
obj[“abc”] // 123
obj[“hello”] // ‘world’
而现在,Symbol
可同样用于对象属性的定义和访问:
const PROP_NAME = Symbol()
const PROP_AGE = Symbol()
let obj = {
}
obj[PROP_AGE] = 18
objPROP_NAME // ‘一斤代码’
obj[PROP_AGE] // 18
随之而来的是另一个非常值得注意的问题:就是当使用了Symbol作为对象的属性key后,在对该对象进行key的枚举时,会有什么不同?在实际应用中,我们经常会需要使用Object.keys()
或者for...in
来枚举对象的属性名,那在这方面,Symbol类型的key表现的会有什么不同之处呢?来看以下示例代码:
let obj = {
age: 18,
title: ‘Engineer’
}
Object.keys(obj) // [‘age’, ‘title’]
for (let p in obj) {
console.log§ // 分别会输出:‘age’ 和 ‘title’
}
Object.getOwnPropertyNames(obj) // [‘age’, ‘title’]
由上代码可知,Symbol类型的key是不能通过Object.keys()
或者for...in
来枚举的,它未被包含在对象自身的属性名集合(property names)之中。所以,利用该特性,我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。
也正因为这样一个特性,当使用JSON.stringify()
将对象转换成JSON字符串的时候,Symbol属性也会被排除在输出内容之外:
JSON.stringify(obj) // {“age”:18,“title”:“Engineer”}
我们可以利用这一特点来更好的设计我们的数据对象,让“对内操作”和“对外选择性输出”变得更加优雅。
然而,这样的话,我们就没办法获取以Symbol方式定义的对象属性了么?非也。还是会有一些专门针对Symbol的API,比如:
// 使用Object的API
Object.getOwnPropertySymbols(obj) // [Symbol(name)]
// 使用新增的反射API
Reflect.ownKeys(obj) // [Symbol(name), ‘age’, ‘title’]
应用场景2:使用Symbol来替代常量
先来看一下下面的代码,是不是在你的代码里经常会出现?
const TYPE_AUDIO = ‘AUDIO’
const TYPE_VIDEO = ‘VIDEO’
const TYPE_IMAGE = ‘IMAGE’
function handleFileResource(resource) {
switch(resource.type) {
case TYPE_AUDIO:
playAudio(resource)
break
case TYPE_VIDEO:
playVideo(resource)
break
case TYPE_IMAGE:
previewImage(resource)
break
default:
throw new Error(‘Unknown type of resource’)
}
}
如上面的代码中那样,我们经常定义一组常量来代表一种业务逻辑下的几个不同类型,我们通常希望这几个常量之间是唯一的关系,为了保证这一点,我们需要为常量赋一个唯一的值(比如这里的’AUDIO’、‘VIDEO’、 ‘IMAGE’),常量少的时候还算好,但是常量一多,你可能还得花点脑子好好为他们取个好点的名字。
现在有了Symbol
,我们大可不必这么麻烦了:
const TYPE_AUDIO = Symbol()
const TYPE_VIDEO = Symbol()
const TYPE_IMAGE = Symbol()
这样定义,直接就保证了三个常量的值是唯一的了!是不是挺方便的呢。
应用场景3:使用Symbol定义类的私有属性/方法
我们知道在JavaScript中,是没有如Java等面向对象语言的访问控制关键字private
的,类上所有定义的属性或方法都是可公开访问的。因此这对我们进行API的设计时造成了一些困扰。
而有了Symbol
以及模块化机制
,类的私有属性和方法才变成可能。例如:
- 在文件 a.js中
const PASSWORD = Symbol()
class Login {
constructor(username, password) {
this.username = username
this[PASSWORD] = password
}
checkPassword(pwd) {
return this[PASSWORD] === pwd
}
}
export default Login
- 在文件 b.js 中
import Login from ‘./a’
const login = new Login(‘admin’, ‘123456’)
login.checkPassword(‘123456’) // true
login.PASSWORD // oh!no!
login[PASSWORD] // oh!no!
login[“PASSWORD”] // oh!no!
文末
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Login(‘admin’, ‘123456’)
login.checkPassword(‘123456’) // true
login.PASSWORD // oh!no!
login[PASSWORD] // oh!no!
login[“PASSWORD”] // oh!no!
文末
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!