面试总结-记录用

======================赫柒科技 ★.css优化方法 1.css压缩：将写好的css进行打包，可以减少很多的体积。 2.css单一样式 3.减少@import：使用link,因为link在页面加载时一起加载，@import是等待页面加载完成之后再进行加载。 4.抽离样式 5.样式内容分离

★.实现评价上下滚动的方法 未解

★.闭包 能够访问其他函数内部变量的函数，被称为闭包. 好处：控制变量的作用域，常驻内存 坏处：内存泄漏，给变量设置null

======================远途 ★.项目中的loacastorage存储在哪里 保存在本地文件上

★.自定义hooks的意义 1.提取复用功能 2.自定义函数定位偏向实现功能，而组件偏向于界面和业务逻辑 3. 组件复用的提升

★.登录时code怎么传给后端 wx.request({ url:地址, method:"post", data:{ code:res.code }}

★.节流代码口述 节流：只执行一次（两个时间比） let previous = 0; return function throttled(...args) { const now = +new Date(); if (now - previous > wait) { fn.apply(this, args); previous = now; } } 防抖：只执行最后一次 let timer = null return function debounced(...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, ...args) timer = null },wait) } ★.canvas流程 未解决

★.优化项目的方法 1.代码层面：避免内存泄漏、封装组件、首屏加载优化、路由懒加载 2.css:避免使用内联、写公共样式 3.webpack：对图片进行压缩、配置loader 4.框架：react中用优化的hooks、或者使用react的按需加载：React.lazy，Loadable Components这个库。 5.其他：CDN引入第三方资源、开启服务器 Gzip

★.支付流程 未解决

★.跨域反向代理后端怎么实现的 未解决

======================中原消费金融（郑州） ★.ts语法糖

★.js事件分发机制 js执行时分为：执行队列和事件队列 同步任务在主线程上执行，形成一个执行队列，而异步则先放到事件队列。事件队列又分为宏任务、与微任务。

★.taro的评价 可多端扩展、打包慢

★.css权重 element选择器：div、h1、img、a、span > class（类）选择器 > id选择器 > * 通配符选择器 > 群组选择器:ul li > 伪类选择器:a:link >

★.Dom和Bom 1.定义： DOM 是文档对象模型，处理网页内容的方法和接口 BOM 是浏览器对象模型，提供与浏览器交互的方法和接口 2.区域： DOM区域是document BOM区域是window 3.BOM包含了DOM(对象)

★.ajax工作流程 (1)创建xhr对象(小黄人对象) let xhr=new XMLHttpRequest() (2)设置请求方法和地址 xhr.open(请求方法,请求地址) (3)发送请求 xhr.send() (4)注册响应完成事件 xhr.οnlοad=function(){ xhr.responseText }

======================伯牙安迅（郑州） ★.css性能优化的方法 1.css压缩：将写好的css进行打包，可以减少很多的体积。 2.css单一样式 3.减少@import：使用link,因为link在页面加载时一起加载，@import是等待页面加载完成之后再进行加载。 4.抽离样式 5.样式内容分离

★.原型原型链 原型：JS声明构造函数(用来实例化对象的函数)时，会在内存中创建一个对应的对象，这个对象就是原函数的原型。构造函数默认有一个prototype属性，prototype的值指向函数的原型。同时原型中也有一个constructor属性，constructor的值指向函数对象。

原型链：在实例化的对象中访问一个属性时，首先会在该对象内部(自身属性)寻找，如找不到，则会向其__proto__指向的原型中寻找，如仍找不到，则继续向原型中__proto__指向的上级原型中寻找，直至找到或Object.prototype.__proto__为止（值为null），这种链状过程即为原型链。

★.除了get和post还有哪些 option：测试服务器 delete:请求服务器删除Request-URI所标识的资源，向指定资源位置上传其最新内容。

★.http状态码 100接受的请求正在处理 200(成功)服务器已成功处理了请求 301永久性重定向，表示资源已被分配了新的 URL 302临时性重定向，表示资源临时被分配了新的 URL 303表示资源存在另一个URL，用GET方法获取资源 304(未修改)自从上次请求后，请求网页未修改过。服务器返回此响应时，不会返回网页内容 400(错误请求)服务器不理解请求的语法 401表示发送的请求需要有通过HTTP认证的认证信息 403(禁止)服务器拒绝请求 404(未找到)服务器找不到请求网页 500，(服务器内部错误)服务器遇到错误，无法完成请求 503，表示服务器处于停机维护或超负载，无法处理请求

★.闭包 能够访问其他函数内部变量的函数，被称为闭包. 好处：控制变量的作用域，常驻内存 坏处：内存使用量过大，可以给变量设置null

★.防抖节流 节流：只执行一次（两个时间比） let previous = 0; return function throttled(...args) { const now = +new Date(); if (now - previous > wait) { fn.apply(this, args); previous = now; } } 防抖：只执行最后一次 let timer = null return function debounced(...args) { if (timer) clearTimeout(timer) timer = setTimeout(() => { fn.apply(this, ...args) timer = null },wait) } ★.es6新特性 1.块级作用域let const 2.class super extends 3.箭头函数 4.解构赋值 5.扩展运算符 6.for of遍历（数组） 7.promise/async、await 8.generator 9.模块化 10.map和set 11.proxy

