首页 文章

在 vue JS 中使用索引从数组中删除项目会返回意外结果

提问于
浏览 次
1

所以我有以下数组：

var hdr = ("name", "date", "start_time", "selling_item", "total_call", 
           "end_time", "ad_num", "area", "order_num");
//this data is returned from db

现在，我想用适当的命名约定替换它，所以我这样做：

renameTableHdr(hdrs){
        var handler = hdrs;

        for(var a = 0; a<hdrs.length; a++){
            // console.log(hdrs[a]);
            var itm = "";
            if(hdrs[a] === 'name'){
                itm = "Name";
            }
            if(hdrs[a] === 'ad_num'){
                itm = "Ad Number";
            }
            if(hdrs[a] === 'date'){
                itm = "Date";
            }
            if(hdrs[a] === 'order_num'){
                itm = "Order Number";
            }
            if(hdrs[a] === 'start_time'){
                itm = "Start Time";
            }
            if(hdrs[a] === 'area'){
                itm = "Area";
            }
            if(hdrs[a] === 'selling_item'){
                itm = "Selling Item";
            }
            if(hdrs[a] === 'end_time'){
                itm = "End Time";
            }
            if(hdrs[a] === 'total_call'){
                itm = "Total Call";
            }

            if(handler.indexOf(hdrs[a]) >= 0){
                handler.splice(handler.indexOf(hdrs[a]),1);
            }
            this.tempTblHdr.push(itm);
        }
    },

因此，如果我不进行拼接，则返回的数据正确或符合预期。但是通过拼接，它做得不好。

没有拼接的结果

(9) ["Ad Number", "Date", "Order Number", "Start Time", "Name", "Area", "Selling Item", "End Time", "Total Call", __ob__: Observer]

带接头

(5) ["Ad Number", "Order Number", "Name", "Selling Item", "Total Call", __ob__: Observer]
//other 4 data are missing

我要从handler删除这些项目，因为它们是正确命名约定所需的主要数据，并且有可能添加了这些数据。我正在重命名它们，而没有涉及或更改其索引。我是否正确执行splice？

javascript arrays vue.js array-splice

3 回答

  • 1

    从数组中删除项目时，应向后进行。这样做的原因是，即使您删除了该项目，索引也一直在增长。

    因此，如果我这样做：

    let array = ["a", "b", "c", "d"];
for (let i = 0; i < array.length; i++) {
  console.log(array.splice(i, 1));
}

    第一次进入时，i等于0，因此它计算array[0](因此元素"a")并将其从数组中删除。

    在第二次迭代中，i将是1，并且由于我的数组现在是["b", "c", "d"]，因此array[i]将是"c"。

    跳过"b"并删除"c"之后，数组将为["b", "d"]。在第三次迭代中，i将是2，并且由于这是数组，2大于array.length，它将在此处停止。

    如果您向后进行操作，它将先删除"d"，然后删除"c"，依此类推，这意味着它不会跳过任何内容。

    由于您担心编制索引，因此只需从unsifht开始添加项目：

    renameTableHdr(hdrs){
    var handler = hdrs;

    for(var a = hdrs.length-1; a>=0; a--){
      // console.log(hdrs[a]);
      var itm = "";

      if(hdrs[a] === 'name'){
        itm = "Name";
      }
      if(hdrs[a] === 'ad_num'){
        itm = "Ad Number";
      }
      if(hdrs[a] === 'date'){
        itm = "Date";
      }
      if(hdrs[a] === 'order_num'){
        itm = "Order Number";
      }
      if(hdrs[a] === 'start_time'){
        itm = "Start Time";
      }
      if(hdrs[a] === 'area'){
        itm = "Area";
      }
      if(hdrs[a] === 'selling_item'){
        itm = "Selling Item";
      }
      if(hdrs[a] === 'end_time'){
        itm = "End Time";
      }
      if(hdrs[a] === 'total_call'){
        itm = "Total Call";
      }

      if(handler.indexOf(hdrs[a]) >= 0){
        handler.splice(handler.indexOf(hdrs[a]),1);
      }
      this.tempTblHdr.unshift(itm);
    }
},
    回复于
  • 1

    我将通过不变异或不使用 for 循环，通过以下方式简化转换：

    function renameTableHdr(hdrs) {
  // console.log(hdrs[a]);
  const translate = {
    name: 'Name',
    ad_num: 'Ad Number',
    date: 'Date',
    order_num: 'Order Number',
    start_time: 'Start Time',
    area: 'Area',
    selling_item: 'Selling Item',
    end_time: 'End Time',
    total_call: 'Total Call',
    'things with spaces':'Translates fine'
  };
  return hdrs.map((item) => translate[item] || "");
}

console.log(
  renameTableHdr([
    'name',
    'date',
    'start_time',
    'selling_item',
    'total_call',
    'end_time',
    'ad_num',
    'area',
    'order_num',
    'XXXXXXXXXXXXXXXXXXXXXXXXXX',
    'things with spaces',
  ]),
);
    回复于
  • 1

    从数组中删除项目时，应像这样向后循环

    renameTableHdr(hdrs){
        var handler = hdrs;

        for(var a = hdrs.length - 1; a >= 0; a--){
            // ...
        }
    }
    回复于

相关问题