2020面试题--小试牛刀
css专场：
* 问题：flex:1 是哪些css属性集合？
答：flex是由三个属性组成:
- flex-grow: 存在剩余空间, 为正, 分配 属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。在「flex」属性中该值如果被省略则默认为1.
- flex-shrink: 不存在剩余空间, 为负, 计算收缩比例 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。 负值对该属性无效。
- flex-basis: 分配剩余空间前, 定义宽度 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。 它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。 在「flex」属性中该值如果被省略则默认为「0%」 在「flex」属性中该值如果被指定为「auto」，则伸缩基准值的计算值是自身的 <' width '> 设置，如果自身的宽度没有定义，则长度取决于内容。
*问题：什么是rem?1rem是什么意思？
答：rem是一个相对单位，相对根元素字体大小的单位。我们只需要指定根元素为参考值，就可以了。1rem等于根元素的fontSize大小
*问题：什么是rpx?1rpx怎么计算是多少像素？
答：rpx是解决屏幕自适应的尺寸单位，可以根据屏幕宽度进行自适应，不论大小屏幕，规定屏幕宽为750rpx。 计算方式：1除以750 再乘以屏幕宽度像素等于1rpx是多少像素
*问题：1rem，1em，1vw，1px的概念？
- rem是一个相对单位，相对根元素字体大小的单位。
- em是一个相对单位，相对于最近的具有fontSize属性的祖先元素，没有就相对于根元素
- 1vw等于视口宽度（viewport width）的百分之一
- px代表的是像素单位，一般为网页中标识字体的单位
*问题：cssx选择器优先级？
答： 1. ！important
- 行内样式，在style属性里面写的样式。
- id选择器
- class选择器
- 标签选择器
- 通配符选择器*
- 浏览器的自定义属性和继承
*问题：flex布局常用属性？
答：1.flex-direction属性决定主轴的方向（即项目的排列方向）。 2.flex-wrap属性决定是否布局是否换行。 3.justify-content属性定义了项目在主轴上的对齐方式。 4.align-items属性定义项目在交叉轴上如何对齐。 5.align-content属性定义了多根轴线的对齐方式。 6.order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。 7.flex-grow属性定义项目的放大比例，默认为0，，即如果存在剩余空间，也不放大。 8.flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。 9.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。默认auto,项目本身宽度。 10.flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。 11.align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
*问题：什么是BFC?
答：BFC 定义 BFC (Block formatting context)块级格式化格式化上下文，它是一种独立的渲染区域，只有Block-level-box参与，它规定了内部的Block-level-box如何布局，并且与这个区域外部毫不相干。 2、生成BFC: 根元素 float属性不为none position为absolute或fixed display为inline-block, table-cell, table-caption, flex, inline-flex overflow不为visible
*问题：如何清除浮动？
1.利用 clear 属性，在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，利用 :after 伪元素在元素末尾添加一个内容为空高为0并带有 clear: both 属性的元素。 2.触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素。overflow:hidden
js基础
*问题：知道==和===的区别吗？
答：1. ===：称为等同符，当两边值的类型相同时，直接比较值，若类型不相同，直接返回false；
- ==：称为等值符，具有隐性的类型转换。当等号两边的类型相同时，直接比较值是否相等，若不相同，则先转化为类型相同的值，再进行比较；（优先转换为数字进行比较。）
*问题：内存泄漏是什么？哪些操作造成内存泄漏？
答：1. 内存泄漏：就是没有使用，或已经使用完的变量，没有及时回收。
- (1) 意外的全局变量，初始化未经声明的变量，总是会创建一个全局变量。 （2）计时器，一旦离开，要clear (3)dom清空或删除时，事件未清除导致的内存泄漏 (4)闭包
*问题：http和https区别？
答：1.https协议需要到CA申请证书。 2.http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl/tls加密传输协议。 3.http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。
- http的连接很简单，是无状态的；HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。
*问题：js数组方法
答：基础：toString()、join()、pop()、push()、shift()、unshift()、splice()、concat()、slice()、reverse()、sort()、tolocaleString()、valueOf() es6+：map()、filter()、reduce()、every()、some()、indexOf()、lastIndexOf()、forEach()、find()、findIndex()、fill()、copyWithin()、from()、of()、entries(）、keys()、values()、includes()
*问题：js数据类型有哪些？
答：1.值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。 2.引用数据类型：对象(Object)、数组(Array)、函数(Function)。
*问题：引用类型和基本类型存储位置有什么区别？
答：1. 基本类型的变量会保存在栈内存中，如果在一个函数中声明一个值类型的变量，那么这个变量当函数执行结束之后会自动销毁 2.引用类型的变量名会保存在栈内存中，但是变量值会存储在堆内存中，引用类型的变量不会自动销毁，当没有引用变量引用它时，系统的垃圾回收机制会回收它
*问题：知道箭头函数和普通函数的区别吗？
答： 1. 箭头函数是匿名函数，不能作为构造函数，不能使用new
- 箭头函数不绑定arguments，取而代之用rest参数…解决
- 箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
- 箭头函数通过 call() 或 apply() 方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
- 箭头函数没有原型属性
- 箭头函数不能当做Generator函数,不能使用yield关键字
*问题：es6特性了解多少？
答：1.变量声明方式：const和let 2.模板字符串 3.箭头函数
- 函数的参数默认值 5.Spread / Rest 操作符（多参变数组rest,数组变多参spread） 6.二进制和八进制字面量 7.对象和数组解构 8.对象超类 9.for...of 和 for...in 10.ES6中的类
*问题：什么是闭包？
答： 闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取[局部变量]，所以闭包可以理解成“定义在一个[函数]内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
*问题：知道null和undefaul的区别吗？
null：Null类型，代表 “空值”，代表一个空对象指针，使用typeof运算得到 “object” ，所以可以认为它是一个特殊的对象值。
undefined 是 Undefined 类型的唯一值，它表示未定义的值。当声明变量未赋值时，或者定义属性未设置值时，默认值都为 undefined。
*问题：promise是什么？
答：Promise是异步编程的一种解决方案 Promise对象有以下2个特点： 1.对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：Pending(进行中)、Resolved(已完成)和Rejected(已失败)。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。 2.一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从Pending变为Resolved；从Pending变为Rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对Promise对象田静回调函数，也会立即得到这个结果。这与事件(Event)完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
*问题：axios怎么封装？
答： axios请求拦截：每次请求都尝试带上token.
// 请求拦截器
axios.interceptors.request.use(
config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})响应拦截：请求失败的统一处理。
// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
})js进阶React.js
*问题：react生命周期？
答： 初始化阶段
更新阶段
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
错误捕获
*问题：refs是什么？何时使用refs?
答：在某些情况下，你需要在典型数据流之外强制修改子组件。被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。可以利用refs。 下面是几个适合使用 refs 的情况： 管理焦点，文本选择或媒体播放。 触发强制动画。 集成第三方 DOM 库。
*问题：可以在render中执行setState吗？
答：不可以，因我执行setState后会触发render,所有会报错，会死循环
*问题：如何判断一个input是受控组件还是非受控组件？
答：受控组件就是可以被 react 状态控制的组件，绑定了value属性和onChange方法，value为当前组件的state,onChange将触发setState
*问题：useEffect的返回值一般什么时候用？
答：useEffect对的返回值可以模仿类组件的componentWillUnmount,清除一些计时器和订阅事件或请求
*问题：connect函数做了什么？
答：connect 是一个高阶组件 内部利用context获取state和dispatch,根据不同的参数(mapStateToProps,mapDispatchtoProps,mergeProps),扩展传入组件的属性，使这些值可以在props中获取
*问题：hooks解决了什么问题？
答：解决问题：1.在组件之间复用状态逻辑很难，React 没有提供将可复用性行为“附加”到组件的途径，你也许会熟悉一些解决此类问题的方案，比如 render props 和 高阶组件。但是这类方案需要重新组织你的组件结构，你可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。
*问题：什么是虚拟dom?
答：Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。这一过程叫做协调。
2.复杂组件变得难以理解，生命周期钩子中充满大量数据请求，计时器订阅等，无法拆分，还有在componentWillUnmount中清除，使人不好理解，hooks 的useEffect可将逻辑细粒拆分。
*问题：react-router如何传值给组件？
答：1.query方式： 路径为对象
var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
query:data,
}- props.params 动态路由方式: <Route path='/user/:name' component={UserPage}></Route 3.state方式
var data = {id:3,name:sam,age:36};
var path = {
pathname:'/user',
state:data,
}版本库-工具类
*问题：git常用命令？
答：基于当前组件创建分支:git checkout -b 分支名。 提交命令：git commit 切换分支：git checkout 命令行工具: 创建目录：mkdir 目录名 进入文件：cd 相对路径 发送请求：curl
腾讯云开发者
