时间戳

首页 > 解决方案 > 如何循环遍历 JavaScript 对象并更改值？

javascript - 如何循环遍历 JavaScript 对象并更改值？

问题描述

我现在有这个：

var text = 'This is a sentence.';
var character;
var vowelAmount = {
    a = 0,
    e = 0,
    i = 0,
    o = 0,
    u = 0
}

for (i = 0; i < text.length; i++){
    character = text.charAt(i);
    for (var key in vowelAmount){
        if (key == character){
            vowelAmount[key]++;
        }
    }
}
for (var key in vowelAmount){
    document.write(key + '<br>');
}

它应该显示文本中的所有元音，但它没有做任何事情。我确信有一种更有效的方法可以做到这一点，但我想保留这个结构，因为它是为了学校而他们不希望我使用 for 循环......

标签： javascript

解决方案

根据我的评论：如果您的代码不起作用，请始终记住首先检查您的浏览器控制台：它始终包含有关问题所在的非常有用的信息。在您的情况下，第一个错误是=在您的对象声明中使用。改为使用:。

此外，您的代码块：

for (var key in vowelAmount){
    document.write(key + '<br>');
}

...仅用于打印对象中的键（例如a），而不是其值（即每个元音的计数）。要访问对象中键值对中的值，您可以通过其索引访问它，即vowelAmount[key].

有关工作示例，请参见下面的概念验证：

var text = 'This is a sentence.';
var character;
var vowelAmount = {
    a: 0,
    e: 0,
    i: 0,
    o: 0,
    u: 0
}

for (var i = 0; i < text.length; i++){
    character = text.charAt(i);
    for (var key in vowelAmount){
        if (key == character){
            vowelAmount[key]++;
        }
    }
}

for (var key in vowelAmount){
    document.write(key + ': ' + vowelAmount[key] + '<br>');
}

改进说明

附带说明一下，我通常强烈反对使用 ，document.write因为它会覆盖文档中的任何内容。您应该创建一个新元素并将它们附加到 DOM 本身。更好的是：如果您希望您的示例在语义上 100% 正确，最好的选择是使用无序列表。

此外，您不需要双重嵌套循环：您可以直接根据对象for简单地检查字符：vowelAmount

var text = 'This is a sentence.';
var character;
var vowelAmount = {
    a: 0,
    e: 0,
    i: 0,
    o: 0,
    u: 0
}

for (var i = 0; i < text.length; i++){
    character = text.charAt(i);
    if (character in vowelAmount) {
        vowelAmount[character]++;
    }
}

// Create dummy `<ul>` parent
var ul = document.createElement('ul');

// Iterate through your object and create new `<li>` element per key-value pair
// Also, once the `<li>` is created, we then inject it into `<ul>`
for (var key in vowelAmount){
  var li = document.createElement('li');
  li.textContent = key + ': ' + vowelAmount[key];
  ul.appendChild(li);
}

// When you're done, we can append `<ul>` to the body
document.body.appendChild(ul);

推荐阅读