Использование .each () для заполнения массива, но первое значение показывает пустое

Question

Итак, у меня есть выбор, из которого я зацикливаю все значения и тексты в массив.

Чего я не понимаю, так это почему первое значение этого массива пустое?

var op = new Array();

$('select option').each(function() {
  if ($(this).val() !== '' && $(this).val() !== null) {
    op[$(this).val()] = $(this).text();
  }
});

console.log(op);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option value="">select 1</option>
  <option value="1">select 2</option>
  <option value="2">select 3</option>
  <option value="3">select 4</option>
  <option value="4">select 5</option>
</select>

(5) [пусто, «Вариант 1», «Вариант 2», «Вариант 3», «Вариант 4»]

1: «Вариант 1»

2: «Вариант 2»

3: «Вариант 3»

4: «Вариант 4»

Это то, что я получаю из консоли.

Хотя я действительно думаю, что код верен, я просто не понимаю, почему первое значение будет пустым.

Answer 1

Вы используете значение параметра в качестве индекса массива.Поскольку с value="0" нет опции, у вас нет значения в этом элементе массива.

Вместо использования значения в качестве индекса, вы можете просто вставить в массив.

    $('select option').each(function(){
        if ($(this).val() !== '' && $(this).val() !== null) {
            op.push($(this).text());
        }
    });

Тогда в начале не будет пустого элемента, но индексы не будут соответствовать значениям.

Или вы можете сделать op объектом, а не массивом.Тогда он будет иметь только те свойства, которые вы добавляете.