Сортировка вставки в массив объектов с javascript

Question

У меня есть этот массив с объектами, которые выглядят так

{
 n: 15,
 color: "red"
}

Я пытаюсь отсортировать его с помощью функции ниже

async insertionSort() {
      let len = this.array.length;
      let value;
      let i;
      let j;
      //let current;
      // let arr = this.array;

      for (i = 0; i < len; i++) {
        value = this.array[i].n;
        //current = this.array[i];
        for (j = i - 1; j > -1 && this.array[j].n > value; j++) {
          //arr[j + 1] = arr[j];
          // HF.arraySwap(this.array, this.array[j + 1], this.array[j]);
          this.array[j + 1] = this.array[j];
        }
        // arr[j + 1] = value;
        HF.arraySwap(this.array, this.array[j + 1], this.array[i]);
        await HF.sleep();
      }
    }

** Я не могу использовать array.sort ( ...) потому что я пытаюсь визуализировать алгоритм, я использую объекты, чтобы изменить цвет полос, которые я рендую на экране ** Когда я нажимаю второй для l oop я получаю сообщение об ошибке «Не удается прочитать свойство 'n' из неопределенного», когда я запускаю его только с числами, он работает нормально, но когда я пробую его с объектами, он выдает ошибку . Теперь я знаю, что у меня заканчивается массив, есть ли способ, которым я могу преодолеть это и по-прежнему сортировать массив объектов? Кроме того, я использую VueJS для отображения всего этого

Answer 1

Попробуйте против this.array [i] .n напишите this.array [i] [n] И против this.array [j] .n напишите this.array [j] [n]

Answer 2

Есть ли причина, почему бы не использовать такой метод сортировки?:

  const arr = [
    { n: 10, color: "red" },
    { n: 20, color: "yellow" },
    { n: 15, color: "black" },
    { n: 7, color: "white" },
    { n: 23, color: "blue" }
  ];

  const ascSorted = arr.sort((a, b) => a.n - b.n); 
  const descSorted = arr.sort((a, b) => b.n - a.n);

  console.log(ascSorted);
  // [
  //   { n: 7, color: "white" },
  //   { n: 10, color: "red" },
  //   { n: 15, color: "black" },
  //   { n: 20, color: "yellow" },
  //   { n: 23, color: "blue" }
  // ];

Answer 3

На первой итерации i=0 вы начинаете вторую l oop со значения j=i-1, которое равно -1. Массив не содержит элемент с индексом -1: array[-1] равно undefined. Как только JavaScript может сравнивать переменные разных типов, он работает с числами, потому что сравнение числа и неопределенного не вызовет ошибку

Кстати, вы можете использовать Array.proototype.sort Метод, это будет выглядеть так:

console.log(myArr.sort((a,b) => a.n - b.n))

<script>
const myArr = [
    { n: 1, color: "red" },
    { n: 44, color: "orange" },
    { n: 13, color: "yellow" },
    { n: 8, color: "green" },
    { n: 2, color: "blue" }
  ];
</script>