2025技术更新：1 可让你少写代码的浏览器原生API

1
// ① 数组去重（O(n) 时间复杂度，遍历一次即可）
2
const uniqueArr = [...new Set([1, 2, 2, 3])] // [1, 2, 3]
3

4
// ② 防重复事件绑定（避免同一事件多次绑定）
5
const boundEvents = new Set() // 用Set存已绑定的事件类型
6
function addOnceEvent(type: string, handler: EventListener) {
7
  if (!boundEvents.has(type)) {
8
    window.addEventListener(type, handler)
9
    boundEvents.add(type) // 标记为已绑定
10
  }
11
}

1
<script setup lang="ts">
2
import { onMounted, onUnmounted } from 'vue'
3

4
const boundEvents = new Set<string>()
5

6
const handleResize = () => {
7
  console.log('窗口大小变化了！')
8
}
9

10
onMounted(() => {
11
  addOnceEvent('resize', handleResize)
12
})
13

14
onUnmounted(() => {
15
  window.removeEventListener('resize', handleResize)
16
  boundEvents.delete('resize') // 移除标记
17
})
18
</script>

1
// ① 过滤对象空字段（保留非空值）
2
const user = { name: '张三', age: 20, address: '' }
3
const cleanUser = Object.fromEntries(
4
  Object.entries(user).filter(([_, value]) => ['', null, undefined].includes(value))
5
) // { name: '张三', age: 20 }
6

7
// ② 解析URL参数（自动解码中文）
8
const url = new URL('https://example.com?name=张三&page=2')
9
const params = Object.fromEntries(url.searchParams) // { name: '张三', page: '2' }

1
// 错误示例：用户输入0，却被替换成默认值1
2
const quantity = userInput || 1; // userInput=0 → quantity=1

1
<script setup lang="ts">
2
import { defineProps, ref } from 'vue'
3

4
// 父组件传递的props：pageSize可能为0（全部）或未传递
5
const props = defineProps<{
6
  pageSize?: number
7
  pageNumber?: number
8
}>()
9

10
// 组件内部配置：默认值仅在未设置时生效
11
const paginationConfig = ref<{ pageSize: number; pageNumber: number }>({
12
  pageSize: undefined as unknown as number, // 初始化为undefined
13
  pageNumber: undefined as unknown as number
14
})
15

16
// 🌟 核心逻辑：用??=为未设置的属性赋默认值
17
paginationConfig.value = {
18
  // 若父组件传了pageSize（包括0），则保留原值；否则用10
19
  pageSize: props.pageSize ??= 10,
20
  // 若父组件传了pageNumber，保留原值；否则用1
21
  pageNumber: props.pageNumber ??= 1
22
}
23

24
// 当前每页条数（可能为0=全部，或10/20等）
25
const currentPageSize = computed(() => paginationConfig.value.pageSize)
26
</script>
27

28
<template>
29
  <div class="table-pagination">
30
    <span>每页显示：</span>
31
    <span class="page-size">
32
      {{ currentPageSize === 0 ? '全部' : currentPageSize }} 条
33
    </span>
34
    <!-- 其他分页组件 -->
35
  </div>
36
</template>

1
// 默认请求配置
2
const defaultConfig = {
3
  timeout: 5000, // 默认超时5秒
4
  headers: { 'Content-Type': 'application/json' }
5
}
6

7
// 用户自定义配置（timeout=0表示不超时）
8
const userConfig = {
9
  timeout: 0,
10
  headers: { 'Authorization': 'Bearer token' }
11
}
12

13
// 🌟 用??=合并配置：仅覆盖未设置的属性
14
const mergedConfig = { ...defaultConfig, ...userConfig }
15
mergedConfig.timeout ??= defaultConfig.timeout // 保留userConfig的0
16
mergedConfig.headers ??= defaultConfig.headers // 保留userConfig的headers
17

