当前位置: 首页 > article >正文

lodash常用方法

目录

    • 集合
          • 1、shuffle
          • 2、sample
          • 3、sample
          • 4、orderBy
    • 数组
          • 1、chunk
          • 2、take
          • 3、takeRight
          • 4、compact
          • 5、difference
          • 6、last
          • 7、head
    • 函数
          • 1、throttle(节流)
          • 2、debounce(防抖)
          • 3、flow
          • 4、flowRight
    • 语言
          • 1、isEmpty
          • 2、cloneDeep
          • 3、isEqual
          • 4、isNil
          • 5、isNull
          • 6、isEmpty
    • 对象
          • 1、merge
          • 2、get
          • 3、has
          • 4、mapKeys
          • 5、mapValues
          • 6、pick
          • 7、pick
          • 8、set
          • 9、unset
    • 字符串
          • 1、startCase
          • 2、kebabCase
          • 3、snakeCase
          • 4、camelCase

集合

1、shuffle

创建一个被打乱值的集合。 使用Fisher-Yates shuffle 版本。

_.shuffle([1, 2, 3, 4]);
// => [4, 1, 3, 2]
2、sample

从collection(集合)中获得一个随机元素。

_.sample([1, 2, 3, 4]);
// => 2
3、sample

从collection(集合)中获得 n 个随机元素

_.sampleSize([1, 2, 3], 2);
// => [3, 1]
 
_.sampleSize([1, 2, 3], 4);
// => [2, 3, 1]
4、orderBy

此方法类似于_.sortBy,除了它允许指定 iteratee(迭代函数)结果如何排序。 如果没指定 orders(排序),所有值以升序排序。 否则,指定为"desc" 降序,或者指定为 “asc” 升序,排序对应值。

var users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
 
// 以 `user` 升序排序 再  `age` 以降序排序。
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

数组

1、chunk

创建一个数组,元素为将其拆分为指定大小的子数组(如果数组不能均匀拆分,则最后的子数组将只包含剩余的元素)。

import chunk from 'lodash/chunk';
const array = [ 1, 2, 3, 4 ];
const result = chunk(array, 2);
// result => [[1, 2], [3, 4]]
2、take

创建数组的一个切片,从开头处取指定数目的元素。

import take from 'lodash/take';
const result = take([1, 2, 3], 2);
// result => [1, 2]
3、takeRight

创建一个数组切片,从array数组的最后一个元素开始提取n个元素。

_.takeRight([1, 2, 3]);
// => [3]
 
_.takeRight([1, 2, 3], 2);
// => [2, 3]
 
_.takeRight([1, 2, 3], 5);
// => [1, 2, 3]
 
_.takeRight([1, 2, 3], 0);
// => []

4、compact

剔除掉数组中的假值(假值包括false, null,0, “”, undefined, 和 NaN这5个)元素,并返回一个新数组

const _ = require('lodash')
console.log(_.compact([0, 1, false, 2, '', 3, undefined, 4, null, 5]));
// 输出 [ 1, 2, 3, 4, 5 ]

5、difference

过滤掉数组中的指定元素,并返回一个新数组

const _ = require('lodash')
console.log(_.difference([1, 2, 3], [2, 4]))
// 输出 [ 1, 3 ]
const arr = [1, 2], obj = { a: 1 }
console.log(_.difference([1, arr, [3, 4], obj, { a: 2 }], [1, arr, obj]))
// 输出 [ 1, 3 ]
6、last

返回数组的最后一个元素

console.log(_.last([1, 2, 3, 4, 5]))
// 输出 5

7、head

获取数组 array 的第一个元素。

_.head([1, 2, 3]);
// => 1
 
_.head([]);
// => undefined

函数

1、throttle(节流)

创建一个函数,该函数在每个间隔(以毫秒为单位)最多调用一次传递的函数。

import throttle from 'lodash/throttle';
const throttled = throttle(() => {
    console.log('Throttled after 50ms!');
}, 50);

window.addEventListener('resize', throttled);
2、debounce(防抖)

创建一个函数,该函数将延迟调用传递的函数,直到上次调用函数经过了指定的时间间隔。

