lodash和underscore：js实用工具库

原创

彭世瑜 2022-02-28 17:31:23 ©著作权

文章标签 github javascript .net 文章分类 代码人生

©著作权归作者所有：来自51CTO博客作者彭世瑜的原创作品，请联系作者获取转载授权，否则将追究法律责任

lodash VS underscore

一、对比
二、lodash
三、underscore

一、对比

名称	简介	文档	github	最后提交	star
lodash	JavaScript 实用工具库	doc	github
underscore	一个JavaScript实用库	doc	github

二、lodash

安装

npm i --save lodash

使用示例

var _ = require("lodash");

// 拆分数组
_.chunk(["a", "b", "c", "d"], 2);
// [ [ 'a', 'b' ], [ 'c', 'd' ] ]

// 过滤掉假值
console.log(_.compact([0, 1, false, 2, "", 3]));
// => [1, 2, 3]

// 打乱集合
console.log(_.shuffle([1, 2, 3]));
// [ 2, 3, 1 ]

// 查找数据
var users = [
  { id: 1, user: "barney" },
  { id: 2, user: "fred" },
  { id: 3, user: "pebbles" }
];

console.log(
  _.find(users, function(user) {
    return user.id == 1;
  })
);
// { id: 1, user: 'barney' }


// 浅拷贝
var objects = [{ a: 1 }, { b: 2 }];

var shallow = _.clone(objects);
console.log(shallow[0] === objects[0]);
// => true

// 深拷贝
var objects = [{ a: 1 }, { b: 2 }];

var deep = _.cloneDeep(objects);
console.log(deep[0] === objects[0]);
// => false

三、underscore

<script src="https://cdn.bootcdn.net/ajax/libs/underscore.js/1.13.0-0/underscore-umd.min.js"></script>

<button onclick="echo_debounce()">echo_debounce</button>

<button onclick="echo_throttle()">echo_throttle</button>

<script>
    // doc: https://underscorejs.net/#debounce
    // https://www.lodashjs.com/docs/lodash.debounce
    // 防抖：每次点击都会重新开始计时
    // _.debounce(function, wait, [immediate])
    function echo(){
        console.log('click');
    }

    const echo_debounce = _.debounce(echo, 3000)

    // 节流：点击后会锁定时间一段时间
    // _.throttle(function, wait, [options])
    const echo_throttle = _.throttle(echo, 3000)

</script>