Home >Web Front-end >JS Tutorial >Lodash - a javascript power tool

Lodash - a javascript power tool

Barbara Streisand
Barbara StreisandOriginal
2024-11-18 04:54:02254browse

Lodash - a javascript power tool

Lodash, a lightweight replacement for Underscore.js, is a popular JavaScript utility library that simplifies common programming tasks. Explore the top 20 Lodash functions below to enhance your JavaScript skills:


1. _.get

  • Safely retrieves a nested property from an object, avoiding errors if the property doesn't exist.
const obj = { a: { b: { c: 42 } } }; _.get(obj, 'a.b.c', 'default'); // 42

2. _.set

  • Sets the value of a nested property in an object, creating intermediate properties if they don’t exist.
const obj = {}; _.set(obj, 'a.b.c', 42); console.log(obj); // { a: { b: { c: 42 } } }

3. _.cloneDeep

  • Creates a deep copy of an object or array.
const arr = [{ a: 1 }]; const deepClone = _.cloneDeep(arr);

4. _.debounce

  • Delays the execution of a function until after a specified time has passed since its last call.
const log = _.debounce(() => console.log('Debounced!'), 300); window.addEventListener('resize', log);

5. _.throttle

  • Ensures a function is executed at most once in a specified time interval.
const log = _.throttle(() => console.log('Throttled!'), 1000); window.addEventListener('scroll', log);

6. _.isEmpty

  • Checks if a value is an empty object, array, or falsy value.
_.isEmpty([]); // true _.isEmpty({}); // true _.isEmpty(''); // true

7. _.merge

  • Deeply merges two or more objects, combining their properties.
const obj1 = { a: { b: 1 } }; const obj2 = { a: { c: 2 } }; _.merge(obj1, obj2); // { a: { b: 1, c: 2 } }

8. _.pick

  • Creates an object composed of the selected properties.
const obj = { a: 1, b: 2, c: 3 }; _.pick(obj, ['a', 'c']); // { a: 1, c: 3 }

9. _.omit

  • Creates an object excluding the specified properties.
const obj = { a: 1, b: 2, c: 3 }; _.omit(obj, ['b']); // { a: 1, c: 3 }

10. _.uniq

  • Removes duplicate values from an array.
_.uniq([1, 2, 2, 3]); // [1, 2, 3]

11. _.groupBy

  • Groups the elements of an array based on a provided criterion.
_.groupBy([6.1, 4.2, 6.3], Math.floor); // { '4': [4.2], '6': [6.1, 6.3] }

12. _.sortBy

  • Sorts an array of objects based on specific properties or criteria.
const users = [{ name: 'Tom', age: 30 }, { name: 'Jerry', age: 20 }]; _.sortBy(users, 'age'); // [{ name: 'Jerry', age: 20 }, { name: 'Tom', age: 30 }]

13. _.map

  • Creates a new array by transforming each element in a collection.
_.map([1, 2, 3], n => n * 2); // [2, 4, 6]

14. _.filter

  • Creates an array with elements that pass the provided condition.
_.filter([1, 2, 3, 4], n => n % 2 === 0); // [2, 4]

15. _.find

  • Finds the first element that satisfies a condition.
_.find([1, 2, 3, 4], n => n > 2); // 3

16. _.flatten

  • Flattens a nested array into a single-level array.
_.flatten([1, [2, [3, [4]]]]); // [1, 2, [3, [4]]]

17. _.flattenDeep

  • Flattens a nested array into a fully single-level array.
_.flattenDeep([1, [2, [3, [4]]]]); // [1, 2, 3, 4]

18. _.difference

  • Returns the values from the first array that are not in the second array.
const obj = { a: { b: { c: 42 } } }; _.get(obj, 'a.b.c', 'default'); // 42

19. _.chunk

  • Splits an array into groups of the specified size.
const obj = {}; _.set(obj, 'a.b.c', 42); console.log(obj); // { a: { b: { c: 42 } } }

20. _.isEqual

  • Performs a deep comparison to determine if two values are equivalent.
const arr = [{ a: 1 }]; const deepClone = _.cloneDeep(arr);

Keep learning and having FUN !

The above is the detailed content of Lodash - a javascript power tool. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn