【前端】我的lodash使用记录

深拷贝cloneDeep

有处理深拷贝中的循环引用以及深度过大引起的爆栈问题，但是发现函数的拷贝还是引用而不是重新创建。

这点不太确定是否会有影响，了解即可。

const lodash = require('lodash')

window.FUN = {hanleClose: function() { window.close1111() }}
const newFUN = _.cloneDeep(window.FUN)
console.log(window.FUN.hanleClose === newFUN.hanleClose) // true

重新创建一个相同的函数可以用下面方式

function func() {}
// 方式1， 很多函数库都是用这个方法
var closeFunc = new Function('return ' + func.toString())();

// 方式2， 利用bind 返回函数
var closeFunc = func.prototype.bind({});

扩展：遇到下面问题

const lodash = require('lodash')

window.FUN = {hanleClose: function() { window.close1111() }}
const newFUN = _.cloneDeep(window.FUN)
// const newFUN = _.clone(window.FUN)
// const newFUN = {...window.FUN}
console.log(window.FUN.hanleClose === newFUN.hanleClose) // true
for(let handle in newFUN) {
    window.FUN[handle] = function() {
        try {
            newFUN[handle](...arguments)
        } catch(e) {
            alert(e) // TypeError: window.close1111 is not a function
        }
    }
}

window.FUN = {hanleClose: function() { window.close1111() }}
const newFUN = window.FUN
console.log(window.FUN.hanleClose === newFUN.hanleClose) // true
for(let handle in newFUN) {
    window.FUN[handle] = function() {
        try {
            newFUN[handle](...arguments)
        } catch(e) {
            alert(e) // RangeError: Maximum call stack size exceeded
        }
    }
}

由于对于函数，cloneDeep其实就是浅拷贝，由于只有对象（typeof === ‘object’）是引用类型，其他类型都是值传递，因此浅拷贝也不会触发死循环。

lodash-es 和lodash 两个有啥区别

lodash 和 lodash-es 是 Lodash 库的两个不同的形式，主要区别在于它们的模块化和引入方式。

1. 模块化：

   • lodash: 是传统的 CommonJS 模块，可以使用 require 或者 import 来引入。

   const _ = require('lodash');
   // 或者
   import _ from 'lodash';

   • lodash-es: 是 Lodash 的 ES6 模块版本，可以通过 import 来引入。

   import _ from 'lodash-es';

2. Tree Shaking：

   • lodash: 传统的 Lodash 模块在引入时，会将整个库导入，包括所有的方法，这可能导致在项目中引入了大量不必要的代码。

   • lodash-es: 被设计为支持 Tree Shaking，这意味着只有你实际使用的部分会被打包，减小了最终的文件大小。

   总体来说，如果你的项目使用了 ES6 模块系统，并且你关心代码体积，那么推荐使用 lodash-es。如果你使用的是传统的 CommonJS 模块系统，或者不太关心体积，那么 lodash 也是一个很好的选择。

3. 最小化项目体积：

   // lodash
   import map from 'lodash/map';
   import filter from 'lodash/filter';
   // 下面方式会导致将整个库导入
   // import { map, filter } from 'lodash'
   
   // lodash-es
   import { map, filter } from 'lodash-es'

本文作者： ionluo
本文链接： http://www.ionluo.cn/blog/posts/36f36d66.html
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！