中级前端工程师必须掌握的27项JavaScript技能(干货总结)

像许多其他语言一样，JavaScript需要很多技巧来完成各种事情。有些可能已经广为人知，有些可能会让你感到有些困惑。接下来，我们将介绍27个可以立即使用的JavaScript技巧。让我们和边肖一起看看他们。

1.确定数据类型

使用Object.prototype.toString带闭包可以保证判断数据类型的准确性，同时使这个函数非常灵活，通过传入不同的判断类型返回不同的判断函数(注意传入类型参数时首字母大写)。

2.ES5实现数组映射方法

值得一提的是，map的第二个参数在第一个参数的回调中引用了这个。如果第一个参数是箭头函数，设置第二个参数将无效，因为箭头函数的词法绑定。

3.使用reduce实现数组映射方法

4.ES5实现数组过滤方法

5.使用reduce实现数组过滤器方法

6.ES5实现了一些数组的方法

如果是空数组，执行some方法的数组将始终返回false，而如果是空数组，另一个数组的every方法中的数组将始终返回true。

7.ES5实现了数组的约简方法

8.用约简实现数组的扁平化方法

SelfFlat依赖于这个点，所以遍历reduce时需要指定selfFlat的这个点，否则默认会指向window，导致错误。

Principle通过reduce遍历数组，当数组的某个元素还是数组时，通过ES6的扩展运算符(ES5可以使用concat方法)来降维，这个数组元素内部也可能嵌套了一个数组，所以需要递归调用selfFlat。

同时，原生平坦方法支持深度参数来指示降维深度。默认值为1，这意味着数组减少了一个维度。

传入Inifity会将传入的数组更改为一维数组。

原则是每次递归将深度参数减少1。如果深度参数为0，将直接返回原始数组。

9.实现ES6类语法

ES6的类基于寄生组合继承，是目前最理想的继承方式。通过Object.create方法创建一个空对象，继承Object.create方法的参数，然后使子类的原型对象等于这个空对象，子类实例的原型等于这个空对象，这个空对象的原型等于它的父原型对象(superType.prototype)的继承关系。

虽然Object.create支持第二个参数，也就是为生成的空对象定义属性和属性描述符/访问器描述符，但是我们可以为这个空对象定义一个构造器属性，这个属性更符合默认的继承行为，它是一个可枚举的内部属性(enumerable:false)。

而ES6类允许子类继承其父类的静态方法和属性，普通的寄生组合继承只能从一个实例继承到另一个实例，需要定义类间继承的额外方法。这里，使用Object.setPrototypeOf将superType设置为subType的原型，从而继承父类的静态方法和属性。

10.功能核心化

用法：

核心化是函数编程的一项重要技能，它将一个具有多个参数的函数转化为一系列具有一个参数的函数。

函数编程的另一个重要函数Compose可以组合函数，组合函数只接受一个参数。因此，如果需要接受多个函数，并且需要使用compose来组合函数，那么就需要使用Corization来部分评估要组合的函数，这样它总是只接受一个参数。

借用谢玉博客中的一个例子：

11.函数核心化(支持占位符)

用法：

使用占位符可以使核心化更加灵活。实现思路是每一轮的输入参数首先要填充上一轮的占位符。如果当前的舍入参数包含占位符，它们应该放在内部保存的数组的末尾。当前轮次的元素不会填充当前轮次参数的占位符，只会填充之前输入的占位符。

12.部分功能

用法：

部分函数的概念类似于科里化的概念。个人认为区别在于分部函数会固定你传入的几个参数，一次接受剩下的参数，而函数Corization会根据你传入的参数返回函数，直到参数个数满足Corization前函数的参数个数。

Function.prototype.bind是部分函数的典型代表。它接受的第二个参数从预先添加到绑定函数的参数列表中的参数开始。与bind不同，上述函数还支持占位符。

13.斐波那契数列及其优化

通过使用函数内存，可以保存之前操作的结果，这可以为经常依赖于之前结果的计算节省大量时间，例如斐波那契数列。缺点是闭包中的obj对象会占用额外的内存。

14.实现函数绑定方法