★.webpack里loader有什么 1.file-loader用于图片资源的打包配置 2.url-loader它还比file-loader多一个limit配置项，这个limit配置就是配置图片资源的大小的 3.sass-loader将该css文件翻译成纯css语法 4.css-loader把这些依赖的css文件合并成一个css文件。 5.style-loader把合并后的css文件挂载到页面的head中来渲染出页面的样式。 6.bable-loader把ES6转化成ES5

★.表单提交不刷新的方法 基于iframe框架实现

★.真实dom和虚拟dom 树 更新 js对象 整合 缓存 一次性 vue中 render之后 数据-render-新旧比对-按需更新 原理：为了解决浏览器性能问题，利用原生js对象描述一个DOM节点，相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM。

★.原型：想得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的隐式原型__proto__（也就是它的构造函数的显式原型prototype）中寻找。

======================帷幄匠心 ★.自定义hooks讲一下？ ★.原生事件和react事件的区别？ ★.setTimeout做成promise形式？ ★.useEffect的执行顺序？ ★.useMemo和usecallback? ★.useState和useRef能代替使用吗？ 1.useState值的更新会触发组件重新渲染，而useRef的current不会出发重渲染。 2.useRef特性：可变的ref对象，持久化。useState：决定视图图层渲染。 3.useState的值在每个rernder中都是独立存在的。而useRef.current则更像是相对于render函数的一个全局变量，每次他会保持render的最新状态。

======================数字郑州 ★.父子组件的刷新顺序 ★.useEffect的内部执行顺序 给没有生命周期的组件，添加结束渲染的信号。在render之后执行。 ★.diff算法？ ★.pc端后退怎么携带数据 keep-live ★.类组件中父子组件的执行顺序 ★.父子传参方式 ★.渲染时key的作用 ★.项目中的难点

======================沃土教育 webpack提速 ★.缓存loader:cacheDirectory开启缓存，babel-loader就会把每次编译写进硬盘放到目录里 ★.happypack提供的plugin给loader做一层包装，向外暴露一个id ★.深度查找对象的类型 Object.prototype.toString.call

======================美的 ★.ajax封装接口 ★.axios封装接口 ★.数组去重 ES6的set方法 indexOf()返回某个指定的字符串值在字符串中首次出现的位置 filter创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 双层for循环:第一层遍历,进行标记,如果后面有重复的就跳过,没有重复的，添加到数组中 ★.useRef拿子组件的值怎么拿

======================数据管理 ★.父子组件传值 ★.渲染顺序 ★.虚拟Dom ★.key改变后刷新的流程 ★.原型原型链 ★.promise.all ★.模块化common.js和require的区别 ★.事件循环机制

======================北京中金云诺科技 ★.介绍项目 ★.redux的概念 ★.react-hooks列举 useState(给函数组件添加状态) useEffect:给函数组件添加结束渲染的信号(render后执行) uselayoutEffect:给函数组件添加结束渲染的信号（dom更新后执行） useMemo:优化函数（缓存值）例：监听组件状态、订单提交 useCallback:优化函数（缓存函数）例：编辑更新页面 useref:用来获取DOM元素对象，使用对象.current获取：返回一个可变的 ref 对象，该对象只有个 current 属性，初始值为传入的参数( null) useContent：向多个子组件传值 useReducer状态管理 ★.项目中的难点 ★.项目中的亮点 ★.usecallback的实际用法： 因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能

======================华瀛科技 ★.盒子模型： padding（内边距）margin（外边距）border（边框）内容（content） 而在怪异盒模型中：一个块的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。 两种模式的转换（通过box-sizing的方法） ★.

