1、前置知识 - 事件触发顺序 PC网页上的大部分操作都是用鼠标的，即响应的是鼠标事件，包括mousedown、mouseup、mousemove和click事件。一次点击行为，可被拆解成：mousedown -> mouseup -> click 三步。 在手机上没有鼠标，所以就用触摸事件去实现类似的功能。touch事件包含touchstart、touchmove、touchend，注意手机上并没有tap事件。手指触发触摸事件的过程为：touchstart -> touchmove -> touchend。虽然手机上没有鼠标，但不代表手机不能响应mouse事件（其实是...

js数组去重在前端面试中是经常被问道的问题，今天简单总结几种经典的数组去重方法以及一些大厂的面试题。 1、数组去重的常规方法 数组去重的常规思路总结如下: Set + ...\Array.form => 无法去掉{} 新数组 + indexOf方法 => 无法去掉NaN和{} 新数组 + includes方法 => 无法去掉{} filter + indexOf => 无法去掉{}, 两个NaN都会去掉, 不建议使用 双重for循环 + splice方法 => 无法去掉NaN和{} 新数组 + Map => 无法去掉{} 新数组 + 对象 => 所...

1、何为闭包 闭包简单总结就是：内层函数引用外层函数中变量，这些变量的集合就是闭包。 形成闭包的条件: 函数嵌套 内部函数引用外部函数的变量 闭包的应用场景：将内部的函数返回到外部去。 对闭包形成以及应用的示例代码如下(下面的代码是实现了一个经典的计时器): const closure = () => { // 补全代码 let i=1; return function() { return i++; } }; // test const test = closure(); console.log(test()); // 1 console.log(test...

1、什么是Promise(为什么要有Promise) 简单说：异步编程的一种解决方案，解决了地狱回调的问题。 回调地狱: 指的是在请求的时候往往要根据当前请求结果继续请求, 这个时候就会造成代码可读性差、维护性差、复用性差, 另外只能在回调之中处理异常。 由此，推出了promise这种异步编程的解决方案，在es6中被统一了用法，原生提供了promise对象。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。 2、Promise的核心原理 promise的核心原理其实就是发布订...

1、let代替var的原因 JavaScript的ES6标准中提出了用let来声明变量, 用let来代替var来声明变量的原因是var在使用过程中存在一些问题, 这些问题在实际项目中会造成不小的麻烦, var的问题简单总结如下: 声明提升 没有块级作用域(var是函数级作用域) 声明覆盖 2、详解var存在的问题 声明提升 所谓的变量提升(Hoisting)就是：在任何作用域中使用var声明的变量，都会被提升到其作用域最顶部，也就是说该变量的作用域相当于其函数或者全局，但是其赋值操作还是在原先的位置。示例代码如下: console.log(name); // undefined var n...

1、arr.reduce详解 array.reduce(function (total, currentValue, currentIndex, arr), initialValue): initialValue为传递给回调函数的total初始值 function中若干参数的解释如下: total: 初始值initialValue或上一次迭代时fun的返回值 currentValue: 当前值 currentIndex: 当前索引 => 可省略 arr: 要累加的arr非空数组 => 可省略 注意: 当 initialValue 的值为空的，也就是没有初始值时，函数第一...

1、浏览器的渲染过程 想清楚的理解回流与重绘之前, 要先清楚的理解浏览器的渲染过程是怎么样的。 浏览器的渲染过程大致如下： 构建DOM树和CSSOM树: 解析 HTML,生成 DOM 树，解析 CSS,生成 CSSOM树 构建渲染树: 将 DOM树 和 CSSOM树结合，生成渲染树（Render Tree） 布局: 渲染树的每个元素包含的内容都是计算过的，它被称之为布局（layout）。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素 绘制: 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制（painting） 2、回流(reflow)与重构(repaint) 回流 ...

1、js对象的浅拷贝和深拷贝 对于基本数据类型而言, 不存在浅拷贝和深拷贝之分, 基本类型数据都是值类型，存储在栈内存中，每次赋值都是一次复制的过程。所谓浅拷贝深拷贝只是针对引用类型(对象)而言。 浅拷贝深拷贝具体解释如下： 浅拷贝: 只是拷贝一层，更深层次对象级别的只拷贝了地址。 深拷贝: 拷贝多层，即使是嵌套了对象，也会都拷贝出来，内容和原对象一样，更改原对象，拷贝对象不会发生变化。 在浅拷贝的时候如果数据是基本数据类型，那么就如同直接赋值那种，会拷贝其本身，如果除了基本数据类型之外还有一层对象，那么对于浅拷贝而言就只能拷贝其引用，对象的改变会反应到拷贝对象上。具体实例见2中的代码。 ...

1、前端中的节流防抖 在Web前端中, 所谓节流防抖是为了防止用户在较短时间内的多次操作引发的动作执行，其是前端项目常用的一种优化手段。比如，用户在1秒内多次点击点赞按钮导致点赞请求发送多次；防止在用户拉动滚动条时多次触发加载更多的情况。 2、节流 何为节流 所谓节流，指的是在一段时间之内，用户的多次请求只会执行一次(确保在每一个特定的时间段内被执行一次)。换人话说就是高频率触发的事件, 在指定的单位时间内, 只响应第一次(前面触发的执行前，忽略后面的事件)。 代码实现 大概步骤如下: 利用闭包保存一个flag变量, 然后返回一个函数 第一次进入时会设置定时器(timeout时间之后再执行)...

ts中的?、??、!、!! 有时候经常分不清楚ts中的?和!, 今天来详细介绍一下。 下面是?、??、!、!!的基本介绍: 属性或参数中使用?表示该属性或参数为可选项 ??表示只有当左侧为null和undefined时, 才会返回右侧的数 属性或参数中使用!表示表示强制解析（告诉typescript编译器，这里一定有值) 变量前使用!表示取反, 变量后使用!表示类型推断排除null、undefined从而使null 和undefined类型可以赋值给其他类型并通过编译 !!表示将把表达式强行转换为逻辑值 ?相关代码 当使用A对象属性A.B时，如果无法确定A是否为空，则需要用A?.B，表示当...

