面试总结-记录用

======================赫柒科技
★.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.端调用 wx.login() 获取 临时登录凭证code ，并回传到开发者服务器。
2.服务器端调用 auth.code2Session 接口，换取 用户唯一标识 OpenID 和 会话密钥 session_key。
3.开发者服务器可以根据用户标识来生成自定义登录态(例如：auth-token)，用于后续业务逻辑中前后端交互时识别用户身份。

★.优化项目的方法
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 >

★.微信小程序分包怎么做
1.subPackages 放置主文件包
2.根目录下找到app.json文件，在里面进行分包文件的配置

★.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

★.跨域
协议、域名、端口三者之间任意一个与当前页面url不同即为跨域.
1.jsonp
利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。
2.cors
实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域
3.postMessage
otherWindow.postMessage(message, targetOrigin, [transfer]);
4.websocket
let wss = new WebSocket.Server({port:3000});
5.Node中间件代理
6.nginx反向代理
7.window.name+iframe
8.location.hash+iframe
9.document.domain+iframe

★.防抖节流
节流：只执行一次（两个时间比）
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的作用
★.项目中的难点

======================微拍堂
★.你最喜欢前端哪个方向
★.产品用户体验
★.taro封装成小程序的过程
★.js数据类型 基础和引用类型
★.webpack自己配置过哪些
★.搭建原生微信小程序的流程
★.react事件绑定原理
react没有原生的浏览器事件，所以基于真实dom基础上实现的合成事件。
传播方式：冒泡。（想改捕获+Capture）.
事件对象也不是原生的，是合成对象（想访问原生--nativeEvent）
合成事件的过程有三步：
★.事件注册：document上注册，通过统一的回调函数dispatchEvent执行事件分发。（document.addEventLinstener）
★.事件合成:进入事件分发函数dispatchEvent,找到触发事件的reactDomComponent,开始事件合成
★.批处理
★.vue双向绑定原理
数据与视图响应式。
★.深拷贝的时候，a=b

======================沃土教育
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.首先在网页的head标签中添加meta标签设置视口
2.将页面中的父元素宽度设为100%
3.页面宽度用%定义
★微信小程序登录流程
核心利用wx.login()方法从微信服务器获取code,发送本地服务器，利用appid、appSecret和code向微信服务器换取微信用户唯一的openId和session_key,通过appid和手机号一一映射

★节流和防抖
节流：只执行一次 初始-调用事件对比
防抖：执行最后一次
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

★瀑布流流程

★微信小程序登录的三种方式
1.核心利用wx.login()方法从微信服务器获取code,发送本地服务器，利用appid、appSecret和code向微信服务器换取微信用户唯一的openId和session_key,通过appid和手机号一一映射，并保存在数据库中关联用户其他信息

微信授权登录：login()获取code--判断用户是否点击了接受--将code、phone、iv发给后台，让后台解密手机号，拿回openid和session。
微信授权手机号登录
手机号验证码登录
======================禾观科技
★es6数组方法有哪些
map方法
find方法
findIndex方法
filter方法
every方法
some方法
reduce方法
reduceRight方法
foreach方法
keys方法等等

★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.视频流

自我介绍：
您好，我叫。2016年毕业于河南工业大学，主修计算机网络。前端开发四年，主要技术栈：react,taro,elementUI。最近做的项目是一个基于微信小程序和taro编译的微商城分为C端B端pc端，我主要负责C端B端前端开发。

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

★react和vue的优缺点：
相同：设计思想一样，都是单向数据流（父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。）
不同：
★Vue的响应式:模板的原理是通过指令实现，渐进式框架、核心库只关注视图层。其实就是通过数据驱动DOM视图的变化，初始化时通过Object.defineProperty进行绑定，渲染时触发getter进行依赖收集，数据变化触发setter更新。
React模板的原理通过JSx语法实现的，函数式思想更灵活。
★diff算法:
react只对同级元素进行diff。先判断key再判断type,都相同为同一节点。如果元素变了，react会销毁并新建一个及其子孙节点。
vue在diff中根据新旧节点的索引列表找到稳定序列，通过双端对比找到不需要一点的节点复用，仅对需要path的节点进行操作。

★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引用可以指向任意类型的对象