对象的第一个结果返回未定义

Question

问题描述 (Fiddle)：

此代码的第一个打印结果返回“未定义”。为什么？避免它的正确实施是什么？

代码：

var animals = {
    dogs: 0,
    cats: 0,
    birds: 0,
    fish: 0
};

function countAnimals(animal) {
    animals[animal]++;

    var html;
    for (var key in animals) {
        if (animals.hasOwnProperty(key)) {
            html += key + ': ' + animals[key] + '<br/>';
        }
    }

    $('#output').html(html);
};

countAnimals('dogs');

Answer 1

var animals = {
    dogs: 0,
    cats: 0,
    birds: 0,
    fish: 0
};

function countAnimals(animal) {
    animals[animal]++;

    var html = ""; // here define variable as a string
    for (var key in animals) {
        if (animals.hasOwnProperty(key)) {
            html += key + ': ' + animals[key] + '<br/>';
        }
    }

    $('#output').html(html);
};

countAnimals('dogs');

JSFiddle

注意：起初你的变量html没有价值，所以它被认为是undefined

Answer 2

Fiddle Demo

改变

var html; // default value is undefined

到

var html=''; //set value as empty string