拓宽你的 前端知识：掌握JS、HTML、CSS那些少有人知的应用技巧

const num = BigInt(9007199254740991)
console.log(num) // 9007199254740991n

const value = null
const result = value ?? 'Default Value'
console.log(result) // "Default Value"

const obj = {
  prop: {
    value: 'Hello World',
  },
}
const result = obj.prop?.value
console.log(result) // "Hello World"

const promise1 = new Promise((resolve, reject) => reject('Error'))
const promise2 = new Promise((resolve) => resolve('Success'))
Promise.allSettled([promise1, promise2]).then((results) => console.log(results))
// [{status: "rejected", reason: "Error"}, {status: "fulfilled", value: "Success"}]

const obj = {
  prop: {
    value: 'Hello World',
  },
}
const { prop: { value } = {} } = obj
console.log(value) // "Hello World"

const obj = {
  name: 'Alice',
  age: 25,
}

const proxyObj = new Proxy(obj, {
  get(target, prop) {
    console.log(`Getting ${prop}`)
    return target[prop]
  },
  set(target, prop, value) {
    console.log(`Setting ${prop} to ${value}`)
    target[prop] = value
  },
})

console.log(proxyObj.name) // 输出：Getting name   Alice
proxyObj.age = 30 // 输出：Setting age to 30

// 使用 Reflect 调用函数，可以实现更灵活的函数调用方式
function greet(name) {
  console.log(`Hello, ${name}!`)
}

Reflect.apply(greet, null, ['Alice']) // 输出：Hello, Alice!

function* generatorFunc() {
  yield 'Hello'
  yield 'World'
  yield '!'
}

const generator = generatorFunc()

console.log(generator.next().value) // 输出：Hello
console.log(generator.next().value) // 输出：World
console.log(generator.next().value) // 输出：!

const sym = Symbol('mySymbol')
const obj = {
  [sym]: 'Hello',
}

console.log(obj[sym]) // 输出：Hello

<div data-id="123" data-name="Alice"></div>

const div = document.querySelector('div')
console.log(div.dataset.id) // 输出：123
console.log(div.dataset.name) // 输出：Alice

<p contenteditable="true">可编辑的内容</p>

<p hidden>隐藏的文本</p>

<pre>
  多行文本
  格式被保留
</pre>

<input type="text" autofocus />

<div oncontextmenu="showCustomMenu(event)">右键点击我</div>

function showCustomMenu(event) {
  event.preventDefault()
  // 自定义菜单的逻辑
}

<style>
  .custom-cursor {
    cursor: url('custom-cursor.png'), auto;
  }
</style>

<div class="custom-cursor">鼠标悬停时会显示自定义光标</div>

<img
  src="low-res.jpg"
  srcset="high-res.jpg 2x, extra-high-res.jpg 3x"
  alt="响应式图像"
/>

<audio src="music.mp3" autoplay></audio>

<video src="video.mp4" autoplay></video>

<form autocomplete="off">
  <!-- 表单字段 -->
</form>

<button title="长按操作">长按我</button>

p::first-letter {
  font-size: 2em;
  color: red;
}

.container:focus-within {
  background-color: yellow;
}

:root {
  --primary-color: blue;
}

h1 {
  color: var(--primary-color);
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes slide-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation: slide-in 1s ease-in-out;
}

body {
  background: linear-gradient(to right, red, yellow) fixed;
  background-image: url('gradient-mask.png');
  background-size: cover;
  background-blend-mode: multiply;
}

a::after {
  content: attr(href);
}

<input type="text" value="默认值" oninput="this.setAttribute('value', this.value)">

img {
  filter: blur(5px);
}

.container {
  column-count: 3;
  column-gap: 20px;
}

.nav {
  position: sticky;
  top: 0;
}