Функция разбивки карты и уменьшения -JS

Question

Я имею дело с функцией здесь:

function transformEmployeeData(array) {
  return array.map(function(data) {
    return data.reduce(function(a, b) {
      a[b[0]] = b[1];
      return a;
    }, {})
  });
}
transformEmployeeData(array);

Эта функция преобразует массив в объекты, подобные этому:

[
    {firstName: 'Joe', lastName: 'Blow', age: 42, role: 'clerk'},
    {firstName: 'Mary', lastName: 'Jenkins', age: 36, role: 'manager'}
]

Итак, если у вас есть массив:

[
    [
        ['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']
    ],
    [
        ['firstName', 'Mary'], ['lastName', 'Jenkins'], ['age', 36], ['role', 'manager']
    ]
]

Это преобразует это в это.

Я хочу сосредоточиться на этой части:

return array.map(function(data) {
    return data.reduce(function(a, b) {
      a[b[0]] = b[1];
      return a;
    }, {})
  });

Я изучил функцию карты, и она перебирает массивы и что-то с ней делает, а функция приведения сокращает массив в одно значение. Сейчас мне не ясно, как эти две функции работают вместе, возвращая преобразованный объект массива. Есть ли кто-нибудь, кто мог бы помочь мне понять эти части в терминах непрофессионалов? или, если нет, есть ли какой-нибудь хитрый способ добиться того же?

Извините, новичок.

Answer 1

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

const numbers = [1, 2, 3];
const squares = numbers.map(num => num ** 2);
console.log(squares);

Сократить массив означает, как вы сказали, объединить его элементы в одно значение.

const numbers = [1, 2, 3];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum);

В вашем случае здесь у вас есть 3 уровня вложенных массивов, и процесс можно разделить на 3 функциональных блока. Самый простой способ понять, что происходит, это начать с самой внутренней точки и перейти к отображению массива верхнего уровня.

На самом внутреннем уровне, массив из 2 элементов в форме [property, value], добавляется в объект таким образом, что первый элемент является именем свойства, а второй - значением.

const arr = ['name', 'bob'];

// property is item[0], value is item[1]
const propertyName = arr[0];
const propertyValue = arr[1];

const obj = {};
obj[propertyName] = propertyValue;

console.log(obj); // { name: 'bob' }

На среднем уровне у нас есть массив, где каждый элемент является вышеупомянутым 2-элементным массивом. Этот массив массивов превращается в объект путем преобразования каждого двухэлементного массива в свойство и значение объекта.

const arr = [
  ['firstName', 'Joe'], ['lastName', 'Blow'], ['age', 42], ['role', 'clerk']
];

const reduced = arr.reduce((obj, item) => {
  obj[item[0]] = item[1]; // add property and value to new object
  return obj;             // return the object so next array item can be converted
}, {});

console.log(reduced);

Наконец, отображение верхнего уровня просто преобразует массив вышеупомянутого массива из двухэлементных массивов (3 уровня массивов) в массив объектов, которые получили свои свойства и значения, как упомянуто ранее.