前端面试常用理论知识

最新推荐文章于 2024-02-07 10:05:00 发布

VIP文章兔杍

最新推荐文章于 2024-02-07 10:05:00 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_36623058/article/details/81637671

版权

可以参考https://yuchengkai.cn/docs/zh/frontend

纯函数
给定相同的输入，就一定会有相同的输出
运行过程中没有任何副作用
没有额外的状态依赖

** react的setstate的理解**
可以 MobX 的库来管理部分状态，
setState是异步的，第二个参数是 state 导致的页面变化完成后的回调，等价于componentDidUpdate

会经过的生命周期
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate

可以操作setstate的生命周期
constructor: 初始化的时候，在这里进行保存。直接对state进行赋值
componentWillReceiveProps: props发生变化的时候，在这里进行保存。使用setState
不能在.render componentWillUpdate里修改

componentWillReceiveProps(nextProps)生命周期中
可以在子组件的render函数执行前获取新的props，从而更新子组件自己的state。
这样的好处是，可以将数据请求放在这里进行执行，需要传的参数则从componentWillReceiveProps(nextProps)中获取。而不必将所有的请求都放在父组件中。于是该请求只会在该组件渲染时才会发出，从而减轻请求负担。

redux的中间件
流程
使用通过reducer创建出来的Store发起一个Action，reducer会执行相应的更新state的方法，每当state更新之后，view会根据state做出相应的变化!

action的派发和被reducer处理都是由store控制的，所以中间件的注册应该在store的代码里
redux-thunk中间件的认识
redux-thunk中间件可以让action创建函数先不返回一个action对象，而是返回一个函数，函数传递两个参数(dispatch,getState),在函数体内进行业务逻辑的封装

store.dispatch方法只能接收一个普通的action对象作为参数，当我们加入了ReduxThunk这个中间件之后，store.dispatch还可以接收一个方法作为参数，这个方法会接收到两个参数，第一个是dispatch，等同于store.dispatch，第二个是getState，等同于store.getState，

实际运用
一个userId来调用后端接口获取这个用户的详细信息并存储到Redux store中

一.jsonp为什么不是真的ajax
1 ajax的核心是：通过XmlHttpRequest获取非本页内容，
jsonp的核心：动态添加script标签来调用服务器提供的js脚本。
2　ajax也不一定非要用json格式来传递数据　
.jsonp是一种方式或者说非强制性的协议
3 .jsonp只支持get请求，ajax支持get和post请求
二模块化开发
web开发中将项目的实现划分为许多模块，模块其实就是将功能相关的代码封装在一起，方便维护，重用；模块之间通过API进行重组。
前端模块规范有三种：CommonJs,AMD和CMD。
1.CommonJs用在服务器端，AMD和CMD用在浏览器环境
2.AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
AMD:提前执行（异步加载：依赖先执行）+延迟执行
CMD:延迟执行（运行到需加载，根据顺序执行）

三单页面多页面的区别

分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起；
减轻服务器压力，服务器只用出数据就可以，不用管展示逻辑和页面合成，吞吐能力会提高几倍；
同一套后端程序代码，不用修改就可以用于Web界面、手机、平板等多种客户端；
在URL中采用#号来作为当前视图的地址,改变#号后的参数，页面并不会重载。
4. 缺点
除了优点同时还有一些缺点；例如SEO问题，现在可以通过Prerender等技术解决一部分；前进、后退、地址栏等，需要程序进行管理；书签，需要程序来提供支持；

三脚手架
"vue": “^2.5.2”,
“vue-router”: “^3.0.1”
1、安装vue脚手架（全局安装，只需一次n）
npm install --global vue-cli
2、项目构建
官方模版 vue init webpack my-project（项目名字）（tips：代码语法检查较麻烦）
推荐 vue init webpack-simple my-project（项目名字）
根据提示进行依赖安装（cd 项目 npm install ）就会出现项目文件夹先看package.json文件
项目启动 npm run dev
项目打包 npm run build
react
这里写图片描述
node
用expross创建项目
Expross –e 我的项目

四webpack原理
webpack核心概念
entry 一个可执行模块或库的入口文件。
chunk 多个文件组成的一个代码块，例如把一个可执行模块和它所有依赖的模块组合和一个 chunk 这体现了webpack的打包机制。
loader 文件转换器，例如把es6转换为es5，scss转换为css。
plugin 插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。
webpack构建流程
解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
在解析文件递归的过程中根据文件类型和loader配置找出合适的loader用来对文件进行转换。
递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
输出所有chunk到文件系统。

四 js严格strict模式

1，对象直接量中定义同名属性会抛出语法错误
2 函数形参存在同名的，抛出错误；
3 eval和arguments当做关键字，它们不能被赋值和用作变量声明
4 函数作用域不在提升，块级作用域
5 变量先定义才能使用

五常用obj对象的方法
Object.getPrototypeOf
Object.create
Object.getOwnPropertyNames
Object.defineProperty
六深拷贝浅拷贝
拷贝就把父对象的属性全部拷贝给子对象
浅拷贝 只拷贝了基本的数据类型
通过Object.assign 但有个缺点如果拷贝的父对象的属性等于一个数组或者另一个对象，拷贝的是内存地址，父对象可能被串改
深拷贝 能搞实现真正意义的数组和对象的拷贝
通过 JSON.parse(JSON.stringify(object)) 拷贝的的栈区的地址只要递归调用‘浅拷贝就行’

