// 1. 創(chuàng)建Map
// 方式1: 使用構(gòu)造函數(shù)創(chuàng)建空Map
const map1 = new Map();
// 方式2: 通過數(shù)組初始化Map
const map2 = new Map([
  ['name', '張三'],
  ['age', 30],
  ['isStudent', false]
]);
console.log('map2初始化結(jié)果:', map2);
// 輸出: Map(3) { 'name' => '張三', 'age' => 30, 'isStudent' => false }
// 2. 添加元素 - set(key, value)
// 返回Map對象本身，因此可以鏈?zhǔn)秸{(diào)用
map1.set('id', 1)
   .set('name', '李四')
   .set('age', 25);
console.log('map1添加元素后:', map1);
// 輸出: Map(3) { 'id' => 1, 'name' => '李四', 'age' => 25 }
// 3. 獲取元素 - get(key)
const name = map2.get('name');
const age = map2.get('age');
const address = map2.get('address'); // 不存在的鍵返回undefined
console.log('獲取元素 - name:', name); // 輸出: 獲取元素 - name: 張三
console.log('獲取元素 - age:', age);   // 輸出: 獲取元素 - age: 30
console.log('獲取不存在的鍵:', address); // 輸出: 獲取不存在的鍵: undefined
// 4. 判斷鍵是否存在 - has(key)
const hasName = map2.has('name');
const hasAddress = map2.has('address');
console.log('是否有name鍵:', hasName);     // 輸出: 是否有name鍵: true
console.log('是否有address鍵:', hasAddress); // 輸出: 是否有address鍵: false
// 5. 刪除元素 - delete(key)
const deleteAge = map2.delete('age'); // 刪除成功返回true
const deleteAddress = map2.delete('address'); // 刪除不存在的鍵返回false
console.log('刪除age鍵是否成功:', deleteAge); // 輸出: 刪除age鍵是否成功: true
console.log('刪除后map2:', map2); // 輸出: 刪除后map2: Map(2) { 'name' => '張三', 'isStudent' => false }
console.log('刪除不存在的鍵:', deleteAddress); // 輸出: 刪除不存在的鍵: false
// 6. 清空Map - clear()
map1.clear();
console.log('map1清空后:', map1); // 輸出: map1清空后: Map(0) {}
// 7. 獲取Map大小 - size屬性
console.log('map2當(dāng)前大小:', map2.size); // 輸出: map2當(dāng)前大小: 2

// 創(chuàng)建各種類型的鍵
const objKey = { id: 1 };
const funcKey = () => console.log('hello');
const numKey = 123;
const boolKey = true;
const symbolKey = Symbol('symbol');
// 創(chuàng)建Map并添加不同類型的鍵值對
const map = new Map();
map.set(objKey, '對象作為鍵')
   .set(funcKey, '函數(shù)作為鍵')
   .set(numKey, '數(shù)字作為鍵')
   .set(boolKey, '布爾值作為鍵')
   .set(symbolKey, 'Symbol作為鍵')
   .set(NaN, 'NaN作為鍵');
// 獲取值
console.log('對象鍵對應(yīng)的值:', map.get(objKey)); // 輸出: 對象鍵對應(yīng)的值: 對象作為鍵
console.log('函數(shù)鍵對應(yīng)的值:', map.get(funcKey)); // 輸出: 函數(shù)鍵對應(yīng)的值: 函數(shù)作為鍵
console.log('NaN鍵對應(yīng)的值:', map.get(NaN));     // 輸出: NaN鍵對應(yīng)的值: NaN作為鍵
// 注意: NaN雖然不等于自身，但在Map中被視為同一個鍵
console.log('NaN === NaN:', NaN === NaN); // 輸出: NaN === NaN: false
map.set(NaN, '更新NaN鍵的值');
console.log('更新后NaN鍵對應(yīng)的值:', map.get(NaN)); // 輸出: 更新后NaN鍵對應(yīng)的值: 更新NaN鍵的值
// 注意: 兩個看起來相同的對象是不同的鍵
const objKey2 = { id: 1 }; // 與objKey看起來相同但不是同一個對象
map.set(objKey2, '另一個對象作為鍵');
console.log('objKey對應(yīng)的值:', map.get(objKey));   // 輸出: objKey對應(yīng)的值: 對象作為鍵
console.log('objKey2對應(yīng)的值:', map.get(objKey2)); // 輸出: objKey2對應(yīng)的值: 另一個對象作為鍵
console.log('map大小:', map.size); // 輸出: map大小: 7