函数的bind方法的核心是使用call，同时考虑一些其他情况，例如：

当绑定返回的函数被new作为构造函数调用时，绑定值将无效，new指定的对象定义了绑定函数的长度属性和名称属性(不可枚举属性)。绑定后，函数的原型应该指向原始函数

15.实现函数调用方法

原则是将函数作为传入上下文参数的属性来执行。为了防止属性冲突，这里使用了ES6的符号类型。

16.简单一氧化碳模块

用法：

Run函数接受一个生成器函数，只要遇到yield关键字，run函数包装的生成器函数就会停止。当成功解析yield之后的承诺时，它将自动调用next方法来执行它到next yield关键字，这将最终形成每当成功解析一个承诺时将解析下一个承诺。当所有解析成功时，将打印所有解析结果，这将演变为最常用的异步/等待语法。

17.功能防抖

前导是输入时是否执行一次，尾随是事件触发后是否再次触发。原则是使用计时器。如果事件在指定时间内再次触发，最后一个计时器将被清除，也就是说，在计时器中的功能在指定时间后自动触发之前，不会执行该功能，并且会重置一个新的计时器。

同时通过闭包暴露了一个取消功能，让外部可以直接清除内部计数器。

18.功能节流

和功能防抖类似，不同的是内部时间戳作为判断，在一段时间内不触发事件，允许触发下一个事件。

19.图片懒得加载

getBoundClientRect的实现监控滚动事件(建议在监控事件中添加限制)。图片加载后，会从由img标签组成的DOM列表中删除。最后，加载完所有图片后，需要解除监控事件的绑定。

intersectionbserver的实现实例化了一个intersectionbserver，并使其观察所有的img标签。

当img标签进入可视区域时，实例化时会执行回调，并在回调中传递一个entries参数，保存实例观察到的所有元素的一些状态，比如每个元素的边界信息、当前元素对应的DOM节点、当前元素进入可视区域的速率等。每当一个元素进入视觉区域，真实的图片将被分配给当前的img标签，同时观察将被释放。

20.新关键词

21.实现对象。分配

关于对象分配的原理，请参考我的另一篇博客。

22.实例f

其原理是递归遍历右参数的原型链，每次与左参数比较时，返回false

23.私有变量的实现

使用代理来代理所有以_开头的变量，以使外部世界无法访问它们。

以闭包的形式保存私有变量的缺点是类的所有实例都访问同一个私有变量。

另一个闭包的实现解决了上述闭包的缺点。每个实例都有自己的私有变量。缺点是放弃了类语法的简单性，将所有特权方法(访问私有变量的方法)保存在构造函数中。

使用WeakMap和闭包，由当前实例和所有私有变量组成的对象在每次实例化时都会被保存，闭包中的WeakMap不能被外部访问。使用WeakMap的好处是不需要担心内存溢出。

24.洗牌算法

早期的chrome对元素少于10的数组使用插入排序，导致了数组的无序，并不是真正的无序。即使最新版本的chrome采用了原位算法，这使得排序成为一种稳定的算法，但无序问题仍然没有解决。

真正的乱序可以通过洗牌算法来实现，洗牌算法可以分为原地洗牌和非原地洗牌。图1是原地洗牌算法，不需要声明额外的数组，从而节省了更多的内存占用率。原理是依次遍历数组的元素，随机选择当前元素中的一个及其后的所有元素进行交换。

25.单一模式

单例模式是通过ES6的Proxy拦截构造函数的执行方法实现的。

26.许诺

用法：

Promisify函数是将回调函数改为promise的辅助函数，适用于错误优先风格的回调函数。原则是最后一个回调函数将在错误优先风格回调成功或失败后执行。我们需要做的是让这个回调函数控制承诺的状态。

这里用Proxy表示整个fs模块，截取get方法，使得用一层promisify函数封装fs模块的所有方法更加灵活。

27.优雅地处理异步/等待

用法：

不需要每次使用async/await时都包装一层try/catch，这样更优雅。还有一个想法。如果使用webpack，可以编写一个加载器，分析AST语法树，遇到await语法时自动注入try/catch，这样甚至不需要使用辅助函数。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。