在 JavaScript 中返回一个重复对象值的实例答案

【问题标题】：Return one instance of duplicate object values in JavaScript在 JavaScript 中返回一个重复对象值的实例
【发布时间】：2018-05-04 03:35:50
【问题描述】：

我正在从包含重复对象值的 large API 返回信息。我有一个程序名称数组和一个查找我想要的标题的函数。但是，我只希望它们返回一次而不是多次。

//...
var data = JSON.parse(request.responseText);
const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];

for (x in data){
  let title = data[x]._embedded.show.name;

  function getShow() 
    if (lateNightHosts.indexOf(title) !== -1){
      console.log(title)
    } 
  }

  getShow()
}

由于未来的计划，API 很大，所以console.log 多次返回标题。我想退货一次。提前致谢

【问题讨论】：

能否提供data的样本
在函数getShow(array) 中，array 从未使用过。它应该是干什么用的？
@Eddie 我刚刚更新了一个链接，你也可以看看here
@kshetline 我的错误。那是以前尝试解决此问题的方法，我删除了参数
您可以使用Set 删除重复项。

标签： javascript arrays json object get

【解决方案1】：

你可以这样做：

var data = JSON.parse(request.responseText);
const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];
const displayed = new Set();

for (x in data){
  let title = data[x]._embedded.show.name;

  function getShow() 
    if (lateNightHosts.indexOf(title) !== -1) {
      if (!displayed.has(title)) {
        console.log(title);
        displayed.add(title);
      }
    } 
  }

  getShow();
}

【讨论】：

谢谢！这帮助很大
当我使用console.log() 显示结果时，它会显示正确的值。当我尝试将其显示为 HTML 时，它返回为 [object Set] 或未定义。有什么解决办法吗？
Set 对象有一个forEach 方法，就像数组一样。以字符串形式获取所有标题的快速n-dirty 解决方案看起来像这样（抱歉，cmets 没有换行符）：const titles = []; displayed.forEach(title => titles.push(title)); 然后你可以使用titles.join()。当然，如果您想要漂亮的格式，这只是一个粗略的起点。

【解决方案2】：

您可以将所有标题添加到数组中，然后对其进行过滤

const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];

filteredArray = lateNightHosts.filter(function(item, pos) {
    return lateNightHosts.indexOf(item) == pos;
})

console.log(filteredArray)

您也可以使用Set，因为它只包含唯一元素，然后使用扩展运算符将其转换为数组

const lateNightHosts = ['The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live', 'The Late Show with Stephen Colbert', 'Conan', 'Jimmy Kimmel Live'];

var set = new Set(lateNightHosts);
var filteredArray = [...set];
console.log(filteredArray);

【讨论】：

【解决方案3】：

这看起来是一个利用新的 ES6 Set 数据结构的好地方。 Set 只会添加唯一值，并且在其原型上具有多个功能，可让您访问和改变数据。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set

let store = new Set();
for (x in data){
  store.add(data[x]._embedded.show.name);
}

这个新结构是可迭代的，具有 size 属性，以及几个方便的原型函数，如 has()、delete() 和 clear()。

let target = document.getElementById('data-target');

let set = new Set();
for(let i = 0; i < 10; i++){
    set.add(`value-${i}`);
}
let elem = '';
set.forEach((value) => {
    elem += `<div>${value}</div>`;
});

target.innerHTML = elem;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="data-target"></div>
        
</body>
</html>

【讨论】：

谢谢！ Set() 绝对有帮助。当我使用console.log() 时，它会显示正确的值。当我使用 javascript 模板文字将其显示为 HTML 时，它返回为 [object Set] 或未定义。你知道有什么解决办法吗？
你能给我一个你的实现例子吗？
更新后的答案实际上帮了大忙。谢谢！