// 創(chuàng)建一個Map
const fruits = new Map([
  ['apple', '蘋果'],
  ['banana', '香蕉'],
  ['orange', '橙子'],
  ['grape', '葡萄']
]);
// 1. 使用forEach迭代
console.log('1. 使用forEach迭代:');
fruits.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});
// 2. 迭代所有鍵 - keys()
console.log('\n2. 迭代所有鍵:');
for (const key of fruits.keys()) {
  console.log('鍵:', key);
}
// 3. 迭代所有值 - values()
console.log('\n3. 迭代所有值:');
for (const value of fruits.values()) {
  console.log('值:', value);
}
// 4. 迭代所有鍵值對 - entries()
console.log('\n4. 迭代所有鍵值對:');
for (const [key, value] of fruits.entries()) {
  console.log(`${key}: ${value}`);
}
// 5. 直接迭代Map（默認(rèn)迭代entries()）
console.log('\n5. 直接迭代Map:');
for (const [key, value] of fruits) {
  console.log(`${key}: ${value}`);
}
// 6. 轉(zhuǎn)換為數(shù)組
console.log('\n6. 轉(zhuǎn)換為數(shù)組:');
const fruitArray = Array.from(fruits);
console.log(fruitArray);
// 7. 使用擴展運算符轉(zhuǎn)換為數(shù)組
console.log('\n7. 使用擴展運算符轉(zhuǎn)換為數(shù)組:');
const fruitArray2 = [...fruits];
console.log(fruitArray2);
// 8. 數(shù)組解構(gòu)
console.log('\n8. 數(shù)組解構(gòu):');
const [first, second, ...rest] = fruits;
console.log('第一個元素:', first);
console.log('第二個元素:', second);
console.log('剩余元素:', rest);

// 創(chuàng)建WeakMap
const weakMap = new WeakMap();
// 創(chuàng)建幾個對象作為鍵
const obj1 = { id: 1 };
const obj2 = { id: 2 };
const obj3 = { id: 3 };
// 添加鍵值對 - set()
weakMap.set(obj1, '對象1的數(shù)據(jù)');
weakMap.set(obj2, '對象2的數(shù)據(jù)');
weakMap.set(obj3, '對象3的數(shù)據(jù)');
// 獲取值 - get()
console.log('獲取obj1對應(yīng)的值:', weakMap.get(obj1)); // 輸出: 獲取obj1對應(yīng)的值: 對象1的數(shù)據(jù)
console.log('獲取obj2對應(yīng)的值:', weakMap.get(obj2)); // 輸出: 獲取obj2對應(yīng)的值: 對象2的數(shù)據(jù)
// 判斷鍵是否存在 - has()
console.log('是否包含obj1:', weakMap.has(obj1)); // 輸出: 是否包含obj1: true
console.log('是否包含obj3:', weakMap.has(obj3)); // 輸出: 是否包含obj3: true
// 刪除鍵 - delete()
weakMap.delete(obj2);
console.log('刪除obj2后是否存在:', weakMap.has(obj2)); // 輸出: 刪除obj2后是否存在: false
// WeakMap不支持size屬性和迭代方法
console.log('WeakMap沒有size屬性:', weakMap.size); // 輸出: WeakMap沒有size屬性: undefined
// 嘗試迭代WeakMap會報錯
try {
  for (const item of weakMap) {
    console.log(item);
  }
} catch (e) {
  console.log('迭代WeakMap報錯:', e.message); // 輸出: 迭代WeakMap報錯: weakMap is not iterable
}

