前端注意问题

第一部分

• TCP/IP是为互联网服务的协议族，它将通信过程抽象为四层，分别为应用层、传输层、互联网层和网络接口层。SMTP、FTP、HTTP等常用的协议都位于应用层

• 敏捷软件开发方法是一种创作与交流的协作观

• 选择器原先就存在，CSS3只是完善了它，使其拥有更丰富的功能

• 如果把++运算符单独放一行，那么它会和下面的语句合并，作为一个整体被解析

• switch语句种case子语句中的表达式进行全等（===）匹配

• CSS预处理器能为CSS增加编程特性，通过编译器将使用新语法的文件输出为一个普通的CSS文件，解决CSS难以复用，代码冗余，可维护性低的 问题。常用的预处理器有Less、Sass和stylus

• 盒模型就是从盒子顶部俯视所得到的一张平面图，用于描述元素所占用的空间。有两种和模型W3C和IE盒模型，两者不同之处是对元素尺寸的计算方式。当用CSS给某个元素定义宽或高时，IE盒模型的宽或高将包含内边距和边框，而W3C盒模型并不包含

• HTTP即超文本传输协议，是一种获取网络资源（图像、HTML文档）的应用层协议，它是互联网数据通信的基础，由请求和响应构成。首先客户端会发起HTTP请求（在请求报文中会指定资源的URL）,然后用传输层的TCP建立连接，最后服务器相应请求，做出应答，回传数据报文。

• typeof和instanceof的区别

1. typeof运算符用于检测数据类型，而instanceof运算符用于检测对象之间的关联性
2. typeof运算符执行完之后会返回一个小写字母的类型字符串，而instanceof运算符执行完会返回一个布尔值
3. typeof运算符只需一个操作数，这个操作数可以是基本类型或函数，而instanceof运算符需要两个操作数，并且左操作数不能是基本类型，右操作数必须是函数，否则运算结果没有意义

• let、const与var之间有哪些不同

1. 不允许声明提升
2. 不允许重复声明
3. 不覆盖全局变量

• Array.of()的作用

1. ES6为Array对象新增的一个静态方法是of()，用于创建数组，能接收任意数量的参数，返回值是由这些参数组成的新数组

• yield和return的区别

1. yield是一个关键字，而return是一个运算符
2. yield只能出现在生成器中，而return无此限制
3. yield能暂停函数的执行，而return是直接终止
4. 在一个函数中，可以执行多次yield，热return只能执行一次
5. yield只能返回IteratorResult对象，而return能返回任意值

• 虚拟DOM是构建在真实DOM上的一层抽象，它将DOM元素映射成内存中的js对象（通过React.createElement()得到的React元素），形成一颗javaScript对象树

• React中三个声明周期被标记为过时

1. componentWillMount()
2. componentWillReceiveProps()
3. componentWillUpdate()
4. 官方为以上新增一个UNSAFE_作为前缀的别名

• React中的状态提升是指什么

1. 兄弟之间不能直接通信，需要借助状态提升的方法实现信息的传递，即把组件之间要共享的状态提升至最的父组件中，由父组件来统一管理

• webpack的加载器用途

1. 加载器(loader)能在webpack加载模块时对其进行预处理，即对模块的源码进行转换

• 元素的作用

1. 缓存组件的状态，虽然能包裹任意数量的元素，但是只能渲染其中一个子元素，并且自身不会渲染成一个DOM元素。由此可见，元素内可包含条件指令，但不能包含v-for指令

第二部分

• BTC（block formatting context）即块格式上下文，能够决定元素的内容如何渲染以及其他元素的关系和交互

• HTTP特征

1. 持久连接
2. 管道化
3. 无状态

• 极限编程的核心思想

1. 强调人与人之间的合作因素和以敏捷性应对变化

• TCP/IP的理解

1. 是互联网服务的协议族，是网络通信协议的统称，是由IP、TCP、HTTP和FTP等协议组成。
2. 将通信过程抽象为四层，被视为简化的OSI参考模型

• （function(){}）()

1. 即时函数，也就是刚定义好就马上自动执行的函数
2. 创建块级作用域
3. 解决循环中的异步回调
4. 类库封装

