Java Script
BigInt 数据类型：BigInt 是 ES2020 中新增的数据类型，用于表示任意精度的整数。它可以处理大于 Number.MAX_SAFE_INTEGER 的整数值。
const num = BigInt(9007199254740991);
console.log(num); // 9007199254740991n
AI 代码解读
Nullish 合并运算符：Nullish 合并运算符（??）用于检查变量是否为 null 或 undefined，如果是，则返回默认值。
const value = null;
const result = value ?? "Default Value";
console.log(result); // "Default Value"
AI 代码解读
可选链操作符：可选链操作符（?.）可以在访问对象的属性或调用方法时，避免出现 TypeError 错误，如果属性不存在或方法未定义，则返回 undefined。
const obj = {
prop: {
value: "Hello World"
}
};
const result = obj.prop?.value;
console.log(result); // "Hello World"
AI 代码解读
Promise.allSettled()：Promise.allSettled() 方法返回一个 Promise，只有在所有给定的 Promise 都已经 fulfilled 或 rejected 后，它才会被 resolved，并返回包含每个 Promise 结果的数组。
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"}]
AI 代码解读
Optional Chaining in Object Destructuring：在对象解构中使用可选链操作符。
const obj = {
prop: {
value: "Hello World"
}
};
const {
prop: {
value } = {
} } = obj;
console.log(value); // "Hello World"
AI 代码解读
Proxy 对象可以包装另一个对象并拦截对它的各种操作，例如属性访问、函数调用等。
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
AI 代码解读
Reflect（反射）:
Reflect 是一个内置对象，提供了可用于操作 JavaScript 的低级别方法。
// 使用 Reflect 调用函数，可以实现更灵活的函数调用方式
function greet(name) {
console.log(`Hello, ${
name}!`);
}
Reflect.apply(greet, null, ["Alice"]); // 输出：Hello, Alice!
AI 代码解读
Generator（生成器）:
Generator 函数是一种特殊的函数，可以通过迭代器协议来控制函数的执行过程。
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); // 输出：!
AI 代码解读
Symbol（符号）:
Symbol 是一种原始数据类型，表示唯一的标识符。它可以用作对象属性的键。
const sym = Symbol("mySymbol");
const obj = {
[sym]: "Hello"
};
console.log(obj[sym]); // 输出：Hello
AI 代码解读
HTML
自定义数据属性（data attributes）
可以通过 data-* 属性为 HTML 元素添加自定义数据，以便在 JavaScript 中进行访问。
<div data-id="123" data-name="Alice"></div>
AI 代码解读
const div = document.querySelector("div");
console.log(div.dataset.id); // 输出：123
console.log(div.dataset.name); // 输出：Alice
AI 代码解读
contenteditable 属性
将 contenteditable 属性设置为 true 可以使元素可编辑，就像一个富文本编辑器一样。
<p contenteditable="true">可编辑的内容</p>
AI 代码解读
隐藏元素
使用 hidden 属性或 CSS 的 display: none 或 visibility: hidden 将元素隐藏起来。
<p hidden>隐藏的文本</p>
AI 代码解读
富文本格式化
通过 <pre> 标签可以保留文本中的空格、换行符等格式。
<pre>
多行文本
格式被保留
</pre>
AI 代码解读
自动聚焦
使用 autofocus 属性在页面加载完成后自动将焦点设置到指定的表单元素上。
<input type="text" autofocus>
AI 代码解读
自定义右键菜单
通过 JavaScript 监听 contextmenu 事件，并取消默认菜单，可以创建自定义的右键菜单。
<div oncontextmenu="showCustomMenu(event)">
右键点击我
</div>
AI 代码解读
function showCustomMenu(event) {
event.preventDefault();
// 自定义菜单的逻辑
}
AI 代码解读
自定义光标样式
可以使用 CSS 的 cursor 属性自定义鼠标悬停在元素上时的光标样式。
<style>
.custom-cursor {
cursor: url('custom-cursor.png'), auto;
}
</style>
<div class="custom-cursor">
鼠标悬停时会显示自定义光标
</div>
AI 代码解读
响应式图像
使用 srcset 属性可以根据设备的像素密度加载不同分辨率的图像。
<img src="low-res.jpg"
srcset="high-res.jpg 2x, extra-high-res.jpg 3x"
alt="响应式图像">
AI 代码解读
自动播放音频/视频
使用 autoplay 属性可以使音频或视频在页面加载完成后自动播放。
<audio src="music.mp3" autoplay></audio>
<video src="video.mp4" autoplay></video>
AI 代码解读
禁止表单自动填充
通过设置 autocomplete 属性为 "off" 可以阻止浏览器自动填充表单字段。
<form autocomplete="off">
<!-- 表单字段 -->
</form>
AI 代码解读
长按提示
使用 title 属性可以为元素添加长按提示文本，当用户长按该元素时会显示提示。
<button title="长按操作">长按我</button>
AI 代码解读
CSS
伪元素 ::first-letter
可以用 ::first-letter 选择器来选择文本块的首字母，并对其应用特定的样式。
p::first-letter {
font-size: 2em;
color: red;
}
AI 代码解读
选择器 :focus-within
使用 :focus-within 选择器可以选择包含有焦点元素的父级元素。
.container:focus-within {
background-color: yellow;
}
AI 代码解读
变量（Variable）
使用 CSS 变量可以定义和重用值，使样式更易于维护和修改。
:root {
--primary-color: blue;
}
h1 {
color: var(--primary-color);
}
AI 代码解读
Flexbox 布局
Flexbox 是一种强大的布局模型，可以方便地在一维空间中对齐、分布和重新排序元素。
.container {
display: flex;
justify-content: center;
align-items: center;
}
AI 代码解读
动画 @keyframes
使用 @keyframes 关键帧规则可以创建动画效果并控制其过渡和延迟。
@keyframes slide-in {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
animation: slide-in 1s ease-in-out;
}
AI 代码解读
滚动渐变（Scrolling Gradient）
使用渐变和背景图像属性结合，可以在滚动时创建渐变效果。
body {
background: linear-gradient(to right, red, yellow) fixed;
background-image: url('gradient-mask.png');
background-size: cover;
background-blend-mode: multiply;
}
AI 代码解读
通过使用 content 属性和属性值 "attr()" 结合，可以将元素的属性值自动复制到元素的内容中。
a::after {
content: attr(href);
}
<input type="text" value="默认值" oninput="this.setAttribute('value', this.value)">
AI 代码解读
滤镜（Filter）
使用 CSS 滤镜属性可以对元素应用各种视觉效果，如模糊、饱和度、对比度等。
img {
filter: blur(5px);
}
AI 代码解读
多列文本布局
通过使用 column-count 和 column-gap 属性，可以将文本分为多列进行布局。
.container {
column-count: 3;
column-gap: 20px;
}
AI 代码解读
粘性（Sticky）定位
使用 position: sticky; 可以创建一个在特定位置固定的元素，当用户滚动时会保持固定位置。
.nav {
position: sticky;
top: 0;
}
AI 代码解读
