前端知识点总结一

莫问前程F6
169 阅读5分钟

JavaScript

  • 作用域
  • 闭包
  • 原型链
  • this指向
  • 怎么改变this指向，call和apply有什么区别
  • js的基本类型

string, number, boolean, undefined, null, sample, bigInt

  • 类型判断（typeof, instanceof, isArray, isNaN, Object.protetype.toString.call()）

const x = 1; Object.prototype.toString.call(x) = "[object, Number]"

  • 数组的20+个方法

push, pop, unshift, toshift, concat, join, splice, slice, length, indexof, sort, reverse map, forEach, find, findIndex, reduce, some, every, fill, of, from, includes, at, isArray

  • 迭代器

for(;;), for of, for in, forEach, reduce, map

  • 0.1 + 0.2 为什么不等于 0.3

计算机处理运算前要先转成2进制，计算完结果后再转回10进制

  • js的事件循环
  1. 先执行所有同步任务，碰到异步任务放到任务队列中;
  2. 同步任务执行完毕，开始执行当前所有的异步任务
  3. 先执行任务队列里面所有的微任务
  4. 然后执行一个宏任务
  5. 然后再执行所有的微任务
  6. 再执行一个宏任务，再执行所有的微任务，依次类推到执行结束。
  7. 3-6的这个循环称为事件循环
  • js的事件委托
  • js的变量提升
  • js给动态列表添加事件
  • cookie和sessionStorage的区别
  • 如何防止js的内存泄漏

ES6+

  • 对象扩展符
...
object.assign
  • 箭头函数
const f1 = (a) => ({a})
  • 块级作用域
  1. 函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪到作用域顶部
  2. var 存在提升，我们能在声明之前使用。let、const 因为暂时性死区的原因，不能在声明前使用
  3. var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会
  4. let 和 const 作用基本一致，但是后者声明的变量不能再次赋值
  • Promise 和 async await 有什么区别
  • axios 和 ajax 的区别?
  1. axios是通过Promise实现对ajax的一种封装，就跟query对ajax的封装一样。ajax实现了局部数据的刷新，axios实现了对ajax的封装。
  2. axios是ajax，ajax不止axios，简单来说：ajax包含axios。
  3. ajax针对MVC编程，axios符合现在前端MVVM的模式。
  • Axios的优点：
  1. 支持 Promise API，符合最新的ES规范
  2. 转换请求和响应数据，自动转换JSON数据
  3. 因为是基于Promise实现的，异步模型友好，可以使用Async/await
  • Ajax的缺点：
  1. JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理
  2. 基于原生的XHR开发，XHR架构本身不清晰
  3. 基于事件的异步模型不友好

CSS

  • 垂直居中
1. display:flex; align-item: center; justify-content: center;
2. position:absolute;margin: auto; top:0;left:0;bottom:0;right:0
3. position:absolute;width:200px;height:200px; top:50%;left:50%;margin-top: -100px;margin-left:-100px
4. position:absolute;top:50%;left:50%;transform: translate(-50%, -50%);
  • 下三角的实现
div{
    width:0;height:0;
    border-top: 50px red solid; 
    border-left: 50px transpent solid; 
    border-right: 50px transpent solid;
}
  • css动画
1. transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间；
2. 2D转换：
transform: scale(x, y);  transform: scale(2, 0.5);
transform: translate(水平位移, 垂直位移); transform: translate(-50%, -50%);
transform: rotate(角度); transform: rotate(45deg);
3. 3D转换
transform: rotateX(360deg);    //绕 X 轴旋转360度
transform: rotateY(360deg);    //绕 Y 轴旋转360度
transform: rotateZ(360deg);    //绕 Z 轴旋转360度
transform: translateX(100px);    //沿着 X 轴移动
transform: translateY(360px);    //沿着 Y 轴移动
transform: translateZ(360px);    //沿着 Z 轴移动
4. animation
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
.shake {animation: shake 0.82s liner both;}
@keyframes shake {
  from {
    width: 100px;
  }
  to {
    width: 500px;
  }
}
  • BFC
块格式上下文，是一块独立的渲染区域，内部元素不会影响外部的元素。
通常有float:left; overflow:hidden; position: fixed/absolute 会触发BFC布局
  • 重绘和回流
  1. 当页面布局和几何属性改变时就会产生回流
  2. 当元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color，visibility，outline，就会引起重绘
  3. 回流会引起重绘，但重绘不一定会引起回流
  4. 如果回流的频率很高，CPU使用率会大大增加
  5. 避免的方法主要有（1）用增删class的方式实现元素样式的变化（2）避免使用内联样式（3）避免循环操作Dom
  • 盒模型

Vue

  • watch和computed有什么区别
  1. computed 是计算属性，依赖其他属性计算值，并且 computed 的值有缓存，只有当计算值变化才会返回内容。
  2. watch 监听到值的变化就会执行回调，在回调中可以进行一些逻辑操作。 所以一般来说需要依赖别的属性来动态获得值的时候可以使用 computed，对于监听到值的变化需要做一些复杂业务逻辑的情况可以使用 watch。
  • 组件通信的几种形式
  1. 父子组件通信: props, emit，emit，parent, $ref
  2. 兄弟组件通信: parent,parent, ref
  3. 多级组件通信: vuex, 或 eventbus
  • vuex和pinia的区别
  • vue自定义指令
  • keep-alive的原理
  • nextTick的原理
  • diff算法
  • 虚拟Dom
  • Vue的生命周期
  • 按需加载
  • 动态路由
  • 全局组件和局部组件
  1. 全局组件：在main.js注册的组件。在多个页面使用的应该在全局注册
  2. 局部组件：组件单独引入的组件，使用的很少最好是单独引入
  • Vue3的hooks
  • Vue3的ref和reactive有什么区别
avatar
文章
阅读
粉丝