前端知识点集合

一 JavaScript

原生DOM操作

原生DOM操作

• documen节点
  • document.createElement(‘div’) 创建元素节点
  • document.createAttribute()
  • document.getElementsByTagName() 根据标签名拿到为该标签的所有元素，返回一个HTMLCollection实例的数组对象
  • document.getElementsByClassName() 同上 拿到有该Class名的所有元素，返回一个HTMLCollection实例的数组对象
  • document.getElementsByName() 同上有name属性的所有元素、document.getElementById()
• Element节点
  • Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码
  • Element.attributes属性返回一个类似数组的对象，成员是当前元素节点的所有属性节点
  • Element.getAttribute()
  • Element.getAttributeNames()
  • Element.setAttribute()
  • Element.hasAttribute()
  • Element.hasAttributes()
  • Element.removeAttribute()

防抖节流(代码未实现)

• 防抖，在一次立即触发后，接下来一段时间后不再触发
• 节流，在一段时间后才触发

Array

Array

• 新建数组 var a =[1,2]；构造函数：let a = new Array(‘1’) ，传入单个数字生成多少个空位
• 判断是否为数组 Array.isArray()
• 实例方法:

  • push() 在数组前在数组最后一个位置添加元素，返回数组长度，改变原数组

  • pop() 删除并返回数组的最后一个元素，改变原数组

  • shift() 删除并返回数组第一个元素，改变原数组

  • unshift() 在数组第一个位置添加元素，返回数组长度，改变原数组

  • join() 拼接数组成字符串，根据传入的参数作为分隔符，不提供参数默认逗号分隔

  • concat() 多个数组合并，将传入的参数添加到原数组

  • reverse() 颠倒数组顺序并返回

  • slice() 提取数组一部分，包含左边不含右边，省略第二个参数，一直返回到最后；一个参数都没有，返回原数组拷贝

    Array.prototype.slice.call({ 0: 'a', 1: 'b', length: 2 })
    // ['a', 'b']
    
    Array.prototype.slice.call(document.querySelectorAll("div"));
    Array.prototype.slice.call(arguments);
    

  • splice() 删除原数组元素，还可以新增元素，返回被删的元素，改变原数组

  • sort() 字典序排序，也可传入函数，改变原数组

  • [10111, 1101, 111].sort(function (a, b) {
      return a - b;
    })// [111, 1101, 10111]
    

  • map() 遍历执行每一个元素，将处理后的元素组成新的数组返回

    let arr =  numbers.map(function (n) {
      return n + 1;
    });
    

  • forEach() 与map() 类似，但无返回值，改变原数组

  • filter() 过滤数组元素，过滤后的元素组成新数组返回

    [1, 2, 3, 4, 5].filter(function (elem) {
      return (elem > 3);
    })
    

  • some() every() ，some()数组元素只要一个满足条件返回true，every()所有元素都满足条件才返回true

  • reduce() reduceRight() ，

ES6

箭头函数和普通函数的区别：

掘金

• 箭头函数没有 prototype (原型)，所以不会有自己的this关键字，在使用this的时候始终继承上一层函数的this，并且call、apply、bind都不会改变其指向
• 箭头函数不能作为构造函数来使用，因为构造函数需要根据谁调用它，this指向谁，而箭头函数没有自己的this，只有继承上一层的固定this，则不能作为构造函数来使用
• 箭头函数不能绑定arguments，而是使用rest参数…代替，来访问箭头函数的参数列表。

let C = (...c) => {
  console.log(c);
}
C(3,82,32,11323);  // [3, 82, 32, 11323]

var、let、const

• var 存在着变量提升机制，被var定义的参数会被提升到该作用域的最顶部
• let没有变量提升机制，只在当前作用域有效；let禁止重复声明；
• const定义的是常量，必须要初始化，且不能改变，且是块级作用域有效；const变量不能修改指针，但能修改指针对应的值，比如对象值可以修改，但不能以一个新的对象赋予
• 暂时性死区：let const 不能提升带作用域顶部：

console.log(typeof value)   // "undefined"
let value = "蛙人"

• 最大区别：var定义的变量可以挂载到window对象上，作为全局对象的属性，而let const 不行；

var value1 = "张三"
let value2 = "李四"
const value3 = "王五"
console.log(window.value1) // 张三
console.log(window.value2) // undefined
console.log(window.value3) // undefined

promise

promise

