// 常規(guī)寫法：頻繁插入，性能差

const container = document.getElementById("container");
for (let i = 0; i < 10; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  container.appendChild(div); // 每次循環(huán)都觸發(fā)重排
}

// 優(yōu)化寫法：用DocumentFragment暫存

const fragment = document.createDocumentFragment(); // 不占DOM樹，僅用于暫存
for (let i = 0; i < 10; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  fragment.appendChild(div); // 暫存，不觸發(fā)重排
}
container.appendChild(fragment); // 一次性插入，僅觸發(fā)1次重排

const container = document.getElementById("container");

// 方式1：最簡潔（推薦）

container.innerHTML = "";

// 方式2：性能更優(yōu)（適合大量子元素）

while (container.firstChild) {
  container.removeChild(container.firstChild);
}

// 方式3：利用空元素替換（較靈活）

container.replaceChildren(); // ES2022新增，無參數(shù)時清空所有子元素

const arr = [1, 2, 2, 3, 3, 3];

// 方式1：擴(kuò)展運(yùn)算符 + Set

const uniqueArr1 = [...new Set(arr)]; // [1, 2, 3]

// 方式2：Array.from + Set

const uniqueArr2 = Array.from(new Set(arr)); // [1, 2, 3]

// 需求1：生成 [1, 2, 3, 4, 5]

const arr1 = Array.from({ length: 5 }, (_, i) => i + 1);

// 需求2：生成 [2020, 2021, 2022, 2023, 2024]

const startYear = 2020;
const arr2 = Array.from({ length: 5 }, (_, i) => startYear + i);

// 需求3：生成 [0, 1, 2, 3, 4]（簡單場景）

const arr3 = [...Array(5).keys()];

const date = new Date("2024-05-20T14:30:00");

// 格式1：2024-05-20

const format1 = new Intl.DateTimeFormat("zh-CN", {
  year: "numeric",
  month: "2-digit",
  day: "2-digit",
}).format(date); // "2024-05-20"

// 格式2：2024年5月20日 14:30

const format2 = new Intl.DateTimeFormat("zh-CN", {
  year: "numeric",
  month: "long",
  day: "numeric",
  hour: "2-digit",
  minute: "2-digit",
}).format(date); // "2024年5月20日 14:30"

// 格式3：英文格式 May 20, 2024

const format3 = new Intl.DateTimeFormat("en-US", {
  year: "numeric",
  month: "long",
  day: "numeric",
}).format(date); // "May 20, 2024"

const obj = {
  name: "張三",
  age: 25,
  hobbies: ["籃球", "游戲"],
  address: { city: "北京", district: "朝陽區(qū)" },
};

// 深拷貝（支持對象、數(shù)組、Date、RegExp等，不支持函數(shù)）

const deepCloneObj = structuredClone(obj);

// 修改拷貝后的屬性，原對象不受影響

deepCloneObj.hobbies.push("讀書");
deepCloneObj.address.city = "上海";
console.log(obj.hobbies); // ["籃球", "游戲"]（原對象未變）
console.log(obj.address.city); // "北京"（原對象未變）

/* 1. 定義CSS變量（根作用域） */
:root {
  --primary-color: #4285f4; /* 默認(rèn)主題色：藍(lán)色 */
  --bg-color: #ffffff; /* 默認(rèn)背景色：白色 */
  --text-color: #333333; /* 默認(rèn)文字色：深灰 */
}
/* 2. 深色主題變量（通過類名激活） */
.dark-theme {
  --primary-color: #8ab4f8; /* 深色主題色：淺藍(lán) */
  --bg-color: #1a1a1a; /* 深色背景色：黑色 */
  --text-color: #f5f5f5; /* 深色文字色：白色 */
}
/* 3. 使用CSS變量（關(guān)聯(lián)到具體樣式） */
.button {
  background-color: var(--primary-color);
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
.container {
  background-color: var(--bg-color);
  color: var(--text-color);
  min-height: 100vh;
  padding: 20px;
}

// 4. 切換主題（只需添加/移除類名）

const toggleTheme = () => {
  document.documentElement.classList.toggle("dark-theme");
};

// 點(diǎn)擊按鈕切換主題

document.getElementById("theme-toggle").addEventListener("click", toggleTheme);

/* 常規(guī)寫法：多個媒體查詢 */

.title {
  font-size: 24px;
}

@media (min-width: 768px) {
  .title {
    font-size: 32px;
  }
}

@media (min-width: 1200px) {
  .title {
    font-size: 40px;
  }
}

/* 優(yōu)化寫法：用clamp()一行實現(xiàn) */

.title {
  /* 最小24px，首選（屏幕寬度/30），最大40px */
  font-size: clamp(24px, calc(100vw / 30), 40px);
}

/* 容器固定尺寸 */

.img-container {
  width: 300px;
  height: 200px;
  border: 1px solid #eee;
  overflow: hidden; /* 隱藏超出容器的部分 */
}

/* 處理圖片：保持比例，填充容器（常用） */

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 類似background-size: cover，可能裁剪部分圖片 */
  /* 其他可選值：contain（完整顯示，可能留空白）、fill（拉伸填充，不推薦） */
}

// 示例1：打印數(shù)組

const users = [
  { name: "張三", age: 25, role: "前端" },
  { name: "李四", age: 28, role: "后端" },
  { name: "王五", age: 30, role: "產(chǎn)品" },
];

// 常規(guī)打?。何谋拘问剑灰讓Ρ?

console.log(users);

// 優(yōu)化打?。罕砀裥问?，清晰直觀

console.table(users);