Vue: сортировать массив по порядку объектов

Question

Имеется такой массив:

var endArray = [34, 35, 32]

И такой объект:

var order = [{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}]

Как мне пересортировать endArray при изменении order?Я работаю в Vue, поэтому я могу написать наблюдателя следующим образом:

watch: {
  order: function (newObject) {
    // resort endArray here somehow
  }
}

Но я не уверен, как сопоставить заказ для сортировки endArray.

Обновление

Ожидаемый результат:

endArray = [35, 34, 32]

Соответствует порядку id ключей, установленных в order.

Answer 1

Способ решения этой проблемы состоит в том, чтобы разделить проблему на шаги:

Поскольку вы хотите отсортировать массив, вы хотите вызвать endArray.sort((a, b) => {})

На что вы хотитеСортировать?Индекс, в котором можно найти идентификатор:

endArray.sort((a, b) => {
    let indexA;
    for(indexA = 0; indexA < this.order.length; indexA++) {
        if (this.order[indexA].id === a) break;
    }
    let indexB;
    for(indexB = 0; indexB < this.order.length; indexB++) {
        if (this.order[indexB].id === b) break;
    }
    // ...
})

Как мы хотим его отсортировать?по возрастанию:

endArray.sort((a, b) => {
    let indexA;
    for(indexA = 0; indexA < this.order.length; indexA++) {
        if (this.order[indexA].id === a) break;
    }
    let indexB;
    for(indexB = 0; indexB < this.order.length; indexB++) {
        if (this.order[indexB].id === b) break;
    }
    if (indexA > indexB) return 1;
    if (indexB > indexA) return -1;
    return 0;
})

Когда мы хотим отсортировать это?Когда order или newArray изменяется:

new Vue({
    el: '#app',
    data: {
        orderString: '[{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}]',
        newArrayString: '[34, 35, 32]',
    },
    computed: {
        order() {
            return JSON.parse(this.orderString);
        },
        newArray() {
            return JSON.parse(this.newArrayString);
        },
        result() {
            //  Make a copy to prevent editing the original data
            return [...this.newArray].sort((a, b) => {
        let indexA;
        for(indexA = 0; indexA < this.order.length; indexA++) {
            if (this.order[indexA].id === a) break;
        }
        let indexB;
        for(indexB = 0; indexB < this.order.length; indexB++) {
            if (this.order[indexB].id === b) break;
        }
        if (indexA > indexB) return 1;
        if (indexB > indexA) return -1;
        return 0;
    })
        }
    },
})

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<div id="app">
    <p>
        Order:
        <textarea v-model="orderString"></textarea>
    </p>
    <p>
        NewArray:
        <textarea v-model="newArrayString"></textarea>
    </p>
    <p>
        Result:
        {{ result }}
    </p>
</div>

Answer 2

Просто используйте метод sort, передав предоставленную функцию callback.Я использовал функцию indexOf, чтобы найти index указанного element.

var endArray = [34, 35, 32]
var order = [{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}]

var orderIds = order.map(({id}) => id);
endArray.sort((a,b) => orderIds.indexOf(a) - orderIds.indexOf(b));
console.log(endArray);

Answer 3

Вы можете нарезать массив для получения первых трех объектов и отобразить карту id.

watch: {
    order: function (newObject) {
        endArray = newObject.slice(0, 3).map(({ id }) => id);
    }
}

Другим решением может быть сортировка массива.

watch: {
    order: function (newObject) {
        const getIndex = id => newObject.findIndex(o => o.id === id);
        endArray.sort((a, b) => getIndex(a) - getIndex(b));
    }
}

Answer 4

Создайте массив для поиска идентификаторов и разделите его по длине заданного массива / ИЛИ укажите прямую длину, если она известна здесь 3.

var endArray = [34, 35, 32];
var order = [{"id":35},{"id":34},{"id":32},{"id":30},{"id":28},{"id":24},{"id":17},{"id":15},{"id":3}];
var orderIds = order.map(function(e){return e.id});
console.log(orderIds.splice(0,endArray.length));

Answer 5

function compare(a,b) {
  if (order.indexOf(a.id) > order.indexOf(b.id))
    return -1;

  if (order.indexOf(a.id) < order.indexOf(b.id))
    return 1;

  return 0;
}

endArray.sort(compare);

Похоже, вы ищете функцию сортировки в массиве.По сути, вы создаете компаратор и передаете функцию в функцию сортировки.

В вашей ситуации вы бы включили логику для проверки / сравнения значений с массивом заказов в компараторе.

Подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort