脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript lodash

十个JavaScript lodash中的高频使用方法整理

 更新时间：2024年01月11日 10:27:16   作者：慕仲卿  
本文梳理lodash中那些高频使用的超究极无敌好用方法,熟练使用下面的十个方法能够让你的代码原地起飞,为你的开发之旅极大的减轻心智负担,快跟随小编一起学习一下吧

1. throttle

用途：限制事件处理函数的调用频率，如在滚动事件中。 代码示例：

import React, { useEffect } from 'react';
import { throttle } from 'lodash';

const ScrollComponent = () => {
  useEffect(() => {
    const handleScroll = throttle(() => {
      console.log('Scrolled!');
    }, 1000);

    window.addEventListener('scroll', handleScroll);

    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return <div>Scroll down this component to see throttling in action.</div>;
};

详细解释：此代码中使用 throttle 来限制滚动事件处理器 handleScroll 的执行频率。即使用户持续滚动页面，handleScroll 函数也只会每 1000 毫秒触发一次。

2. cloneDeep

用途：在状态更新或复杂对象操作中深度克隆对象。 代码示例：

import React, { useState } from 'react';
import { cloneDeep } from 'lodash';

const ComplexStateComponent = () => {
  const [state, setState] = useState({ nested: { counter: 0 } });

  const incrementCounter = () => {
    const newState = cloneDeep(state);
    newState.nested.counter += 1;
    setState(newState);
  };

  return (
    <div>
      <button onClick={incrementCounter}>Increment</button>
      <p>Counter: {state.nested.counter}</p>
    </div>
  );
};

详细解释：这里使用 cloneDeep 来创建 state 对象的深层副本。这样做是为了避免直接修改状态对象，从而遵循 React 的不可变性原则。

3. merge

用途：合并多个对象，尤其是嵌套对象。 代码示例：

import React from 'react';
import { merge } from 'lodash';

const MergeObjectsComponent = () => {
  const defaultOptions = { color: 'blue', size: 'medium', settings: { sound: 'off' } };
  const userOptions = { size: 'large', settings: { sound: 'on' } };

  const options = merge({}, defaultOptions, userOptions);

  return <div>Options: {JSON.stringify(options)}</div>;
};

详细解释：在这个示例中，merge 用于合并 defaultOptions 和 userOptions 对象。由于是深度合并，userOptions 中的 settings 对象将合并到 defaultOptions 的 settings 中，而不是替换掉它。

4. uniq 和 uniqBy

用途：去除数组中的重复项。 代码示例：

import React from 'react';
import { uniq, uniqBy } from 'lodash';

const UniqueArraysComponent = () => {
  const numbers = [1, 2, 1, 3, 2];
  const uniqueNumbers = uniq(numbers);

  const users = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 1, name: 'Alice' }];
  const uniqueUsers = uniqBy(users, 'id');

  return (
    <div>
      Unique Numbers: {uniqueNumbers.join(', ')}
      <br />
      Unique Users: {uniqueUsers.map(user => user.name).join(', ')}
    </div>
  );
};

详细解释：uniq 用于去除数字数组 numbers 中的重复项。uniqBy 用于根据特定属性（这里是 id）去除对象数组 users 中的重复项。

5. sortBy

用途：按特定标准对数组进行排序。 代码示例：

import React from 'react';
import { sortBy } from 'lodash';

const SortArrayComponent = () => {
  const users = [
    { name: 'Alice', age: 30 },
    { name: 'Bob', age: 24 },
    { name: 'Carol', age: 29 }
  ];
  const sortedUsers

 = sortBy(users, ['age']);

  return (
    <ul>
      {sortedUsers.map(user => (
        <li key={user.name}>{user.name} - {user.age}</li>
      ))}
    </ul>
  );
};

详细解释：在这个例子中，sortBy 被用来根据年龄 (age) 对用户数组进行排序。结果是一个按年龄升序排列的用户列表。

6. pick 和 omit

用途：创建对象的子集或剔除某些属性。 代码示例：

import React from 'react';
import { pick, omit } from 'lodash';

const UserComponent = ({ user }) => {
  const userDetails = pick(user, ['name', 'email']); // 只包含 name 和 email
  const sanitizedUser = omit(user, ['password']); // 排除 password

  return (
    <div>
      User Details: {JSON.stringify(userDetails)}
      <br />
      Sanitized User: {JSON.stringify(sanitizedUser)}
    </div>
  );
};

详细解释：在这个例子中，pick 用于从 user 对象中选择性地包含 name 和 email 属性。omit 则用于从相同的 user 对象中排除 password 属性。这对于处理敏感信息或限制传递给子组件的属性非常有用。

7. get 和 set

用途：安全地访问和设置嵌套对象属性。 代码示例：

import React, { useState } from 'react';
import { get, set } from 'lodash';

const NestedObjectComponent = () => {
  const [user, setUser] = useState({ info: { name: { first: 'John', last: 'Doe' } } });

  const updateLastName = lastName => {
    const newUser = set({ ...user }, 'info.name.last', lastName);
    setUser(newUser);
  };

  return (
    <div>
      Current Name: {get(user, 'info.name.first')} {get(user, 'info.name.last')}
      <button onClick={() => updateLastName('Smith')}>Change Last Name</button>
    </div>
  );
};

