Что значит этот код?

Question

[Alexander Lashchevsky]

Здравствуйте!

Можете, пожалуйста, пояснить, что значат некоторые строчки этого кода? Суть его в следующем: сделать группировку по ID, затем, в рамках каждого ID, по дате, затем - посчитать значения value в рамках каждой даты. Код:

// 1 часть
var $container = $('.container'),
    $blocks = $container.find('.block'),
    results = {},
    output = '';

$blocks.each(function () {
    // 2 часть
    var $this = $(this),
        id = $this.find('.id').html(),
        date = $this.find('.date').html(),
        value = $this.find('.value').html();
    
    // 3 часть
    results[id] = results[id] || {};
    results[id][date] = results[id][date] || 0;
    results[id][date] += parseInt(value);
});

//4 часть
$.each(results, function (id, dates) {
    $.each(dates, function (date, value) {
        
    //5 часть
    output += '<div class="block">' +
      '<div class="id">' + id + '</div>' +
      '<div class="date">' + date + '</div>' +
      '<div class="value">' + value + '</div>' +
   '</div>';
        
    });
});

//6 часть
$container.html(output);

JS идёт вместе c HTML:

<div class="container">
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/21/2015</div>
      <div class="value">111</div>
   </div>
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/21/2015</div>
      <div class="value">222</div>
   </div>
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/30/2015</div>
      <div class="value">333</div>
   </div>
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/30/2015</div>
      <div class="value">444</div>
   </div>
   <div class="block">
      <div class="id">2</div>
      <div class="date">05/17/2015</div>
      <div class="value">555</div>
   </div>
</div>

Результат, который выдаёт код, понятен (работа кода на JSFiddle). Понятны и некоторые его части, но есть пара вопросов.

• 1 часть. Тут всё понятно - вводим переменные.
  
• 2 часть. Здесь тоже ясно: тоже вводим переменные и даём им значения из HTML.
  
• 3 часть. Здесь я перестал понимать, что происходит.
  
• 4 часть. Также неведомо мне, что это такое.
  
• 5 часть. Здесь понятно, подготавливаем вывод.
  
• 6 часть. Выводим, вопросов нет.
  

Собственно, вопросы только по 3 и 4 части. Что же там происходит?

И ещё один дополнительный вопрос. Так как я не очень знаю jQuery, из кода до меня не дошло, как же осуществляется складывание значений value. Что мне следует изменить, если я захочу добавить, например, divы .value2 и в них не суммировать значения value, а найти среднее? Т.е. мне понадобиться их посчитать, затем сосчитать количество, а потом и разделить одно на другое, как же мне это сделать?

Благодарен за подсказки.

С уважением,
Александр.

Answer 1

[Евгений Петров]

3 часть балета

$blocks.each(function () {
	//Проходим по всем элементам с классом .block
	var $this = $(this),
		//Понятно, создали JQ-объект и сохранили ссылку
		id = $this.find('.id').html(),
		// Получили содержание элемента с классом .id в этом контексте
		date = $this.find('.date').html(),
		// То же самое для класса .date
		value = $this.find('.value').html();
		// И для класса .value

	// Задача — для всех одинаковых значений id объединить поля с датой
	results[id] = results[id] || {};
	// В свойстве с именем по значению id уже есть объект, или мы его только что создали
	// Задача — для всех одинаковых дат в объекте с одинаковым id получить сумму
	results[id][date] = results[id][date] || 0;
	// В свойстве с именем по значению date уже есть число, или пишем в него 0
	results[id][date] += parseInt(value);
	// И добавили целое, полученное из value
});
// Обход элементов завершён

Тот же балет, часть 4

$.each(results, function (id, dates) {
	// Обходим объект results, в каждой итерации получаем название свойства и его значение
	$.each(dates, function (date, value) {
		// А тут получаем название свойства, сформированное из даты, и его значение
		// В замыкании есть всё, что нужно — id, date, value
	});
});

Для обработки нового поля нужно слегка видоизменить структуру объекта и его обработку.

Comments

[Alexander Lashchevsky]

Спасибо за расшифровку! Только в Вашем примере на JSFiddle в value2 Вы просто делите на 2, а хотелось бы всё-таки делить именно на то количество, в котором мы сгруппировали. В случае с ID "2" делить на 2 совсем некорректно, т.к. он у нас вообще один.

Можете, пожалуйста, уточнить этот момент?

[Евгений Петров]

Вот работа со средним jsfiddle.net/phymqmm7/1

[Alexander Lashchevsky]

Евгений Петров: Спасибо, очень благодарен!