Как преобразовать массив объектов в каталоги.

Контекст

Как разработчики JavaScript, мы постоянно манипулируем массивами объектов. И чаще всего мы хотим, чтобы данные были легко извлекаемыми или просто хорошо структурированными, как каталог. Теперь предположим, что у вас есть массив объектов, представляющих книги, и вы хотите быстро создать объект, в котором ключи — это названия книг, а значения — соответствующие объекты книг. Вы можете использовать функцию keyBy, чтобы добиться этого в одной строке кода!

Применение

Функция keyBy принимает два аргумента: массив и строку ключей (которые можно сделать необязательными и по умолчанию использовать свойство id или что-то другое, что подходит для ваших целей). случаев использования больше всего).
Затем метод уменьшить используется для перебора каждого элемента предоставленного массива, создавая новый объект, в котором ключи основаны на значениях ключа параметра в каждом объекте и сам объект в качестве значения.

Давайте сделаем это более конкретным на примере наших книг:

// Primitives values
let books = [
  "The Great Gatsby",
  "To Kill a Mockingbird",
  "Pride and Prejudice",
];
let booksByKey = keyBy(books);
// {
//    "The Great Gatsby": "The Great Gatsby",
//    "To Kill a Mockingbird": "To Kill a Mockingbird",
//    "Pride and Prejudice": "Pride and Prejudice"
// }

// Object values
books = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925 },
  { title: "To Kill a Mockingbird", author: "Harper Lee", year: 1960 },
  { title: "Pride and Prejudice", author: "Jane Austen", year: 1813 },
];
booksByKey = keyBy(books, "title");
// {
// 'The Great Gatsby': { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
// 'To Kill a Mockingbird': { title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },
// 'Pride and Prejudice': { title: 'Pride and Prejudice', author: 'Jane Austen', year: 1813 }
// }

// And tada 🎉
booksByKey["The Great Gatsby"].author; // "F. Scott Fitzgerald"

Эта функция не обрабатывает случай, когда есть повторяющиеся значения, поэтому она просто принимает последний встреченный объект в качестве определенного значения.

books = [
  { title: "The Great Gatsby", author: "F. Scott Fitzgerald", year: 1925 },
  { title: "To Kill a Mockingbird", author: "Harper Lee", year: 1960 },
  { title: "Pride and Prejudice", author: "Jane Austen", year: 1960 },
];
booksByKey = keyBy(books, "year");
// {
// 'The Great Gatsby': { title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925 },
// 'Pride and Prejudice': { title: 'Pride and Prejudice', author: 'Jane Austen', year: 1960 }
// }

Расширение
Давайте не будем останавливаться на достигнутом, мы можем легко расширить нашу функцию, чтобы она также обрабатывала объекты объектов:

function collectionKeyBy(collection = {}, key) {
  return Array.isArray(collection)
    ? keyBy(collection, key)
    : keyBy(Object.values(collection), key);
}

Функция collectionKeyBy основана на функции keyBy, обрабатывающей регистр как для массивов, так и для объектов. Он принимает коллекцию в качестве первого аргумента и ключевую строку в качестве второго аргумента. Затем он проверяет, является ли предоставленная коллекция массивом, используя метод isArray. Если это так, то он вызывает функцию keyBy напрямую, если нет, то преобразует нашу коллекцию в массив благодаря методу Object.values перед вызовом все еще отличного keyBy. функция. Этот код может быть полезен, если вы хотите развернуть объекты, которые случайным образом выбраны API, скажем, вы получаете наши книги из конечной точки:

const books = {
  book1: {title: 'The Great Gatsby', author: 'F. Scott Fitzgerald', year: 1925},
  book2: {title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960},
  book3: {title: 'Pride and Prejudice', author: 'Jane Austen', year: 1813}
}
collectionKeyBy(books, "name");
// {
//   "The Great Gatsby": {
//       "title": "The Great Gatsby",
//       "author": "F. Scott Fitzgerald",
//       "year": 1925
//   },
//   "To Kill a Mockingbird": {
//       "title": "To Kill a Mockingbird",
//       "author": "Harper Lee",
//       "year": 1960
//   },
//   "Pride and Prejudice": {
//       "title": "Pride and Prejudice",
//       "author": "Jane Austen",
//       "year": 1960
//   }
// }

Заключение:

keyBy, усиленный функцией collectionKeyBy, — это полезные служебные функции, которые можно использовать для создания каталога на основе ключа из массива или объекта объектов с учетом гибкости и простоты. Удачного кодирования!

Первоначально опубликовано на https://dev.to 23 июля 2023 г.