======================杭州星辰 ★.react为什么要升级 class-hooks class继承自js的类，必须去理解 JavaScript 中 this 的工作方式，使用 Hook从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。 ★.父组件刷新子组件不刷新 父组件是类组件 - 子组件是类组件：PureComponent组件会自动比对传递过来的props，如果 props 没有发生更改，当前组件不更新。 父组件是类组件 - 子组件是函数组件：React.memo ★.webpack里面的东西改变了是否要重新打包 可以不重新打包，方法如下： 在static文件夹新建config.json文件（以后用于修改的配置文件）将想要的数据放入其中，安装依赖，引入依赖，（只针对H5） ★.布局方式： 常用的四种方式有display，浮动布局，定位布局和伸缩盒布局。 display布局方式：有三个属性值分别为inline，block，inline-block。 浮动布局方式：float：left/right 定位布局：static静态布局、absolute绝对定位、relative相对定位 伸缩盒布局：display:flex。 ★.去重数组： ES6的set方法 indexOf()返回某个指定的字符串值在字符串中首次出现的位置 filter创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素 双层for循环:第一层遍历,进行标记,如果后面有重复的就跳过,没有重复的，添加到数组中 ★.settimeout和promise谁先执行: promise是异步里面的微任务,而setTimeout()是异步的宏任务,微任务优先级高于宏任务。 ★.深拷贝的写法: json.parse和stringify ★.fiber的理解: ★.redux的理解： 和vuex一样都来自flux思想，数据和逻辑单向流动。由三部分组成：dispatch负责事件分发、store负责保存数据响应事件更新数据、view负责订阅store的数据并渲染。 redux的特点：1单一数据源，整个应用的state保存在store中。2状态只读，如果修改需要dispatch=》store.reducer 3状态的修改由纯函数完成 扩展vuex... vuex：由四部分组成：state、Muataions所有的状态更新的唯一途径(必须同步)、action负责处理异步事务提交一个或者多个mutation、getter负责监测state中的值。 ★.为什么Mutation不能异步？ 每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，否则无法被devtools所监测。 ★.props和state的区别 props：从组件外传到组件内的值，只能读取，不能修改 state：是组件内置对象，可以修改其属性值，并且是动态修改，组件会根据state的值变化而刷新组件变化的部分. ★.react废弃了哪些钩子? componentWillMount:componentWillMount结束后，render会立即被触发，但此时其中的异步请求结果可能还未返回。一旦结果返回就会重新render。和componentDidMount没什么区别，so componentWillUpdate：在 compoenntWillReceiveProps 和 compoentWillUpdate 里滥用setState 将导致重复渲染死循环 componentWillReceiveProps： ★.解决seo: ssr服务端渲染返回 ★：redux刷新会丢失数据，你们怎么做的 localStorage ★.输入url发生了什么： DNS服务器请求解析该 URL 中的域名所对应的 IP 地址 和服务器建立TCP连接 请求报文作为 TCP 三次握手 服务器对浏览器请求作出响应 释放 TCP连接渲染页面

======================中核 ★.类组件和函数组件的区别 ★.settimeout在获取useState定义的参数时，无法获取到最新的 ---bug ：不同渲染之间无法共享state状态值，用useRef解决 ★.useEffect中return里面单独一个值进行更新 怎么操作 ★.复合事件 ★.事件绑定原理 ★.组件通信 子孙组件通信 ★.this指向问题 和箭头函数的this指向 ★.原型原型链 ★.柯里化 ★.js模式 ★.promise里面的方法 ★.优化项目的 ★.浏览器存储 ★.垃圾回收机制 ★.http的概念 ★.tcp和udp的区别 ★.setTimeout和react的执行顺序 ★.检验数据类型 ★.基础数据类型 ★.react最近更新的动态 ★.改变this指向 ★.手机适配 rem和em ★.跨域 ★.h5的新特性 ★.解决CSS刷新卡顿的问题 ★.webpack和grunt的区别 ★.git命令 ★.http和https的端口号：8080/443 ★.强缓存和协商缓存： 区别是强缓存不会发请求，协商缓存会发请求。

======================牧原 ★.react组件通信方式 ★.闭包原理 ★.原型原型链 ★.基础数据类型 ★.0.1+0.2 ★.react的useeffect usecallback ★.事件循环机制 ★.ts泛型： 泛型只存在于编译期间 泛型在语法中的特征就是尖括号 泛型的核心原理：利用Object引用可以指向任意类型的对象 ★.for in 和for of的区别 ★.useContext需要规避的 ★.纯函数 ★.jsx可以不用吗

======================趣链 ★.判断一个对象是否为空？ var a= if(a); 将对象转行成JSON字符串形式，判断字符串是否为‘{}’用JSON.stringify(g) == {}; for...in循环； ★、401和403的区别 重点不同:401着重于认证,403着重于授权 ★.盒子模型 标准的盒模型中一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width). 在怪异盒模型中：一个块的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。 ★.受控组件和非受控组件： 表单元素依赖于状态，表单元素需要默认值实时映射到状态的时候，就是受控组件 受控组件更新state的流程 1、可以通过初始state中设置表单的默认值 2、每当表单的值发生变化时，调用onChange事件处理器 3、事件处理器通过事件对象event拿到改变后的状态，并更新组件的state 4、通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

非受控组件在底层实现时是在其内部维护了自己的状态state，这样表现出用户输入任何值都能反应到元素上。 在虚拟DOM节点上声明一个ref属性，并且将创建好的引用赋值给这个ref属性。

非受控组件： 用户输入A => input 中显示A 受控组件： 用户输入A => 触发onChange事件 => handleChange 中设置 state.name = “A” => 渲染input使他的value变成A

受控组件的两个要点： 组件的value属性与React中的状态绑定 组件内声明了onChange事件处理value的变化