• 三种状态pending、resolved、Fulfilled，变化结果pending=>resolved或者pending=>rejected;
• then链式操作，then中可以接受两个参数，一个是resolve的回调，一个是reject的回调
• catch方法，接受reject回调，出错抛出异常会移到catch方法内
• all :Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调，谁跑的慢，以谁为准执行回调。比如一个数组内每个元素都要执行一次异步操作：

this.arr = await new Promise.all( tempArr.map(item=>fetchById(item.id));

• race的用法：谁跑的快，以谁为准执行回调，用于给某个异步请求设置超时时间，并且在超时后执行相应的操作，代码如下：

二 html

三 CSS

1 css 选择器及选择器优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

2 伪类和伪元素的区别

伪类和伪元素的区别

• CSS2 中伪类、伪元素都是以单冒号:表示，CSS2.1 后规定伪类用单冒号表示，伪元素用双冒号::表示，但浏览器仍支持伪元素但冒号表示
• 伪类就是一个选择处于特定状态的元素的选择器，比如某一个cass的第一个元素，某个被hover的元素等等…，我们可以理解成一个特定的CSS类，但与普通的类不一样，它只有处于DOM树无法描述的状态下才能为元素添加样式，所以将其称为伪类
• 伪元素和伪类很像，但是伪元素类似于增添一个新的DOM节点到DOM树中，而不是改变元素的状态。注意了，这里是类似，而不是真的增加一个节点，这也是其被称为伪元素的原因（实质上，元素被创建在文档外）。

3 Flex 布局居中

Flex 布局居中

• 父元素 display: flex，然后再设置 justify-content: center 实现水平居中，最后设置 align-items: center 实现垂直居中。
• 子元素横向排列：flex-direction: row；使子元素竖向排列：flex-direction: column

4 盒模型

盒模型分为IE盒模型和W3C标准盒模型。

• W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding，border和padding改变，其width,height不改变

box-sizing: content-box;  //标准盒模型

• IE 盒模型：属性width,height包含border和padding，指的是content+padding+border，border和padding改变，其width,height要加上它们

box-sizing: border-box;   //IE盒模型，CSS3添加

• flex 布局

5 可继承性

• 所有元素可继承： visibility、cursor
• 内联元素的继承：line-height、color、font、font-family、font-size、font-style
• 块级元素继承：text-indent、text-align
• 列级元素的继承：list-style、list-style-type、list-style-position、list-style-image
• 表格元素继承：border-collapse、border-spacing、caption-side、empty-cells
  不能继承：display、margin、border、padding、background、height、min-height、display、margin、border、padding、background、height、min-height、float

四 算法题

1 JS求页面中出现最多次数的标签（未检查）

  var bodyNodes = document.body.getElementsByTagName('*');
        var max = 0;
        var mostTag = '';
        const len = bodyNodes.length;
        var map = new Map();
        for (let i = 0; i < len; i++) {
            let tag = bodyNodes[i];
            let value = map.get(tag);
            if (value) {
                if (value > max) {
                    max = value + 1;
                    mostTag = tag;
                }
                map.set(tag, value+ 1);
            } else {
                map.set(tag, 1);
            }
        }
        console.log(mostTag, max);

五 Vue

Vue-Router导航守卫（路由钩子）

Vue导航守卫

• 全局守卫：
  • router.beforeEach 全局前置守卫 进入路由之前 三个参数 to form next ， next()是回调函数，决定是否进入下一个页面
  • router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用
  • router.afterEach 全局后置钩子 进入路由之后
• 组件内守卫
  • beforeRouteEnter 进入路由前
  • beforeRouteUpdate (2.2) 路由复用同一个组件时
  • beforeRouteLeave 离开当前路由时
• 单个路由里面的钩子： beforeEnter

v-show 和 v-if

v-show本质就是通过设置css中的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

Vue双向绑定原理

• vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发响应的监听回调。
• 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
• 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
• 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

深入

• 监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
• 解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
• 订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式订阅器
• Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

vue-load

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件(SFC)的格式撰写 Vue 组件，转化为浏览器可识别的javascript。
vue-loader 的工作流程：

• 将一个 .vue 文件 切割成 template、script、styles 三个部分。
• template 部分 通过 compile 生成 render、 staticRenderFns。
• 获取 script 部分 返回的配置项对象 scriptExports。
• styles 部分，会通过 css-loader、vue-style-loader， 添加到 head 中， 或者通过 css-loader、MiniCssExtractPlugin 提取到一个 公共的css文件 中。
• 使用 vue-loader 提供的 normalizeComponent 方法， 合并 scriptExports、render、staticRenderFns， 返回 构建vue组件需要的配置项对象 - options， 即 {data, props, methods, render, staticRenderFns…}。

CSS scoped ：当 .vue 文件中的style标签有scoped属性时，会为每个class加上一个scopedId，作为组件的私有样式，而并非全局。

另外支持CSS深度选择，热更新。

vue和react的区别

vue和react

• 监听原理不同：vue通过getter、setter和数据劫持，能够精确知道数据变化，不需要特别地优化就可以达到很好的性能；React 通过比较引用的方式的方式进行，如果不优化，会导致VDOM的重新渲染，影响性能； React 不精确监听数据变化是因为react更强调数据的不变性，在构建大型应用更具鲁棒
• 数据流不同，React一直强调单向数据流：
  
• HOC和mixins：组合不同功能的方式，Vue是通过mixins，React是通过HoC(高阶组件)；高阶组件本质就是高阶函数，React 的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。Vue中组件是一个被包装的函数，不能直接传入高阶的组件；
• 组件通信的区别：React 和 Vue 父组件向子组件传递都是通过props的方式传递；子组件向父组件，Vue通过emit一个事件，React使用回调函数；
• 模板渲染方式的不同：Vue通过扩展的HTML语法（v-指令）来扩展；React是通过JSX渲染模板，通过原生JS实现模板常用语法
• Vuex 和 Redux 的区别

组件通信原理（）

响应式原理（）

响应式原理

nextTick

vue更新DOM是异步执行的，当数据发生变化，vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后再统一更新。而nextTick可以立刻得到更新后的DOM结构，其第一个参数为回调函数，第二个参数为执行函数上下文。

keep-alive

在组件切换的需求中，切换一次组件，组件会重新渲染一次，走一次生命周期，会导致两个问题：

• 组件切换频繁会降低导致性能变差
• 需要重新使用组件内数据时，切换组件经过销毁生命周期后导致组件内数据丢失

keep-alive 则会解决上面这两个问题，因为keep-alive组件有泸沽湖独有的生命周期钩子函数，activated和deactivated 钩子函数。
用keep-alive包裹的组件切换时不会被销毁，而是缓存到内存中并执行deactivated钩子函数，命中缓存渲染后执行activated钩子函数激活内存中组件。

六 计网

TCP与UDP的区别

• TCP面向连接，发送数据前首先要通过三次握手建立连接，断开连接会经过四次挥手；UDP面向无连接，发送数据前不需要建立连接；
• TCP会提供可靠的服务，通过拥塞控制、流量控制、数据校验、数据分片保证数据的可靠性；而UDP尽最大努力交付，即不保证可靠交付，在视频直播中使用UDP，网络出现拥堵时不会降低主机发送效率；
• TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道
• TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流；UDP是面向报文的；
• 每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信；
• TCP首部开销20字节;UDP的首部开销小，只有8个字节

url解析过程

跨域（）

跨域

HTTP状态码

添加链接描述

• 1XX 信息，服务器收到请求，客户端可以进行进一步请求
  • 100 continue 客户端应继续请求
  • 101 Switching Protocols 切换协议，如切换到更新的HTTP协议
• 2XX 成功
  • 200 OK 请求成功 主要是POST GET请求
  • 204 No Content 请求成功但无内容
• 3XX 重定向
  • 301 Moved Permanently 请求的资源URI已经永久移动了，返回信息会包括新的URI
  • 302 Found 临时移动 资源临时被移动，客户端应继续使用原有URI
  • 305 Use Proxy 请求的资源需经过代理来访问
• 4XX 浏览器错误
  • 400 Bad Request 浏览器请求语法错误，服务器无法解析
  • 401 Unauthorized 请求要求用户的身份认证
  • 403 请求被客户端拒绝
  • 404 浏览器所请求的资源无法访问
• 5XX 服务器错误
  • 500 Internal Server Error 服务器内部错误，无法完成请求。未配置后端，出现尝试代理失败错误
  • 503 Service Unavailable 超载或者系统维护
  • 504 Gateway Time-out 服务器响应超时，网关未能及时拿到数据

断点续传

有时用户上传/下载文件需要历时数小时，万一线路中断，不具备断点续传的 HTTP/FTP 服务器或下载软件就只能从头重传，比较好的 HTTP/FTP 服务器或下载软件具有断点续传能力，允许用户从上传/下载断线的地方继续传送，这样大大减少了用户的烦恼。

display:noe（）

display:none visibility:hidden opacity:0 区别

七 操作系统

八 设计模式