typescript类型
工具Readonly
interface A {
a: string;
b: number;
c: number[];
}
type C = Readonly<A>
const c: C = {a: '', b: 18, c: [1, 2]}
c.a = "1" // 报红
工具Partial
interface A {
a: string;
b: number;
c: number[];
}
type B = Partial<A>
const a: A = {a: '', b: 18, c: [1, 2]};
const b: B = {a: ''};
工具Pick/Omit
interface A {
a: string;
b: number;
c: number[];
}
type B = Pick<A, 'a' | 'b'>;
type C = Omit<A, 'a'>;
const b: B = {a: "", b: 0};
const c: C = {b: 1, c: [0]};
工具Record
type A = Record<'a' | 'b' | 'c', string>
const c: A = {a: "a", b: "b", c: "c"};
class类的属性名
class A {
a: number = 1;
b: string = "";
}
type AFields = keyof InstanceType<typeof A>; // "a" | "b"
反转
type A = {
a: "x";
b: "y";
}
type Reverse<T extends Record<keyof T, keyof any>> = {
[P in T[keyof T]]: {
[K in keyof T]: T[K] extends P ? K : never
}[keyof T]
}
type B = Reverse<A>;
const b: B = {x: "a", y: "b"};
传入不同的值返回的结果类型不同
interface A {
a: string;
}
interface B {
b: string;
}
interface C {
c: string;
}
interface Types {
a: A;
b: B;
c: C;
}
function fun<T extends keyof Types> (type: T): Types[T] {
return ;
}
功能
全屏
// 进入全屏
function enter(ele) {
if (ele.requestFullScreen) {
ele.requestFullScreen();
} else if (ele.mozRequestFullScreen) {
ele.mozRequestFullScreen();
} else if (ele.webkitRequestFullScreen) {
ele.webkitRequestFullScreen();
} else if (ele.msRequestFullScreen) {
ele.msRequestFullScreen();
}
}
// 退出全屏
function exit() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
// 是否全屏
function isFullscreen() {
return Boolean(
document.fullscreenElement ||
document.mozFullscreenElement ||
document.webkitFullscreenElement ||
document.msFullscreenElement ||
null
);
}
下载
<a href="https://wx3.sinaimg.cn/mw2000/eb7b830aly1hmarcfijnhj20kg0kgadg.jpg">下载</a>
<a href="https://wx3.sinaimg.cn/mw2000/eb7b830aly1hmarcfijnhj20kg0kgadg.jpg" xld="true">迅雷下载</a>
<script>
const links = document.querySelectorAll("a[xld]");
links.forEach((link) => {
link.href = `thunder://${btoa(`AA${link.href}ZZ`)}`;
});
</script>
<a href="thunder://QUFodHRwczovL3d4My5zaW5haW1nLmNuL213MjAwMC9lYjdiODMwYWx5MWhtYXJjZmlqbmhqMjBrZzBrZ2FkZy5qcGdaWg==" xld="true">迅雷下载</a>
解决文本框中文输入导致高频触发
let composition = false;
input.addEventListener("input", function () {
if (!composition) {
search();
}
});
// 开始输入中文拼音了
input.addEventListener("compositionstart", function () {
composition = true;
});
// 结束输入中文拼音了
input.addEventListener("compositionend", function () {
composition = false;
search();
});
公共函数
类型判断
function determineType(target) {
const type = typeof target;
switch (type) {
case "bigint":
case "boolean":
case "function":
case "number":
case "string":
case "symbol":
case "undefined":
return type;
case "object":
if (target instanceof Array) {
return 'array';
}
if (target instanceof Object) {
return 'object';
}
return 'null';
default:
return "undefined";
}
}
数组分组
function groupBy (arr, generateKey) {
if (typeof generateKey === "string") {
const propName = generateKey;
generateKey = (item) => item[propName];
}
const result = {};
for (let i = 0; i < arr.length; i++) {
const key = generateKey(arr[i], i, arr);
if (result[key]) {
result[key].push(arr[i]);
} else {
result[key] = [arr[i]];
}
}
return result;
}
复制
export function copyText (value) {
const oInput = document.createElement('input');
oInput.value = value;
document.body.appendChild(oInput);
oInput.select();
document.execCommand('Copy');
oInput.className = 'oInput';
oInput.style.display = 'none';
}
请求重试
function request (url, maxCount) {
return fetch(url).catch(err => maxCount <= 0 ? Promise.reject(err) : request(url, maxCount - 1));
}
并发请求
// 请求数组,最大并发
function concurRequest (requestList, max) {
if (!requestList.length) {
return Promise.resolve([]);
}
return new Promise((resolve) => {
let index = 0;
let count = 0;
let result = [];
async function _request () {
const i = index;
const request = requestList[index];
index++;
try {
result[i] = await request();
} catch (e) {
result[i] = e;
} finally {
count++;
if (count === requestList.length) {
resolve(result);
}
if (index < requestList.length) {
_request();
}
}
}
for (let i = 0; i < Math.min(requestList.length, max); i++) {
_request();
}
});
}
class转function
"use strict";
class B {
constructor (name) {
this.name = name;
}
logName () {
console.log(this.name);
}
}
function A (name) {
if (!new.target) {
throw new TypeError("是类不是函数");
}
this.name = name;
}
Object.defineProperty(A.prototype, 'logName', {
value: function () {
if (new.target) {
throw new TypeError("是函数不是类");
}
console.log(this.name);
},
enumerable: false, // 是否可被遍历
// writable: false, // 是否可写
// configurable: false // 属性描述符本身能否被再次修改
});
访问器
function A (x, y) {
this.x = x;
this.y = y;
}
Object.defineProperty(A.prototype, "add", {
get: function () {
return this.x + this.y;
}
});
const a = new A(1, 2);
console.log(a.add); // 3
a.x++
console.log(a.add); // 4
修改必包内的私有变量
const o = (function () {
const a = {
x: 1,
y: 2
};
// Object.setPrototypeOf(a, null); // 防御
return {
get: function (key) {
// 防御:
// if(Object.hasOwnProperty(key)){
// return a[key];
// }
return a[key];
}
};
}());
// 攻击:不改变上面代码,修改必包内a对象的属性值
Object.defineProperty(Object.prototype, "hack", {
get() {
return this;
}
});
const a = o.get("hack");
a["z"] = 3;
console.log(o.get("z"));
CSS
立体阴影
<h1>立体阴影</h1>
<style>
h1 {
font-weight: 800;
position: relative;
color: #FFFFFF;
font-size: 120px;
}
h1::after {
content: "立体阴影";
position: absolute;
left: 0;
color: #000000;
transform: translate(-69px, 24px) scaleY(0.5) skew(50deg);
z-index: -1;
filter: blur(2px);
-webkit-mask: linear-gradient(transparent, #000000);
}
</style>
玻璃磨砂和黑白
.glass {
background: rgba(255, 255, 255, 0.4);
/*背后的东西模糊*/
backdrop-filter: blur(3px);
/*背后的东西变黑白*/
/*backdrop-filter: grayscale(1);*/
}
弹幕避开人像
.mask {
mask-image: url("./image.svg");
mask-size: cover;
}
条纹状
.colorBorder {
background: repeating-linear-gradient(-45deg, #0b5eef 0px 10px, #fff 10px 20px, #f60707 20px 30px, #fff 30px 40px);
}
聚焦子元素父元素样式发生变化
<div class="container">
<input class="input">
</div>
<style>
<!-- focus-within表示当前元素以及后代元素有没有聚焦 -->
.container:focus-within {
background-color: #999999;
}
.input:focus {
border: 1px solid #18AEFF;
}
</style>
必选
<label class="label">
<span class="title">Name</span>
<input class="input" data-required>
</label>
<style>
.label .title:has(+ .input[data-required])::after {
content: "*";
color: #f62323;
display: inline-block;
}
</style>
首字母
.content::first-letter {
}
文字选择
.content::selection {
}
动态规划
背包放入的最大价值
const maxWeight = 6;
// [v价值, w重量]
const goodsList = [{v: 5, w: 2}, {v: 10, w: 5}, {v: 3, w: 1}, {v: 6, w: 4}, {v: 3, w: 3}];
// 求放入背包的最大价值
function maxPackageWorth (maxWeight, goodsList) {
let line = [];
for (let i = 0; i <= maxWeight; i++) {
const goods = goodsList[0];
line[i] = i >= goods.w ? goods.v : 0;
}
for (let i = 1; i < goodsList.length; i++) {
const next = [];
const goods = goodsList[i];
for (let j = 0; j <= maxWeight; j++) {
if (j < goods.w) {
next[j] = line[j];
} else {
next[j] = Math.max(
goods.v + line[j - goods.w],
line[j]
);
}
}
line = next;
}
return line[maxWeight];
}
maxPackageWorth(maxWeight, goodsList);
模型
洋葱任务模型
// 洋葱模型
class TaskPro {
// 任务列表
_taskList = [];
// 正在执行
_isRunning = false;
// 正在执行的任务下标
_currentIndex = 0;
// 取出一个任务执行
async _runTask() {
// 任务执行完毕
if (this._currentIndex >= this._taskList.length) {
this._isRunning = false;
this._currentIndex = 0;
this._taskList = [];
return;
}
const b = this._currentIndex;
const task = this._taskList[this._currentIndex];
await task(this._next.bind(this));
const a = this._currentIndex;
// 判读task内有没有手动执行next
if (b === a) {
await this._next();
}
}
// 执行下一个任务
async _next() {
this._currentIndex++;
await this._runTask();
}
// 添加任务
addTask(task) {
if (typeof task === "function") {
this._taskList.push(task);
}
}
// 开始执行任务
async run() {
if (this._isRunning) {
return;
}
this._isRunning = true;
await this._runTask();
}
}
const taskPro = new TaskPro();
taskPro.addTask(async (next) => {
console.log(1);
await next();
});
taskPro.addTask(() => {
console.log(2);
});
taskPro.run();
Proxy累加
function createAddProxy(value = 0) {
return new Proxy({}, {
get(target, key) {
if (key === Symbol.toPrimitive) {
return () => value;
}
return createAddProxy(value + Number(key));
}
});
}
const add = createAddProxy();
console.log(add[1][3][1000] + 1); // 1005
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。