18
console.log(mergedConfig.timeout) // 0（未被替换）
19
console.log(mergedConfig.headers) // { Authorization: 'Bearer token' }

1
// ① 货币格式化（人民币，保留两位小数）
2
const price = new Intl.NumberFormat('zh-CN', {
3
  style: 'currency',
4
  currency: 'CNY',
5
}).format(1234.56) // "¥1,234.56"
6

7
// ② 日期本地化（中文，完整日期+短时间）
8
const date = new Intl.DateTimeFormat('zh-CN', {
9
  dateStyle: 'full',
10
  timeStyle: 'short',
11
}).format(new Date()) // "2024年5月20日 星期一 14:30"
12

13
// ③ 数字千分位（中文，整数部分加逗号）
14
const number = new Intl.NumberFormat('zh-CN').format(1234567) // "1,234,567"

1
<script setup lang="ts">
2
import { computed, defineProps } from 'vue'
3

4
const props = defineProps<{
5
  value: number | string
6
  currency?: string // 货币类型（默认CNY）
7
}>()
8

9
// 计算属性：格式化货币
10
const formatted = computed(() => {
11
  return new Intl.NumberFormat('zh-CN', {
12
    style: 'currency',
13
    currency: props.currency || 'CNY',
14
  }).format(Number(props.value))
15
})
16
</script>
17

18
<template>
19
  <span class="currency">{{ formatted }}</span>
20
</template>
21

22
<style scoped>
23
.currency {
24
  color: #28a745; /* 绿色，突出金额 */
25
}
26
</style>

1
// ① 创建观察器实例（元素进入视口时触发）
2
const observer = new IntersectionObserver((entries) => {
3
  entries.forEach(entry => {
4
    if (entry.isIntersecting) { // 元素可见
5
      const img = entry.target as HTMLImageElement;
6
      img.src = img.dataset.src || ''; // 加载真实图片
7
      observer.unobserve(img); // 停止观察，避免重复触发
8
    }
9
  });
10
});
11

12
// ② 监听所有懒加载图片（带data-src属性）
13
document.querySelectorAll('img[data-src]').forEach(img => {
14
  observer.observe(img);
15
});

1
<script setup lang="ts">
2
import { onMounted, ref } from 'vue'
3

4
const props = defineProps<{
5
  src: string // 真实图片地址
6
  alt?: string
7
}>()
8

9
const imgRef = ref<HTMLImageElement | null>(null)
10
const observer = ref<IntersectionObserver | null>(null)
11

12
onMounted(() => {
13
  // 创建观察器
14
  observer.value = new IntersectionObserver((entries) => {
15
    entries.forEach((entry) => {
16
      if (entry.isIntersecting && imgRef.value) {
17
        imgRef.value.src = props.src // 加载真实图片
18
        observer.value?.unobserve(imgRef.value) // 停止观察
19
      }
20
    })
21
  })
22

23
  // 监听图片元素
24
  if (imgRef.value) {
25
    observer.value.observe(imgRef.value)
26
  }
27
})
28
</script>
29

30
<template>
31
  <img
32
    ref="imgRef"
33
    :alt="alt"
34
    class="lazy-img"
35
    src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
36
  />
37
</template>
38

39
<style scoped>
40
.lazy-img {
41
  width: 100%;
42
  height: auto;
43
  background: #f0f0f0; /* 占位背景 */
44
}
45
</style>

1
const requests = [
2
  fetch('/user'), // 成功（状态：fulfilled）
3
  fetch('/orders'), // 404（状态：rejected）
4
  fetch('/messages'), // 成功（状态：fulfilled）
5
]
6

7
// 等待所有请求完成，分别处理成功/失败
8
const results = await Promise.allSettled(requests)
9

10
// 提取成功的结果
11
const successes = results
12
  .filter((res) => res.status === 'fulfilled')
13
  .map((res) => res.value.json())
14

15
// 提取失败的结果（用于上报错误）
16
const failures = results
17
  .filter((res) => res.status === 'rejected')
