jQuery/JavaScript 陣列操作常見錯誤：value() 非函數、索引跳躍導致稀疏陣列

問題代碼

var nums = [];
for (var i = 1; i < 11; i++) {
    if (document.getElementById(i.toString()).checked) {
        nums[i] = document.getElementById(i.toString()).value(); // 錯誤
    }
}

三大錯誤

1. .value() **不是函數** → 應為 .value 屬性。
2. 使用 nums[i] 導致**稀疏陣列** (索引 0 空洞，長度為最後索引+1)。
3. 重複呼叫 document.getElementById 效能差。

修正寫法

var nums = []; // 或 new Array()
for (var i = 1; i < 11; i++) {
    var el = document.getElementById(i.toString());
    if (el && el.checked) {
        nums.push(el.value); // push 自動維護連續索引
    }
}
// nums 為緊湊陣列 [val1, val2, ...]
console.log(nums.length, nums);

補充：jQuery 版

var nums = $('input[type="checkbox"]:checked').map(function() {
    return this.value;
}).get(); // 取得原生陣列

關鍵點

• 陣列用 push 避免稀疏索引。
• DOM 屬性用 .value、.checked (非函數)。
• 快取 DOM 查詢結果，減少重複搜尋。