Question

我正在制作一个vue.js前端功能，该功能可以按关键字过滤数据并按升序或降序对数据进行排序。我在网上找到了可能符合我要求的代码。但是其数据数组的格式与我检索到的数组不同：

<template>
  <div id="app">
    <br /><br />
    <div>
      <input type="text" v-model="filterValue" placeholder="Filter">
      <button @click="invertSort()">Sort asc/desc</button>
    </div>
    <table class="table table-striped">
      <thead>
      <tr>
        <td>Name</td>
        <td>Value</td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="data in filteredAndSortedData">
        <td>{{data.name}}</td>
        <td>{{data.val}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        testData: [{name:'3', val:'a'}, {name:'2', val:'b'}, {name:'1', val:'c'}, {name:'4', val:'d'}],
        error: "",
        errorFlag: false,
        filterValue: "",
        sortAsc: true
      };
    },
    computed: {
      filteredAndSortedData() {
        // Apply filter first
        let result = this.testData;
        if (this.filterValue) {
          result = result.filter(item => item.name.includes(this.filterValue));
        }
        // Sort the remaining values
        let ascDesc = this.sortAsc ? 1 : -1;
        return result.sort((a, b) => ascDesc * a.name.localeCompare(b.name));
      }
    },
    methods: {
      invertSort() {
        this.sortAsc = !this.sortAsc;
      }
    },
  }
</script>

因此，在提供的函数中，其数组类似于testData: [{name:'1', val:'a'}]，但是，我在this.testData = response.data中使用function(response)检索到的数组类似于testData: [{"name":"1", "val":"a"}] 就是说，我的变量名被双引号括起来，无法使用我想要的代码。有没有一种方法可以将[{"name":"1", "val":"a"}]转换为[{name:'1', val:'a'}]（例如删除变量名引号）或对其进行排序而不修改数组？

Answer 1

您可以使用

获取对象键串

var a = [{"name":"1", "val":"a"}];
console.log(a[0]["name"]) 
// if you already know key
console.log(a[0].name)

并且此[{"name":"1", "val":"a"}]和[{name:'1', val:'a'}]在javascript中是相同的。

当变量名称在JavaScript中带有引号时，如何排序数组？

1 个答案: