Нужно некоторое объяснение относительно работы следующего кода Typescript/Javascript и MobX.

avatar
Ganesh Kumar
8 августа 2021 в 20:10
35
1
-1

Следующий код использовался для создания массива, содержащего группы объектов (массивы) по дате. Я мог понять намерение, но не мог понять работу кода. Это из курса «Нила Каммингса», и, к сожалению, я не смог найти его ТАК, чтобы спросить его напрямую. Кроме того, я позаимствовал курс, поэтому я также не мог спросить его через Q & A. Поэтому, пожалуйста, объясните мне код.

@computed get activitiesByDate() {
    return this.groupActivitiesByDate(Array.from(this.activityRegistry.values()));
}

groupActivitiesByDate(activites: IActivity[]){
    const sortedActivities = activites.sort(
      (a,b) => Date.parse(a.date) - Date.parse(b.date)
    )
    return Object.entries(sortedActivities.reduce((activities, activity) => { 
      const date = activity.date.split('T')[0];
      activities[date] = activities[date] ? [...activities[date], activity]: [activity];
      return activities;
    }, {} as {[key: string]: IActivity[]}));
  }

В приведенном выше коде я понял, что новый массив, т. е. "sortedActivities", создается путем сортировки массива действий. Затем снова вызывается функция сокращения, где часть даты из каждого действия разбивается, чтобы найти объекты, имеющие одинаковую дату, и сгруппировать их, и именно здесь появляется Object.entries. Что я не мог понять, как упорядочивание «активностей» массив влияет на «sortedActivities», когда на самом деле мы сортируем массив действий, а также строку, когда используется тернарный оператор. можем ли мы сравнить два массива напрямую? если да, то зачем получать каждый объект из массива? Я полностью сбит с толку. Я пытался найти похожий код, чтобы получить красивое и четкое объяснение, но не смог его найти. Может ли кто-нибудь помочь мне. Надеюсь, я предоставил достаточно информации для ответа на вопрос.

Источник

Ответы (1)

avatar
Danila
8 августа 2021 в 20:42
1

Ну, давайте построчно:

const sortedActivities = activites.sort(
  (a,b) => Date.parse(a.date) - Date.parse(b.date)
)

Здесь мы сортируем массив действий по дате, довольно просто. Здесь также есть ошибка новичка (не совсем уверен, как автор курса мог это сделать), заключается в том, что .sort фактически мутирует исходный массив. Так что называть это так довольно плохо, вам нужно сначала вызвать .slice(), чтобы создать новую отдельную копию.

sortedActivities.reduce((activities, activity) => { 
  const date = activity.date.split('T')[0];
  activities[date] = activities[date] ? [...activities[date], activity]: [activity];
  return activities;
}, {} as {[key: string]: IActivity[]})

Затем мы делаем карту массива действий, сгруппированных по одной и той же дате, так что в конце это будет примерно так:

const reduceResult = {
  // Might be different format for date, but you see the point
  '2020-08-10': [activity, activity],
  '2020-09-10': [activity],
  '2020-10-10': [],
  // ...
}

Итак, эта строка:

activities[date] = activities[date] ? [...activities[date], activity]: [activity];

просто проверяет, существует ли уже массив с ключом date, если нет, то создает новый массив, если существует, то просто объединяет старый массив с текущим activity

Тогда возвращаем Object.entries

Object.entries(...)

По сути, мы просто берем все значения с нашей карты.

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

Ganesh Kumar
9 августа 2021 в 09:07
0

Спасибо за объяснение. Но «действия [дата] = действия [дата]» довольно запутанны, потому что это подразумевает, что я обращаюсь к значению в массиве действий с определенной датой, и путаница заключается в том, что действия фактически содержат отдельные действия (объекты JavaScript), а не даты. Можете ли вы указать мне какой-нибудь код, где я могу перейти от старых методов итерации к этим новым. Мне нравится старая школа, потому что она интуитивно понятна.

Danila
9 августа 2021 в 09:40
1

Нет, activities — это накопитель сокращения, он сначала равен пустому массиву, а затем вы заполняете его. Может быть, чтение документации о сокращении поможет? Или я могу сделать дополнительный пример

Ganesh Kumar
9 августа 2021 в 10:34
0

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