// 1. 稀疏數(shù)組（天然空洞）
const sparseArr = [];
sparseArr[10] = 'JavaScript'; // 僅給索引10賦值，0-9均為空洞
console.log('稀疏數(shù)組長度：', sparseArr.length); // 11（最大索引+1）
console.log('索引5的值：', sparseArr[5]); // undefined（空洞）
console.log('實(shí)際存在的鍵：', Object.keys(sparseArr)); // ['10']（僅賦值索引）
console.log('是否包含索引5：', sparseArr.hasOwnProperty(5)); // false（空洞不占內(nèi)存）

// 2. 密集數(shù)組（顯式賦值undefined）
const denseArr = new Array(11).fill(undefined);
denseArr[10] = 'JavaScript';
console.log('密集數(shù)組長度：', denseArr.length); // 11
console.log('索引5的值：', denseArr[5]); // undefined（顯式賦值）
console.log('實(shí)際存在的鍵：', Object.keys(denseArr)); // ['0','1',...,'10']（全索引存在）
console.log('是否包含索引5：', denseArr.hasOwnProperty(5)); // true（占用內(nèi)存）

// 業(yè)務(wù)場景：根據(jù)ID索引存儲用戶數(shù)據(jù)，ID從100開始
const userList = [];
userList[100] = { id: 100, name: '張三' };
userList[105] = { id: 105, name: '李四' };

console.log(userList.length); // 106（而非2）
console.log(userList[99]); // undefined（空洞）
// 此時(shí) userList 是典型的稀疏數(shù)組：0-99、101-104均為空洞

// 錯誤認(rèn)知：new Array(5) 會創(chuàng)建 [undefined, undefined, ...]
const emptyArr = new Array(5); 
console.log(emptyArr); // [empty × 5]（純空洞數(shù)組）
console.log(emptyArr.map(item => item || '默認(rèn)值')); // [empty × 5]（map跳過空洞）

// 對比：真正的密集空數(shù)組
const realEmptyArr = Array.from({ length: 5 });
console.log(realEmptyArr); // [undefined, undefined, undefined, undefined, undefined]
console.log(realEmptyArr.map(item => item || '默認(rèn)值')); // ['默認(rèn)值','默認(rèn)值',...,'默認(rèn)值']

const scoreList = [90, 85, 78, 92];
delete scoreList[1]; // 刪除索引1的元素，留下空洞

console.log(scoreList); // [90, empty, 78, 92]
console.log(scoreList.length); // 4（長度不變）
// 遍歷陷阱：forEach跳過空洞
scoreList.forEach((score, index) => {
  console.log(`索引${index}：${score}`); // 僅輸出索引0、2、3
});

const arr1 = [1, 2];
const arr2 = arr1.slice(0, 0); // 截取空范圍，返回稀疏數(shù)組
arr2[5] = 6;

console.log(arr2); // [empty × 5, 6]
console.log(arr2.concat([7])); // [empty × 5, 6, 7]（拼接后仍保留空洞）

// 業(yè)務(wù)場景：檢查購物車是否有選中商品（選中商品存于數(shù)組指定索引）
const cartSelected = [];
cartSelected[3] = ['goods1', 'goods2']; // 稀疏數(shù)組：0-2為空洞

// 期望：檢查是否有選中商品，實(shí)際報(bào)錯
try {
  const hasSelected = cartSelected.some(ids => ids.length > 0);
} catch (e) {
  console.error(e); // TypeError: Cannot read properties of undefined (reading 'length')
}
// 原因：some()遍歷索引0時(shí)，ids = undefined，訪問length報(bào)錯

// 業(yè)務(wù)場景：將商品ID數(shù)組轉(zhuǎn)為商品名稱數(shù)組
const goodsIds = [];
goodsIds[2] = 'g001';
goodsIds[5] = 'g002'; // 稀疏數(shù)組：長度6，僅2、5有值