======================博为智能 ★.vue路由方式 hash模式(vue-router默认模式URL后面带#) history模式(通过mode: history’来改变为history模式) ★.生命周期 ★.开发流程

======================探迹信息 放鸽子了

======================工福科技 ★布局方式 ★顶部底部固定布局 ★登录流程 ★生命周期 ★开发流程

======================美云数据 ★.动态路由： ★、定义一个store对象，这个是vue里面的全局对象，刷新后值会丢失 ★、登录后把数据库的菜单调用router.addRoute加到路由中，然后把菜单存本地localstore ★、router.beforeEach 里面判断是否登录，且store对象里面的值是否为空，然后直接重新去localstore再绑定一次路由，调用next({ ...to, replace: true });重来即可

======================彩讯股份 ★.小程序、H5的前端自适应 用小程序自身的单位rpx设置长宽、或者用vw和vh（插件postcss-px-to-viewport）、或者用css3的@media标签

★.rpx的相关 鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配

★.rem的相关 rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）

★.管理系统基于vue框架，架构权限校验 大：需要通过路由跳转的模块，这时需要进行路由拦截 小：一个按钮，如果没有特定权限，那么这个按钮就不显示 获取到权限列表后，将权限信息存储在 vuex store 中，并且使用getter函数，对于是否可以使用该权限进行判断，这样一旦权限数据更新，前端权限限制功能点会自动修改，从而做到权限的实时性 1.登录 路由表 2.path和本地路由匹配-登录者可访问的路由 3.beforeEach

★.每个人登录看到的东西不同 怎么做？ Token 判断用户接口权限 1.调用登录方法中的后台传过来的token 2.将token存储到localstorage中 3.在request interceptors中设置token

★.异步方法的使用、同步怎么控制先后顺序 异步：回调函数、promise、async/await、generator、事件发布订阅 同步（Promise）>异步（微任务（process.nextTick、Promise.then、Promise.catch、resolve、reject）>宏任务（setTimeout、setInterval））

★.vue组件传参 父-子 ：props 子-父 ：this.$emit 兄弟 ：bus组件 全局通信：vuex 孙-访问-父 ：private inject 子-访问-父：$root（根）、$parent（父） 父-访问-子：$ref 想在子组件改变父组件：.sync---update ★数组转字符串join() ★字符串转数组split() ★ts定义类 class Web extends Person{ constructor(name:string){ super(name); /*初始化父类的构造函数*/ } } ★适配屏幕百分比怎么解决 ★git命令和怎么用 ★ts语法的详细使用

======================邦盛科技 ★promise 解决异步、回调地狱、微任务同步、三个状态、resolve回调, reject、.then链式调用 ★箭头函数和普通函数的区别 this指向：普通函数this指向调用它的对象，箭头函数箭头函数没有自己的this, 它的this是继承而来;默认指向在定义它时所处的对象(宿主对象)，此处指父级作用域 函数：普通函数可以有匿名函数，也可以有具名函数，箭头函数全都是匿名函数。 构造函数：普通函数可以用于构造函数，以此创建对象实例，箭头函数不能用于构造函数。 arguments：每一个普通函数调用后都具有一个arguments 对象，用来存储实际传递的参数，箭头函数不具有 arguments 对象。 其他:箭头函数不具有 prototype 原型对象，不具有 super，不具有 new.target ★匿名函数和箭头函数的区别 this:匿名函数具有全局性指向是windows,箭头函数this指向最近的外层作用域中的this所指对象 匿名函数不能在定义函数之前去调用，会提示未调用 ★call apply bind的区别 call()接受的是一个参数列表。立即执行。如果不传参数，或者第一个参数是null或nudefined，this都指向window apply()接受的是一个包含多个参数的数组。立即执行 bind（）传参形式和call一样。等待执行 ★ES6新增的 箭头函数 let const 解构赋值 promise方法 symbol：Symbol函数前不能使用new命令 展开运算符 ★常用的布局方式 ★项目优化 ★vue通信

★Proxy和Object.defineProperty Proxy可以监听到数组的变化，Proxy对新增属性也可以监听，Object.defineProperty不可。 Object.defineProperty监听的是对象的每个属性，而Proxy监听的是对象本身 使用Object.defineProperty需要遍历对象的每个属性，而Proxy则直接代理对象，不需要遍历操作

★.垂直居中水平居中的方法？ 1.父容器设置display: flex;justify-content：center;align-items:center; 2.父容器设置display: flex;给子盒子设置margin: auto实现居中。 3.父容器设置position: relative；子元素设置 position: absolute; left: 50%; top: 50%; transfrom: translate(-50%, -50%); 4.父容器设置 display: grid; justify-content：center;align-items:center; 5.父容器设置display: grid;给子盒子设置margin: auto实现居中。 6.父容器设置line-height等于容器的高度；给子元素设置display: inline-block；此种方式适合给文本设置水平垂直居中 7.父容器设置position: relative；子元素设置 position: absolute 设置固定宽度和高度，top、left、bottom、right都设置为0; margin设置为auto。

★节流和防抖 节流：只执行一次 初始-调用事件对比 防抖：执行最后一次 1.防抖：多次触发同一个函数，如果n秒内高频事件再次被触发，则重新计算时间 只执行最后一次 节流：多次触发同一个函数，同一时间段内只执行一次

★图片懒加载的原理 在HTML中，图片是由 <img> 标签引入的，是由其中的src属性去请求的。所以实现懒加载的关键就是，在图片没有进入可视区的时候，不给src属性赋值，等图片进入到了可视区，再给src属性赋值，去请求图片。

★自定义指令

★插槽 ★v-if和v-for的优先级 ★后端返五千条数据怎么处理 ★rem和em的区别 都是相对长度单位，em相对于父元素，rem相对于根元素 ★chrome设置的最小字体大小为12px 通常css3中的-webkit-transform:scale(num) 现在ft8父级样式来定位需要变换的元素的"流"，ft8 em来设置变换 <td class=" ft8" title="289"><em>289</em></td> .ft8 { font-size: 8px; font-family: Arial; } .ft8 em { display: inline-block; width: 10px; height: 10px; -webkit-transform: scale(0.7,0.7); } ★vw和vh vw和vh总是针对于视口来说 ★keep-alive多出来的两个钩子函数 keep-alive：作用缓存不活动的组件实例，在组件切换过程中将状态保留在内存中，防止重复渲染DOM activated触发时机：keep-alive组件激活时使用； deactivated触发时机：keep-alive组件停用时调用； ★放在created还是mounted中？ 放在created中，因为created是在模板渲染成html前调用，mounted是在模板渲染成html后调用可能导致页面闪屏问题，如果在页面挂载完之前请求完成的话就不会看到闪屏了 ★中断数据请求 Axios提供的CancelToken构造函数来创建一个简单的post请求 ★splice和slice的区别 1.splice会改变原数组，通过删除或者替换现有元素或者原地添加新的元素来修改数组， 三个参数： start，指定修改的开始位置 deleteCount 可选参数，表述要移除的数组元素的个数 item1，item2，可选，表示要添加进数组的元素 2.slice返回由start和end决定的一个浅拷贝的新数组 总结： splice改变原数组，slice不改变原数组。 splice除了可以删除之外，还可以插入。 splice可传入3个参数，slice接受2个参数。 ★深拷贝的方法： JSON.stringify()将对象转换为json字符串形式 JSON.parse()将转换而来的字符串转换为原生js对象 ★浅拷贝的方法： Object.assign JS对象的合并 concat() slice() ★map和set区别 Map是键值对，Set是值的集合 Map可以通过get方法获取值，而set不能因为它只有值 ★js数组中会改变原数组的方法 splice() sort() reverse（） splite() push() pop() shift() ★vue中data为什么是函数不是对象 如果组件中的data是对象，那么作用域没有隔离 组件中的data值会相互影响

★flex 左边三分之二 右边三分之一 1.左边两个定宽 右边auto 2.flex:2 flex:1;

★flex的属性？ 1.flex-direction：决定主轴的方向（即项目的排列方向）。 row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 column-reverse：主轴为垂直方向，起点在下沿。 2.flex-wrap：决定元素是否换行。 nowrap（默认）：不换行。 wrap：换行，第一行在上方 wrap-reverse：换行，第一行在下方 3.flex-flow：是上面两个的缩写。 row nowrap 4.justify-content：定义了项目在主轴上的对齐方式。 flex-start（默认值）：左对齐 flex-end：右对齐 center： 居中 space-between：两端对齐，项目之间的间隔都相等。 space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 5.align-items：定义项目在交叉轴上如何对齐。 flex-start：交叉轴的起点对齐。 flex-end：交叉轴的终点对齐。 center：交叉轴的中点对齐。 baseline: 项目的第一行文字的基线对齐。 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 6.align-content：多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 flex-start：与交叉轴的起点对齐。 flex-end：与交叉轴的终点对齐。 center：与交叉轴的中点对齐。 space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。 space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。 stretch（默认值）：轴线占满整个交叉轴。

★flex:0 1 auto;代表了什么？ flex-grow：定义了项目的放大比例，默认为0，即使存在剩余空间，也不放大。 flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 flex-basis：定义在分配多余空间之前，项目占据的主轴空间。

★不采用第三个值 解构赋值原理 ES6变量的解构赋值本质上是“模式匹配”,只要等号两边的模式相同，左边的变量就会被赋予匹配的右边的值，如果匹配不成功变量的值就等于undefined

★浏览器到服务器的工作流程 1.DNS服务器请求解析该 URL 中的域名所对应的 IP 地址 2.和服务器建立TCP连接 3.请求报文作为 TCP 三次握手 4.服务器对浏览器请求作出响应 5.释放 TCP连接渲染页面

======================南京日冲 ★10000条数据不卡顿 虚拟列表 document.createDocumentFragment()创建虚拟的节点对象 window.requestAnimationFrame（）方法可以统一将虚拟节点添加到页面，这会减少页面渲染DOM的次数。

★项目优化 1.代码层面：避免内存泄漏、封装组件、首屏加载优化、路由懒加载 2.css:避免使用内联、写公共样式 3.webpack：对图片进行压缩、配置loader 4.框架：react中用优化的hooks 5.其他：CDN加速、开启服务器 Gzip

★路由懒加载 ES6的import() 指定相同的webpackChunkName，会合并打包成一个js文件

★手机抓包工具 vconsole

★vue的源码

★css一行三个块，不设置宽高，每块中的字数超出隐藏 overflow：hidden；--溢出隐藏 white-space:nowrap; --文本不换行，文本会继续在一行显示 text-overflow：ellipsis; --这时用此属性才能出现省略号

★taro编译的原理 1.模板转行 2.逻辑转换:Taro定制了统一的 API 标准,@tarojs/taro是API适配的统一入口，编译时分平台替换 taro通过模版转换和逻辑转换，实现了跨平台多端构建小程序。 3、限制：

★虚拟DOM和真实DOM的区别？ 树 更新 js对象 整合 缓存 一次性 vue中 render之后 数据-render-新旧比对-按需更新 原理：为了解决浏览器性能问题，利用原生js对象描述一个DOM节点，相当于在js与DOM之间做了一个缓存，利用patch（diff算法）对比新旧虚拟DOM记录到一个对象中按需更新， 最后创建真实的DOM。

======================芜湖雅荣

======================非诚勿扰

======================杜桑钟表 ★

★自动化部署工具 Jenkins

★瀑布流流程

★ts扩展类型 枚举 enum enum Gender { male = "美女", female = "帅哥", }

★useRef 作用： 跨渲染取到状态值，因为不同渲染之间无法共享state状态值 1.useRef：返回的 ref 对象在组件的整个生命周期内保持不变 2.当更新current值时并不会render ，这是与 useState 不同的地方 3.useRef 类似于类组件的 this，一般写在 useEffect里面 总结： useRef可以用来定义变量，这些变量更改之后不会引起页面重新渲染，比如分页获取数据时，存储页码。 useRef也可以用来区分初始渲染还是更新(通过current有没值，具体见示例库里的didOrUpdate.tsx) 在DOM节点上定义ref属性，通过.current就可以获取到该DOM元素 通过forwardRef就可以给函数子组件传入ref属性。 使用useImperativeHandle用于定义暴露给父组件的ref方法

1.reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 2.ts--联合类型：取值可以为多种类型中的一种 let a : string | number; 3.every()方法--检测数组中的所有元素是否都满足指定条件；不会对空数组进行检测、不会改变原始数组 4.vue3 5.拼接字符串： + 、模板字符串` ` 、 join() 、cancat() 6.视频流

工作中遇到的难点： 打包上传速度慢、包过大；

★react-router怎么实现： Browser-router和Hashrouter：Browser-router是H5的history,path不加#，刷新不影响state参数；Hashrouter使用哈希值，path加#，刷新会丢失state参数。 route matching组件：控制对应的显示组件 navigation组件：路由切换和跳转

★数组去重的方法及代码： Es6的set方法：return Array.from(new Set(arr)) filter方法：return arr.filter((ele,index)=>(arr.indexOf(ele)===index)) map包含indexOf方法：return arr.map((ele,index)=>{ if(arr.indexOf(ele)===index) return ele }) 双层for循环方法： function unique(arr) { let result = [] for (let i = 0, len = arr.length; i < len; i++) { //第一层遍历 let flag = false //进行标记 for (let k = i + 1, len = arr.length; k < len; k++) { if (arr[i] === arr[k]) { //如果后面有重复的就跳过 flag = true k = arr.length } } if (!flag) result.push(arr[i]) //没有重复的，添加到数组中 } return result } console.log(双层for循环方法---,unique(arr))//[3, 2, 1, 4]

★for of和for in的区别？ for of 数组 for in 对象 ：键值名

★html中head标签可以写什么？ <head> 标签用于定义文档的头部，它是所有头部元素的容器，<base>、<link>、 <meta>、 <script>、<style> 以及<title> ★css选择器类型，权重 element选择器：div、h1、img、a、span class（类）选择器 id选择器 * 通配符选择器 群组选择器:ul li 伪类选择器:a:link 权重： element(类型)选择器 0001 class(类)选择器 0010 id选择器 0100 包含选择器 包含选择符的权重之和 内联样式 1000 !important 10000

★ui库组织方式

★项目中的算法

★.es6新增的方法： 箭头函数 let const 解构赋值 promise方法 symbol：Symbol函数前不能使用new命令 展开运算符 proxy

★.数组方法总结： push()：在结尾向数组添加一或多个元素 unshift()：（在开头)向数组添加一或多个元素 pop()：删除数组的最后一位 reverse()：反转数组中的元素 splice()：在指定位置删除指定个数元素再增加任意个数元素 （实现数组任意位置的增删改)--返回删除的数据所组成的数组 slice()：返回拼接后的新数组 concat()：返回合并之后的数组 toString()：将数组转换为字符串 indexOf()：存在该元素,返回下标,不存在返回 -1 map()：每次循环时执行传入的回调函数,根据回调函数的返回值,生成一个新的数组 filter()：满足条件的元素组成的新数组 includes()：一个数组是否包含一个指定的值. find();满足条件第一个元素/否则返回undefined reduce():接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

★.常见的linux命令： find / -name file1 locate *.ps 7.git创建分支： git checkout -b panda

★react路由： 路由懒加载： 1.引用react-loadable是懒加载方法 2.webpack会自动将其引用的组件切割到单独的js文件中 3.loader是引用组件。loading是初次加载组件所调用的回调方法。 4.配合Route路由来调用，在页面切换路由，才加载对应js。 路由守卫：

★react受控组件和非受控组件： 1.受控组件：即通过setState的形式控制输入的值及更新， 非受控组件：即通过dom的形式更新值，要获取其值可以通过ref的形式去获取。 2.受控组件：把input,textarea这一类的表单元素，使用onChange事件以及value属性，动态跟踪他们的值的改变。 非受控组件：表单数据由DOM本身处理。即不受setState()的控制，与传统的HTML表单输入相似，input输入值即显示最新值（使用 ref 从DOM获取表单值）

★react和vue的区别 相同之处：组件化、数据驱动试图、使用虚拟DOM

1.React的diff和Vue的diff算法的不同之处： vue对比节点，如果节点元素类型相同，但是className不同，认为是不同类型的元素，会进行删除重建。 react则会认为是同类型的节点，只会修改节点属性。 2.响应式原理不同： React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。 vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和setter。

★★★★★★★★★★★★★★★★★★★★★★★★vue模块 ★axios的请求拦截和响应拦截 请求拦截器(axios.interceptors.request.use())中来加入token 响应请求器(axios.interceptors.response.use())中通过判断后端返回的状态码来对返回的数据进行不同的处理。

★Vue 响应式原理 1.观察者observer：首先通过观察者对data中的属性使用object.defineproperty劫持数据的getter和setter，通知订阅者，触发他的update方法，对视图进行更新 2.Compile：用来解析模板指令，并替换模板数据，初始化视图，初始化相应的订阅器 3.订阅者Watcher：订阅者接到通知后，调用update方法更新对应的视图 4.订阅器Dep：订阅者可能有多个，因此需要订阅器Dep来专门接收这些订阅者，并统一管理但在vue3中抛弃了object.defineproperty方法， 因为1.Object.defineproperty无法监测对象属性的添加和删除、数组索引和长度的变更，因此vue重写了数组的push/pop/shift/unshift/splice/sort/reverse方法 2.Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历，这样很消耗性能

★vue双向绑定原理 1.数据劫持 发布订阅 2.通过Object.defineProperty()来拦截对象属性的setter和getter操作 3.设置一个监听器Observer--消息订阅器Dep--告诉订阅者Watcher如果属性发生变化了，就需要告诉订阅者Watcher看是否需要更新 4.通过指令解析器Compile--进行扫描和解析并替换模板数据

★生命周期 八个、区别created和mounted的区别： created：组件未挂载之前，写请求 mounted：做dom操作，已挂载会造成闪屏

★父子组件的刷新顺序 加载顺序： 父beforeCreate->父created->父beforeMount-> 子beforeCreate->子created->子beforeMount->子mounted ->父mounted

子组件更新过程: 父beforeUpdate->子beforeUpdate->子updated->父updated

★销毁过程: 父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

★缓存组件keep-alive多出来的两个生命周期 被包含的组件保留状态，或避免重新渲染：actived和deactived

★vue的常见指令 v-if===display:none表示不存在且不加载 v-show===visibility:hidden隐藏但在浏览时保留位置 v-for(把数据遍历出来) v-bind(绑定属性) v-model(实现双向绑定) ★自定义指令 vue.directive方法自定义指令，分为全局指令和局部指令，会触发状态bind和update

★路由 路由分为两种： 哈希模式（有#） history模式 ★路由传参: query=>path=>query; param=>name=>param; ★路由守卫 原理：用来对路由跳转进行监控、有全局的、和单个路由、或者是组件 导航钩子有三个参数： to:即将要进入的路由对象 form：当前导航即将要离开的路由对象 next:调用该方法后才能进入下一个钩子函数（afterEach） 守卫有哪些？ router.beforeEach全局前置守卫 进入路由之前 router.afterEach 全局后置钩子 进入路由之后

★vuex state:定义公共数据 mutaion：使用它来修改数据(类似于methods)同步 action:发起异步请求 异步 getter:类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生 ) modules：模块拆分

