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

Lodash - a javascript power tool

Barbara Streisand
Release: 2024-11-18 04:54:02
Original
253 people have browsed it

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
Copy after login
Copy after login

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 } } }
Copy after login
Copy after login

3. _.cloneDeep

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

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);
Copy after login

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);
Copy after login

6. _.isEmpty

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

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 } }
Copy after login

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 }
Copy after login

9. _.omit

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

10. _.uniq

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

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] }
Copy after login

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 }]
Copy after login

13. _.map

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

14. _.filter

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

15. _.find

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

16. _.flatten

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

17. _.flattenDeep

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

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
Copy after login
Copy after login

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 } } }
Copy after login
Copy after login

20. _.isEqual

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

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!

source:dev.to
Statement of this Website
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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template