前端工具库

最新推荐文章于 2024-11-01 13:37:40 发布

xiangxiongfly915

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量307

点赞数

分类专栏：前端文章标签：前端 Lodash Day.js

本文链接：https://blog.csdn.net/qq_14876133/article/details/131561198

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

文章目录

前端工具库

前端工具库

Lodash

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 Lodash 的模块化方法非常适用于：

遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数

官方文档

中文文档

字符串

_.camelCase(string) : 转换字符串为驼峰写法。
_.capitalize(string) : 转换字符串首字母为大写，剩下为小写。
_.endsWith(string, target) : 检查字符串是否以给定的target字符串结尾。
_padStart(str, length, char) : 如字符串长度小于 length 则在左侧填充字符。如果超出length长度则截断超出的部分。
_.trim(string, chars) : 从字符串中移除前面和后面的空格或指定的字符。

console.log(_.camelCase("hello world")); //helloWorld
console.log(_.camelCase("Foo Bar")); //fooBar

console.log(_.capitalize("hello world")); //Hello world

console.log(_.endsWith("hello world", "d")); //true

console.log(_.padStart("hello world", "15", "*")); //****hello world

console.log(_.trim(" hello ")); //hello
console.log(_.trim("!hello!", "!")); //hello

数组

_.first(arr) : 获取array中的第一个元素。
_.last(arr) : 获取array中的最后一个元素。
_.uniq(arr) : 创建一个去重后的array数组副本。返回新的去重后的数组。
_.compact(arr) : 创建一个新数组，过滤掉假值的新数组。
_.flatten(arr) : 减少一级array嵌套深度。返回新数组。

console.log(_.first(["a", "b", "c"])); //a
console.log(_.first([])); //undefined

console.log(_.last(["a", "b", "c"])); //c

console.log(_.uniq(["a", "b", "c", "a", "b", "c"])); //['a', 'b', 'c']

console.log(_.compact(["a", "b", "c", false, 0])); //['a', 'b', 'c']

console.log(_.flatten(["a", "b", "c", [1, 2, 3]])); //['a', 'b', 'c', 1, 2, 3]

对象

_.pick(object, [props]) : 从object中选中的属性来创建一个对象。返回新对象。
_.omit(object, [props]) : 反向版_.pick ; 删除object对象的属性。返回新对象。
_.clone( value) : 支持拷贝 arrays、 booleans、 date 、map、 numbers， Object 对象, sets, strings, symbols等等。 arguments对象的可枚举属性会拷贝为普通对象。（注：也叫浅拷贝）返回拷贝后的值。
_.cloneDeep(value) : 这个方法类似_.clone，担它会递归拷贝 value。（注：也叫深拷贝）。返回拷贝后的值。

var obj = { a: 1, b: 2, c: 3 };

console.log(_.pick(obj, ["a", "c"])); //{a: 1, c: 3}

console.log(_.omit(obj, ["a", "c"])); //{b: 2}

console.log(_.clone(obj)); //{a: 1, b: 2, c: 3}

console.log(_.cloneDeep(obj)); //{a: 1, b: 2, c: 3}

集合

_.sample(collection) : 从collection（集合）中获得一个随机元素。返回随机元素。
_.orderBy(collection, [iteratees=[_.identity]], [orders]) : 给数组排序，默认是升序asc。
_.forEach(collection, [iteratee=_.identity]) : 遍历(集合) 中的每个元素。
_.filter(collection, [predicate=_.identity]) : 返回一个新的过滤后的数组。

console.log(_.sample([2, 3, 4, 5]));

var users = [
    { name: "c", age: 28 },
    { name: "a", age: 38 },
    { name: "d", age: 18 },
    { name: "a", age: 48 },
];
// 先以name升序，再以age降序
console.log(_.orderBy(users, ["name", "age"], ["asc", "desc"]));

_.forEach({ a: 1, b: 2 }, function (value, key) {
    console.log(key, value);
});

var newUsers = _.filter(users, function (o) {
    return o.age > 30;
});
console.log(newUsers);

函数

_.delay(func, wait, [args]) : 延迟 wait 毫秒后调用 func。调用时，任何附加的参数会传给func。
_.debounce(func, [wait=0], [options=]) : 返回新的 debounced（防抖动）函数。如搜索框功能。
- func (Function): 要防抖动的函数。
- [wait=0] (number): 需要延迟的毫秒数。
- [options=] (Object): 选项对象。
- [options.leading=false] (boolean): 指定在延迟开始前调用。
- [options.maxWait] (number): 设置 func 允许被延迟的最大值。
- [options.trailing=true] (boolean): 指定在延迟结束后调用。
_.throttle(func, [wait=0], [options=]) : 返回节流的函数。如防止频繁点击。
- func (Function): 要节流的函数。
- [wait=0] (number): 需要节流的毫秒。
- [options=] (Object): 选项对象。
- [options.leading=true] (boolean): 指定调用在节流开始前。
- [options.trailing=true] (boolean): 指定调用在节流结束后。

_.delay(
    function (param) {
        console.log(param);
    },
    1000,
    "hello"
);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <button onclick="fun()">点击</button>
        <script src="./lodash.js"></script>
        <script>
            var fun = _.debounce(
                function () {
                    alert("hello");
                },
                2000,
                { leading: true }
            );
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <button onclick="fun()">点击</button>
        <script src="./lodash.js"></script>
        <script>
            var fun = _.throttle(function () {
                console.log("hello");
            }, 5000);
        </script>
    </body>
</html>

Day.js

Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。

中文文档

获取时间

var now = dayjs(); //获取当前时间

var year = now.year(); //获取年
var month = now.month(); //获取月（0~11）
var date = now.date(); //获取日
var day = now.day(); //获取星期几
var hour = now.hour(); //获取时
var minute = now.minute(); //获取分
var second = now.second(); //获取秒
var millisecond = now.millisecond(); //获取毫秒

var timestamp = now.unix(); //获取时间戳，秒
var timestamp = now.valueOf(); //获取时间戳，毫秒

格式化时间

//格式化时间
var str = now.format("YYYY-MM-DD HH:mm:ss");
console.log(str); //2023-07-05 17:06:48

设置时间

var dayjs = dayjs("2008-09-10 11:12:13"); //指定时间

var now = dayjs().year(2008).month(9).date(10).hour(11).minute(12).second(13); //指定时间

转Date

var now= dayjs()
var date = now.toDate();

解析时间

var dayjs1 = dayjs(1688548776538);
var dayjs2 = dayjs(new Date());
var dayjs3 = dayjs("2023-7-5");
console.log(dayjs1);
console.log(dayjs2);
console.log(dayjs3);

差异

var dayjs1 = dayjs("2008-9-10");
var dayjs2 = dayjs("2008-10-11");
var diff = dayjs1.diff(dayjs2); //毫秒值
var diff2 = dayjs1.diff(dayjs2, "month");
console.log(diff); //-2678400000
console.log(diff2); //-1

操作日期时间

// 增加操作
var now = dayjs();
console.log(now.toString());
var dayjs = now.add(1, "month").add(7, "day");
var str = dayjs.format("YYYY-MM-DD HH:mm:ss");
console.log(str);

// 减少操作
var now = dayjs();
console.log(now.toString());
var dayjs = now.subtract(1, "month").subtract(7, "day");
var str = dayjs.format("YYYY-MM-DD HH:mm:ss");
console.log(str);

RelativeTime插件

展示相对的时间，如：3 小时以前。

https://unpkg.com/dayjs@1.8.21/plugin/relativeTime.js

<script src="./relativeTime.js"></script>
<script src="https://unpkg.com/dayjs@1.8.21/locale/zh-cn.js"></script>
<script>
    dayjs.locale("zh-cn");
    dayjs.extend(dayjs_plugin_relativeTime);

    console.log(dayjs().from(dayjs("2008-09-10"))); //15 年内
    console.log(dayjs().from(dayjs("2008-09-10"), true)); //15 年
    console.log(dayjs().fromNow()); //几秒前

    console.log(dayjs().to(dayjs("2008-09-10"))); //15 年前
    console.log(dayjs().toNow()); //几秒前
</script>