import debounce from 'lodash/debounce';
const debounced = debounce(() => {
    console.log('Debounced after 400ms!');
}, 400);

window.addEventListener('resize', debounced);
3、flow

传入一个函数数组,并返回一个新函数。_.flow内部从左到右依次调用数组中的函数,上一次函数的返回的结果,会作为下个函数调用的入参

const _ = require('lodash')

const add = (a, b) => a + b;
const multi = (a) => a * a;
const computerFn = _.flow([add, multi]);
console.log(computerFn(1, 2))
// 输出 9
4、flowRight

与_.flow相反,函数会从右到左执行,相当于React中的compose函数

const _ = require('lodash')

const add = (a) => a + 3;
const multi = (a) => a * a;
const computerFn = _.flowRight([add, multi]);
console.log(computerFn(4))
// 输出 19

语言

1、isEmpty

检查值是否为空对象、集合、映射或集合。

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1);
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false
2、cloneDeep

深克隆一个给定的值。

import cloneDeep from 'lodash/cloneDeep';

const items = [
{ name: 'Item A' },
{ name: 'Item B' },
];
const result = cloneDeep(items);
// result[0] === items[0] => false
3、isEqual

深度比较两者的值是否相等

const _ = require('lodash')
const obj = { a: [{ b: 2 }] }
const obj1 = { a: [{ b: 2 }] }

const res = _.isEqual(obj, obj1)
console.log(res)
// 输出:true
4、isNil

某个值是null或者undefined

const _ = require('lodash')
let a = null;

const res = _.isNil(a)
console.log(res)
// 输出:true
5、isNull

检查 valuealue 是否是 null。

_.isNull(null);
// => true
 
_.isNull(void 0);
// => false
6、isEmpty

检查 value 是否为一个空对象,集合,映射或者set

_.isEmpty(null);
// => true
 
_.isEmpty(true);
// => true
 
_.isEmpty(1);
// => true
 
_.isEmpty([1, 2, 3]);
// => false
 
_.isEmpty({ 'a': 1 });
// => false

对象

1、merge

递归地将源对象自身和继承的可枚举属性合并到目标对象中。

import merge from 'lodash/merge';

const firstObject = { 'A': [{ 'B': 1 }, { 'C': 2 }] };

const secondObject = { 'A': [{ 'B': 3 }, { 'D': 4 }] };

const result = merge(firstObject, secondObject);

// result => { A: [{ B: 3 }, { C: 2, D: 4 }] }
2、get

从对象中获取路径path的值,如果获取值为undefined,则用defaultValue代替

const _ = require('lodash')
const object = { a: { b: [{ c: 1 }, null] }, d: 3 };
 
console.log(_.get(object, 'a.b[0].c'));
// 输出 1
console.log(_.get(object, ['a', 'b', 1], 4));
// 输出 null
console.log(_.get(object, 'e', 5));
// 输出 5
3、has

判断对象上是否有路径path的值,不包括原型

const _ = require('lodash')
const obj = { a: 1 };
const obj1 = { b: 1 }

const obj2 = Object.create(obj1)
 
console.log(_.has(obj, 'a'));
// 输出 true
console.log(_.has(obj2, 'b'));
// 输出 false
4、mapKeys

遍历并修改对象的key值,并返回一个新对象。

const _ = require('lodash')
const obj = { a: 1, b: 1 };

const res = _.mapKeys(obj, (value, key) => {
    return key + value;
})
console.log(res)
// 输出 { a1: 1, b1: 1 }
5、mapValues

遍历并修改对象的value值,并返回一个新对象。

const _ = require('lodash')
const obj = { a: { age: 1 }, b: { age: 2 } };

const res = _.mapValues(obj, (value) => {
    return value.age;
})
console.log(res)
// 输出 { a: 1, b: 2 }
6、pick

从object中挑出对应的属性,并组成一个新对象

const _ = require('lodash')
const obj = { a: 1, b: 2, c: 3 };

const res = _.pick(obj, ['a', 'b'])
console.log(res)
// 输出 { a: 1, b: 2 }
7、pick

与_.pick类似,只是第二个参数是一个函数,当返回为真时才会被pick