1、什么是加密算法 所谓加密算法就是对原来为明文的文件或数据按某种算法进行处理，使其成为不可读的一段密文，使其只能在输入相应的密钥之后才能显示出原容，通过这样的途径来达到保护数据不被非法人窃取、阅读的目的。 该过程的逆过程为解密，即将该编码信息转化为其原来数据的过程。 2、加密算法的分类 加密算法具体而言可分为以下三类： 信息摘要算法：又叫哈希算法(hash), 不可逆, 常用于不需要解密的场景。 对称加密算法：加密和解密的密钥是一样的。 非对称加密算法：加密和解密的密钥是不一样的。 注意：上述的对称加密和非对称加密又有人称之为双向加密（存在加密和解密的过程）。 hash算法 加密过程不需...

1、问题背景 本周基于JavaScript的node.js做了个命令行程序，本人实现了三个命令： ls：列举出当前工作目录下的所有文件和目录。 cloc：列举出给定文件或者文件夹的代码统计结果（注释行数、代码行数、空行数、文件总数）等信息。 wget：根据给定的URL下载文件。 另外命令行程序已经实现了以下的命令(老师提供的)： cd：目录切换 cls：清屏 exit：退出交互 2、问题描述 ls、cloc、wget三个命令单独使用的时候都没有问题，但是当在使用cloc命令之前曾使用cd命令改变当前目录时, 系统会报错: Trace: Error: ENOENT: no such fi...

TypeScript是微软公司为了给JavaScript添加类型特点而开发出来的一种开源编程语言，目前在前端的企业开发中经常使用到TypeScript。今天我给大家简要介绍一下TypeScript。 1、TypeScript的类型特点 TypeScript的类型特点简单说就是为JavaScript添加了静态类型。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统上。目前由于TypeScript具备的静态类型，在开发阶段就可以减少很多bug从而在一定程度上提升开发效率，TypeScript在企业级前端开发中已经是一项普遍...

1、问题背景 在用hooks改写之前的项目时，AlbumList组件以props的形式传入了数据（歌曲数组），并且实现了一个删除事件的响应函数。为了实现删除某个数据之后更新整个组件，将setAlbums方法用函数封装，并将这个函数传入到子组件中。 子组件代码: // AlbumList.tsx import { IAlbum } from "../utils/types"; // 引入组件 import Album from "./Album"; interface IAlbumListProps { albums: IAlbum[]; currentArea: number; ...