详细解释：在此示例中，get 用于安全地访问嵌套的 name 对象，即使 info 或 name 属性不存在也不会导致错误。set 用于安全地更新 user 对象中嵌套的 last 名属性，避免直接修改原始状态。

8. memoize

用途：缓存昂贵计算函数的结果。 代码示例：

import React, { useState, useEffect } from 'react';
import { memoize } from 'lodash';

const expensiveFunction = memoize((num) => {
  console.log('Expensive calculation executed!');
  return num * num;
});

const MemoizeComponent = () => {
  const [result, setResult] = useState();

  useEffect(() => {
    setResult(expensiveFunction(10));
  }, []);

  return <div>Result: {result}</div>;
};

详细解释：这里使用 memoize 来缓存 expensiveFunction 的结果。当使用相同参数再次调用函数时，它将返回缓存的结果而不是重新计算。

9. isEqual

用途：深度比较两个对象或数组是否相等。 代码示例：

import React, { useState, useEffect } from 'react';
import { isEqual } from 'lodash';

const CompareComponent = () => {
  const [userA, setUserA] = useState({ name: 'John', age: 30 });
  const [userB, setUserB] = useState({ name: 'John', age: 30 });

  useEffect(() => {
    if (isEqual(userA, userB)) {
      console.log('Users are equal!');
    }
  }, [userA, userB]);

  return <div>Check console for comparison result.</div>;
};

详细解释：在这个例子中，isEqual 用于深度比较两个对象 userA 和 userB 是否相等。它会检查所有的属性值是否匹配，包括嵌套的对象。

10. chunk

用途：将数组分割成指定大小的小数组。 代码示例：

import React from 'react';
import { chunk } from 'lodash';

const PaginationComponent = ()

 => {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  const pageSize = 3;
  const pages = chunk(data, pageSize);

  return (
    <div>
      {pages.map((page, index) => (
        <div key={index}>
          Page {index + 1}: {page.join(', ')}
        </div>
      ))}
    </div>
  );
};

详细解释：此代码示例中使用 chunk 函数将一个大数组分割成多个小数组，每个数组包含 pageSize 个元素。这种方法非常适合实现分页逻辑。在此例中，它将一个包含 10 个元素的数组分割成每个包含 3 个元素的子数组。

以上就是十个JavaScript lodash中的高频使用方法整理的详细内容，更多关于JavaScript lodash的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • js实现商品抛物线加入购物车特效

    js实现商品抛物线加入购物车特效

    这篇文章主要为大家详细介绍了js实现商品抛物线加入购物车特效的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • axios利用params/data发送参数给springboot controlle的正确获取方式

    axios利用params/data发送参数给springboot controlle的正确获取方式

    这篇文章主要给大家介绍了关于axios利用params/data发送参数给springboot controlle的正确获取方式,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2022-02-02
  • 打豆豆小游戏 用javascript编写的[打豆豆]小游戏

    打豆豆小游戏 用javascript编写的[打豆豆]小游戏

    用javascript 写了一个打豆豆的游戏，至于怎么玩的就不细说了，到网上搜一下就知道了，很简单,感兴趣的朋友可以了解下哦
    2013-01-01
  • 鼠标滚轮改变图片大小的示例代码

    鼠标滚轮改变图片大小的示例代码

    这篇文章主要是对用鼠标滚轮改变图片大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • JS字符串拼接的几种方式(最新推荐)

    JS字符串拼接的几种方式(最新推荐)

    在 JavaScript 中，使用字符串连接有 几 种方式：连接符（+）、反引号（`）、join()、concat()，这篇文章主要介绍了JS字符串拼接的几种方式,需要的朋友可以参考下
    2023-01-01
  • 微信小程序自定义菜单导航实现楼梯效果

    微信小程序自定义菜单导航实现楼梯效果

    在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。接下来通过本文给大家介绍微信小程序自定义菜单导航实现楼梯效果，感兴趣的朋友一起看看吧
    2021-12-12
  • Bootstrap表单组件教程详解

    Bootstrap表单组件教程详解

    表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。接下来通过本文给大家介绍Bootstrap表单组件教程，感兴趣的朋友一起学习吧
    2016-04-04
  • 浅谈webpack和webpack-cli模块源码分析

    浅谈webpack和webpack-cli模块源码分析

    这篇文章主要介绍了浅谈webpack和webpack-cli模块源码分析，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • Bootstrap表格使用方法详解

    Bootstrap表格使用方法详解

    这篇文章主要为大家详细介绍了Bootstrap表格使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • JS 非图片动态loading效果实现代码

    JS 非图片动态loading效果实现代码

    功能说明：譬如在按某个button时，显示消息"Loading”，然后每隔一秒后后面加上"."，至一定数量的"."时如："Loading..."，再重置此消息为"Loading"，继续动态显示，直至按钮事件处理完成。
    2010-04-04

最新评论