删除重复错误，未定义数组 [x]

Question

我正在尝试从节点传递的数据中删除重复项。获取数据的函数是：

getProducts(_) {
     const dev = "http://localhost:3008/api"
      fetch(dev) 
      .then(res => res.json())
      .then(data => {
       /* this.setState
        ({
          data: data.data
        })
      })*/
     this.removeDuplicates(data) 
      })
    }

我的删除重复功能是：

removeDuplicates(arr){ 
    let array = arr.data
  console.log(array)
    array.sort((a,b) => {return a.webservice - b.webservice}) 
  let length = array.length 
   for ( var i = 0; 
          i < length; 
          i++ ){
            let x = i+1
           console.log(array[x].webservice)
    /*  if (array[i].webservice == array[x].webservice){
        delete array[i]
      }*/
     // console.log(array)
      }
  }

当我 console.log 时 data - 它按预期返回对象数组。 当我 console.log array[i].webservice - 它返回网络服务 但是当我尝试对array[x].webservice（即 i+1）执行相同操作时，它返回 array[x] 是未定义的致命错误，但仍然 console.logs 数据。

我在这里遗漏了什么吗？

Answer 1

仔细看看这部分代码：

for (var i = 0; i < length; i++ ){
  let x = i+1;
  // ...etc....
}

假设数组的长度为3，当i = 2时，小于3，所以会执行循环； x = i + 1 = 2 + 1 = 3。然后你试图访问array[3]——但是长度为3的数组只从0到2！这将尝试访问超出数组的范围，因此会出现错误。

Answer 2

您可以按如下方式从数组中删除重复项，

假设您的数据与此类似

const data = [
  { webservice: "a" },
  { webservice: "b" },
  { webservice: "c" },
  { webservice: "b" },
  { webservice: "d" },
];

在此示例中，带有值为 b 且索引为 3 的 webservice 的项目将被排除以进行重复

const data = [
  { webservice: "a" },
  { webservice: "b" },
  { webservice: "c" },
  { webservice: "b" },
  { webservice: "d" },
];

const output = data.reduce((accumulator, current) => {
  if (!accumulator.some(element => element.webservice === current.webservice)) {
    accumulator.push(current);
  }

  return accumulator;
}, []);

console.log(output);

希望我已经正确解释了您的问题