使用lodash原地起飞
本文梳理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 个元素的子数组。
English version
This article organizes the frequently used methods in Lodash. Mastering the following ten methods can significantly elevate your coding efficiency and greatly reduce mental strain during your development journey.
1. throttle
Usage: To limit the frequency of event handler calls, such as in scroll events. Code Example:
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>;
};
Detailed Explanation: In this code, throttle is used to limit the execution frequency of the handleScroll scroll event handler. Even as the user continuously scrolls the page, the handleScroll function is triggered only once every 1000 milliseconds.
2. cloneDeep
Usage: For deeply cloning objects during state updates or complex object manipulations. Code Example:
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>
);
};
Detailed Explanation: Here, cloneDeep is used to create a deep copy of the state object. This approach is taken to avoid direct modification of the state object, thereby adhering to React's immutability principle.
3. merge
Usage: To merge multiple objects, especially nested ones. Code Example:
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>;
};
Detailed Explanation: In this example, merge is used to combine the defaultOptions and userOptions objects. Since it's a deep merge, the settings object from userOptions is merged into defaultOptions' settings, rather than replacing it.
4. uniq and uniqBy
Usage: To remove duplicate items from an array. Code Example:
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>
);
};
Detailed Explanation: uniq is used to remove duplicate numbers from the numbers array. uniqBy is used to eliminate duplicates from the users array based on a specific attribute (here, id).
5. sortBy
Usage: To sort an array based on specific criteria. Code Example:
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>
);
};
Detailed Explanation: In this example, sortBy is used to sort a user array based on age (age). The result is a list of users arranged in ascending order of their ages.
6. pick and omit
Usage: To create a subset of an object or to exclude certain properties. Code Example:
import React from 'react';
import { pick, omit } from 'lodash';
const UserComponent = ({ user }) => {
const userDetails = pick(user, ['name', 'email']); // Include only name and email
const sanitizedUser = omit(user, ['password']); // Exclude password
return (
<div>
User Details: {JSON.stringify(userDetails)}
<br />
Sanitized User: {JSON.stringify(sanitizedUser)}
</div>
);
};
Detailed Explanation: In this example, pick is used to selectively include the name and email properties from the user object. Conversely, omit is used to exclude the password property from the same user object. This is very useful for handling sensitive information or limiting the properties passed to child components.
7. get and set
Usage: To safely access and set nested object properties. Code Example:
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>
);
};
Detailed Explanation: In this example, get is used for safe access to the nested name object, ensuring no errors occur even if the info or name properties are missing. set is employed to safely update the last name property within the nested user object, avoiding direct modification of the original state.
8. memoize
Usage: To cache the results of expensive computation functions. Code Example:
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>;
};
Detailed Explanation: Here, memoize is used to cache the result of expensiveFunction. When the function is called again with the same parameter, it returns the cached result instead of recalculating.
9. isEqual
Usage: To deeply compare two objects or arrays for equality. Code Example:
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>;
};
Detailed Explanation: In this example, isEqual is utilized to deeply compare two objects, userA and userB, for equality. It checks if all property values match, including nested objects.
10. chunk
Usage: To split an array into smaller arrays of a specified size. Code Example:
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>
);
};
Detailed Explanation: In this code example, chunk is used to divide a large array into multiple smaller arrays, each containing pageSize number of elements. This method is particularly suitable for implementing pagination logic. In
this case, it splits an array of 10 elements into smaller arrays, each containing 3 elements.