随笔分类 - 前端技术栈
摘要：// 给一个数组和一个值，获取数组元素之和为这个值的组合 function getIndex(arr,v){ if(!Array.isArray(arr)){ throw 'TypeError' } const map = arr.reduce((total, cur, index) => Obje
阅读全文
摘要：const isSortable = v => { if (!Array.isArray(v) || v.length < 2) { throw 'Not an array or length less than 1' } } /** * 冒泡 * 相邻比较，第一层表示趟数，第二层表示当前趟需要比较
阅读全文
摘要：100vw表示视口宽 10vm表示视口宽的10% .square { width: 10%; height: 10vw; background: tomato; }
阅读全文
摘要：思路是先画一个三角形，再加border-radius div { border: 100px solid transparent; width: 0; height: 0; border-radius: 100px; border-top-color: red; }
阅读全文
摘要：display:none 隐藏元素，同时DOM不会出现在文档中 会触发回流 属于不可继承属性 不会被读屏器读取 visibility：hidden 隐藏元素，但是元素还会再文档中占位 会触发重绘 属于可继承属性 可以被读屏器读取
阅读全文
摘要：本质区别 link是html标签，@import是css特性 基于以上 link能被js控制，@import不行 link除了加载css外，还能加载其他资源，@import只能加载css @import在页面加载完了之后才会加载，在网速慢的情况下可能造成页面闪烁，而link和网页同时记载 link是
阅读全文
摘要：CSS 可继承属性与不可继承属性 一、无继承性的属性 display：规定元素应该生成的框的类型 文本属性： ● vertical-align：垂直文本对齐 ● text-decoration：规定添加到文本的装饰 ● text-shadow：文本阴影效果 ● white-space：空白符的处理
阅读全文
摘要：选择器优先级 权重 1000 内联样式 100 id选择器 10 类选择器，伪类选择器，属性选择器 1 标签选择器，伪元素选择器 0 相邻兄弟选择器、子选择器、后代选择器、通配符选择器 其他情况 !important样式优先级最高 优先级相同，按代码书写顺序，顺序在后面的生效 继承得到的样式优先级最
阅读全文
摘要：骰子三点布局 思路是使用flex布局或中，弹性子项中的align-self属性 align-self属性可以覆盖弹性容器中的align-items的值, 让子项设置自己的布局属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
阅读全文
摘要：继承的目的是什么？结果是什么？ 子类继承父类，子类实例拥有和父类实例的属性 父类实例的属性来自于哪里？ 构造函数 原型对象 因此继承的实现应该做到以下两件事情 继承父类构造函数设置的属性： 借用父类构造函数使用apply/call绑定this为子类实例，使得子类实例具有父类实例相同属性 继承父类的原
阅读全文
摘要：抽象比较 == 如果两边类型不同，会做隐式类型转换再判断 严格比较 如果两边类型不同，直接返回false Object.is 一般情况下结果和 相同，但是对+0,-0和NaN做了判断，Object.is认为+0和-0不相等，而NaN和NaN是相等的，这一点和严格相等不一样
阅读全文
摘要：（1）块级作用域：块作用域由 { }包括，let和const具有块级作用域，var不存在块级作用域。块级作用域解决了ES5中的两个问题： 内层变量可能覆盖外层变量 用来计数的循环变量泄露为全局变量 （2）变量提升：var存在变量提升，let和const不存在变量提升，即在变量只能在声明之后使用，否在
阅读全文
摘要：Map Map是JavaScript的一种数据结构，主要用于有序保存键值对，任何值都可以作为一个键或者值。 Map实现了iterator接口，遵循可迭代协议 1 特点 有序插入/输出 任意值都可以作为键 2 key 键的比较基于sameValueZero算法 在作为键的时候，NaN与NaN是相等的
阅读全文
摘要：interface和type都可以用作ts中限制变量的类型，它们有一些共同点 都能作为限制变量类型的方式 都能被class实现 但也有所区别 interface可以实现声明合并，type不行 interface A { a: string } interface A{ b:string } cons
阅读全文
摘要：type A = { a: number, b: number } type B = { a: number } // 交叉类型, 需要满足A和B的并集 const D: A & B = { a: 1, b: 2 } // 联合类型，需要满足A和B的交集 const E: A | B = { a:
阅读全文
摘要：定义useLazyLoad 思路： 判断图片在视口内就加载，即： 元素距离页面顶部的距离offsetTop < 滚动条高度scrollTop + 视口高clientHeight import { useCallback, useEffect, useState } from 'react' impo
阅读全文
摘要：定义 import { useCallback, useEffect, useRef } from "react" export interface ThrottleRefType { fn: Function, timer?: NodeJS.Timeout } export type Thrott
阅读全文
摘要：定义 import { useCallback, useEffect, useRef } from "react" export interface DebounceRefType { fn: Function, timer?: NodeJS.Timeout } export type Deboun
阅读全文
摘要：问题 不能将类型“Timeout”分配给类型“number” Type 'Timeout' is not assignable to type 'number'. 解决方案 设置类型为NodeJS.Timeout 清除时使用delete ref.timer + clearTimeout export
阅读全文
摘要：问题： "this" 隐式具有类型 "any",因为它没有类型注释 'this' implicitly has type 'any' because it does not have a type annotation 解决方案： 将this放在函数参数列表上声明类型即可，使用的时候this不会干扰
阅读全文
浙公网安备 33010602011771号