作为 Javascript 的标准对象之一，数组是非常底层而且实用的数据结构。虽然结构很简单，但是用好却不简单，包括我一开始学习 JS 的时候看到一堆原生方法也是很蒙蔽，怎么能有这么多方法。而且数组的各种方法各有其特点和使用场景，如果你还停留在 for 循环一把梭的阶段，也就是数组元素拼接，遍历等操作都是用 for 循环来完成的阶段，那么这篇文章非常适合你，或者你也可以推给你的坑逼同事︿(￣︶￣)︿。 构造数组 字面量形式 一个原则：能用字面量构造的类型尽量用字面量构造。例如对象，数组，字符串等一票基本类型，[1, 2, 3] 比起 new Array(1, 2, 3) ，可读性和精简程...

加密在编程中的应用的是非常广泛的，尤其是在各种网络协议之中，对称/非对称加密则是经常被提及的两种加密方式。 对称加密 我们平时碰到的绝大多数加密就是对称加密，比如：指纹解锁，PIN 码锁，保险箱密码锁，账号密码等都是使用了对称加密。 对称加密：加密和解密用的是同一个密码或者同一套逻辑的加密方式。 这个密码也叫对称秘钥，其实这个对称和不对称指的就是加密和解密用的秘钥是不是同一个。 我在上大学的时候做过一个命令行版的图书馆管理系统作为 C 语言课设。登入系统时需要输入账号密码，当然，校验用户输入的密码本身就是一种对称加密，用户必须输入的密码必须和你之前设置的账号密码相同。 当...

系统，扎实的 javascript 语言基础是一个优秀的前端工程师必须具备的。在看了一些关于 call，apply，bind 的文章后，我还是打算写下这篇总结，原因有几个。首先，在如今 ES6 大行其道的今天，很多文章中讲述的它们的应用场景其实用 ES6 可以更优雅的解决，但是基本上·没有文章会去提 ES6 的解法。再则，讲它们的实现原理的文章其实不少，但是或多或少实现的有些不够完美，本文将把它们通过代码一一比较完美的实现，让它们不再神秘。不谦虚的说，关于 call，apply，bind 的知识，看这一篇文章就够了。 改变函数中 this 指向的三兄弟 我们知道在 javascript 的...

浏览器 HTTP 缓存是一种常见的 web 性能优化的手段，也是在前端面试中经常被考察的一个知识点。本文通过配置 koa2 服务器，在实践中带你探究浏览器的 HTTP 缓存机制。 先来直观认识一下浏览器 HTTP 缓存： 上面是打开浏览器后直接访问 V2EX 首页后的截图，矩形圈起来的那块也就是 size 部分显示的都是 from disk cached，说明这些资源命中了强缓存，强缓存的状态码都是 200。 再来看看我直接访问上面箭头指向的那张图片是什么情况： 可以看到返回码是 304，并且请求的时候带上了协商缓存用于协商的两个请求头 if-modifi...

9102 年了，前端工程化发展在 nodejs 的基础上已经发展的非常完善了，各种前端构建辅助工具层出不穷。ES6 编译器 babel，css 辅助工具 postcss / sass / less，代码风格检测工具 eslint / prettier / stylelint，git 辅助工具 husky / lint-staged / commitizen / commitlint，自动化构建工具 webpack / gulp / grunt，测试工具 jest / mocha 等等。 这么多开发辅助工具每次写项目都去配置一遍那也太浪费时间了，自己维护一套模板有得时不时去更新。比较方便的配置...

自从我深入了解了 react hooks，被其简洁的编写方式和强大的扩展性深深吸引，然后我就迫不及待地想把它应用到实际项目中。 使用下来发现，真香！但是坑也不少。react hooks 使用起来代码确实简洁不少，甚至说有点黑魔法的味道。如果使用者不怎么了解 hooks 实现原理和函数组件的渲染过程，很容易导致使用 hooks 编写组件时出现一些很离奇的 bug，所以使用好 hooks 还是需要一定的学习成本。 这篇文章主要讨论 react 中类组件和函数组件的一些区别。 函数组件和 class 组件渲染过程的区别 先来看看测试代码： import * as React from &q...

虽然有点标题党的嫌疑，但是内容绝对是满满的的干货。很多扩展功能比较单一，直接用一张图就能很清楚说明它的用途啦。出于篇幅的限制，我在这里会重点介绍一些我个人比较用得上的一些扩展。因为平时前端开发的比较多，所以偏向前端程序员的扩展可能会比较多一些。 我本人对 chrome 扩展比较挑，一般有同类型的扩展我会选择维护比较积极的，使用人数更多的。像有些 3 年都没更新过的扩展我基本上是不会用的，除非这个扩展本身功能比较简单，不需要更新。我平时有事没事就会去 chrome 扩展市场去逛逛，所以积累的优秀扩展比较多。一大波图片即将袭来, 请在 wifi 条件下或者流量充足的情况下阅读。 让 chrom...

其实爬虫是一个对计算机综合能力要求比较高的技术活。 首先是要对网络协议尤其是 http 协议有基本的了解, 能够分析网站的数据请求响应。学会使用一些工具，简单的情况使用 chrome devtools 的 network 面板就够了。我一般还会配合 postman 或者 charles 来分析，更复杂的情况可能举要使用专业的抓包工具比如 wireshark 了。你对一个网站了解的越深，越容易想出简单的方式来爬取你想获取的信息。 除了要了解一些计算机网络的知识，你还需要具备一定的字符串处理能力，具体来说就是正则表达式玩的溜，其实正则表达式一般的使用场景下用不到很多高级知识，比较常用的有点小复...

常用模块 常用模块有以下几个: fs-extra superagent cheerio log4js sequelize chalk puppeteer fs-extra 使用 async/await 的前提是必须将接口封装成 promise, 看一个简单的例子: const sleep = (milliseconds) => { return new Promise((resolve, reject) => { setTimeout(() => resolve(), milliseconds) })...

这篇文章主要记录一下平时自己实践得到的, 博客中学习的以及在一些项目源码中看到的 javascript 技巧。有些东西可以说是奇淫技巧，有些可能是 ES6+ 中一些比较具有实用性的新语法。 && 和 || 的妙用 有时候我们需要在某个函数或变量为 true 时执行另外一个函数。例如: const task1 = () => { console.log('执行 task1'); return Math.random() >= 0.5; } const task2 = () => console.log('task1 执行成功后执行 tas...