前端面试总结

1.组件库：https://cnpmjs.org/package/ukelli-ui

2.数组方法： splice : index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。 item1, ..., itemX 可选。向数组添加的新项目。

splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

slice: arrayObject.slice(start,end) 参数 描述 start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。 end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。 当slice()不带任何参数的时候，默认返回一个长度和原数组相同的新数组

3.vsCode插件： Auto Close Tag Auto Rename Tag Code Runner Code Spell Checker ES7 React/Redux/GraphQl/... GitLens-Git..

4.常用正则表达式： 出生日期: /^((19[2-9]\d{1})|(20((0[0-9])|(1[0-8]))))((0?[1-9])|(1[0-2]))((0?[1-9])|(1-2)|30|31)$/ 身份证号： /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))((0-2)|10|20|30|31)\d{3}[0-9Xx]$/g 住址: /^[-.\w\u4e00-\u9fa5]+$/ 姓名： /^[a-zA-Z0-9\u4e00-\u9fa5]+$/ 用户名： /^[a-z0-9-]{3,16}$/ 密码： /^[a-z0-9-]{6,18}$/ 十六进制值： /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ 电子邮箱： /^([a-z0-9.-]+)@([\da-z.-]+).([a-z.]{2,6})$/ URL： /^(https?:\/\/)?([\da-z.-]+).([a-z.]{2,6})([\/\w .-])\/?$/ IP 地址： /^(?:(?:25[0-5]|20-4|[01]?0-9?).){3}(?:25[0-5]|20-4|[01]?0-9?)$/ HTML 标签： /^<([a-z]+)(<+)(?:>(.)<\/\1>|\s+\/>)$/

5.void void的字面意思是“无类型”，void *则为“无类型指针”，void *可以指向任何类型的数据。void几乎只有“注释”和限制程序的作用，因为从来没有人会定义一个void变量，让我们试着来定义：

void a;

这行语句编译时会出错，提示“illegal use of type 'void'”。不过，即使void a的编译不会出错，它也没有任何实际意义。

规则一：如果函数没有返回值，那么应声明为void类型

在C语言中，凡不加返回值类型限定的函数，就会被编译器作为返回整型值处理。但是许多程序员却误以为其为void类型。例如：add ( int a, int b ){return a + b;}int main(int argc, char* argv[]){printf ( "2 + 3 = %d", add ( 2, 3) );}

程序运行的结果为输出：2 + 3 = 5，这说明不加返回值说明的函数的确为int函数。

6.nginx

Nginx("engine x")是一款是由俄罗斯的程序设计师Igor Sysoev所开发高性能的 Web和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。

在高连接并发的情况下，Nginx是Apache服务器不错的替代品。

7.New 构造函数

new命令的原理

使用new命令时，它后面的函数调用就不是正常的调用，而是依次执行下面的步骤。

创建一个空对象，作为将要返回的对象实例 将这个空对象的原型，指向构造函数的 prototype 属性 将这个空对象赋值给函数内部的 this 关键字 开始执行构造函数内部的代码 也就是说，构造函数内部， this 指的是一个新生成的空对象，所有针对 this 的操作，都会发生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目的，就是操作一个空对象（即 this 对象），将其“构造”为需要的样子。

如果构造函数内部有return语句，而且return后面跟着一个对象， new 命令会返回 return 语句指定的对象；否则，就会不管 return 语句，返回 this 对象。

8.https://srtian.github.io/srtian.github.io/2019/07/04/初探%20async%20await/

9.async和await

Async -异步定义函数 自动把函数转为 Promise 当调用异步函数时，函数返回值会被resolve处理 异步函数内部可以使用await Await-暂停异步函数的执行 当使用在Promise前面时，await等待Promise完成，并完成Promise的结果 await只能和Promise一起使用，不能和callback一起使用 await只能用在async函数中

10.柯里化函数

柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

// 普通的add函数 function add(x, y) { return x + y }

// Currying后 function curryingAdd(x) { return function (y) { return x + y } }

add(1, 2) // 3 curryingAdd(1)(2) // 3 实际上就是把add函数的x，y两个参数变成了先用一个函数接收x然后返回一个函数去处理y参数。现在思路应该就比较清晰了，就是只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。

Currying有哪些好处呢？参数复用

11.redux-saga

redux-saga是一个管理redux应用异步操作的中间件，用于代替 redux-thunk 的。它通过创建 Sagas 将所有异步操作逻辑存放在一个地方进行集中处理，以此将react中的同步操作与异步操作区分开来，以便于后期的管理与维护。对于Saga，我们可简单定义如下：

Saga = Worker + Watcher

redux-saga相当于在Redux原有数据流中多了一层，通过对Action进行监听，从而捕获到监听的Action，然后可以派生一个新的任务对state进行维护（这个看项目本身的需求），通过更改的state驱动View的变更。

12.调用 setState 之后发生了什么？

在代码中调用 setState 函数之后，React 会将传入的参数对象与组件当前的状态合并，然后触发所谓的调和过程（Reconciliation）。经过调和过程，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面。在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染。在差异计算算法中，React 能够相对精确地知道哪些位置发生了改变以及应该如何改变，这就保证了按需更新，而不是全部重新渲染。

13.React 中 keys 的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

14.redux

了解 redux 么，说一下 redux 把 redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理，主要有三个核心方法，action，store，reducer，工作流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操作，view 通过 store 提供的 getState 获取最新的数据，flux 也是用来进行数据操作的，有四个组成部分 action，dispatch，view，store，工作流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新，更新完成以后 store 发出 change，view 接受 change 更新视图。Redux 和 Flux 很像。主要区别在于 Flux 有多个可以改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，但是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并,结构更加简单清晰 新增 state,对状态的管理更加明确，通过 redux，流程更加规范了，减少手动编码量，提高了编码效率，同时缺点时当数据更新时有时候组件不需要，但是也要重新绘制，有些影响效率。一般情况下，我们在构建多交互，多数据流的复杂项目应用时才会使用它们 redux 有什么缺点 一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取。 当一个组件相关数据更新时，即使父组件不需要用到这个组件，父组件还是会重新 render，可能会有效率影响，或者需要写复杂的 shouldComponentUpdate 进行判断。