第三部分

• 什么是外边距陷踏

1. 外边距陷阱是指相邻的两个元素的外边距发生合并，导致外边距的表现不符合预期的情况。

• 在DOM中，事件对象的两个属性target和currentTarget有什么区别

1. event.target 是触发事件的原始元素，而 event.currentTarget 是绑定事件处理程序的元素。

• 扩展运算符（…）的用途有哪些

1. 替代函数的apply()方法
2. 简化函数调用时传递实参的方式
3. 处理数组和字符串

• find和indexOf有哪些区别

1. 是indexOf的一种补充
2. indexOf只能通过全匹配（===）来搜索指定的值，而新方法可以自定义匹配条件

• 类有哪些成员

1. 类的成员包括属性（也称为字段或变量）和方法（也称为函数）。

• shadowDom和Virtual DOM之间有哪些区别

1. Shadow DOM是用于封装自定义组件样式和行为的DOM树，而Virtual DOM是一种用于优化DOM操作的虚拟表示。 Virtual DOM通过比较变化并批量更新DOM，而Shadow DOM用于隔离组件的样式和行为。

• 有没有办法强制React组件重新渲染，而不用setState（）方法

1. 如果render()方法依赖于其他数据（如更新的数据不在state中），则可以调用组件的forceUpdate()方法，强制让其重新渲染。调用forceUpdate()会让组件跳过shouldComponmentUpdate()方法，直接调用render()方法

• 在React中什么是高阶组件

1. HOC不是一个真的组件，是一个没有副作用的纯函数，以组件作为参数，返回一个功能增强的新组件
2. 遵循了装饰者模式的设计思想，因此不会入侵传递进来的原组件，而是对其进行抽象、包装和拓展，改变原组件的行为
3. 增强了组件的复用性和灵活性，还保持了组件的易用性

• 请描述一下React中的Jest

1. Jest是React中常用的测试框架，用于编写和运行单元测试、集成测试和快照测试。

• Vue.js中的sync修饰符有什么作用

1. sync修饰符用于在子组件中更新父组件的属性，简化了Vue.js中父子组件之间的数据传递。

• 什么是泛型

1. 是程序设计语言中的一种风格或规范，相当于类型模板，允许在声明类、接口或函数等成员时忽略类型，而在未来使用时再指定类型
2. 主要目的是为它们提供有意义的约束，提升代码的可重用性

第四部分

• 什么是IP地址

1. 是指互联网协议地址，为网络中的每台主机分配已给数字标签
2. 是属于网络层

• 在HTTP中，总共有5类状态码，请简单介绍一下这5类状态码

1. 信息性状态码（1xx）
2. 成功状态码（2xx）
3. 重定向状态码（3xx）
4. 客户端错误状态码（4xx）
5. 服务器错误状态码（5xx）

• 在JS中，字面量是指什么

1. 字面量就是常量，是一种在程序中可以直接使用的数据值，通常它的值是固定的。在JS中可以使用各种字面量，如数字字面量、字符串字面量、对象字面量

• 什么叫点击劫持？对这种攻击有什么解决办法

1. 是一种视觉上的欺骗，攻击者把一个透明的iframe覆盖在目标网页的某个位置，这个位置可以是一个按钮，一段文字或一张图片
2. 如果防范该攻击，可以通过限制iframe来实现，只要在HTTP响应报文中增加X-Frame-Options首部，就能让浏览器按照要求加载iframe中的页面，可以是不加载，只加载相同域名或加载指定来源

• ES6中的剩余参数有什么作用

1. 在JS的函数中，声明时定义的形参个数可以和传入的实参个数不同。当实参个数大于形参个数时，ES6新增的剩余参数能把没有对应形参的实参收集到一个数组中

• 什么是类型化数组

1. Typed Array
2. 类型化数组是JavaScript中的一种特殊数组，它允许以固定的数据类型存储数据，提高了对二进制数据的处理效率。
3. 是一种处理二进制数据的特殊数组，可像C语言直接操纵字节，不过需要先用Array-Buffer对象创建数组缓冲区，再映射到指定格式的视图(view)之后，才能读写其中的数据

