仅使用 javascript 逐一打印关联数组元素

Question

我有这段代码

<script type="text/javascript">
var slideStart = 1;
var slideCount = 4;
function callArr() {
    var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"};
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr +
                                                         "   >>>>>>>>   " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            break;
        }
    }
}
</script>

，我想在任何事件上单独访问数组元素。有人可以帮我解决这个问题吗？？？

Answer 1

当然，它只会打印第一个元素，因为您使用这样的条件

if (slideStart <= slideCount)

修改代码以迭代对象属性。可能的解决方案之一：

var slideStart = 0;
var slideCount = 4;
function callArr() {
    var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"};
    var i = 0;
    for (var flwr in arrName) {
        if (i == slideStart) {
            document.getElementById('test').innerHTML += flwr +
                                                         "    " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            break;
        }

        i++;
    }
}

在这里尝试：http://jsfiddle.net/2nDv8/

如您所见，它会在每次调用后打印下一个属性。

Answer 2

如果您引用任何地方的访问，您可以将其声明为 globla var：

<script type="text/javascript">
var slideStart = 1;
var slideCount = 4;
var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"}; //Declare var outside, so it's global
function callArr() {    
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr +
                                                         "   >>>>>>>>   " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            //break; //This prevents from showing more. Erase it
        }
    }
}
</script>

另请注意， break 语句导致仅显示第一个元素

希望这会有所帮助。干杯

Answer 3

这并不完全兼容跨浏览器，但您可以使用Object.keys(arrName)。或者，如果您确实关心跨浏览器兼容性，则实际上创建并存储一个行为相同的数组。

Answer 4

它只打印一次，因为您在循环中放置了 "break" 。此代码将毫无问题地打印所有元素。还有一个问题是由 slideStart 和 slideCount 变量引起的。如果您想打印所有元素，请将 slideStart 更改为 0，以便打印所有元素，而不仅仅是其中的 4 个元素。希望有帮助：

function callArr() {
    var arrName = {"rose":"5", "daisy":"4",
                   "orchid":"3", "sunFlower":"10",
                   "Lily":"15"};
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr +
                                                         "   >>>>>>>>   " +
                                                         arrName[flwr] +
                                                         "<br />";
            slideStart++;
            //break;
        }
    }
}

Answer 5

也许这就是你想要的。在这里尝试一下：http://jsfiddle.net/Hsn4c/1/

function callArr() {
    var slideStart = 0;
    var slideCount = 4;

    var arrName = {
        "rose": "5",
        "daisy": "4",
        "orchid": "3",
        "sunFlower": "10",
        "Lily": "15"
    };
    for (var flwr in arrName) {
        if (slideStart <= slideCount) {
            document.getElementById('test').innerHTML += flwr + ">>>>>" + arrName[flwr] + "<br />";
            slideStart++;
            //break;
        }
    }
    document.getElementById('test').innerHTML += '==========<br />';
}