在 jquery 中为多维数组分配索引和值

Question

我想在 jquery 中向多维数组添加特定（数字）索引，然后在这些索引处分配值。每个索引本身都是一个数组，这些子数组的索引也将被动态分配。

$(document).ready(function(){
    $('#Show').click(function(){ 
        var AllItem = new Array();                             
        $("select[name^='Item']").each(function(dropdownumber, selected) {
            var name = $(this).attr('name');
            var toRemove = 'Item[';
            var name1 = name.replace(toRemove,'');
            var CategoryCode = name1.replace(']','');
            alert('item category code = ' + CategoryCode);
            if (!AllItem[CategoryCode]){ 
                //here I want that index 9 is set as an array, but it adds 9 elements , 
                //I need that only one index is added i.e. 9 and its value is array
                AllItem[CategoryCode] = [];
                alert('added='+CategoryCode);
            }

            //length comes out to be 10 
            //but it should be 1 as I have added only one index i.e. 9 & its an array   
            alert('length='+AllItem.length);

            //after this I need to assign values at 9th index of the array like
            // AllItem[9][0] = 2; //the value of the first index of 9th index is 2
            // AllItem[9][1] = 5;
            // AllItem[9][2] = 6;
            // AllItem[9][3] = 9;

更新：

//for adding values at indexes of AllItem  :  AllItem[9][1] = 5;
$(this).find(':selected').each(function(selectedoptionnumber, selected) {

    var SelectedVal = $(selected).val();
    if (SelectedVal > 0) {
        AllItem[CategoryCode][dropdownumber] = SelectedVal;
        alert(' Code = ' + AllItem[CategoryCode][dropdownumber]);
    }
});

<table style="border: 2px solid #97BDC9; border-collapse:collapse;">
    <tbody>
        <tr>
            <td>
                <select name="Item[9]">
                    <option selected="selected" value="0">-Select-</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="Show" value="Show Selected Items" />
            </td>
        </tr>
    </tbody>
</table>

Answer 1

这里我希望将索引 9 设置为一个数组，但它添加了 9 个元素，

我只需要添加一个索引，即 9，它的值是数组

实际上，它并没有添加九个元素，只是添加了一个。那一个元素位于索引8（可能不是9——记住索引从0开始）；索引0-7 根本没有值。这是因为 JavaScript 标准数组本质上是 sparse（和 aren't really arrays at all）。更多内容请参见下文。

长度是10

但它应该是 1，因为我只添加了一个索引，即 9 & 它是一个数组

length 属性未定义为数组中条目数的计数。它被定义为（至少）比最高数组索引大一。由于数组可能缺少条目，length 可以多于（但不能少于）数组中的条目数。

现在，如果您不需要数组对象的数组特性，则可以只使用普通对象。唯一的区别是它没有length 属性，也没有各种特定于数组的函数（forEach 等）。为此，只需更改您的

var AllItem = new Array(); 

行到

var AllItem = {};

您可以将[] 表示法与对象以及数组一起使用（因为数组只是对象，[] 表示法是一个 object 事物，而不是 array 事情），所以你的其他代码不会改变

但同样，唯一的区别在于 length 属性和各种数组函数。

---

详细了解如何在索引 8 处添加条目不会在 0-7 处创建条目：

当你这样做时：

var a = [];
a[8] = "value";

所发生的只是条目8 设置为值，a.length 设置为9。 什么都没有 否则会被添加到数组中。

console.log(0 in a); // false
console.log(1 in a); // false
...
console.log(7 in a); // false
console.log(8 in a); // true!

人们有时难以理解这一点，但关键在于上面的链接文章：数组根本不是真正的数组，它们只是带有一点魔法的对象。数组“索引" 只是属性名称，而数组“条目”只是属性。所以a[8] = "value" 在a 对象上创建了一个名为“8”的属性。它不会创建任何其他属性。

当您读取不存在的属性值（在对象或其原​​型上）时，您会返回值 undefined，但这并不意味着该属性存在，这就是定义 JavaScript 来处理这种情况的方式（读取不存在的属性）。

in 运算符（上面使用过）和hasOwnProperty 函数让您测试属性是否存在（in 查看 ojbect 及其原型，@ 987654346@ 只看物体）。

---

下面是关于更新代码的问题，这行可能有问题，也可能没有问题，具体取决于您拥有的其他代码：

AllItem[CategoryCode][dropdownumber] = SelectedVal;

没关系如果您已经在AllItem[CategoryCode] 放置了一个对象或数组。如果没有，则会导致错误。

如果你知道你已经这样做了，那么这条线很好。

如果您知道自己还没有这样做，那么：

AllItem[CategoryCode] = [];
AllItem[CategoryCode][dropdownumber] = SelectedVal;

如果您可能会或可能不会这样做，那么：

if (!AllItem[CategoryCode]) {
    AllItem[CategoryCode] = [];
}
AllItem[CategoryCode][dropdownumber] = SelectedVal;

（或者有时你会看到：

(AllItem[CategoryCode] = AllItem[CategoryCode] || [])[dropdownumber] = SelectedVal;

但通常不需要那种难以阅读和调试的东西。）