前端知识点自我总结 一

hasOwnProperty

hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，但是不会去查找它的原型链。

原型链

var obj={}

这个是没有原型的，他有的只是原型链

构造函数在没有实例化对象之前 不能被称为构造函数

构造函数实例化出来的对象上添加任何的属性和方法，都是可以通过构造函数的原型访问到的

防抖和节流

防抖 ： 将多次操作变成一次 

经典的防抖场景 ： 访问后台的数据 

节流：保证一定时间内 只调用一次

经典的节流场景： 提交表单 高频的监听事件

闭包

 最简单的回答 ： 方法里面返回一个方法 

存在的意义：

1 延长变量的声明周期

闭包会常驻内存  慎用闭包

2 创造私有的环境

事件

touchmove 滑动事件

数组变异方法

在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变
变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展
push()    往数组最后面添加一个元素，成功返回当前数组的长度
pop()    删除数组的最后一个元素，成功返回删除元素的值
shift()    删除数组的第一个元素，成功返回删除元素的值
unshift()    往数组最前面添加一个元素，成功返回当前数组的长度
splice()    有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort()    sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse()    reverse() 将数组倒序，成功返回倒序后的数组

面试题

diff算法

diff中的patch算法

两条线 1.初始化 2.更新

dom元素生成的三要素 

目标元素 属性 子节点

vue两大核心

1.组件化 2.数据驱动

为什么要用虚拟DOM来描述真实的DOM呢？
创建真实DOM成本比较高，而如果用js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。

这里有一些相关问题值得思考一下：

1.为什么操作真实DOM的成本比较高？

(1) dom 树的实现模块和 js 模块是分开的这些跨模块的通讯增加了成本

(2) dom 操作引起的浏览器的回流和重绘，使得性能开销巨大。

原本在 pc 端是没有性能问题的，因为pc端的计算能力强，但是随着移动端的发展，越来越多的网页在智能手机上运行，而手机的性能参差不齐，会有性能问题。
我们之前用jquery在pc端写那些商城页面都没有问题，但放到移动端浏览器访问之后会发现除了首页会出现白屏之外在其他页面的操作并不流畅。

2.浏览器收到一个html页面是如何解析成页面呈现给用户的呢？

(1) 解析html：会按顺序解析。浏览器有专门的html解析器来解析HTML，并在解析的过程中构建DOM树

(2)构建dom树：它和步骤(1) 是同步进行，可以理解为边解析边构建。

(3)构建呈现树renderTree：将dom树与css结合，也就是将样式应用到dom节点上

(4)布局：计算呈现树节点的大小和位置，这一位置是递归进行的。

(5)绘制：布局完成后，便是将呈现树绘制出来显示在屏幕上。

这个具体的解析过程可参考：https://www.cnblogs.com/dojo-lzz/p/3983335.html

3.什么是回流和重绘？

回流 reflow:当呈现树renderTree中的一部分或全部因为尺寸、布局、隐藏等改变改重新构建，称之为回流。
重绘：当呈现树renderTree中的一部分元素需要更新属性，而属性只会影响外观、风格而不影响布局，比如颜色、字体大小等，则称之为重绘。
我们之前用jquery时基本都是在操作dom。会频繁引起呈现树的重绘和回流，pc端处理能力还不错，但移动端性能就会很差。导致页面卡顿
 

虚拟dom 

在vue 2.0版本才有虚拟dom

本质 就是一个js对象 能够有跨平台的一个特质

在vue中做了什么

vue的渲染过程 

在vue 中 .vue文件并不是呈现在页面上的文件 是一个语法糖 有一个转化的过程 有一个render函数 会把template中的函数转化为虚拟dom

1.将真实dom 转化成虚拟dom 也就是js对象

2. 在更新的时候 用来做对比 

虚拟dom是如何提高vue的渲染速度的

在没有虚拟dom的时候 我们是直接驱动dom的

能够做到一个局部的更新 

1. 局部更新  节点数据的更新 不需要去摧毁整个父级元素 

虚拟DOM作用

• 可以维护视图和状态之间的关系
• 复杂视图情况下提升渲染性能
• 虚拟DOM除了可以渲染成DOM节点，还可以渲染到其他平台如ssr(nuxt.js/next.js)、原生应用（weex/rn）、小程序等，增加了跨平台能力

2. 将直接操作dom的地方 变成拿到两个js对象中做比较，做出差异化的更新

你觉得虚拟DOM的性能一定高于常规DOM吗？

答案是不一定，如果是简单页面操作起来虚拟DOM未必会获胜，这个具体的原因我们后面会有章节再来分析。

那你觉得使用了虚拟DOM就真的不操作dom元素了吗？其实不是的，只是减少用户操作dom，虚拟DOM在渲染的时候其实还是会操作dom的。
 

VUE

MVC  前后端无法分离 前端不够独立

MVVM（前后端分离）

v-model 的原理 

Object.defineProperty()

Vue中的data为什么是一个函数

首先 data（）{ return } 确保各组件会不互相干扰 用纯对象形式去做的话 变量就会有一个干扰

vue中有许多的组件 都相当于 给他创建了一个私有域空间（闭包）

如何用es6 快速去重

let item =【...new set(arr)】