• 在ES6中，当super作为方法使用时，有哪些注意点

1. super()方法相当于父类的构造函数
2. 只有在子类的构造函数中才能调用super()方法
3. 如果子类显式地定义了构造函数，那么必须调用super()方法，否则会报错
4. 如果子类没有定义构造函数，那么会自动调用super()方法
5. 当子类的构造函数显式地返回一个对象时，就能避免调用super()方法
6. 在使用this之前，必须先调用super()方法

• 什么是React Fiber

1. React Fiber 是 React 中一种用于进行协调和调度的新的 reconciler 架构，用于实现增量式的渲染和优先级调度。Fiber 是 React 内部的实现细节，由 React 框架自己管理。

• Refs有什么用

1. Refs是一种访问方式，通过它可以读取render()方法内生成的组件实例和DOM元素，常用来处理元素的焦点、触发动画、集成第三方DOM库等

• 在React的高阶组件中，为何要定义displayName属性

1. 在高阶组件中创建的新组件，不会再沿用原组件的名称。为了便于在React Devloper Tools中调试，需要为新组件设置一个显示的名称。

• 什么是npm?由哪几部分组成

1. npm是Node.js的包管理工具，用于安装、分享和管理JavaScript包。它由CLI工具、网站和包存储库三部分组成。

• 请介绍一下webpack.config.js中的mode字段

1. 在webpack.config.js中，mode字段用于指定当前构建的模式，可以设置为"development"、“production"或"none”。它会影响webpack的优化行为和默认的配置选项。

• Vue.nestTick()有什么作用

1. Vue.nextTick()用于在DOM更新之后立即执行一个回调函数，确保在下次DOM更新周期之后执行。

• 在Vue中，如何能直接访问父组件、子组件和根实例

1. $parent：父组件
2. $root:根实例，如果没有父实例，那么读取的将是自身
3. $children：直接子组件，无法获取隔代的子组件，并且不保证组件的顺序，也非响应式

• 在TypeScript创建了两种兼容性：子类型和赋值，它们有什么区别

1. 赋值兼容性扩展了子类型兼容性，增加了一些规则，允许和any相互赋值，以及enum和对应数字之间的相互赋值
2. 类型兼容性遵从赋值兼容性，即使是implements和extends语句也不例外

第五部分

• 请简单介绍一下WEB缓存机制，具体过程有哪些步骤

1. WEB缓存机制是指浏览器在加载WEB页面时会将一部分资源存储在本地，以提高用户访问速度。具体过程包括检查缓存、读取缓存、验证缓存和更新缓存。

• 在浏览器中，一个页面从输入URL到加载完成，都有哪些步骤

1. 域名解析，根据域名找到服务器的IP地址
2. 建立TCP连接，浏览器与服务器经过三次握手后建立连接
3. 浏览器发起HTTP请求，获取想要的资源
4. 服务器响应HTTP请求，返回指定的资源
5. 浏览器渲染页面，解析接收到的HTML、CSS和JS等文件

• 请描述对JS的理解

1. 是一种通过解析执行的高级编程语言，同时也是一门动态、弱类型的直译脚本语言，适合面向对象（基于原型）和函数式的编程风格

• XSS是什么？对这种攻击有哪些防范办法

1. 跨站脚本攻击，将恶意脚本注入到目标网页中，用户访问页面时，造成信息泄露、行为被劫持等
2. 为Cookie添加HttpOnly标记，使得客户端不能通过JS读取Cookie信息
3. 对提交到服务器中的信息做输入检查，如白名单过滤、把字符串编码成HTML实体等
4. 对输出到页面中的信息做输出检查

• 什么是解构

1. 是一种赋值语法，可以从数组中提取元素或从对象中提取属性，将其赋值给对应的变量或另一个对象的属性
2. 目的是简化提取数据的过程，增强代码的可读性
3. 分为数组解构和对象解构,区别在于解构赋值语句的左侧，前者是数组字面量，后者是对象字面量

• 为什么React组件的名称首字母要大写

1. 在JSX中，为区分HTML元素和组件，规定前者的标签首字母要小写，而后者的首字母要大写

• 什么是Forward Refs?