// 創(chuàng)建WeakMap
const weakMap = new WeakMap();
// 創(chuàng)建對象并添加到WeakMap
let obj = { data: '需要存儲的數(shù)據(jù)' };
weakMap.set(obj, '這是obj的數(shù)據(jù)');
console.log('添加后是否存在:', weakMap.has(obj)); // 輸出: 添加后是否存在: true
console.log('添加后的值:', weakMap.get(obj));     // 輸出: 添加后的值: 這是obj的數(shù)據(jù)
// 移除對象的引用
obj = null;
// 手動觸發(fā)垃圾回收（注意：在實際環(huán)境中無法保證立即執(zhí)行）
// 以下代碼僅在支持手動垃圾回收的環(huán)境中有效（如Chrome開發(fā)者工具）
if (typeof gc === 'function') {
  console.log('\n手動觸發(fā)垃圾回收...');
  gc();
  // 垃圾回收后檢查
  console.log('垃圾回收后是否存在:', weakMap.has(obj)); // 輸出: 垃圾回收后是否存在: false
  console.log('垃圾回收后的值:', weakMap.get(obj));     // 輸出: 垃圾回收后的值: undefined
} else {
  console.log('\n請在支持手動垃圾回收的環(huán)境中運行此示例（如Chrome開發(fā)者工具）');
  console.log('提示：在Chrome中可勾選Settings > Experiments > Memory > Enable manual garbage collection');
}
// 另一個演示：臨時對象自動回收
const tempObj = { temp: '臨時數(shù)據(jù)' };
weakMap.set(tempObj, '臨時對象的數(shù)據(jù)');
console.log('\n臨時對象是否存在:', weakMap.has(tempObj)); // 輸出: 臨時對象是否存在: true
// 函數(shù)執(zhí)行完畢后，tempObj將沒有引用，會被垃圾回收

// 使用Map存儲用戶信息，鍵可以是用戶ID對象
const user1 = { id: 1 };
const user2 = { id: 2 };
const userData = new Map();
// 存儲用戶信息
userData.set(user1, {
  name: '張三',
  age: 30,
  hobbies: ['閱讀', '運動']
});
userData.set(user2, {
  name: '李四',
  age: 25,
  hobbies: ['游戲', '音樂']
});
// 獲取用戶信息
console.log('用戶1信息:', userData.get(user1));
console.log('用戶2名稱:', userData.get(user2).name);
// 遍歷所有用戶
console.log('\n所有用戶信息:');
userData.forEach((data, user) => {
  console.log(`用戶ID: ${user.id}, 姓名: ${data.name}, 年齡: ${data.age}`);
});
// 檢查用戶是否存在
const user3 = { id: 3 };
console.log('\n用戶3是否存在:', userData.has(user3)); // 輸出: 用戶3是否存在: false

// 創(chuàng)建一個緩存Map
const calculationCache = new Map();
// 模擬一個耗時的計算函數(shù)
function expensiveCalculation(num) {
  console.log(`執(zhí)行耗時計算: ${num}`);
  // 模擬計算耗時
  let result = 0;
  for (let i = 0; i < num * 1000000; i++) {
    result += i;
  }
  return result;
}
// 使用緩存的計算函數(shù)
function calculateWithCache(num) {
  // 如果緩存中存在，直接返回緩存結(jié)果
  if (calculationCache.has(num)) {
    console.log(`使用緩存結(jié)果: ${num}`);
    return calculationCache.get(num);
  }
  // 否則執(zhí)行計算并緩存結(jié)果
  const result = expensiveCalculation(num);
  calculationCache.set(num, result);
  return result;
}
// 第一次計算（無緩存）
console.log('結(jié)果1:', calculateWithCache(10));
// 第二次計算相同的值（使用緩存）
console.log('結(jié)果2:', calculateWithCache(10));
// 計算另一個值（無緩存）
console.log('結(jié)果3:', calculateWithCache(15));
// 再次計算（使用緩存）
console.log('結(jié)果4:', calculateWithCache(10));
console.log('結(jié)果5:', calculateWithCache(15));
// 查看緩存大小
console.log('緩存大小:', calculationCache.size); // 輸出: 緩存大小: 2

