1.css瀑布流布局
.container{display：grid;grid-template:repeat(4,1fr);grid-gap:10px;grid-template-rows:masonry;
2.parseInt和Math.floor区别
parseInt向0方向取整，Math.floor向下取整 -4 -6
3.for in 为什么不遍历非自定义属性？
object.getOwnPropertyDescriptor,enumerable 属性描述符
4.闭包漏洞，修改obj对象
通过原型攻破
Object.defineProperty(Object.prototype,'abc',{get()})
防止：obj.hasOwnProperty或者Object.setPrototypeOf(obj,null)
5.统计字符串频率
var sty = 'gsdfdfasfgh';
var result = str.split('').reduce((a,b)=>(a[b]++ || (a[b]=1),a),{})
6.视频不挡脸
-webkit-mask-image
7.回文算法
function isPalindrome = function(s){
const isValid = (c) => (c >= 'a' && c<= 'z') || (c >= 0 && c <= '9'))
let i = 0, j = s.length - 1;
while(j<= i){
const let = s[i].toLowerCase(),right = s[j].toLowerCase();
if(!isValid(left)){
i++
} else if(!isValid(right)){
j--;
} else if(left === right){
i++;
j--;
} else{
return false
}
}
return true
}
8.让var =[a,b] = { a: 1, b: 2}成立
Object.protytype[Symbol.iterator] = function(){
Object.values(this)Symbol.iterator;
}
9.零宽字符 隐藏字符
10.卡片翻转
perspective:500px; transition:0.5s;backface-visibility:hidden;transform:rotateY(-180deg)
11.保持宽高比
aspect-ratio: 16/9
12.监听页面加载
IntersectionObserver
13.弹出视频，取消滚轮
wheel,wheelHandler, 默认true 阻止默认行为
14.手写call
function.protytype.myCall = function(ctx, ...args){
ctx = ctx === null || ctx === undefined ? globalThis : Object(ctx)
var key = Symbol('temp');
var result = ctx[key](...args);
Object.defineProperty(ctx,key,{
enumerable : false,
value: this,
});
delete ctx.fn
return result
}
15.粘性定位
position:sticky;top:0
相对最近overflow 没有则相对视口
16.动画暂停恢复
animation-play-state
17.平滑滚动
html scroll-behavior:smooth
18.正则
var result = str.replace(/(?=(\d{3}+$)/g,','))
19.静态获取dom
querySelectorAll
20.光晕 阴影
filter: drop-shadow(0 0 10px #000) 区域像素点/严丝合缝
box-shadow 针对整个盒子
21.fixed 相对问题
默认相对视口，如果祖先元素设置transform,perspective或filter 非none时，容器视口为该祖先元素
22.数字
11 .11 11. 011 080 0o11 0o80 0b11 0x11 11e2 11.toString() 11 .toString()
11 0.11 11 9 80 9 报错 3 17 1100 报错 11
23.闭包
是什么 在哪里用 为什么要用，怎么去用
函数内部定义其他函数，内部函数可以访问外部函数作用域的变量和方法，那个内部函数就叫闭包
因为函数有作用于概念，通过闭包可以实现封装，设置私有的变量和方法，优点可以避免全局变量的污染，缺点常驻内存（可访问的参数和变量不会被JS垃圾回收机制回收）
防抖和节流用到的就是闭包，像react hooks也是闭包
24.null 和undefined区别
null表示一个变量被定义了值，为空值，typeof null返回Object表示空对象，也是原型链的终点
undefined表示不存在这个值，没有原始值或没有值
25.webpack构建流程
它是一个串行过程，第一步读取从配置文件/shell读取和合并参数，进行初始化，第二步开始编译，用上一步得到的compiler这个对象去加载所有配置；第三步才开始确定入口，根据配置中的entry；第四步编译模块，调用所有配置的loader，找出模块依赖的依赖，递归这个步骤；第五步模块编译；第六步输出资源，根据模块依赖关系组装成包含多个模块的chunk，再把chunk加载成单一的文件；第七步根据输出的路径和文件名写入文件系统；
26.vuex是什么
vue的公共状态管理工具，用于毫不相关的两个组件进行值传递
使用时五个核心，state存储公共数据，getter类似conputed，mutations改变state唯一改变方式，actions异步请求，modules分模块
this.store.$state. this.store.commit this.store.dispatch
辅助函数mapstate mapMutations mapActions
27.get post区别
get浏览器回退时不会再次请求，get请求会被浏览器主动缓存，请求参数完整保留浏览器浏览历史记录，传送的参数暴露在地址栏，有大小限制，产生一个TCP数据包
post浏览器回退时会再次请求，post缓存需要手动设置，request body，没有大小限制，产生两个TCP数据包
28.map/forEach，for in/for of
map forEach filter concact join reduce slice不改变原数组，for sort splice reverse push pop shift unshift改变原数组
forEach不会对空数组调用函数，返回undefined
for in 遍历对象属性 遍历数组出来key，for of遍历值出来value，for of时es6引进新特性
29.loader plugin区别
loader加载器让webpack加载和解析非js文件，因为webapack原生只支持解析js
loader在module.rules中配置，对象数组
plugin通过构造函数传入，每一个都是一个实例
30.ts技巧
keyof typeof obj
31. ?. ?? ??=
可选、相当||、为null或undefined返回默认值 如果为""返回""
32.自适应文本大小
container-type:size; font-size:5cqh/cqw
33.setInterval setTimeout
setInterval 生成任务，无视执行时间，如果执行时间过长会造成任务堆积
setTimeout 固定执行间隔
34.js改变原数组方法
push pop unshift shift splice sort reverse ... for
35.纯函数
不依赖除了函数的参数，其他外部作用于变量，也不修改外部作用域变量的函数
特点：确定性，无副作用（http请求、修改全局变量、修改参数、改变外部存储）
例如slice 不修改原数组，调用两次结果一样，区别splice
作用：降低bug率、增强可读维护性
36.luckeysheet+nodejs+vue3,开发多人协同的在线表格
37.vue3为什么比vue2块
proxy、patchFlag、hoistStatic、cacheHandler、ssr优化、tree-shaking
38. web worker
GUI线程、js引擎线程、事件触发、定时器、异步http请求
解决导出卡顿、耗时操作，单独开woker线程，postMessage通信
注意同源 dom、脚本、文件限制 通过消息完成通信
39.vue中for if优先级
vue2 for大于if，vue3 if大于for 不推荐同时使用，推荐computed
评论区