1. Forward Refs 是 React 中一种转发 refs 到组件的技术，允许父组件访问子组件的 DOM 节点或实例。

• React的高阶组件有哪些限制（即注意事项）

1. 不要在组件的render()方法中使用高阶组件。因为高阶组件每次都会创建一个新组件，而根据React的diff算法可知，原组件（即前一次所创建的组件）会先被卸载掉，然后重新挂载新组件。这么做不仅效率低下，而且原组件的状态和所有子组件都将丢失
2. 高阶组件创建的新组件不会包含原来组件的静态方法，如果需要，只能手动复制

• npm在什么情况下适合将包本地安装？而在什么情况适合全局安装

1. 如果代码依赖于某个包（如JQ等），就应该本地安装。
2. 如果将包作为一个命令行工具（如gulp、grunt等），就应该全局安装

• 什么是Vue CLI

1. CLI是一个全局安装的npm包，提供了终端里的Vue命令
2. CLI服务是一个开发环境依赖
3. CLI插件是一种包含特定功能的npm包，如Babel转译、ESLint集成等

• display:none与visibility:hidden都可隐藏元素，有何区别

1. 定义为none后，相当于元素没有了后代元素，在正常流中不占任何空间，元素的真实尺寸将会丢失，还会导致浏览器的重排和重绘
2. 定义为hidden后，在正常流中还是会占用空间，但仍具有元素的真实尺寸，只会导致浏览器重绘

第六部分

• 什么是微格式

1. 是一种数据机构化技术，通过添加属性（class或rel）和元数据(Link元素)的方式来实现Web的语义化，让内容适合人类阅读，以及容易被机器处理

• 什么是HTML实体

1. 就是对当前文档的编码方式不能包含的字符，提供一种转义表示

• 请谈一下你对BFC的理解

1. 格式化上下文，即不是CSS属性也不是一段代码，而是CSS2.1规范的一个概念，决定元素的内容如何渲染以及其他元素的关系和交互，有五条规则
2. 隔离作用，内部元素不会受外部元素的影响（反之亦然）
3. 一个元素只能存在于一个BFC中，如果能同时存在两个BFC中，就违反了BFC的隔离规则
4. BFC内的元素按正常流排列，元素之间的间隙由元素的外边距控制
5. BFC中的内容不会与外面的浮动元素重叠
6. 计算BFC的高度，需要包括BFC内的浮动子元素的高度

• get和post的区别有哪些

1. 语义不同，get是获取数据，post是提交数据
2. get请求会把附加参数带在URL上，而POST请求会把提交数据放在报文内，URL长度会被限制，所以get请求能传递的数据有限
3. HTTP规定GET是幂等的，而POST不是

• 分号什么时候自动补全？自动补全有什么弊端

1. 分号在 JavaScript 中会在一行的末尾自动补全，但这种自动补全可能导致混淆和错误。当 JavaScript 解释器对代码进行解析时，会尝试在行末尾自动添加分号，这可能导致出现意外的行为和错误。在某些情况下，自动补全会引发难以察觉的 bug，并且在一些情况下会影响到代码的性能。

• 解析对CSRF的攻击原理和防御手段

1. CSRF攻击原理是利用用户在登录认证后的状态下对应用程序的信任，利用认证信息的漏洞进行攻击。攻击者通过诱使受害者访问恶意网站或点击恶意链接，利用受害者在目标网站的已认证状态，对目标网站发起请求，暴露用户信息或执行恶意操作。
2. 防御CSRF攻击的常见手段包括使用CSRF令牌，在请求中携带一个随机生成的令牌，服务端验证该令牌的有效性，从而防止CSRF攻击。另外，限制跨域请求、使用同源策略和安全的HTTP头部设置也可以帮助防御CSRF攻击。

• 如何使用DataView

1. DataView是JavaScript中用于读取和写入二进制数据的接口。

// 创建一个Buffer
let buffer = new ArrayBuffer(16);
// 创建一个DataView实例
let dataView = new DataView(buffer);
// 写入数据
dataView.setInt32(0, 42);
// 读取数据
let value = dataView.getInt32(0);
console.log(value); // 输出 42

• ReactDom中的render()方法有什么功能

