十個(gè)JavaScript?lodash中的高頻使用方法整理

更新時(shí)間：2024年01月11日 10:27:16 作者：慕仲卿

本文梳理lodash中那些高頻使用的超究極無敵好用方法,熟練使用下面的十個(gè)方法能夠讓你的代碼原地起飛,為你的開發(fā)之旅極大的減輕心智負(fù)擔(dān),快跟隨小編一起學(xué)習(xí)一下吧

1. throttle

用途：限制事件處理函數(shù)的調(diào)用頻率，如在滾動(dòng)事件中。 代碼示例：

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>;
};

詳細(xì)解釋：此代碼中使用 throttle 來限制滾動(dòng)事件處理器 handleScroll 的執(zhí)行頻率。即使用戶持續(xù)滾動(dòng)頁(yè)面，handleScroll 函數(shù)也只會(huì)每 1000 毫秒觸發(fā)一次。

2. cloneDeep

用途：在狀態(tài)更新或復(fù)雜對(duì)象操作中深度克隆對(duì)象。 代碼示例：

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>
  );
};

詳細(xì)解釋：這里使用 cloneDeep 來創(chuàng)建 state 對(duì)象的深層副本。這樣做是為了避免直接修改狀態(tài)對(duì)象，從而遵循 React 的不可變性原則。

3. merge

用途：合并多個(gè)對(duì)象，尤其是嵌套對(duì)象。 代碼示例：

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>;
};

詳細(xì)解釋：在這個(gè)示例中，merge 用于合并 defaultOptions 和 userOptions 對(duì)象。由于是深度合并，userOptions 中的 settings 對(duì)象將合并到 defaultOptions 的 settings 中，而不是替換掉它。

4. uniq 和 uniqBy

用途：去除數(shù)組中的重復(fù)項(xiàng)。 代碼示例：

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>
  );
};

詳細(xì)解釋：uniq 用于去除數(shù)字?jǐn)?shù)組 numbers 中的重復(fù)項(xiàng)。uniqBy 用于根據(jù)特定屬性（這里是 id）去除對(duì)象數(shù)組 users 中的重復(fù)項(xiàng)。

5. sortBy

用途：按特定標(biāo)準(zhǔn)對(duì)數(shù)組進(jìn)行排序。 代碼示例：

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>
  );
};

詳細(xì)解釋：在這個(gè)例子中，sortBy 被用來根據(jù)年齡 (age) 對(duì)用戶數(shù)組進(jìn)行排序。結(jié)果是一個(gè)按年齡升序排列的用戶列表。

6. pick 和 omit

用途：創(chuàng)建對(duì)象的子集或剔除某些屬性。 代碼示例：

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>
  );
};

詳細(xì)解釋：在這個(gè)例子中，pick 用于從 user 對(duì)象中選擇性地包含 name 和 email 屬性。omit 則用于從相同的 user 對(duì)象中排除 password 屬性。這對(duì)于處理敏感信息或限制傳遞給子組件的屬性非常有用。

7. get 和 set

用途：安全地訪問和設(shè)置嵌套對(duì)象屬性。 代碼示例：

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>
  );
};

詳細(xì)解釋：在此示例中，get 用于安全地訪問嵌套的 name 對(duì)象，即使 info 或 name 屬性不存在也不會(huì)導(dǎo)致錯(cuò)誤。set 用于安全地更新 user 對(duì)象中嵌套的 last 名屬性，避免直接修改原始狀態(tài)。

8. memoize

用途：緩存昂貴計(jì)算函數(shù)的結(jié)果。 代碼示例：

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>;
};

詳細(xì)解釋：這里使用 memoize 來緩存 expensiveFunction 的結(jié)果。當(dāng)使用相同參數(shù)再次調(diào)用函數(shù)時(shí)，它將返回緩存的結(jié)果而不是重新計(jì)算。

9. isEqual

用途：深度比較兩個(gè)對(duì)象或數(shù)組是否相等。 代碼示例：

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>;
};

詳細(xì)解釋：在這個(gè)例子中，isEqual 用于深度比較兩個(gè)對(duì)象 userA 和 userB 是否相等。它會(huì)檢查所有的屬性值是否匹配，包括嵌套的對(duì)象。

10. chunk

用途：將數(shù)組分割成指定大小的小數(shù)組。 代碼示例：

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>
  );
};

詳細(xì)解釋：此代碼示例中使用 chunk 函數(shù)將一個(gè)大數(shù)組分割成多個(gè)小數(shù)組，每個(gè)數(shù)組包含 pageSize 個(gè)元素。這種方法非常適合實(shí)現(xiàn)分頁(yè)邏輯。在此例中，它將一個(gè)包含 10 個(gè)元素的數(shù)組分割成每個(gè)包含 3 個(gè)元素的子數(shù)組。

以上就是十個(gè)JavaScript lodash中的高頻使用方法整理的詳細(xì)內(nèi)容，更多關(guān)于JavaScript lodash的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: