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

您可以对数组进行切片以获取前三个对象并映射def label_plots(): plt.xlabel('x') plt.ylabel('y') pass plt.plot(x,y) label_plots()。

id

另一种解决方案是对数组进行排序。

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

Answer 2

制作一个数组以查找ID，并按给定数组的长度将其分割/或直接提供长度（如果在此处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 3

只需通过传递sort提供的函数来使用callback方法。我使用indexOf函数来查找指定的index的{{1}}。

element

Answer 4

解决此问题的方法是将问题分步进行：

由于要对数组进行排序，因此要调用endArray.sort((a, b) => {})

您要排序什么？可以找到ID的索引：

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 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);

看起来您正在寻找数组上的sort函数。基本上，您将创建一个比较器，并将该函数传递给sort函数。

根据您的情况，您将在比较器中包括根据订单数组检查/比较值的逻辑。

更多信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Vue：根据对象顺序对数组进行排序

5 个答案: