实现效果

大文件上传实现demo

原理解析

• 面试官：你如何实现大文件上传
• Node.js上传本地文件

JS 数据类型

基础数据类型

• Number
• String
• Boolean
• Null
• Undefined
• Symbol

引用数据类型

• Object
• Array
• Function

数据结构

• Map
• Set

String 原生方法

Number 原生方法

Object 原生方法

Object 遍历

Array 原生方法

Array 遍历

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

let arr = [1,2,3,4,5]

// 1.for 循环
for(let i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

// 2.for of
for(let it of arr) {
  console.log(it)
}

// 3.forEach
arr.forEach((it, index, _arr) =>{
  console.log(it, index, _arr)
})

// 4.map(参数为回调函数)函数，遍历数组每个元素，并回调操作，需要返回值，返回值组成新数组，原数组不变；
let arrMap = arr.map((it, i)=>{
  console.log(it, i)
  return it+1
})
console.log(arrMap)

// 5.filter(参数为回调函数)函数：过滤通过条件的元素组成一个新数组，原数组不变；
let arrFilter = arr.filter((it, i)=>{
  console.log(it, i)
  return it > 2
})
console.log(arrFilter)

// 6.some(参数为回调函数)函数，遍历数组中是否有符合条件的函数，返回布尔值；
const arrSome = arr.some((it,i) => {
  console.log(it, i)
  return it === 2
})
console.log(arrSome)

// 7.every(参数为回调函数)函数，遍历数组是否每个元素都符合条件，返回布尔值；
const arrEvery = arr.every((it,i) => {
  console.log(it, i)
  return it > 0
})
console.log(arrEvery)

// 8.find()函数，数组中的每个元素都执行这个回调函数；返回第一个满足条件的元素 之后的元素就不在调用；没有符合的返回undefined；并没有改变数组的原始值。
const arrFind = arr.find((it,i) => {
  console.log(it, i)
  return it > 2
})
console.log(arrFind)

// 9.reduce(),合并二维数组
var sum = arr.reduce((res, it)=>{
  console.log(it)
  res += it
  return res
}, 0);
console.log(sum)

如何判断数据类型？

• typeof xxx：能判断出number，string，undefined，boolean，object，function（null是object）
• Object.prototype.toString.call(xxx)：能判断出大部分类型
• Array.isArray(xxx)：判断是否为数组

typeof xxx 正常够用

能判断出number，string，undefined，boolean，object，function, BigInt, Synmol,
null判断为object: 因为底层存储为二进制 null 为000开头，与object类型一致，导致判断出错
array 判断为 object: 原因同上

Object.prototype.toString.call(xxx) 强烈建议

Array.isArray

Array.isArray 可以判断数组

对于大部分程序员来说：最重要的肯定是通过持续不断的学习，建立一个系统的知识支撑体系，使自己具备扎实的技术能力

前端三座大山：闭包，原型链，作用域

原型链

这可能是掘金讲「原型链」，讲的最好最通俗易懂的了，附练习题！

很多时候，中国大陆没法下载一些APP，比如Panda Vpn，需要使用美国的Apple ID，下面是教程，亲测可用

https://zhuanlan.zhihu.com/p/367821925

申请 SSL 证书

自2021年01月01日起，每个实名认证的阿里云主账号可以在一个自然年内，通过数字证书管理服务一次性领取20张免费DV单域名试用证书（以下简称免费证书）。获取免费证书后，您需要通过数字证书管理服务控制台提交证书申请。CA中心审核通过证书申请后，将为您签发免费证书。

步骤一：领取免费证书额度

每个自然年内，您都可以使用已完成实名认证的阿里云账号，通过数字证书管理服务一次性申领20张免费证书。如果一个自然年内20张免费证书的额度已用完，您可以付费购买和免费证书同类型的证书。

1. 访问免费证书购买页。
2. 选择您需要的购买数量，单击立即购买并完成支付。
   阿里云账号只有在一个自然年内首次购买数量为20的DV单域名证书（免费试用）时，可以免费领取。
   如果您的阿里云账号在当前自然年内已经领取过20张免费证书，则再次选购DV单域名证书（免费试用）时，需要支付对应的费用。

步骤二：提交免费证书申请

参考：申请免费DV单域名试用证书

部署 SSL 证书

SSL证书安装指南

参考文档：
SSL证书安装指南
部署证书到阿里云产品

服务器配置

1、安全组添加443端口

nginx配置添加ssl相关配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

#以下属性中，以ssl开头的属性表示与证书配置有关。
server {
    listen 443 ssl;
    #配置HTTPS的默认访问端口为443。
    #如果未在此处配置HTTPS的默认访问端口，可能会造成Nginx无法启动。
    #如果您使用Nginx 1.15.0及以上版本，请使用listen 443 ssl代替listen 443和ssl on。
    server_name yourdomain;
    root html;
    index index.html index.htm;
    ssl_certificate cert/cert-file-name.pem;  
    ssl_certificate_key cert/cert-file-name.key; 
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    #表示使用的加密套件的类型。
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3; #表示使用的TLS协议的类型，您需要自行评估是否配置TLSv1.1协议。
    ssl_prefer_server_ciphers on;
    location / {
        root html;  #Web网站程序存放目录。
        index index.html index.htm;
    }
}

FAQ

配置了HTTPS之后，有可能证书链不完整 解决方案：

【缺少证书链的问题和解决办法】

将证书放到服务器的指定位置

在nginx中修改完整ssl证书的配置

前言

CRM项目历史悠久，其中很多 文件或是 export 出去的变量 已经不再使用，非常影响维护迭代。举个例子来说，后端问你：“某某接口统计一下某接口是否还有使用？”你在项目里一搜，好家伙，还有好几处使用呢，结果那些定义或文件是从未被引入的，这就会误导你们去继续维护这个文件或接口，影响迭代效率。

unimported

unimported ： Find unused source files in javascript / typescript projects.

原理解析：

思路1：

• 与webpack打包类似，遍历整个项目的所有文件，找出所有的文件目录及依赖关系
• 找出没有被其他文件所引用的文件，就表示是unused source files

思路2：

• 与webpack打包类似，遍历整个项目的所有文件，找出所有的文件目录及依赖关系 treeA
• 通过入口文件 index.tsx 开始查找所有用到的文件及依赖关系 treeB
• 比较treeA 与 treeB，找出 unused source files

实践

1、当前文件是否被 imported，同理 引用当前文件的文件是否 被 imported
2、当前文件中 import 的文件 是否需要同时被 注释/删除？
3、确认当前文件 及 相关联的文件都处理完成之后，决定是否需要注释/删除

deadfile

deadfile Simple util to find deadcode and unused files in any JavaScript project (ES5, ES6, React, Vue, …)

实际使用感受：没有正确找出 deadcode and unused files，可能是使用的姿势不对…有待研究…

ts-unused-exports

ts-unused-exports finds unused exported symbols in your Typescript project.

no-unused-export

no-unused-export A CLI tool to check whether exported things in a module is used by other modules.

ts-prune

ts-prune Find potentially unused exports in your Typescript project with zero configuration.

depcheck

depcheck Depcheck is a tool for analyzing the dependencies in a project to see: how each dependency is used, which dependencies are useless, and which dependencies are missing from package.json.

拓展：

写一个工具，能够自动甄别 unused source files 并进行注释 或者 删除

参考：如何在大型代码仓库中删掉 6w 行废弃的文件和 exports？

应用性能前端监控，字节跳动这些年经验都在这了

前端工程化每个人都有不一样的理解，也没有一个权威和标准的定义，只要我们清楚为什么要工程化和工程化的意义那么具体的定义就变得不那么重要了。

首先前端工程化是把软件工程相关的方法和思想应用到前端开发中。

狭义上的理解：将开发阶段的代码发布到生产环境，包含：构建，分支管理，自动化测试，部署

广义上理解：前端工程化应该包含从编码开始到发布，运行和维护阶段

也有人把 前端工程化 等同于 效率工程

认为一切能提升前端开发效率、提高前端应用质量的方法和工具都是前端工程化，我觉得这么理解也是没有问题的，提升开发效率、提升产品质量、降低开发难度、降低企业成本应该是工程化的意义所在。

JS数组遍历

JS的数组的遍历方式有很多，每个的功能又不尽相同，因此想好好地整理一下它们之间的区别。这里只列举数组自带的API，主要有forEach、filter、map、reduce、some、every.

1.循环遍历

1
2
3
4

let arr = [1,9,4,2];
for(let i = 0; i < arr.length; i++) {
  onsole.log(arr[i]);
}

2.for of 方法

1
2
3

for(var item of arr) {
  item 遍历的数组的元素
}

3.forEach

1
2
3
4
5
6
7
8

let arr = [1,9,4,2];
arr.forEach(function(item,index,self){
  console.log(element);
  item 遍历出的每一个元素
  index 元素对应的下标
  self 数组本身
  无返回值
})

forEach几乎是最常用的遍历数组的方法了，forEach()被调用时不会直接改变原数组，没有返回值，也无法终止或者跳出。

4.map

1
2
3
4
5
6
7

let arr = [1,9,4,2]
let arrMap = arr.map((element, index, array) => {
    console.log(element)
    return element * 2
})
console.log(arr);
console.log(arrMap);

map和forEach类似，被调用时不修改数组本身，但是会返回一个新数组。

5.filter

1
2
3
4
5

let arr = [1,9,4,2]
let arrFilter = arr.filter((element, index, array) => {
    return element > 3;
})
console.log(arrFilter);

filter顾名思义就是过滤，因此数组的filter用来筛选符合条件的值。filter 不会直接改变原数组，它返回过滤后的新数组。

6.reduce

1
2
3
4
5
6
7
8
9
10

let arr = [1,9,4,2]
let arrReduce = arr.reduce((accumulator, currentValue, currentIndex, array)=>{
    console.log("accumulator:"+accumulator);
    console.log("currentValue:"+currentValue);
    console.log("currentIndex:"+currentIndex);
    console.log("array:");
    console.dir(array);
    return accumulator + currentValue;
})
console.log("arrReduce:"+arrReduce);

reduce和前面的3个循环不同，它的参数里有一个累加器的概念，并且有没有initialValue执行的次数也会有差别。为此整理了一个reduce的执行记录。
首先是没有initialValue的情况：

如果有initialValue，那如上的函数这样改写：

1
2
3
4
5
6
7
8
9
10

let arr = [1,9,4,2]
let arrReduce = arr.reduce((accumulator, currentValue, currentIndex, array)=>{
    console.log("accumulator:"+accumulator);
    console.log("currentValue:"+currentValue);
    console.log("currentIndex:"+currentIndex);
    console.log("array:");
    console.dir(array);
    return accumulator + currentValue;
},5)
console.log("arrReduce:"+arrReduce);

理解了reduce的执行过程就知道reduce的具体功用是什么了，MDN官方给出了如下几个场景:求和、计算单元素次数、按顺序执行promise、功能性管道等。

7.some

1
2
3
4
5
6

let arr = [1,9,4,2]
let arrSome = arr.some((element,index,array) => {
   return element>4
})
console.log(arr)
console.log(arrSome);

some遍历数组找寻符合条件的，找到了返回true，遍历完毕没有找到返回false。

8.every

1
2
3
4
5
6

let arr = [1,9,4,2]
let arrEvery = arr.every((element,index,array) => {
   return element<10
})
console.log(arr)
console.log(arrEvery);

every遍历数组检查符合条件的，有不符合立即返回false，遍历完毕全符合才返回true。

以上所列举的方法都不会改变原数组，遍历范围在第一次执行之后就已经确定，在callback中如果改变了数组，也不会生效。每一个API背后的运用场景MDN上都有详细的举例，如果想要有更高阶的运用就需要工作积累了。