1. ReactDom中的render()方法用于将React元素渲染到DOM中。

• 为什么弃用字符串类型的Refs

1. 弃用字符串类型的Refs是因为它们已被认为是一种过时的做法，并且有潜在的安全风险和性能问题。Refs应该是对象类型或回调函数，以便更好地支持React的特性和优化。

• 什么是Redux

1. 是一个可预测的状态容器，不但融合了函数式编程，还严格遵循了单向数据流的理念
2. 约定了一系列的规范，并且标准化了状态（数据）的更新步骤
3. 是一个独立的库，可与React等其他库搭配使用

• packpage.json有什么作用

1. 用于管理本地已安装的npm包，记录项目的作者、依赖包、版本等各类信息
2. 能方便地复制一个项目，不比再手动地安装相关的包，利于多人协作

• TypeScript中的.d.ts文件用来做什么的

1. d.ts 文件用来为 JavaScript 文件中的库提供类型定义。这些文件充当了TypeScript中的声明文件，可以定义库的API结构以及类型信息，从而使得JavaScript库可以在TypeScript中进行类型安全的使用。

第七部分

• HTML实体的应用场景有哪些

1. HTML实体在以下场景中被广泛使用： 1. 用于显示特殊字符，如版权符号©、小于号<、大于号>等。 2. 用于转义HTML中的特殊字符，例如&、<、>等，以避免它们被浏览器解释为标签和其他特殊用途。

• 什么是shadowDom

1. 是浏览器的一种功能，能够自动添加子元素

• CSS中类选择器和ID选择器有哪些区别

1. 类选择器以点号（.）开头，用于选择具有相同类的元素；而ID选择器以井号（#）开头，用于选择具有特定ID的元素。区别在于类选择器可以被多个元素使用，而ID选择器只能对应于一个唯一的元素。

• 请简单介绍下REST

1. 表示状态性转移，既不是标准，也不是协议，而是一组架构约束条件和设计指导原则，一种基于HTTP\URL\XML等现有协议与标准的开发方式
2. 常说的RESTful是一种遵守REST设计的架构风格

• undefined和null的异同

1. undefined表示一个变量未被初始化或不存在，而null是专门用来表示空值的特殊关键字。

相同

1. 都有空缺的意思
2. 不包含方法和属性
3. 都是假值
4. 都只有一个值

不同

1. undefined是表示一个未定义的值，null表示一个空的对象
2. 类型不同，typeof运算符应用与undefined得"undefined"，而应用于null，得到的是"object"
3. 数字转换不同,Number()转换数字后，得NAN和0
4. 在非严格模式表现不同，undefined可以是一个标识符，能被当作变量来使用和赋值，而null不可以

• 什么是模板字面量

1. 在RS6一般人模板字面量后，能避免用若干个加号来实现字符串拼接

• ES6为函数做了哪些改良

1. 默认参数、元属性、块级函数、箭头函数

• 什么是Promise

1. 能更合理地控制和追踪异步操作

• Redux三大原则

1. 单一数据源
2. 保持状态只读
3. 状态的改变由纯函数完成

第八部分

• 元素属性src和href有何区别

1. 功能不同
2. href能够建立一条通道，将当前文档和定义的资源连接起来
3. src是将定义的资源嵌入到当前文档中

• 伪元素::before和:before有什么区别

1. 在CSS中，双冒号(::)用于表示伪元素，单冒号(:)用于表示伪类。因此，::before表示使用伪元素::before，而:before可能会被认为是语法错误。

• calc()函数有什么作用

1. 是css的一个函数，只有一个数字表达式参数，可处理加减乘除等数学运算，并且在表达式中可混用不同的单位

• 什么是RESTful API？

1. RESTful API是一种基于REST架构原则设计的API。它使用GET、POST、PUT、DELETE等HTTP方法，通过URL来唯一地定位资源，并使用JSON或XML格式作为数据传输。

• 如何设计RESTful API？