v-if和v-show的区别和使用场景

v-if 如果不满足条件 不会渲染dom元素 场景 ： 单次的判断  适合单次渲染

v-show 隐藏dom  场景 多次的切换 会用到v-show 不会去频繁的渲染 一般不能用于权限操作 

ES6

var  变量提升 —— 声明提升 先上车 后补票 变量覆盖 会产生一些不可预知的错误

说明了 var 没有块级作用域

const 不可以被修改  声明的值一定要赋值  （常量定义的值需要大写）

promise 是一个构造函数 是同步执行的 .then()是异步执行的

重点css面试题

div快速居中对其

display ： flex    margin ：auto

padding和margin有什么不同

内边距和外边距  （内边距和外边距）

他们的作用对象不同 padding是作用于自身的

margin 是作用于外部的

vw和百分比的区别

好像没有区别 

但是：！！！ 

vw不管父元素多宽 参照物的不同

百分比有继承关系 vw没有继承关系

行内和块级元素的区别

行内元素的宽高由内容决定

块级元素的宽度占一行 默认继承父级的宽度

如何让谷歌支持小字体

最小的字体是12px

如果要比12px还要小 要怎么做

通过transform的scale的缩放 

深拷贝和浅拷贝

数组和对象的赋值都叫做浅拷贝（存在这种藕断丝连的关系）

解构赋值 

针对一维数组和对象  可以看作是深拷贝

针对 多维数组，就是浅拷贝量和变量之间的赋值叫做深拷贝

深拷贝的用法

• JSON.stringify() ：将JS对象转换为JSON格式
• JSON.parse() ：将JSON字符串转换成对象
• ES6引入了class类的概念，创建的每一个class类，都会有一个constructor()方法，该方法是一种用于创建和初始化class创建的对象的特殊方法--构造函数方法。

数组的constructor 指向 构造他的地方 

[] => Array （基类）

对象的constructor 指向 最大的对象

[] =>Object

一段离谱代码

  // 标准的深拷贝  => 引用数据类型 (数组,对象)
  function deepClone(source) {
    // []=>Array 基类
    const targetObj = source.constructor === Array ? [] : {};
    for (let keys in source) {
      if (source.hasOwnProperty(keys)) {
        // 这里的key 有三种 数据类型 基础 数组 对象
        // 引用数据类型
        if (source[keys] && typeof source[keys] === "object") {
          // 引用数据类型分为数组和对象
          //   targetObj[keys] = source[keys].constructor === Array ? [] : {};
          //   递归
          targetObj[keys] = deepClone(source[keys]);
        } else {
          // 基本数据类型 直接赋值
          targetObj[keys] = source[keys];
        }
      }
    }
    return targetObj;
  }
  let wxk = {
    ff: "name",
    gg: 1,
    obj: { str: "1111" },
    arr: [1, 2, 3, 4, 5],
  };
  let objC = deepClone(wxk);
  objC.ff = "age";
  objC.arr.push(6);

  console.log(wxk, objC);

移动端click点击事件300ms延迟介绍
在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。
FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

FormData 对象的作用

模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式。

Token =>令牌

保证项目的安全的，通过hash算法生成随机的字符串+用户名+用户密码+当前时间+其他的东西  

// 业务中真实的处理，h5的缓存· 会话级别的

并发： 很多个人同时请求一个接口

请求拦截和响应拦截的意义

请求拦截是 带token，让每次客户端向服务端发起的请求都携带上身份令牌

作用： 拦截一些无用的请求，减轻服务端的压力

响应拦截 ： 服务器返回的数据不一定都是可信的

不建议携带cookie 因为新版本的浏览器会认为cookie是一个不安全的东西

Vue最佳实践

一值多判断 （一个值的不同要进行多个值的判断）

render函数（） => 用来做什么的，和temple有什么关系？？？

templte的下一步 就是render（）通过render()创建一个虚拟dome =>   apend()=>真实dom        

render和template 叫类识别函数

document.createElement()是在对象中创建一个对象，要与appendChild() 或insertBefore()方法联合使用。其中，appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。

export default {
  props: {
    //按钮类型
    type: {
      type: String,
      // 默认值 容错处理
      default: 'normal'
    },
    text: {
      type: String,
      default: 'normal'
    }
  },
  render(h) {
    // h=>原生js中的createElement()
    // 第一个参数 将要创建的元素
    return h('button', {
      //v-bind:class
      class: {
        btn: true,
        'btn-success': this.type === 'success',
        'btn-danger': this.type === 'error',
        'btn-warn': this.type === 'warn',
        normal: this.type
      },
      domProps: {
        innerText: this.text || '默认按钮'
      },
      //on
      on: {}
    })
  }
}

懒加载的实现原理： 异步加载 在我们输入的路由的一瞬间  才会调用import后面的

try catch 错误处理；

执行规则：首先执行try中的代码 如果抛出异常会由catch去捕获并执行 如果没有发生异常 catch去捕获会被忽略掉 但是不管有没有异常最后都会执行。
try 语句使你能够测试代码块中的错误。

catch 语句允许你处理错误。

throw 语句允许你创建自定义错误。（抛出错误）

finally 使你能够执行代码，在 try 和 catch 之后，无论结果如何。