javascript - 计算对象中同一键内的多个唯一值

Question

我试图跟踪四个特定字符串值在同一键中出现的次数。

问题是，我很难添加多个计数器。第一个计数器工作并跟踪第一个条件，但 if/else 语句中的下一个条件会阻止初始条件和此后的每个条件正确相加。数据来自包含多个 URL 的 Promise.all。

这是我的代码:

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  'https://api.github.com/users/TylerP33/repos?page=2',
  'https://api.github.com/users/TylerP33/repos?page=3',
  'https://api.github.com/users/TylerP33/repos?page=4',
  'https://api.github.com/users/TylerP33/repos?page=5',
  'https://api.github.com/users/TylerP33/repos?page=6',
  'https://api.github.com/users/TylerP33/repos?page=7',
  'https://api.github.com/users/TylerP33/repos?page=8',
  'https://api.github.com/users/TylerP33/repos?page=9',
  'https://api.github.com/users/TylerP33/repos?page=10',
  'https://api.github.com/users/TylerP33/repos?page=11',
  'https://api.github.com/users/TylerP33/repos?page=12'
]


function getLanguages() {
  return Promise.all(urls.map(url =>
    fetch(`${url}`)
    .then(response => response.json())
    .then(obj => obj.forEach(function(val) {
      var rubyCounter = 0
      var cssCounter = 0
      var htmlCounter = 0
      var jsCounter = 0
      if (val.language === "Ruby") {
        rubyCounter++;
        console.log(rubyCounter);
      }

    })))
  )
}

getLanguages();

rubyCounter 将返回 235，这是正确的数量，但如果我添加更多条件，就像通过同一键运行的真/假条件会抛出所有内容离开。我可能遗漏了一些明显的东西，但我很想知道你们的想法。

提前致谢。

Answer 1

对于此代码，如果记录了，rubyCounter 将始终为 1，因为这些计数器始终在回调中初始化。

您需要将这些计数器的定义移至 getLanguages 的根。

我不会为每个计数器使用多个变量，而是使用一个对象，并且对于您想要计数的每种语言，您都有一个属性。

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  'https://api.github.com/users/TylerP33/repos?page=2',
  'https://api.github.com/users/TylerP33/repos?page=3',
  'https://api.github.com/users/TylerP33/repos?page=4',
  'https://api.github.com/users/TylerP33/repos?page=5',
  'https://api.github.com/users/TylerP33/repos?page=6',
  'https://api.github.com/users/TylerP33/repos?page=7',
  'https://api.github.com/users/TylerP33/repos?page=8',
  'https://api.github.com/users/TylerP33/repos?page=9',
  'https://api.github.com/users/TylerP33/repos?page=10',
  'https://api.github.com/users/TylerP33/repos?page=11',
  'https://api.github.com/users/TylerP33/repos?page=12'
]


function getLanguages() {
  let counter = {
    ruby: 0,
    html: 0
  }

  return Promise.all(urls.map(url =>
      fetch(`${url}`)
      .then(response => response.json())
      .then(obj => obj.forEach(function(val) {
        /*var rubyCounter = 0
        var cssCounter = 0
        var htmlCounter = 0
        var jsCounter = 0*/
        if (val.language === "Ruby") {
          counter.ruby++;
        } else if (val.language === "HTML") {
          counter.html++;
        }

      }))))
    .then(() => {
      console.dir(counter)
    })
}

getLanguages();

如果您想查找所有语言，那就更简单了:

const urls = [
  'https://api.github.com/users/TylerP33/repos?page=1',
  'https://api.github.com/users/TylerP33/repos?page=2',
  'https://api.github.com/users/TylerP33/repos?page=3',
  'https://api.github.com/users/TylerP33/repos?page=4',
  'https://api.github.com/users/TylerP33/repos?page=5',
  'https://api.github.com/users/TylerP33/repos?page=6',
  'https://api.github.com/users/TylerP33/repos?page=7',
  'https://api.github.com/users/TylerP33/repos?page=8',
  'https://api.github.com/users/TylerP33/repos?page=9',
  'https://api.github.com/users/TylerP33/repos?page=10',
  'https://api.github.com/users/TylerP33/repos?page=11',
  'https://api.github.com/users/TylerP33/repos?page=12'
]


function getLanguages() {
  let counter = {}

  return Promise.all(urls.map(url =>
      fetch(`${url}`)
      .then(response => response.json())
      .then(obj => obj.forEach(function(val) {
        if( val.language ) {
          counter[val.language] = counter[val.language] || 0
          counter[val.language]++
        }
      }))))
    .then(() => {
      console.dir(counter)
    })
}

getLanguages();