// 創(chuàng)建一個多鍵映射的Map
const multiKeyMap = new Map();
// 定義幾個對象作為鍵
const objKey = { id: 1 };
const funcKey = () => {};
const symbolKey = Symbol('unique');
// 添加多鍵映射
multiKeyMap.set(objKey, '對象鍵對應(yīng)的值');
multiKeyMap.set(funcKey, '函數(shù)鍵對應(yīng)的值');
multiKeyMap.set(symbolKey, 'Symbol鍵對應(yīng)的值');
multiKeyMap.set(123, '數(shù)字鍵對應(yīng)的值');
multiKeyMap.set('string', '字符串鍵對應(yīng)的值');
// 獲取值
console.log('對象鍵:', multiKeyMap.get(objKey));      // 輸出: 對象鍵: 對象鍵對應(yīng)的值
console.log('函數(shù)鍵:', multiKeyMap.get(funcKey));    // 輸出: 函數(shù)鍵: 函數(shù)鍵對應(yīng)的值
console.log('Symbol鍵:', multiKeyMap.get(symbolKey)); // 輸出: Symbol鍵: Symbol鍵對應(yīng)的值
// 演示對象鍵的引用特性
const anotherObj = { id: 1 }; // 與objKey內(nèi)容相同但不是同一個對象
console.log('不同對象相同內(nèi)容:', multiKeyMap.get(anotherObj)); // 輸出: 不同對象相同內(nèi)容: undefined
// 使用數(shù)組作為復(fù)合鍵
const compositeKey = ['user', 'settings', 'theme'];
multiKeyMap.set(compositeKey, 'dark');
console.log('復(fù)合鍵值:', multiKeyMap.get(compositeKey)); // 輸出: 復(fù)合鍵值: dark
// 注意: 數(shù)組也是對象，必須使用同一個數(shù)組引用才能獲取值
console.log('不同數(shù)組實例:', multiKeyMap.get(['user', 'settings', 'theme'])); // 輸出: 不同數(shù)組實例: undefined

// 創(chuàng)建一個WeakMap用于存儲對象的私有數(shù)據(jù)
const privateData = new WeakMap();
// 定義一個類
class User {
  constructor(name, age) {
    // 公共屬性
    this.name = name;
    // 使用WeakMap存儲私有數(shù)據(jù)
    privateData.set(this, {
      age: age,
      password: '默認(rèn)密碼',
      loginCount: 0
    });
  }
  // 公共方法可以訪問私有數(shù)據(jù)
  getAge() {
    return privateData.get(this).age;
  }
  login(password) {
    const data = privateData.get(this);
    if (password === data.password) {
      data.loginCount++;
      return true;
    }
    return false;
  }
  getLoginCount() {
    return privateData.get(this).loginCount;
  }
  // 修改私有數(shù)據(jù)
  setPassword(newPassword) {
    privateData.get(this).password = newPassword;
  }
}
// 創(chuàng)建實例
const user = new User('張三', 30);
// 訪問公共屬性
console.log('用戶名:', user.name); // 輸出: 用戶名: 張三
// 通過公共方法訪問私有數(shù)據(jù)
console.log('年齡:', user.getAge()); // 輸出: 年齡: 30
// 嘗試直接訪問私有數(shù)據(jù)（失?。?
console.log('直接訪問私有數(shù)據(jù):', user.age); // 輸出: 直接訪問私有數(shù)據(jù): undefined
// 登錄功能
console.log('使用默認(rèn)密碼登錄:', user.login('默認(rèn)密碼')); // 輸出: 使用默認(rèn)密碼登錄: true
console.log('登錄次數(shù):', user.getLoginCount()); // 輸出: 登錄次數(shù): 1
// 修改密碼
user.setPassword('newPassword123');
console.log('使用舊密碼登錄:', user.login('默認(rèn)密碼')); // 輸出: 使用舊密碼登錄: false
console.log('使用新密碼登錄:', user.login('newPassword123')); // 輸出: 使用新密碼登錄: true
console.log('登錄次數(shù):', user.getLoginCount()); // 輸出: 登錄次數(shù): 2
// 當(dāng)user實例被銷毀時，privateData中的對應(yīng)條目會自動被垃圾回收