七 es6特性
ECMAScript6在保证向下兼容的前提下，提供大量新特性
1.块级作用域关键字let, 常量const
2.对象字面量的属性赋值简写（property value shorthand）
3.赋值解构
4.函数参数 - 默认值、参数打包、数组展开（Default 、Rest 、Spread）
5.箭头函数 Arrow functions
6.字符串模板 Template strings
7.Class
和es5的区别（简单点）
1 ES6中的let命令，声明变量，用法和var差不多，但是let是为JavaScript新增了块级作用域，ES5中是没有块级作用域的，并且var有变量提升的概念，但是在let中，
2 使用的变量一定要进行声明；
3 ES6中变量的结构赋值，比如：var [a,b,c] = [0,1,2];
4 ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念，听起来和Java中的面向对象编程的语法有些像，但是二者是不一样的。
5 ES6中的函数定义也不再使用关键字function，而是利用了=>来进行定义；
6 ES6中可以设置默认函数参数，如function A（x,y=9）{};
八 sass和less的区别
Sass Less是动态样式语言，是对css的拓展语言；可以定义变量和函数，继承，其目的是使得CSS开发更灵活和更强大
1.编译环境不一样
Sass由ruby语言开发，安装需要Ruby环境，Less是需要引入less.js来处理Less代码输出css到浏览器，
2.变量符不一样，
Less是@，而Scss是$，
3变量的作用域也不一样；
sass没有全局变量，作用域满足就近原则，而less的作用域先从局部查找，没有在往上查找
九 git和svn的区别
1git是分布式管理，有多个服务器，svn是集中式，所有数据集中一个服务器上
2GIT把内容按元数据方式存储，而SVN是按文件
3.GIT没有一个全局的版本号，而SVN有
4.GIT的内容完整性要优于SVN
十面向对象和面向过程（类和对象）的区别
1对象是属性的集合，类是一组有相同特性和相同行为的对象，具有相同属性和相同方法的对象的抽象，对象是类的实例化，类的对象的抽象。
2 面向对象是一种抽象度更高的编程方法，目标是使模块的抽象度更高，目的是可复用。宏观方面思考问题面向对象三大特性：继承，封装，多态。
继承：一个对象的属性能访问另一个对象的属性和方法
封装：把相同的属性和方法抽成放在一起，留一个接口方便调用
多态：一个方法可以有多重方式重载
3 面向过程是一种直接的编程方法，它是按照编程语言的思路考虑问题。通过顺序执行一组语句来实现一个功能，这些语句的执行过程就是整个程序，从细节方面思考问题。
4对象的创建方式有对象字面量，工厂方式，原型方式，构造函数，混合模式。
十原型和原型链
1创建的每个函数都有一个prototype属性，prototype是一个指针，指向一个对象，这个对象包含了实例所共享的属性和方法
2 创建每个对象都有一个__pro__属性，用于指向创建它的函数对象的原型对象的prototype，
3 原型链是调用该方法时候，先从实例上查找，如果没有在从原型上查找，直道Object.prototype.__proto__为null
继承
Call/Apply方法改变函数上下文实现继承（该种方式不能继承原型链，若想继承原型链，则采用混合模式）
**实现原理：**改变函数内部的函数上下文this，使它指向传入函数的具体对象

原型链实现继承
*** 实现原理：使子类原型对象指向父类的实例以实现继承，即重写类的原型，弊端是不能直接实现多继承
es6 class继承
实现原理：
ES6子类继承父类，extends关键字实现继承，必须在constructor函数的第一行调用super();之后才能使用关键字this，这是因为子类中没有自己的this对象，而是继承父类的this对象，然后才能为这个this添加相应的属性和方法。
特点：比通过修改原型链实现继承，要清晰和方便很多。
十数组去重

十一 react的理解
react是为了解决
1数据绑定的时候，大量操作真实dom，性能成本太高
2网站数据流向太混乱，不好控制。
3react是个专注view层的框架
4 将注意力放在核心库上，有丰富的插件和拓展库
5虚拟dom，diff算法和组件化
虚拟dom
在js和真实的dom中添加个缓冲层，用js对象模拟dom节点，生成dom，当数据更新时候，再用js对象模拟dom节点，比较新旧两个dom数的差异，更新差异部分，提高性能
diff算法
1 dom的查找
传的算法只能查找到 O(n^3) ，react利用个强大的技巧, 可以查找到 O(n)
2列表的比较为每个列表的子元素增加个key属性，方便标记
3组件的匹配，react只会匹配相同类型的组件、
4合并操作当数据发生变回，打上个标记dirty，当数据更新，只重新绘制有标记的部分
5选择性的子树渲染通过重写shouldComponentUpdate来决定是否更新，提高性能
组件化
react的核心是组件化，组件是将相同的数据和逻辑封装，特点高内聚和低耦合
高内聚：组件只做一个功能低耦合组件和组件之间关联度很低
可以提高代码的复用率，降低测试难度，提高开发效率。
react的路由实现原理
本质是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新。目前单页面使用的路由就只有两种实现方式：
hash 模式
history 模式**
通过link 匹配路径，router history管理路由路径，route设置具体的路由路径，已经该路径要加载的组件，同时还提供了indexRoute方便我们设置初始加载的组件试图。

十二 vue的理解
vue是一款构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，同时也提供了虚拟dom和组件化
对比
这里写图片描述

同时也提供了声明周期函数；
vue的路由
Vue也提供了路由操作，通过router－link设置路径，path进行路由路径配置，components进行组件模版加载。

十三react和vue的路由传参
React params传参 通过 this.props.match.params来接受事件跳转都是通过
this.props.history.pus(’/path’)
这里写图片描述
React query传参 通过 this.props.location.query来接受