2024年最全JS基础23，腾讯前端开发面试

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

• m.clear()用来清除全部数据

• m.has()用来判断是否有某个数据

const m=new Map([[true,1],[function(){console.log(1);},{}]])

console.log(m.get(true));

//1

console.log(m.has(true));

//true

m.set({name:‘jack’},1)

console.log(m.size);

//3

m.clear()

console.log(m.size);

//0

2. Set与数组集合很相似，但他不允许出现相同的值

• 语法：const s=new Set([1,2,3,function(){},true])

• s.size获取s里面数据个数

• s.add()用来添加数据

• s.delete()用来删除某个数据

• s.clear()用来删除数组

• s.forEach()用来遍历数组

• 也可以用…展开运算符

const s=new Set([1,2,3,function(){},true])

console.log(s.size);

//5

s.add(10)

console.log(s.size);

//6

s.forEach(item=>console.log(item))

//1

//2

//3

//f(){}

//true

//10

let a=[…s]

console.log(a);

//[1,2,3,f(){},true,10]

s.clear()

console.log(s.size);

//0

设计模式

=======================================================================

1. 概念：设计模式代表了最佳实践，是面向对象编程人员总结出来的

2. 分类

• 创建型模式：创建对象同时隐藏创建逻辑的方式

• 结构型模式：关注类和对象，继承的概念被用来组合接口和定义组合对象获得新功能的方式

• 行为型模式：该设计模式更关注对象之间的通信

单例模式

---

1. 该模式属于创建型模式，提供了创建对象的最佳方式

2. 该模式能保证整个应用只有一个对象的存在

3. 核心代码

function Person(){}

//定义一个空值

let instance=null

function signPerson(){

if(instance==null){

//在它为空时给他赋一个值，不为空就返回instance

instance=new Person()

}

return instance

}

const p1=signPerson()

const p2=signPerson()

console.log(p1===p2);

//true

4. 示例

class CreatDiv{

//static静态方法，该方法不会被实例继承，可以直接通过类调用

static getInstance(){

if(this.instance==null){

this.instance=new CreatDiv()

}

return this.instance

}

constructor(){

this.instance=null

this.divEle=document.createElement(‘div’)

document.body.appendChild(this.divEle)

}

init(text){

this.divEle.innerHTML=text

}

}

let div1=CreatDiv.getInstance()

div1.init(‘第一条测试信息’)

//页面显示第一条测试信息

let div2=CreatDiv.getInstance()

div2.init(‘第二条测试信息’)

//会覆盖第一条，页面显示第二条测试信息

组合模式

---

1. 组合模式就是把几个构造函数组合在一起，然后通过接口统一启动

2. 核心代码

class Compose{

//定义一个空数组用于装所有执行的函数

constructor(){

this.compose=[]

}

//向数组里添加要执行函数

add(task){

this.compose.push(task)

}

//一个执行任务的方法

execute(){

this.compose.forEach(item=>item.init())

}

}

3. 实例代码

class Compose{

//定义一个空数组用于装所有执行的函数

constructor(){

this.compose=[]

}

//向数组里添加要执行函数

add(task){

this.compose.push(task)

}

//一个执行任务的方法

execute(){

this.compose.forEach(item=>item.init())

}

}

class GetSay{

init(){

console.log(‘说话’);

}

}

class GetEat{

init(){

console.log(‘吃饭’);

}

}

const c=new Compose()

c.add(new GetSay())

c.add(new GetEat())

c.execute()

//说话

//吃饭

观察者模式

---

1. 当一个对象被改变时，所有依赖它的对象都将被改变，就不用直接去改变对象

2. 代码

class Subject{

constructor(name){

this.name=name

this.list=[]

}

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1. 当一个对象被改变时，所有依赖它的对象都将被改变，就不用直接去改变对象

2. 代码

class Subject{

constructor(name){

this.name=name

this.list=[]

}

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】