// 創(chuàng)建WeakMap作為緩存
const objectCache = new WeakMap();
// 獲取對象數(shù)據(jù)的函數(shù)，帶緩存功能
function getObjectData(obj) {
  // 如果緩存中存在，直接返回
  if (objectCache.has(obj)) {
    console.log('使用緩存數(shù)據(jù)');
    return objectCache.get(obj);
  }
  // 否則獲取數(shù)據(jù)（模擬API請求或復(fù)雜計算）
  console.log('獲取新數(shù)據(jù)');
  const data = {
    timestamp: new Date().toISOString(),
    randomValue: Math.random()
  };
  // 存入緩存
  objectCache.set(obj, data);
  return data;
}
// 創(chuàng)建測試對象
const obj1 = { id: 1 };
const obj2 = { id: 2 };
// 第一次獲?。o緩存）
console.log('obj1數(shù)據(jù)1:', getObjectData(obj1));
// 第二次獲?。ㄓ芯彺妫?
console.log('obj1數(shù)據(jù)2:', getObjectData(obj1));
// 獲取obj2數(shù)據(jù)
console.log('obj2數(shù)據(jù)1:', getObjectData(obj2));
// 清除obj1引用
obj1 = null;
// 手動觸發(fā)垃圾回收（在支持的環(huán)境中）
if (typeof gc === 'function') {
  console.log('\n觸發(fā)垃圾回收...');
  gc();
  // 嘗試獲取已被回收的對象數(shù)據(jù)
  console.log('obj1數(shù)據(jù)3:', getObjectData(obj1)); // 輸出: obj1數(shù)據(jù)3: undefined
}
// obj2仍然存在，緩存有效
console.log('obj2數(shù)據(jù)2:', getObjectData(obj2));

// 創(chuàng)建WeakMap存儲DOM元素元數(shù)據(jù)
const elementMetadata = new WeakMap();
// 獲取DOM元素
const button = document.createElement('button');
button.textContent = '點擊我';
// 為DOM元素存儲元數(shù)據(jù)
elementMetadata.set(button, {
  clicks: 0,
  created: new Date(),
  lastClick: null
});
// 添加點擊事件處理
button.addEventListener('click', function() {
  // 獲取元數(shù)據(jù)
  const metadata = elementMetadata.get(this);
  // 更新元數(shù)據(jù)
  metadata.clicks++;
  metadata.lastClick = new Date();
  console.log(`按鈕被點擊了${metadata.clicks}次`);
  console.log('最后點擊時間:', metadata.lastClick.toLocaleTimeString());
});
// 添加到文檔
document.body.appendChild(button);
// 模擬點擊
console.log('模擬第一次點擊:');
button.click();
console.log('\n模擬第二次點擊:');
button.click();
// 一段時間后移除元素
setTimeout(() => {
  console.log('\n移除按鈕元素');
  document.body.removeChild(button);
  // 此時button元素沒有引用了，元數(shù)據(jù)會隨著垃圾回收自動清理
  // 不需要手動從elementMetadata中刪除
}, 2000);

const weakMap = new WeakMap();
weakMap.set('key', 'value'); // TypeError: Invalid value used as weak map key

const weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, 'data');
obj = null;
console.log(weakMap.has(obj)); // 可能仍然返回true，因為垃圾回收可能尚未執(zhí)行

const weakMap = new WeakMap();
for (const item of weakMap) { // TypeError: weakMap is not iterable
  console.log(item);
}

// 適合用對象的場景
const config = {
  width: 100,
  height: 200,
  color: 'red'
};
// 適合用Map的場景
const userScores = new Map();
userScores.set(user1, 90);
userScores.set(user2, 85);