JavaScript一些单行代码技巧

合并多个数组的不同方式

// 合并但不删除重复项
const merge = a.concat(b)
// or
const merge = (a, b) => [...a, ...b];
1
2
3
4

// 合并并删除重复项
const merge = (a, b) => [...new Set(a.concat(b))];
// or
const merge = (a, b) => [...new Set([...a, ...b])];
1
2
3
4

滚动到页面顶部

有很多方法可以将页面滚动到顶部。

const goToTop = () => window.scrollTo(0 , 0, "smooth");
// or
const scrollToTop = (element) => element.scrollIntoView({behavior: "smooth", block: "start"});
1
2
3

滚动到页面底部

const scrollToBottom = () => window.scrollTo(0, document.body.scrollHeight);
1

复制到剪贴板

在 Web 应用程序中，复制到剪贴板因其对用户的便利性而迅速普及。

const copyToClipboard = (text) => (navigator.clipboard?.writeText ?? Promise.reject)(text);

// 空值合并运算符（??）如果 ?? 前面是 null 或 undefined，取后面的默认值。
// 可选链运算符（?.）如果引用是空值（null 或 undefined），可选链运算符将返回 undefined 而不是导致错误。
1
2
3
4

是否滚动到页面底部

该方法用于判断页面是否已经底部：

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
1

判断当前标签页是否激活

该方法用于检测当前标签页是否已经激活：

const isTabInView = () => !document.hidden; 
// Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。
1
2