仅将唯一值推送到数组（无重复值）答案

【问题标题】：Pushing only unique values to array (no repeating values)仅将唯一值推送到数组（无重复值）
【发布时间】：2022-01-14 17:00:28
【问题描述】：

我有一个下拉菜单，带有一个选择所有值的按钮。数组中已经有一些默认值，点击一个按钮，所有其余的值都应该被推送（选择）。

我尝试过 SO 的其他解决方案，但似乎无法正常工作。

我需要推送到另一个数组的值：

valuesToPush: {
            value1: 'Value 1',
            value2: 'value 2',
            value3: 'Value 3',
            value4: 'Value 4',
            value5: 'Value 5',
        },

我推送的数组最初是空的，所以：

pushedValues: [];

在页面装载时，我将一些默认值推送到数组：

pushedValues.push('value1','value2');

当我单击按钮时，如何通过键添加其余值（我需要请求的键，并且该值用于在页面上显示）？我可以这样做，但可能会添加更多的键值对，所以我需要它是动态的。

【问题讨论】：

你能分享你正在尝试做的解决方案的代码 sn-p 吗？
基本上是我写的，但只是名称不同。我无法分享代码。
查看此 SO 线程的选择答案：<select> tag and returning multiple values

标签： javascript arrays oop

【解决方案1】：

试试这个

const pushedValues = [];
function myFunction() {
  var x = document.getElementById("val").value;
  console.log("You selected: " + x);
  if(!pushedValues.includes(x)){
  pushedValues.push(x);
  console.log(pushedValues);
  }
}

<label for="cars">Choose a value:</label>

<select name="val" id="val" onchange="myFunction()">
  <option value="value1">value 1</option>
  <option value="value2">value 2</option>
  <option value="value3">value 3</option>
  <option value="value4">value 4</option>
  <option value="value5">value 5</option>
</select>

【讨论】：

我做了，但这也只添加了一个完整的对象作为下一个值。那么我的数组变成： ['value1', 'value2', {value1: 'Value1', value2: 'Value2', value3: 'Value3'...}];
@jsme 然后，而不是推动整个对象，只推动关键 - 比如pushedValues.push(x.key)

【解决方案2】：

不确定是否可以，但您可以将值转换为对象数组并尝试类似下面的代码（需要添加更多工作以处理“取消选择”项目，但我认为这可能会让您更接近你正在努力实现。（我认为）

// update values to array of objects
const valuesToPush = [{
    value1: 'Value 1'
  },
  {
    value2: 'value 2'
  },
  {
    value3: 'Value 3'
  },
  {
    value4: 'Value 4'
  },
  {
    value5: 'Value 5'
  },
];

const pushedValues = [];

// push some defaults (keys only)
pushedValues.push('value1', 'value4');
console.log(pushedValues);

function init() {
  var selectObj = document.getElementById("select");

  valuesToPush.forEach(obj => {
    for (const [key, value] of Object.entries(obj)) {
      var newOption = new Option(value, key);    
      
      // mark default as selected
      if (pushedValues.includes(key)) {
        newOption.selected = true;
      }
      
      // add them as options for the select
      selectObj.add(newOption);      
    }
  });
}

function myFunction() {
  var x = document.getElementById("select").value;
  console.log("You selected: " + x);
  console.log(pushedValues);
  if (!pushedValues.includes(x)) {
    pushedValues.push(x);
    console.log(pushedValues);
  }
}

init();

<label for="cars">Choose a value:</label>
<br/>
<select name="val" id="select" multiple onchange="myFunction()"></select>

【讨论】：