★封装组件 vue.extend定义 vue.components注册全局用

★data为什么是函数不是对象 独立作用域，避免数据污染 对象是引用类型，不易管理

★computed和watch？ computed:惰性，支持缓存，只有依赖数据发生改变，才会重新进行计算，不支持异步 watch：数据改变直接会触发相应的操作，异步

★插槽：公共组件的部分不同 具名插槽：<slot name="名称"></slot> 匿名插槽：<slot></slot> 作用域插槽

★★★★★★★★★★★★★★★★★★★★★★★★js模块 ★防抖节流 防抖：只执行最后一次 timer为空--判断timer是否存在 是--清除 否--settimeout 下次点击清空上一次的timer 直到不点了 执行最后一次

节流：只执行一次（两个时间比） 初始时间为0 定义当前时间 判断当前-初始时间是否大于等待时间 是--设置初始时间为当前

★普通函数和箭头函数和匿名函数 1.call apply bind对它不起作用 2.不能作用于构造函数：不具有 prototype 原型对象，不具有 super，不具有 new.target 3.this指向：定义它的上下文 4.不具有arguments对象

★事件循环机制 js执行时分为：执行队列和事件队列 同步任务在主线程上执行，形成一个执行队列，而异步则先放到事件队列。事件队列又分为宏任务、与微任务。

