Underscore.js - какво е, как ни помага и няколко примера

Underscore.js е библиотека за JavaScript, която предоставя набор от функции за обработка на данни и манипулации на обекти в езика. Тази библиотека има за цел да предостави удобен начин за манипулиране на данни, като по този начин опростява и ускорява процеса на разработка на JavaScript приложения.

Сред функциите, предоставени от Underscore.js, са включени масивни операции като сортиране, филтриране, групиране, трансформация и други. Тази библиотека също така предоставя функции за манипулиране на обекти, като например клониране, обединяване и търсене на ключове в обект.

Можете да инсталирате библиотеката Underscore.js чрез някой от следните начини:

1. Изтеглете файловете на библиотеката от официалния сайт на Underscore.js (https://underscorejs.org/) и добавете JavaScript файла към HTML страницата си:

<script src="/path/to/underscore.js"></script>

2. Инсталирайте библиотеката чрез пакетен мениджър, като например npm или Yarn, и я добавете към проекта си. За да инсталирате библиотеката чрез npm, отворете терминала и изпълнете следната команда:

npm install underscore

След това, в JavaScript файла на проекта си, добавете следният ред:

const _ = require('underscore');

Ето няколко примера за използване на функции от библиотеката Underscore.js:

1. _.map() - функцията map() извлича списък от свойството на обект в масив.

var persons = [  {name: "John", age: 24},  {name: "Mary", age: 32},  {name: "Peter", age: 48}];

var names = _.map(persons, function(person) { return person.name; });

console.log(names); // ["John", "Mary", "Peter"]

2. _.filter() - функцията filter() филтрира масива, като избира само елементите, които отговарят на определено условие.

var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var evenNumbers = _.filter(numbers, function(num) { return num % 2 == 0; });

console.log(evenNumbers); // [2, 4, 6, 8, 10]

3. _.groupBy() - функцията groupBy() групира елементите на масива по дадено свойство.

var persons = [
  {name: "John", age: 24},
  {name: "Mary", age: 32},
  {name: "Peter", age: 48},
  {name: "Anna", age: 24}
];

var groupedByAge = _.groupBy(persons, function(person) { return person.age; });

console.log(groupedByAge);
// {
//   "24": [{name: "John", age: 24}, {name: "Anna", age: 24}],
//   "32": [{name: "Mary", age: 32}],
//   "48": [{name: "Peter", age: 48}]
// }

4. _.reduce() - функцията reduce() намалява масива до една стойност чрез използване на дадена функция, която обработва всеки елемент.

var numbers = [1, 2, 3, 4, 5];

var sum = _.reduce(numbers, function(memo, num) { return memo + num; }, 0);

console.log(sum); // 15

reduce() може да бъде използвана за групиране на елементите на масив по дадено свойство, като се използва обект за записване на групите и техните елементи.

var persons = [  {name: "John", age: 24},  {name: "Mary", age: 32},  {name: "Peter", age: 48},  {name: "Anna", age: 24}];

var groupedByAge = _.reduce(persons, function(result, person) {
  (result[person.age] || (result[person.age] = [])).push(person);
  return result;
}, {});

console.log(groupedByAge);
// {
//   "24": [{name: "John", age: 24}, {name: "Anna", age: 24}],
//   "32": [{name: "Mary", age: 32}],
//   "48": [{name: "Peter", age: 48}]
// }

В този пример функцията reduce() създава обект, който се използва за групиране на елементите на масива по свойството "age". Всеки елемент от масива се обработва чрез функцията reduce(), която добавя елемента в правилната група в обекта.

5. _.sortBy() - функцията sortBy() сортира масива по дадено свойство.

var persons = [
  {name: "John", age: 24},
  {name: "Mary", age: 32},
  {name: "Peter", age: 48},
  {name: "Anna", age: 19}
];

var sortedByAge = _.sortBy(persons, function(person) { return person.age; });

console.log(sortedByAge);
// [
//   {name: "Anna", age: 19},
//   {name: "John", age: 24},
//   {name: "Mary", age: 32},
//   {name: "Peter", age: 48}
// ]

6. _.extend() - функцията extend() обединява два или повече обекта в един обект.

var obj1 = {a: 1, b: 2};
var obj2 = {c: 3, d: 4};
var obj3 = {e: 5};

var mergedObj = _.extend(obj1, obj2, obj3);

console.log(mergedObj); // {a: 1, b: 2, c: 3, d: 4, e: 5}