使用 vue JS returns 中的索引从数组中删除一个项目意外的结果

Question

所以我有以下数组：

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

因此，如果我没有进行拼接，则返回的数据是正确的或预期的。但是用splice就做的不太好

没有拼接的结果

(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 正确吗？

Answer 1

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

   renameTableHdr(hdrs){
        var handler = hdrs;

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

Answer 2

我将通过以下方式通过不变异或使用 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',
  ]),
);

Answer 3

当你从一个数组中删除一个项目时，你应该向后做。这是因为即使您删除了该项目，索引仍在不断增长。

因此，如果我这样做：

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

使用 vue JS returns 中的索引从数组中删除一个项目意外的结果

Removing an item from an array using index in vue JS returns an unexpected result

javascript

arrays

array-splice

vue.js