lodash中那些高频使用的好用方法

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 毫秒触发一次。

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 的不可变性原则。

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 中，而不是替换掉它。

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 中的重复项。

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) 对用户数组进行排序。结果是一个按年龄升序排列的用户列表。

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 属性。这对于处理敏感信息或限制传递给子组件的属性非常有用。

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 名属性，避免直接修改原始状态。

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 的结果。当使用相同参数再次调用函数时，它将返回缓存的结果而不是重新计算。

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 是否相等。它会检查所有的属性值是否匹配，包括嵌套的对象。

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 个元素的子数组。