1. 使用合适的URL来唯一地标识资源。
2. 使用合适的HTTP方法（GET、POST、PUT、DELETE）来执行对资源的操作。
3. 使用合适的HTTP状态码来表示操作的结果或错误情况。
4. 使用合适的数据格式（如JSON或XML）来传输数据。
5. 为资源的不同表示（如不同的语言或格式）提供适当的支持。
   设计RESTful API时需考虑资源的层级关系、行为和属性，以及URL、HTTP方法、状态码和数据格式的选择。

• JS中的原生对象（native objects）和宿主对象(host objects)

1. 原生对象:如Array\Date等
2. 宿主对象:浏览器定义的对象，Document等

• 自动化构建工具描述

1. Gulp、Gruntd等，支持页面监控、自动刷新、文件压缩和合并等功能，能更简洁更高质量的工作

第九部分

• web安全色

1. 00，33，66，99，CC或FF组合的值

• JSON规范

1. 数字不能前导零，不能省略浮点数的整数部分和小数点部分中的零
2. 字符串必须用双引号包裹，不能包含双引号(’’)，反斜线（\）和大部分转义字符\n \t \b

• 匿名函数

1. 匿名函数中的变量a引用的是函数作用域中的a变量，而不是全局作用域中的a变量。因此此处创建了一个闭包，闭包能记住函数声明时所处的作用域。

• 描述所理解的原型链

1. 原型链是JavaScript中用于实现继承和属性访问的机制。每个对象都有一个原型对象，而这些原型对象又有自己的原型对象，依次形成的链即为原型链。
2. 对象之间通过原型关联到一起，就好比用一条锁链将一个个对象连接在一起，在与各个对象挂钩后，最终形成一条原型链。
3. 在读取对象的一个属性时，会先在对象中查询自有属性，如果不存在，就沿着原型链向上搜索匹配的继承属性，直至找到或到达原型链顶端，才停止搜索

• 为什么倡导模块化开发

1. 将复杂的大型系统分解成一个个高内聚、低耦合的简单模块，并且每个模块都是独立的，用于完成特定的功能
2. 模块化后的系统变得更加可控、可维护、可扩展，程序代码也更简单直观，可读性更高，利于团队协作开发

• 什么是块级函数

1. 块级函数是指在JavaScript中使用大括号（{}）定义的函数声明。这种声明方式只在块级作用域内有效，而不是像普通函数声明那样在整个作用域范围内有效。

• 如何理解thenable

1. thenable指的是具有then方法的对象，即可以作为Promise对象被处理的对象。

• diff算法在执行时会有哪些策略

1. diff算法在执行时通常会有两种策略：深度优先策略和广度优先策略。这些策略影响了算法遍历树的方式和顺序。

• 如何让React组件不在页面上渲染HTML元素

1. 将组件的render方法返回null

• Redux有哪些缺点

1. Redux的一些缺点包括：繁琐的样板代码、需要理解和管理多个概念、容易导致过度工程化、容易导致状态树过于深层次等。

• 在npm中，包和模块有什么区别

1. 在npm中，包指的是一个软件包，通常包含了插件、工具或库等。而模块是软件包中的一部分，可以被引入到项目中并使用。

• 如何理解webpack中的tree Shaking

1. tree shaking是指通过静态分析来消除JavaScript上下文中的未使用的代码。在Webpack中，它用于移除代码中未被引用的导出。

• Vue响应式原理的理解

1. Vue响应式原理是通过Object.defineProperty或Proxy来追踪数据的变化，在数据变化时触发视图更新。

• 在Vue中，什么是插件？怎么使用？

1. Vue中的插件是一种提供全局功能或者添加全局方法的方式，可以扩展Vue的能力。
2. 要使用插件，需要先调用插件的 Vue.use() 方法，并在其中传入要使用的插件。

• 装饰器的执行顺序是怎么样的

1. 装饰器的执行顺序是从下往上执行，即从后往前执行。

• TCP三次握手的过程

1. 客户端向服务器发送SYN报文
2. 服务器收到SYN报文后，回复一个SYN+ACK报文
3. 客户端收到服务器的SYN+ACK报文后，回复一个ACK报文，完成三次握手

第十部分

• 当建立TCP连接时，通信两端（客户端和服务器）会先经历三次握手，然后才能建立TCP连接

1. SYN,SYN+ACK,ACK

