面试高频题（待更新）

CSS相关

1.盒模型

盒子大小由自身的宽高 加上padding border margin。

2.怪异盒模型

盒子的border padding margin 发生改变的时候 不会改变自身大小。
box-sizing：border-box

3.未知宽高的盒子垂直水平居中的方案`

<div class="box">
	<div class="middle">这是要居中的盒子</div>
</div>

1. 弹性盒

.box{
  display: flex;
  justify-content: center;
  align-items: center;
}

2. List item

.box{
  position: relative;
}
.middle{
  position: absolute;
  margin: auto;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
}

3. 实现0.5px边框

<div class="borders">0.5边框</div>

.borders{
   border: none;
   position: relative;
}
/*下边框为0.5*/
.borders::after{
  content: '';
  position:absolute;
  bottom: 0;
  left: 0;
  background: red;
  height: 1px;
  width: 100%;
  transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
}

/*四条边框都为0.5*/
.borders::after{
  content: '';
  position:absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid red;
  box-sizing: border-box;
  transform: scale(0.5);
  transform-origin: left top;

}

js相关

对象相关

let obj = {name:'hanhan'，age:18}

1. for in 和Object.keys 都是用来循环对象的，二者有什么区别？

• 二者均能遍历对象的可枚举属性；
• 前者只能遍历obj对象自身的属性，后者可遍历obj对象隐式原型上的属性;
• 返回值：

1. Object.keys(obj) //返回一个由对象obj的key组成的数组 ['name','age','sex'] 

2. for(item in obj){} //无返回值 

2. 设置对象obj的name属性为不可枚举？

利用Object.defineProperty(obj,‘name’,{enumerable:false})

3. 给obj对象新增一个age属性，值为18，且属性值不可更改？

利用Object.defineProperty(obj,‘age’,{value:18,writable:false})

4. 给obj对象新增一个sex属性，值为women，读取时，值为？
通过Object的访问器属性中的getter实现

5. 设置obj对象的name属性不能删除不能修改？

Object.defineProperty(obj,'name',{configurable:false;writable:false})

6. 设置obj对象不可被扩展

Object.preventExtensions(obj) //不可被扩展

7. 设置obj对象所有属性不可被删除

Object.seal(obj) //密封

8. 设置obj对象所有属性不可被修改
Object.freeze(obj)//冻结

函数相关

1. 纯函数

2. 高阶函数

//函数一 接收了一个函数作为参数
function add(callback){
  callback()
}
add(()=>console.log('调用了callback'))

//函数二 返回值为一个函数
function add(){
  return function(){
    console.log('调用了callback')
  }
}
add()()

//函数三 接收一个函数作为参数 返回值为一个函数
function add(callback){
  return callback
}
add(()=>console.log('调用了callback'))()

3. 高阶函数

把一个接收多个参数的函数改变成接收一个单一参数的函数，内部返回为一个可以接收余下参数的函数。柯理化函数一定是高阶函数。

//实现一个加法计算
function add(a,b){
  	return a+b
}
add(1,2)

//柯理化函数
function add(a){
  return (b)=>{
    	return a+b
  }
}
add(1)(2)

http相关

1. 三次握手

2. 同源策略

3. 解决跨域

4. get和post的区别

储存

本地储存 临时储存 cookies

vue常见问题

1. v-model双向数据绑定的实现原理？

Object的defindProperty方法。基于访问器属性get set实现。

<input type="text" id="a"/>
<span id="b"></span>

//js 模拟实现双向数据绑定效果
let obj = {};
let val = '';
Object.defineProperty(obj,'val',{
  get:function(){
    return val
  },
  set:function(newValue){
    val = newValue;
    document.getElementById('b').innerHTML = val
  }
})

document.addEventListener('keyup',function(e){
  obj.val = e.target.value;
})

2. vuex

import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
   	//仓库的数据	
  },
  getters:{
    //仓库数据的计算属性
  },
  mutations: {
		//修改仓库数据的方法集合
  },
  actions:{
  	//仓库想要进行异步请求 store.commit 调用mutations 中的方法
  }  
  
})

React常见问题

1. 调用setState 之后发生了什么？key的作用？

调用setstate函数之后，react 会将nextState与当前的组件state进行合并，触发一个调和过程。在这个过程中react会基于底层diff算法（diff通过key能相对精准的知道哪些位置发生了改变）得到新dom树与老dom树的节点差异，根据差异，对界面进行最小化重渲染。

key是一个用于追踪哪些元素被修改或者被移除的标识。
2. react中的函数式组件及类组件的选择？

组件内部需要包含内部状态state或者需要用到生命周期时考虑类组件，其他情况使用函数组件（无状态组件）。
3. react中受控组件和非受控组件区别？

非受控组件：表单元素的数据是存放在dom中。取值通过ref。

受控组件：表单元素的数据托管到react组件中，交由react控制。取值通过state。

redux

redux 和 react的关系？

没有任何关系。
redux 是一个状态管理器。

发布订阅模式

发布者（唯一的） 订阅者（多个）。
主动方：发布者
被动方（等待方）：订阅者
发布者在发布一条信息的时候 会主动通知到订阅者。

js实现一个简单的状态管理器

function createStore(reducer,initState={}){
    let state = initState;
    let  subscribeArr =[];
  
    // 注册成为我们状态管理器的订阅者
    function subscribe(subscribeItem){
        subscribeArr.push(subscribeItem)
    }

    // 修改状态
    function dispatch(actions){
      if(typeof actions !== 'object') return alert("actions类型不合法")
      state = reducer(state,actions)
      // 通知订阅者 
      for(let i =0;i<subscribeArr.length;i++){
        subscribeArr[i]()
      }
      return actions
    }

    // 获取仓库状态
    function getState(){
        return state
    }

    return {
        subscribe,
        getState,
        dispatch
    }
}

使用状态管理器

let initState = {
   name:'jinxiaodi',
   count:0
 }

let reducer = (state,actions)=>{
   if(actions.type==="CHANGE_NAME"){
     state.name = actions.name
   }
   if(actions.type=== "ADD"){
     ++state.count
   }
   if(actions.type=== "DIS"){
     --state.count
   }
   return {...state}
}

let store = createStore(reducer,initState)

redux-thunk中间件

改造dispatch函数 让该函数可以接受一个函数作为参数。

dispatch遇到函数则执行 遇到对象则去调用reducer修改仓库数据。

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
let store = createStore(reducer,initState,applyMiddleware(thunk))

框架比较

1.vue React 异同点？怎么去选择项目框架？

react自由度更高 渲染速度更快 大型项目框架可能会想考虑react 参考资料相对少一些

​ PC antd UI

​ react 移动端UI库bug比较多 antd mobile / MATERIAL-UI

​ vue 有很多条条框框 社区非常丰富 参考资料较多

​ PC element UI / iView UI /

​ 移动端 vant UI