★强缓存协商缓存 强缓存：不需要给服务器发送请求 协商缓存：服务器决定是否使用缓存，客户端和服务器之间会发生一次通讯，如果命中协商缓存，则服务器返回304。

★闭包 原理：能访问其他函数内部变量的函数成为闭包 好处：防止变量被污染、常驻内存 坏处：内存泄漏、解决：null

★原型、原型链 原型：JS声明构造函数(用来实例化对象的函数)时，会在内存中创建一个对应的对象，这个对象就是原函数的原型。构造函数默认有一个prototype属性，prototype的值指向函数的原型。同时原型中也有一个constructor属性，constructor的值指向函数对象。

原型链：在实例化的对象中访问一个属性时，首先会在该对象内部(自身属性)寻找，如找不到，则会向其__proto__指向的原型中寻找，如仍找不到，则继续向原型中__proto__指向的上级原型中寻找，直至找到或Object.prototype.__proto__为止（值为null），这种链状过程即为原型链

★es6新增了哪些东西 1.块级作用域let const 2.class super extends 3.箭头函数 4.解构赋值 5.扩展运算符 6.for of遍历（数组） 7.promise/async、await 8.generator 9.模块化 10.map和set 11.proxy

★重排与重绘 重绘（repaint）：即元素的颜色，背景色发生改变但没有影响到dom树 重排（reflow）：页面内的元素尺寸发生了变化，导致部分或者全部DOM树，渲染树需要重新更新