• PING命令发送一个ICMPECHO包；接收ICMP echo（ICMP回声应答）

• 事件属性都是以on为前缀，用这种方式入脚本，便于在网页中实时调试，可立刻看到效果。缺点

• 将内联脚本（js代码放置在script标签之间）放在外部样式表之后，会延迟资源下载，只有当样式表下载完成并且内联脚本执行完毕时，后续资源（如代码中的图像）才能开始下载。因为内联脚本可能含有依赖与样式表中的css规则的代码

• @font-face允许使用在线字体，能将放置在服务器上的自定义字体用到页面中，装饰文本，这个字体可以是矢量图标

• TCP采用三次握手而不是两次握手

• Promise.resolve()的作用

1. 能接收一个thenable,并返回一个Promise实例

• ES6引入一个元属性new.target有何作用

• HTML和React对事件的处理有何不同

• npm常用应用场景

第十一部分

• 什么是MVVM模式

• 在React中，如何选择类组件和函数组件

1. 当组件需要关注状态或生命周期时，那么就可以选择类组件，否则就改用只关注用户界面展示的函数组件

• React中的合成事件是什么

• 能否在Reducer函数中派发一个Action

• 在npm中，什么是域级包

• Vue Router有几种路由模式

第十二部分

• 箭头函数中是否包含this?如包含,this从哪里继承

• 什么是反射

• vue和React有哪些不同

• 如何重用Vuex中的模块

第十三部分

• a元素除了可以用于导航外，还有什么其他功能

• 什么是Data URL

• 对 UDP的理解

1. UDP（User Datagram Protocol）是一种无连接的、不可靠的网络传输协议。它通过在IP数据报中添加源端口和目标端口来实现信息传输。UDP能够快速地传输数据，但由于其无连接特性，会出现丢包和乱序等问题。

• 函数声明和函数表达式有哪些区别

• 优化页面的性能

• 如何理解尾调用优化

• 介绍一下React组件中的state

• 什么是redux-devtools

• 列举出你所知的React支持的指针事件

• 如何开启Vuex的严格模式？它有什么作用

• 为什么要避免v-for和v-if两条指令

• 什么是版本控制系统

第十四部分

• 什么是react-windos

• 什么是redux-saga

第十五部分

• 对闭包的理解

1. 当一个函数能够访问和操作另一个函数作用域中的变量时，就构成一个闭包
2. 因为这些变量存在于该函数声明时所处的作用域。在一个函数中包裹另一个函数，或者一个匿名函数作为值传入另一个函数中，是创建闭包的常用方式
3. 最大特点是记住声明时所处的作用域，这样就能让函数再其它作用域中也能被成功调用，即使那个作用域消失，它还是能访问其中的变量，因为它保存了变量的引用

• 用过的性能分析工具

• React的优点

• 如何理解ES6新增的数据解构Map

• React组件的state和props有哪些区别

• 请描述一下React中的受控组件和非受控组件

• 什么是redux-thunk

• 请谈一下对Vuex的理解

• 循环里面setTimeOut

1. 匿名函数作为值传给定时器时，只要执行异步回调，就会创建一个闭包，在闭包中能够引用循环中的i变量，几个定时器都会在循环结束后再执行，所以为

第十六部分

• 什么是运营商劫持？有什么办法预防？

• 请谈一下Node.js的理解

1. 能在服务端运行JS的跨平台运行环境
2. 单线程运行、事件驱动(事件轮询)，非阻塞IO处理（异步输入和输出），常用于高并发的Web应用

• 什么是事件循环

1. 事件循环是指在JavaScript中，用来处理异步操作和事件响应的一种执行模型。通过事件循环，JavaScript可以处理诸如异步I/O、定时器、用户交互等操作，保持程序的非阻塞特性，并在需要时执行相应的回调函数。事件循环不断地从事件队列中取出事件并执行，直到队列为空，这样可以使得JavaScript在单线程的情况下完成多个操作。

• 什么是迭代器

1. 是一种用于迭代的对象，可有序地一次访问集合中的数据项
2. 3个方法 next、return、throw

• React有哪些局限