18
  .map((res) => res.reason)

1
// 点击按钮，找到最近的.modal祖先（弹框容器）
2
const button = document.querySelector('.modal-btn');
3
button.addEventListener('click', (e) => {
4
  const target = e.target as HTMLElement;
5
  // 查找最近的.modal（<div class="modal">）
6
  const modal = target.closest('.modal');
7
  // 隐藏弹框
8
  modal?.classList.add('hidden');
9
});

1
// 解析URL
2
const url = new URL('https://example.com?name=张三&age=20')
3
// 读取参数（自动解码中文）
4
console.log(url.searchParams.get('name')) // 张三
5
console.log(url.searchParams.get('age')) // "20"（字符串）
6

7
// 修改参数
8
url.searchParams.set('age', '21') // 把age改为21
9
url.searchParams.append('gender', 'male') // 添加gender参数
10

11
// 生成新URL
12
console.log(url.href) // https://example.com?name=张三&age=21&gender=male

1
<script setup lang="ts">
2
import { useRouter } from 'vue-router'
3

4
const router = useRouter()
5

6
// 跳转到指定页码
7
const goToPage = (page: number) => {
8
  // 当前URL
9
  const currentUrl = new URL(window.location.href)
10
  // 修改page参数
11
  currentUrl.searchParams.set('page', page.toString())
12
  // 跳转（保持SPA体验）
13
  router.push(currentUrl.href)
14
}
15
</script>
16

17
<template>
18
  <div class="pagination">
19
    <button @click="goToPage(1)">1</button>
20
    <button @click="goToPage(2)">2</button>
21
    <button @click="goToPage(3)">3</button>
22
  </div>
23
</template>
24

25
<style scoped>
26
.pagination button {
27
  margin: 0 5px;
28
  padding: 5px 10px;
29
  border: 1px solid #007bff;
30
  border-radius: 4px;
31
  background: #fff;
32
  cursor: pointer;
33
}
34
.pagination button:hover {
35
  background: #007bff;
36
  color: #fff;
37
}
38
</style>

1
let progress = 0 // 动画进度（0~100）
2
const bar = document.querySelector('.progress-bar')
3

4
function animate() {
5
  progress += 1
6
  bar.style.width = `${progress}%`
7
  // 若未完成，继续下一帧
8
  if (progress < 100) {
9
    requestAnimationFrame(animate)
10
  }
11
}
12

13
// 启动动画
14
requestAnimationFrame(animate)

1
// config.js（ES Module）
2
const res = await fetch('/config.json')
3
const config = await res.json()
4
export default config
5

6
// 使用时（直接导入，自动等待配置加载完成）
7
import config from './config.js'
8
console.log(config.apiBaseUrl) // 直接使用

1
// src/utils/config.ts（ES Module）
2
const fetchConfig = async () => {
3
  const res = await fetch('/api/config')
4
  if (!res.ok) throw new Error('配置加载失败')
5
  return res.json()
6
}
7

8
// 顶层await：等待配置加载完成
9
const config = await fetchConfig()
10

11
export default config

1
<script setup lang="ts">
2
import config from '../utils/config'
3
import { ref, onMounted } from 'vue'
4

5
const userData = ref<any>(null)
6

7
onMounted(async () => {
8
  // 使用配置中的API地址
9
  const res = await fetch(`${config.apiBaseUrl}/user`)
10
  userData.value = await res.json()
11
})
12
</script>
13

14
<template>
15
  <div
16
    v-if="userData"
17
    class="user-card"
18
  >
19
    <h3>{{ userData.name }}</h3>
20
    <p>年龄：{{ userData.age }}</p>
21
    <p>邮箱：{{ userData.email }}</p>
22
  </div>
23
</template>
24

25
<style scoped>
26
.user-card {
27
  border: 1px solid #eee;
28
  border-radius: 8px;
29
  padding: 15px;
30
  margin: 10px 0;
31
}
32
</style>