javascript - 调用两个方法一次

Question

我是 javascript 和堆栈溢出的新手，我被卡住了，所以我请求你的帮助。

所以这里我有两种方法。第一种方法从列表 [members].state

中动态创建一个选择下拉菜单

第二种方法从列表中删除重复项，只保留列表中的唯一数据。使用 console.log，这两种方法都运行良好。我已经在选择菜单中显示了我的数据，但我无法删除重复项。

问题是:如何将这两个方法结合起来，相互调用，协同工作？

我期待着您的意见，我希望有一天我能获得技能来帮助这个神奇社区的其他人。

function getCities() {
    for (var i = 0; i < members.length; i++) {
        var opt = members[i].state;
        var el = document.createElement("option"); //create option
        el.textContent = opt; //create text space
        el.value = opt;
        select.appendChild(el); //assign the text
    }

}
getCities();



function removeDuplicates(arr){

    let unique_array = [];
     //   let test = [];


    for(let i = 0;i < arr.length; i++){
        if(unique_array.indexOf(arr[i].state) == -1){
            unique_array.push(arr[i].state);
          test.push(arr[i].state);

        }

    }
    console.log(test);

    return unique_array;
}
removeDuplicates(members); 

Answer 1

您可以从 getCities 函数中调用过滤函数，并将过滤后的列表用作成员数组的来源。

更新 - 只是将原始数组编辑为对象数组 - 为您提供 OP 中所需的状态属性。刷新，您会看到即使原始数组中有重复的对象，也只有 3 个唯一值被传递到选择列表。

请注意，您可以将过滤作为单个函数的一部分 - 但我将其保留为一个单独的函数，以便让您体验使用数组作为参数调用另一个方法的体验。

我还将 for 循环更改为更现代的 forEach 循环，为解决方案赋予现代风格。

var arr = [
 { name: 'test1', state: 'test-state-1'},
 { name: 'test1', state: 'test-state-1'},
 { name: 'test2', state: 'test-state-2'},
 { name: 'test2', state: 'test-state-2'},
 { name: 'test3', state: 'test-state-3'}
];

getCities();


function getCities() {
  var filteredMembers = removeDuplicates(arr);
  console.log(filteredMembers);
   
    filteredMembers.forEach(function(member){
        var opt = member;
        var select = document.querySelector('select');
        var el = document.createElement("option"); //create option
        el.textContent = opt.state; //create text space
        el.value = opt.state;
        select.appendChild(el); //assign the text
    })
}


function removeDuplicates(arr){
 
    var unique_array = [];
    var tempArr = [];

   arr.forEach(function(item){
        if(tempArr.indexOf(item.state) == -1){
           unique_array.push(item);
           tempArr.push(item.state);
         }
     });

    return unique_array;
}

<select></select>