★★★★★★★★★★★★★★★★★★★★★★★★react模块 函数组件和类组件的区别 （1）语法上：函数组件是一个函数，返回一个jsx元素，而类组件是用es6语法糖class定义，继承component这个类 （2）类组件中可以通过state进行状态管理，而在函数组件中不能使用setState()，在react16.8以后，函数组件可以通过hooks中的useState来模拟类组件中的状态管理； （3）类组件中有一系列的生命周期钩子函数，在函数组件中也需要借助hooks来使用生命周期函数； （4）类组件能够捕获**最新**的值（永远保持一致），这是因为当实例的props属性发生修改时，class组件能够直接通过this捕获到组件最新的props；而函数式组件是捕获**渲染**所使用的值，已经因为javascript**闭包**的特性，之前的props参数保存在内存之中，无法从外部进行修改。 ★瀑布流?

★路由 动态路由 1.在App根组件中引入内容模块 2.页面配置各个标题的路由

★怎么做路由守卫?

★受控组件和非受控组件 受控组件：渲染表单的React组件控制着用户输入过程中表单发生的操作。必须要有一个value，结合onChange来控制这个value。 非受控组件：表单数据由DOM节点来处理，而不是用state来管理数据，一般可以使用ref来从DOM节点中获取表单数据

★react实现双向绑定