// 期望：返回長度6的名稱數(shù)組，實(shí)際返回稀疏數(shù)組
const goodsNames = goodsIds.map(id => {
  const nameMap = { g001: '手機(jī)', g002: '電腦' };
  return nameMap[id] || '未知商品';
});

console.log(goodsNames); // [empty × 2, '手機(jī)', empty × 2, '電腦']
console.log(goodsNames.length); // 6，但索引0-1、3-4仍為空洞
// 后續(xù)邏輯陷阱：如果用goodsNames.length做循環(huán)，會拿到undefined

// 業(yè)務(wù)場景：統(tǒng)計(jì)數(shù)組中有效數(shù)據(jù)的數(shù)量
const dataList = [];
dataList[1] = '有效數(shù)據(jù)1';
dataList[4] = '有效數(shù)據(jù)2';

// 錯誤1：for...in僅遍歷有值索引，統(tǒng)計(jì)結(jié)果偏小
let count1 = 0;
for (const index in dataList) {
  count1++;
}
console.log('for...in統(tǒng)計(jì)：', count1); // 2（正確，但易被誤認(rèn)為“遍歷全索引”）

// 錯誤2：for循環(huán)遍歷全索引，統(tǒng)計(jì)結(jié)果偏大
let count2 = 0;
for (let i = 0; i < dataList.length; i++) {
  if (dataList[i]) count2++;
}
console.log('for循環(huán)統(tǒng)計(jì)：', count2); // 2（看似正確，但如果有值為0/null會誤判）

// 正確統(tǒng)計(jì)：結(jié)合hasOwnProperty
let count3 = 0;
for (let i = 0; i < dataList.length; i++) {
  if (dataList.hasOwnProperty(i)) count3++;
}
console.log('正確統(tǒng)計(jì)：', count3); // 2

/**
 * 將稀疏數(shù)組轉(zhuǎn)為密集數(shù)組
 * @param {Array} sparseArr - 稀疏數(shù)組
 * @param {any} defaultValue - 空洞填充值
 * @returns {Array} 密集數(shù)組
 */
const toDenseArray = (sparseArr, defaultValue = undefined) => {
  return Array.from({ length: sparseArr.length }, (_, index) => {
    // 有值則保留，無值則用默認(rèn)值填充
    return sparseArr[index] ?? defaultValue;
  });
};

// 實(shí)戰(zhàn)示例：修復(fù)購物車選中檢查問題
const cartSelected = [];
cartSelected[3] = ['goods1', 'goods2'];
// 轉(zhuǎn)為密集數(shù)組，空洞填充為空數(shù)組
const denseCart = toDenseArray(cartSelected, []);

console.log(denseCart); // [[], [], [], ['goods1', 'goods2']]（長度4，無空洞）
const hasSelected = denseCart.some(ids => ids.length > 0);
console.log(hasSelected); // true（正常執(zhí)行，無報(bào)錯）

// 場景：快速創(chuàng)建指定長度的密集空數(shù)組
const createDenseEmptyArray = (length) => {
  // 先創(chuàng)建長度為length的數(shù)組，填充空數(shù)組（注意：fill的引用類型會共享，需額外處理）
  return Array(length).fill().map(() => []); 
};

// 示例：創(chuàng)建長度5的密集數(shù)組，每個元素都是獨(dú)立空數(shù)組
const denseArr = createDenseEmptyArray(5);
denseArr[2].push('test');
console.log(denseArr); // [[], [], ['test'], [], []]（無共享問題）

// 原理：Object.assign會遍歷所有可枚舉屬性，自動填充空洞為undefined
const sparseArr = [];
sparseArr[4] = 'test';
const denseArr = Object.assign([], sparseArr);

console.log(denseArr); // [undefined, undefined, undefined, undefined, 'test']
// 再替換undefined為自定義默認(rèn)值
const finalArr = denseArr.map(item => item ?? '默認(rèn)值');
console.log(finalArr); // ['默認(rèn)值', '默認(rèn)值', '默認(rèn)值', '默認(rèn)值', 'test']