const _ = require('lodash')
const obj = { a: 1, b: 2, c: 3 };

const res = _.pickBy(obj, (val, key) => val === 2)
console.log(res)
// { b: 2 }
8、set

给object上对应的path设置值,路径不存在会自动创建,索引创建成数组,其它创建为对象。

const _ = require('lodash')
const obj = { };

const res = _.set(obj, ['a', '0', 'b'], 1)
console.log(res)
// 输出:{ a: [ { b: 1 } ] }

const res1 = _.set(obj, 'a.1.c', 2)
console.log(res1)
// 输出:{ a: [ { b: 1 }, { c: 2 } ] }
9、unset

与_.set相反,删除object上对应的path上的值,删除成功返回true,否则返回false

const _ = require('lodash')
const obj = { a: [{ b: 2 }] }

const res = _.unset(obj, ['a', '0', 'b'])
console.log(res)
// 输出:true
const res1 = _.unset(obj, ['a', '1', 'c'])
console.log(res1)
// 输出:true

字符串

1、startCase

将字符串转换为大小写(每个单词的第一个字母大写)。

import startCase from 'lodash/startCase';
startCase('--foo-bar--');
// => 'Foo Bar'

startCase('fooBar');
// => 'Foo Bar'

startCase('__FOO_BAR__');
// => 'FOO BAR'

2、kebabCase

将字符串转换为小写字符串(标点符号被删除,空格被替换为破折号)。

import kebabCase from 'lodash/kebabCase';

kebabCase('Foo Bar');
// => 'foo-bar'

kebabCase('fooBar');
// => 'foo-bar'

kebabCase('__FOO_BAR__');
// => 'foo-bar'
3、snakeCase

将字符串转换为小写字符串,标点符号被删除,文本转换为小写,空格替换为单下划线(kebabCase是转化为破折号)。

import snakeCase from 'lodash/snakeCase';

snakeCase('Foo Bar');
// => 'foo_bar'

snakeCase('fooBar');
// => 'foo_bar'

snakeCase('--FOO-BAR--');
// => 'foo_bar'
4、camelCase

将字符串转换为小写字符串(标点符号被删除,空格被替换为破折号)。

import camelCase from 'lodash/camelCase';

camelCase('Foo Bar');
// => 'fooBar'

camelCase('--foo-bar--');
// => 'fooBar'

camelCase('__FOO_BAR__');
// => 'fooBar'

http://www.kler.cn/a/161928.html

相关文章:

  • 传奇996_19——常用函数
  • Git在版本控制中的应用
  • 蓝队知识浅谈(上)
  • JAVA:探索 EasyExcel 的技术指南
  • Tomcat 和 Netty 的区别及应用场景分析
  • HP G10服务器ESXI6.7告警提示ramdisk tmp已满
  • 2023.12.1 --数据仓库之 拉链表
  • ⭐Unity 搭建UDP客户端(01) 配合网络调试助手测试
  • BUUCTF-[GYCTF2020]FlaskApp flask爆破pin
  • Docker入门:容器化原理
  • Clean 架构下的现代 Android 架构指南
  • 实验3.5 路由器的单臂路由配置
  • 装配式技术助力EHS平台系统:打造全方位的安全在线监测平台!
  • 【PTA-C语言】编程练习4 - 数组Ⅱ
  • 【面试经典150 | 二叉树】翻转二叉树
  • ubuntu内移除snap
  • VUE2+THREE.JS 按照行动轨迹移动人物模型并相机视角跟随人物
  • 智能优化算法应用:基于材料生成算法无线传感器网络(WSN)覆盖优化 - 附代码
  • Thymeleaf生成pdf表格合并单元格描边不显示
  • SpringDataJPA基础
  • Cypress:前端自动化测试的终极利器
  • Leetcode刷题笔记题解(C++):165. 比较版本号
  • 安路Anlogic FPGA下载器的驱动安装教程
  • 【mysql】下一行减去上一行数据、自增序列场景应用
  • 2023年4K投影仪怎么选?极米H6 4K高亮版怎么样?
  • Leetcode—1466.重新规划路线【中等】