★redux

★高阶组件 高阶组件是参数为组件，返回值为新组件的函数（将组件转换为另一个组件，纯函数，无副作用）

★避免组件的重复渲染 1.class组件中 使用shouldComponentUpdate钩子函数 2.PureComponent默认有避免重新渲染的功能 3.函数组件使用高阶组件memo处理

★渲染一个react组件的过程 1.babel编译 2.生成element 3.生成真实节点(初次渲染) 4.生命周期 ★JSX? （1）类XML语法容易接受，结构清晰； （2）增强JS语义； （3）抽象程度高，屏蔽DOM操作，跨平台； （4）代码模块化；

★vue react都怎么检测数据变化? React默认是通过比较引用的方式（diff）进行,16之前 componentWillReveiveProps 监听 props 变化,16之后 getDerivedStateFromProps 监听 props. Vue监听变量变化依靠 watch Object.defineProperty，Vue通过“getter/setter”以及一些函数的劫持，能精确知道数据变化

★★★★★★★★★★★★★★★★★★★★★★★★git命令 拉取代码git pull 查看gitstatus 暂存git stash--git stash pop 新建分支git branch test 切换分支git checkout test 合并到主分支git merge test 提交git commit

★★★★★★★★★★★★★★★★★★★★★★★★关于项目 ★登录流程

★支付流程 1.小程序调用登录接口获取code，传递给商户服务器用来获取用户的openID

★canvas常用属性 ctx = canvas.getContext("2d"); ctx.lineWidth = 5;设置线段宽度 ctx.strokeStyle= "blue";设置描边颜色 ctx.fillStyle="blue";设置填充颜色 ctx.beginPath();开始一条新的路径 ctx.stoke();描边动作 ctx.fill();填充动作 ctx.closePath();闭合路径 ctx.arc(x,y,r,start,stop,false);画圆 ctx.strokeRect(x,y,width,height);画矩形 ctx.clearRect(0,0,width,height);清除画布

★★★★★★★★★★★★★★★★★★★★★★★★ts模块 ★ts的好处： 1.给JavaScript添加了可选的静态类型和基于类的面向对象编程，它拓展了JavaScript的语法。所以ts的功能比js只多不少 2.纯面向对象的编程语言，包含类和接口的概念 3.开发时就能给出编译错误， 而 JS 错误则需要在运行时才能暴露 4.可以明确知道数据的类型。代码可读性极强，几乎每个人都能理解

★原始类型包括: boolean、number、string、void、undefined、null、symbol、bigint

★如何基于一个已有类型, 扩展出一个大部分内容相似, 但是有部分区别的类型? 可以通过Pick和Omit：

★泛型： 泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，使用时再去指定类型的一种特性

★数组在TypeScript中是如何工作的？ 1.第一种方式：类型 + []表示法 2.第二种方式：接口 3.第三种方式：any

★ts声明变量的方式： var let const type interface enum

★谈谈你对泛型的认识 1.泛型只存在于编译期间 2.泛型在语法中的特征就是尖括号 3.泛型的核心原理：利用Object引用可以指向任意类型的对象