删除数组中的相同项目

Question

Beginner programmer here. I'm struggling with an assignment that's taking input text, splitting the words into single array items and then listing the total number of each words in an output. The splitting of the input works fine, but I need to check the array for duplicate items and remove that item (need to keep it unique) while also increasing the count on that particular word.

The idea was to make an array consisting of the words alone, and another that keeps track of the count. Glad to receive tips to use a simpler approach as well.

And yes, I know there is several solutions to this problem on SO, but I dont quite understand how to fix this particular code using functions.

function gen()
{   
    var arr = [];
    var counter = [];
    var str = document.getElementById("inpTxt").value;
    str.toString();
    str = str.split(" ");

    for(var i = 0; i < str.length; i++) 
    {
        arr.push(str[i]);                                   
        counter[i]++; //ignore that this array hasnt been properly declared yet, Im trying to make this equal length of arr with default value 0
        //tried nested loop here for making comparison, didnt work

        document.getElementById("print").innerHTML += "Total number of the word \"" + arr[i] + "\": " + counter[i] + " <br />";
    }
}

Answer 1

If you're using ECMAScript2015(ES6), you can build a Set - which guarantees unicity - from your array :

var inputArray = [1, 1, 2, 3, 2, 4, 5, 5, 4, 1];
console.log(new Set(inputArray)) // displays Set { 1, 2, 3, 4, 5 }

Otherwise, you can loop over the array and check if a particular element follows another occurrence of itself :

var inputArray = [1, 1, 2, 3, 2, 4, 5, 5, 4, 1];
// with ES6 :
var result = inputArray.filter((element, index) => ! inputArray.slice(0, index).includes(element));
// without ES6 :
result=[];
for (var i=0; i<inputArray.length; i++) {
    var currentElement = inputArray[i];
    var previouslyFound = false;
    for (var j=0; j<i && !previouslyFound; j++) {
        previouslyFound = inputArray[i] == inputArray[j];
    }
    if (!previouslyFound) result.push(currentElement);
}

However, since we are looping over the array, it would be as fast to count the occurrences without unicizing the array first :

var inputArray = [1, 1, 2, 3, 2, 4, 5, 5, 4, 1];
// with ES6 :
var result = inputArray.reduce(function(map, element) {
    map[element] = map.hasOwnProperty(element) ? map[element] + 1 : 1;
    return map;
}, {});
// without ES6 :
var result = {};
for (var i=0; i<inputArray.length; i++) {
    var currentElement = inputArray[i];
    if (result.hasOwnProperty(currentElement)) {
        result[currentElement] = result[currentElement] + 1;
    } else {
        result[currentElement] = 1;
    }
}

Answer 2

Try the indexOf method of arrays to figure out whether you already have the string in array.

 function gen()
    {   
        var arr = [];
        var counter = [];
        var str = document.getElementById("inpTxt").value;
        str.toString();
        str = str.split(" ");

        for(var i=0; i < str.length; i++)   
        {
          if(arr.indexOf(str)==-1){                    
          arr.push(str[i]);                                   
            counter[i]++; //ignore that this array hasnt been properly declared yet, Im trying to make this equal length of arr with default value 0
          }
            //tried nested loop here for making comparison, didnt work

            document.getElementById("print").innerHTML += "Total number of the word \"" + arr[i] + "\": " + counter[i] + " <br />";
        }
    }

PS: please know that there are less expensive methods available out there but i am just trying to help with whatever i can.