一个前端基础需要掌握的 28 个 JavaScript 技巧（第一章）

灰太狼 2021-02-04 15:29 626阅读 0赞

不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：

**1.判断对象的数据类型**

![format_png][]

使用 Object.prototype.toString 配合闭包，通过传入不同的判断类型来返回不同的判断函数，一行代码，简洁优雅灵活（注意传入 type 参数时首字母大写）  
**不推荐将这个函数用来检测可能会产生包装类型的基本数据类型上,因为 call 始终会将第一个参数进行装箱操作，导致基本类型和包装类型无法区分**  
**2. 循环实现数组 map 方法**

![format_png 1][]

使用方法：将 selfMap 注入到 Array.prototype 上（下面数组的迭代方法同理）

![format_png 2][]

值得一提的是，map 的第二个参数为第一个参数回调中的 this 指向，如果第一个参数为箭头函数，那设置第二个 this 会因为箭头函数的词法绑定而失效  
另外就是对稀疏数组的处理，通过 hasOwnProperty 来判断当前下标的元素是否存在与数组中(感谢评论区的朋友)  
**3. 使用 reduce 实现数组 map 方法**

![format_png 3][]

**4. 循环实现数组 filter 方法**

![format_png 4][]

**5. 使用 reduce 实现数组 filter 方法**

![format_png 5][]

**6. 循环实现数组的 some 方法**

![format_png 6][]

执行 some 方法的数组如果是一个空数组，最终始终会返回 `false`，而另一个数组的 every 方法中的数组如果是一个空数组，会始终返回 `true`  
**7. 循环实现数组的 reduce 方法**

![format_png 7][]

因为可能存在稀疏数组的关系，所以 reduce 需要保证跳过稀疏元素，遍历正确的元素和下标(感谢@神三元的提供的代码)  
**8. 使用 reduce 实现数组的 flat 方法**

![format_png 8][]

因为 selfFlat 是依赖 this 指向的，所以在 reduce 遍历时需要指定 selfFlat 的 this 指向，否则会默认指向 window 从而发生错误  
原理通过 reduce 遍历数组，遇到数组的某个元素仍是数组时，通过 ES6 的扩展运算符对其进行降维（ES5 可以使用 concat 方法），而这个数组元素可能内部还嵌套数组，所以需要递归调用 selfFlat  
同时原生的 flat 方法支持一个 depth 参数表示降维的深度，默认为 1 即给数组降一层维度

![format_png 9][]

传入 Inifity 会将传入的数组变成一个一维数组

![format_png 10][]

原理是每递归一次将 depth 参数减 1，如果 depth 参数为 0 时，直接返回原数组  
  
**9. 实现 ES6 的 class 语法**

![format_png 11][]

ES6 的 class 内部是基于寄生组合式继承，它是目前最理想的继承方式，通过 Object.create 方法创造一个空对象，并将这个空对象继承 Object.create 方法的参数，再让子类（subType）的原型对象等于这个空对象，就可以实现子类实例的原型等于这个空对象，而这个空对象的原型又等于父类原型对象（superType.prototype）的继承关系  
而 Object.create 支持第二个参数，即给生成的空对象定义属性和属性描述符/访问器描述符，我们可以给这个空对象定义一个 constructor 属性更加符合默认的继承行为，同时它是不可枚举的内部属性（enumerable:false）  
而 ES6 的 class 允许子类继承父类的静态方法和静态属性，而普通的寄生组合式继承只能做到实例与实例之间的继承，对于类与类之间的继承需要额外定义方法，这里使用 Object.setPrototypeOf 将 superType 设置为 subType 的原型，从而能够从父类中继承静态方法和静态属性  
**10. 函数柯里化**

![format_png 12][]

使用方法：

![format_png 13][]

柯里化是函数式编程的一个重要技巧，将使用多个参数的一个函数转换成一系列使用一个参数的函数的技术  
函数式编程另一个重要的函数 compose，能够将函数进行组合，而组合的函数只接受一个参数，所以如果有接受多个函数的需求并且需要用到 compose 进行函数组合，就需要使用柯里化对准备组合的函数进行部分求值，让它始终只接受一个参数

![format_png 14][]

**11. 函数柯里化（支持占位符）**

![format_png 15][]

使用方法：

![format_png 16][]

![format_png 17][]

通过占位符能让柯里化更加灵活，实现思路是，每一轮传入的参数先去填充上一轮的占位符，如果当前轮参数含有占位符，则放到内部保存的数组末尾，当前轮的元素不会去填充当前轮参数的占位符，只会填充之前传入的占位符  
**12. 偏函数**

![format_png 18][]

使用方法：

![format_png 19][]

偏函数和柯里化概念类似，个人认为它们区别在于偏函数会固定你传入的几个参数，再一次性接受剩下的参数，而函数柯里化会根据你传入参数不停的返回函数，直到参数个数满足被柯里化前函数的参数个数  
Function.prototype.bind 函数就是一个偏函数的典型代表，它接受的第二个参数开始，为预先添加到绑定函数的参数列表中的参数，与 bind 不同的是，上面的这个函数同样支持占位符  
**13. 斐波那契数列及其优化**

![format_png 20][]

利用函数记忆，将之前运算过的结果保存下来，对于频繁依赖之前结果的计算能够节省大量的时间，例如斐波那契数列，缺点就是闭包中的 obj 对象会额外占用内存  
另外使用动态规划比前者的空间复杂度更低，也是更推荐的解法

![format_png 21][]

**14. 实现函数 bind 方法**

![format_png 22][]

实现函数的 bind 方法核心是利用 call 绑定 this 指向，同时考虑了一些其他情况，例如

*  bind 返回的函数被 new 调用作为构造函数时，绑定的值会失效并且改为 new 指定的对象
 *  定义了绑定后函数的 length 属性和 name 属性（不可枚举属性）
 *  绑定后函数的 prototype 需指向原函数的 prototype（`真实情况中绑定后的函数是没有 prototype 的，取而代之在绑定后的函数中有个 内部属性 [[TargetFunction]] 保存原函数，当将绑定后函数作为构造函数时，将创建的实例的 __proto__ 指向 [[TargetFunction]] 的 prototype，这里无法模拟内部属性，所以直接声明了一个 prototype 属性`）

[format_png]: /images/1612452570009.jpg
[format_png 1]: /images/1612452554986.jpg
[format_png 2]: /images/1612452537930.jpg
[format_png 3]: /images/1612452520965.jpg
[format_png 4]: /images/1612452503409.jpg
[format_png 5]: /images/1612452486833.jpg
[format_png 6]: /images/1612452471131.jpg
[format_png 7]: /images/1612452406890.jpg
[format_png 8]: /images/1612452390828.jpg
[format_png 9]: /images/1612452373497.jpg
[format_png 10]: /images/1612452357157.jpg
[format_png 11]: /images/1612452337996.jpg
[format_png 12]: /images/1612452289474.jpg
[format_png 13]: /images/1612452289474.jpg
[format_png 14]: /images/1612452265465.jpg
[format_png 15]: /images/1612452248777.jpg
[format_png 16]: /images/1612452230913.jpg
[format_png 17]: /images/1612452214411.jpg
[format_png 18]: /images/1612452197916.jpg
[format_png 19]: /images/1612452180865.jpg
[format_png 20]: /images/1612452161738.jpg
[format_png 21]: /images/1612452141057.jpg
[format_png 22]: /images/1612452124145.jpg