1. 只是一个视图库，而不是一个框架
2. 要和其他库(Redux、Router)配合才能完成各类需求
3. 原生浏览器不支持JSX，需要预先编译

• React.strict Mode是指什么

1. 是对其后代进行检查和警告的组件，它不会渲染出任何可见的DOM元素，适用于开发模块
2. 有助于识别不安全的生命周期，对果实的字符串类型的Refs发出警告，检测意外的副作用等

• 如何向Redux添加多个中间件

1. 提供中间件的applyMiddleware()函数

• Git分支的理解

1. Git分支是指在版本控制系统Git中，用来独立开发某个功能或修复某个问题的工作区。每个分支都包含了项目的完整历史记录，因此可以对项目进行并行开发、尝试新功能或修复bug，而不会影响主代码库。通过创建、切换、合并和删除分支，开发者可以在不同的代码状态之间自由切换，管理和协作开发。

• TypeScript是什么

1. 是JS的超集，一种面向对象的强类型语言，兼容现在和未来版本的JS，能编译成纯净的JS代码，支持任意的浏览器，环境和系统，并且是开源的

• 在React中，为什么不能直接更新state，而需要用setState函数

1. 在React中，为什么不能直接更新state，而需要用setState函数

第十七部分

• 什么是React Router

1. 是一套建立在React之上的路由系统，是实现单页面应用的关键，可动态加载适当的内容到页面中，减少服务器之间的通信次数，保持页面与URL之间的同步

第十八部分

• 怎么制作一套自己的UI库

• 请描述一下canvas元素

• 如何使用for-of循环

• 在React中，什么是代码拆分

1. 是指将应用程序的代码拆分成多个独立模块，在特定条件（如导航到某个页面或触发某个事件）下按需加载，从而减少首屏时间和所需加载的代码量。借助webpack这些构建工具能实现文件的打包和运行时的动态加载

• React组件的生命周期有哪几个阶段？每个阶段常用的回调函数有哪些

• 为什么React元素定义CSS类的属性用className而不是class

• 使用HTML5多媒体元素的优势

• webpack是什么

1. 是静态，模块打包器，此处的模块可以是任意文件，webpack可根据输入文件的依赖关系，打包输出浏览器可识别的js、css和HTML文件，并对图像做优化处理

第十九部分

• 如果要制作UI库需要考虑哪些方面

• function*用来做什么

1. 生成器在声明时，需要把星号加到function关键字与函数名之间

• 什么是Suspense组件

1. 当动态加载的组件还没完成时，就需要通过Suspense组件来显示备用内容

• 在React中，什么是无状态组件，有哪些优点

1. 组件的行为不依赖state，那么就称为无状态组件。代码量少，可读性高，易于测试，性能更好，还能完全避免使用this关键字

• 如何在React中使用内联样式

1. 小驼峰的方式命名

• 在React Router中，history对象的push()和replace()两个方法各有什么作用

1. history:浏览过的页面组织成有序的堆栈
2. push:在栈顶添加一条新的页面记录
3. replace:替换当前页面的记录

• 在Vue中，组件的命名方式有哪些

1. 连字符分隔式:btn-custom
2. 大驼峰式：BtnCustom

• 在TS中，readonly和const两个关键字有什么区别

1. 当需要让属性只读时：readonly
2. 当要让变量只读时:const

• 什么是Fiddler

1. Web调试捉包工具

• Object.assign()有什么功能

1. 将多个对象合并成一个，第一个参数是目标对象，剩余的参数都是源对象，返回值是最终的目标对象

第二十部分

• 有什么方法可以防止Cookie被盗取

• 什么是前端框架

1. 制定统一的规范，提供一套支撑解构，以这套结构为基础，根据具体问题进行扩展，快速构建完整的解决方案
2. 前端开发需要考虑灵活性、移植性、兼容性和可维护性，并且尽可能提供用户体验。
3. 前端框架省时省力，是好的选择

• 什么是Promise模式

• JS单元测试工具

• yield关键字由什么作用

• 什么是JSX

1. JSX既不是字符串，也不是HTML，而是一种类似XML，用于描述用户界面的JS扩展语法

• 在Vue中，组件的props能校验哪些值类型

• React中如何校验Props的属性