15.react diff 原理（常考，大厂必考）

把树形结构按照层级分解，只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性，方便比较。 React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。

16.websocket

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

WebSocket 事件 以下是 WebSocket 对象的相关事件。假定我们使用了以上代码创建了 Socket 对象：

事件 事件处理程序 描述 open Socket.onopen 连接建立时触发 message Socket.onmessage 客户端接收服务端数据时触发 error Socket.onerror 通信发生错误时触发 close Socket.onclose 连接关闭时触发

17.你对受控组件和非受控组件了解多少？

18.排序算法

冒泡排序： for (i=0; i<len-1; i++) / 外循环为排序趟数，len个数进行len-1趟 / for (j=0; j<len-1-i; j++) { / 内循环为每趟比较的次数，第i趟比较len-i次 / if (arr[j] > arr[j+1]) { / 相邻元素比较，若逆序则交换（升序为左大于右，降序反之） */ temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } *选择排序： for (int i = 0; i < arr.length - 1; i++) { int min = i; for (int j = i + 1; j < arr.length; j++) { if (arr[min] > arr[j]) { min = j; } } if (min != i) { int tmp = arr[min]; arr[min] = arr[i]; arr[i] = tmp; } } *快速排序 *sort排序

19.数组去重

* Array.filter() + indexOf

这个方法的思路是，将两个数组拼接为一个数组，然后使用 ES6 中的 Array.filter() 遍历数组，并结合 indexOf 来排除重复项

function distinct(a, b) { let arr = a.concat(b); return arr.filter((item, index)=> { return arr.indexOf(item) === index }) } * 双重 for 循环

最容易理解的方法，外层循环遍历元素，内层循环检查是否重复

当有重复值的时候，可以使用 push()，也可以使用 splice()

function distinct(a, b) { let arr = a.concat(b); for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j<len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); // splice 会改变数组长度，所以要将数组长度 len 和下标 j 减一 len--; j--; } } } return arr } * for...of + includes()

双重for循环的升级版，外层用 for...of 语句替换 for 循环，把内层循环改为 includes()

先创建一个空数组，当 includes() 返回 false 的时候，就将该元素 push 到空数组中

类似的，还可以用 indexOf() 来替代 includes()

function distinct(a, b) { let arr = a.concat(b) let result = [] for (let i of arr) { !result.includes(i) && result.push(i) } return result } * Array.sort()

首先使用 sort() 将数组进行排序

然后比较相邻元素是否相等，从而排除重复项

function distinct(a, b) { let arr = a.concat(b) arr = arr.sort() let result = [arr[0]]

for (let i=1, len=arr.length; i<len; i++) {
    arr[i] !== arr[i-1] && result.push(arr[i])
}
return result

} * new Set()

ES6 新增了 Set 这一数据结构，类似于数组，但 Set 的成员具有唯一性

基于这一特性，就非常适合用来做数组去重了

function distinct(a, b) { return Array.from(new Set([...a, ...b])) }

20.JS代码机制的执行顺序

macro-task(宏任务)：包括整体代码script，setTimeout，setInterval micro-task(微任务)：Promise，process.nextTick console.log('1'); setTimeout(function() { console.log('2'); process.nextTick(function() { console.log('3'); }) new Promise(function(resolve) { console.log('4'); resolve(); }).then(function() { console.log('5') }) }) process.nextTick(function() { console.log('6'); }) new Promise(function(resolve) { console.log('7'); resolve(); }).then(function() { console.log('8') }) setTimeout(function() { console.log('9'); process.nextTick(function() { console.log('10'); }) new Promise(function(resolve) { console.log('11'); resolve(); }).then(function() { console.log('12') }) }) 输出结果为：1,7,6,8, 2,4,3,5, 9,11,10,12

21.深拷贝和浅拷贝的区别

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用

深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

（一）深拷贝数组：var array = [1, 2, 3, 4];

1.使用for in直接遍历 2.使用slice()： slice() 方法返回一个从已有的数组中截取一部分元素片段组成的新数组（不改变原来的数组！）

用法：array．slice(start,end)　start表示是起始元素的下标，　end表示的是终止元素的下标

3.使用concat()： concat() 方法用于连接两个或多个数组。( 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。)

用法：array.concat(array1,array2,......,arrayN)

（二）深拷贝对象： 1.直接遍历 2.ES6的Object.assign（）： Object.assign：用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target），并返回合并后的target

用法： Object.assign(target, source1, source2); 所以 copyObj = Object.assign({}, obj); 这段代码将会把obj中的一级属性都拷贝到 ｛｝中，然后将其返回赋给copyObj

对多层嵌套对象，很遗憾，上面三种方法，都会失败： （三）深拷贝多层级对象：

1.不仅拷贝第一层级，还能够拷贝数组或对象所有层级的各项值

1. 不是单独针对数组或对象，而是能够通用于数组，对象和其他复杂的JSON形式的对象

JSON.parse(JSON.stringify(XXXX))

22.https://juejin.im/post/5d5fdfb26fb9a06af7123e4f面试题链接

23.git命令

git add . /git commit -m ''/git status/git fetch/git rebase/git pull/git push/git stash/git stash pop/git checkout ./git branch/git checkout -b,-d/git remote/git show/git log/git push dev origin/git reset/git remote update origin --prune/git diff/git reflog