1、数据类型和typeof
原始类型undefined null number string boolean symbol bigint
引用类型 对象
函数就是可以被调用（被执行）的对象，函数比对象多了个键名为[[call]]的属性
隐式类型转换
对象转原始见31点
<>=
2、大厂为什么不允许赋值undifined？
必须let a=void 0;效果一样
void是关键字，后面跟表达式，无论跟啥最终都为undefined，但是习惯写0。
因为在js里面undefined压根不是关键字（见上图不报错），而是window.undefined，window的一个属性，可能是js设计缺陷。
window.undefined=1，不可以设置，因为是只读属性。
因为undefined不是关键字，
但是除了全局作用域，还有函数作用域，
function m(){
let undefined=1;
let a=undefined;
}
于是bug出现了
同事扩展了一个，源码里赋真假值，用的是!0和!1，节省字符，
!0具有节省2个字符的额外好处，而!1具有节省3个字符的额外好处
3、随机颜色
常规是这么做
进阶版
‘#’+Math.random().toString(16).substring(2,8)
可能会存在位数不够的问题，if判断，用以下办法，不足6位后面补0
‘#’+Math.random().toString(16).substring(2,8).padEnd(6,‘0’)
生成固定长度随机数，超出11位，递归
4、判断对象中是否存在某个属性
function hasProperty(key,obj){
return key in obj;
}
for in
for in 循环，遍历自身和原型上的可枚举属性，symbol 类型的属性遍历不出
for in 不会遍历enumrable=false的属性（可枚举，还有可设置configurable，可写writable），但 in 判断不管enumrable的值为true或false
enumerable是否可被遍历
打印Object.getOwnPropertyDescriptor(Object.prototype,‘c’)
假如想遍历那就设置为false
Object.keys
Object.keys, Object.vlaues, Object.entries 遍历自身可枚举的属性。
不包括 原型 和 symbol类型的属性
Object.getOwnPropertyNames(obj) 遍历自身属性。
不包含symbol类型，不可枚举属性也能遍历出
Object.hasOwnProperty 遍历自身的属性。不管是否可枚举。
不包括原型
———扩展———
为什么for in可以循环原型上自定义的属性可以遍历出来，但是系统的属性遍历不出来？
5、fixed失效情况
6、黑白滤镜
了解一下
https://zhuanlan.zhihu.com/p/125137964
转换矩阵
7、数组去重
什么叫做相同？
方式一去重：===严格相等判定重复，但是数组里面有两个相同的对象，那就判断不出来了
必须一致
引用去重方式也是有很多限制的，大部分情况应对的也只是正常的数据结构，而且这里定义什么叫重复也是很有业务场景的，比如定义symbol的重复，作者的场景基本应付的就是一般的比如服务器返回对象数组数据这种
如果考虑周到，首先要面对的就是环数据，就是比如对象互相引用，用递归是会死循环的，另外还要考虑递归的堆栈溢出，还得用蹦床函数才是安全的
另外，数组去重，考点还有一个，一般考这个的话，数组的成员数据类型为数字或者字符串，考点是去重效率，作者的开头的set解构和后面的O(n2)复杂度，都是低效率的
8、两种阴影
box-shadow针对整个盒子做阴影
drop-shadow针对像素点做阴影
去掉阴影
filter:drop-shadow(0 0 10px #fff)
父元素drop-shadow
9、console.log可能存在内存泄漏
函数运行完本来会进行销毁，由于打印了，他会在控制台保持这种引用
webpack工具集成了terser代码压缩工具配置
vite项目需要安装terser插件
10、[‘1‘,‘2‘,‘3‘].map(parseInt)
1. map函数
将数组的每个元素传递给指定的函数处理，并返回处理后的数组，所以 [‘1’,‘2’,‘3’].map(parseInt) 就是将字符串1，2，3作为元素；0，1，2作为下标分别调用 parseInt 函数。即分别求出 parseInt(‘1’,0), parseInt(‘2’,1), parseInt(‘3’,2)的结果。
2. parseInt函数（重点）
概念：以第二个参数为基数来解析第一个参数字符串，通常用来做十进制的向上取整（省略小数）如：parseInt(2.7) //结果为2
特点：接收两个参数parseInt(string,radix)
string：字母（大小写均可）、数组、特殊字符（不可放在开头,特殊字符及特殊字符后面的内容不做解析）的任意字符串，如 ‘2’、‘2w’、‘2!’
radix：解析字符串的基数，基数规则如下：
1） 区间范围介于2~36之间；
2 ） 当参数为 0、NaN、Infinity，parseInt() ，先判断 string 是否以 “0x” 开头，直接解析为十六进制的整数，其他则十进制；
3 ） 如果忽略该参数，默认的基数规则：
如果 string 以 “0x” 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数；parseInt(“0xf”) //15
如果 string 以 0 开头，其后的字符解析为八进制或十六进制的数字；parseInt(“08”) //8
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数；parseInt(“88.99f”) //88
只有字符串中的第一个数字会被返回。parseInt(“10.33”) //返回10；
开头和结尾的空格是允许的。parseInt(" 69 10 ") //返回69
如果字符串的第一个字符不能被转换为数字，返回 NaN。parseInt(“f”) //返回NaN 而parseInt(“f”，16) //返回15
3. 结果
[‘1’,‘2’,‘3’].map(parseInt)即
parseInt(‘1’,0);radix 为 0，parseInt() 会根据十进制来解析，所以结果为 1；
parseInt(‘2’,1);radix 为 1，超出区间范围，所以结果为 NaN；
parseInt(‘3’,2);radix 为 2，用2进制来解析，应以 0 和 1 开头，所以结果为 NaN。
[‘0b11’,‘0x12’,‘013’].map(parseInt)结果为[0, NaN, 1]
0b11，只转换b之前的数字
013，只转换3之前的数字
11、手写防抖
https://blog.csdn.net/s8806479/article/details/137230455
12、不要用setTimeInteval计时器做动画
会导致空帧，跳帧
应该用requestAnimationFrame
永远跟着渲染帧走
哪些情况css动画实现不了，必须使用js动画？
13、数字格式化
let str='1000000000'
//格式改成
'10,000,000,000'
前瞻运算符，匹配位置不匹配字符，?=
$表示字符串是结束的
不仅仅是连续的三位数字，字符串也是结束的
str.replace(/(?=(\d{3})+$)/g,',')
//小括号括起来+不分表示一次或多次
可能会出现
,100,000,000
情况
str.replace(/(?=\B(\d{3})+$)/g,‘,’)
14、平滑滚动
回到顶部，使用css3
滚动整个页面的滚动条需要在根节点html加上scroll-behavior:smooth
15、原型链
详见个人Word文档
15.1、获取隐式原型getPrototypeOf
最好不要用__开头的属性，那是隐式的，指不准哪一天改掉了
15.2、对象的属性校验isPrototypeOf
判断Object.prototype是不是在obj的原型链上
Object.prototype.isPrototypeOf(obj)
Function.prototype.isPrototypeOf(obj)
let o={}
o.isPrototypeOf(obj)
15.3、
15.4、
16、粘性布局
position:stick;要配合定位否则不生效
top:0表示dt依次找父元素，找第一个设置overflow属性的元素，跟他的相对距离，假如没有，就是相对于整个视口，也就是固定定位fixed的参考系，直到父元素也离开这个区域
17、监听元素重叠
加载更多假如是在滚动到底部的时候去触发会导致滚动事件触发太频繁，
换种思路，不监听滚动条，而是监控滚动什么时候出现在画面，
h5提供了构造函数，监控函数有没有出现在区域内
以下函数表示重叠10%（thresholds），重叠进入的时候加载更多（isIntersecting），对象第一个值是回调函数，第二个值是配置，第一次刷新不调用（loading）
问题：懒加载如何实现？https://blog.csdn.net/amswait/article/details/130107488
18、失活页面计时器
切换其他标签页，浏览器觉得其他标签页隐藏，为了提升效率，减少电量消耗，不会频繁执行计时器，会把settimeinterval调成最少1秒钟，谷歌浏览器这个策略，有部分浏览器调成15分钟，所有小于1000ms的计时器都会调成1s
一个思路是，可以在切换页面的时候把页面暂停，监听页面有无隐藏，即可见度，
在老的浏览器有可能叫msvisibilitychange，msHidden
webkitvisibilitychange，webkitHidden
19、鼠标位置问题
20、保持宽高比
比如，哔哩哔哩的视频
给元素直接设置aspect-ratio:16/9;
兼容性不好
<style>
.item {
background-color: red;
width: 50%;
margin: 0 auto;
}
.inner {
width: 100%;
/*height: 0;*/
padding-bottom: 75%;
position: relative;
}
.container {
inset: 0;
position: absolute;
background-color: #000;
}
</style>
</head>
<body>
<div class="item">
<div class="inner">
<div class="container"></div>
</div>
</div>
</body>
21、++
1、a++
得到表达式结果a
a自增
2、++a
a自增
得到表达式结果a
a=1
b=a++ + ++a*a++
a=2
b=1+ ++a*a++
a=3
b=1+ 3*a++
a=4
b=1+ 3*3
22、比较版本号
常规是使用split方法或者正则，但是上百个版本号比较，效率就会变低，
迭代器
function* walk(str){
let part='';
let terminals=['.','-'];
for(let i=0;i<str.length;i++){
if(terminals.includes(str[i])){
yield part;//评论说yield是暂停for循环并返回结果
part=''
}else{
part+=str[i]
}
}
if(part){//比如12.1.8的8情况
yield part;
}
}
const iterator=walk('1.5.6-alpha.1')
let n=iterator.next()
console.log(n)
23、零宽字符（幽灵字符）
vim查看
不参与显示的字符叫零宽字符
零宽字符，作用一：隐藏式的水印，作用二：隐藏信息
输出登录失败，因为文字里包含了我们看不见的字符
以下是常见的零宽字符（有一些国家和民族的语言，比方说阿拉伯语印度语，文字之间要不要连写，于是就产生了200D）
24、让代码成立
let [a,b]={a:1,b:2}
可迭代协议，任何一个对象只要包含一个属性，并且是个函数
https://blog.csdn.net/qq_41581588/article/details/128855084
{
[Symbol.iterator]:function(){
return 迭代器
}
}
平常最常见的可迭代的，是数组
let [a,b]={a:1,b:2}是用数组的方式在解构，
只需要把对象变成可迭代的对象就行
Object.prototype[Symbol.iterator]=function(){
Object.values(this)[Symbol.iterator]()
}
25、null和undefined到底有什么区别
null表示no object
undefined表示no value
获取不存在的dom元素，因为dom元素是对象
26、x到y是否变化
27、多行文本溢出
父元素里有一个省略号元素和文字元素
首先设置float:right;再设置margin-top;但是文字上面部分并没有环绕。
所以思路并不是margin-top，在文字上面再放一个元素，把元素设置高一点，把所有东西往下挤，
父元素设置伪类displayblock;再设置高度80px，文字元素设置margin-top:-80px;
但是其实这个方法是有问题的，假如字数不够，还不需要…
28、标签化模板
let b=15
let a=tag`Fifteen is ${b},111${b}`//变成了函数的调用，再把函数的返回结果赋值给a
function tag(){
return 'abc'//a的结果就是abc
}
打印Arguments，结果是
[Arguments]{
'0':['Fifteen is ', ",111" ,''],
'1':15,
'2':15
}
假如return tag呢，返回了tag函数，继续作为他的标记
let b=15
let a=tag`Fifteen is ${b},111${b}``继续`//变成了函数的调用，再把函数的返回结果赋值给a
function tag(){
console.log(arguments)
return tag//a的结果就是abc
}
[Arguments]{
'0':['继续'],
}
应用
比方说一个随机背景，随机字体颜色的东西，
可以优化成下面这个样子
命令式编程变成了声明式编程，以下是写法，类似react里的style-component
29、锥形渐变
background: conic-gradient(#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
也可以用border做扇形，但是只能是90的倍数
<div class="demo"></div>
<div class="fan"></div>
.demo{
width: 150px;
height: 150px;
border: 5px solid #000;
border-radius: 50%;
background: conic-gradient(#f40,#00f 120deg,transparent 120deg);
}
.fan {
width: 80px;
height: 80px;
border-radius: 100px 0 0;
background: #aaa;
transform: rotate(45deg);
transform-origin: bottom right;
}
30、箭头函数
30.1、存在的意义
消除函数二义性（另一个ES6做的是class）；
面向对象的函数往往有两个含义，一个是指令序列（按某种顺序执行），一个是创建实例；
过去JS调用函数有a()还有new a()，这是设计缺陷，所以出现了在命名上作区分，比如构造函数命名大写，但不是强约束力，有些构造函数可以Number()也可以new Number()，Date也是；
30.2、和普通函数的区别（推导）
第一个
class A{
}
new A()
const a=()=>{}
a()//1、不能用new去调用
2、箭头函数没有this，因为箭头函数代表指令序列，跟面向对象没有关系，this是来自面向对象里面的概念
3、箭头函数没有原型，为了消除二义性，因为箭头函数代表指令序列，跟面向对象无关，不需要创建实例，而原型跟实例密切相关，跟指令序列无关，原型是实现面向对象的手段
31、非严格相等
左右同类型情况下，非严格相等等同于，全等于=做比较，
一种特殊情况
null==undefined
两个特殊规则
两端都为原始类型，则两端转数字
两端类型不一样，一端出现对象，对象转原始；
一、查找对象有没有[][Symbol.toPrimitive]，假如有就调用这个函数，调用后看有没有变成原始类型；
二、查找对象有没有[].valueOf()方法，调用后看有没有变成原始类型；
三、查找对象有没有[].toString()方法，调用后看有没有变成原始类型
[]调用toString成为’‘空字符串
[‘1’]调用toString成为’1’
以下例题同上
if(a == 1 && a == 2 && a == 3){}
三个方法随便写哪个都行
32、锚点更好的替换api（scrollIntoView）
锚链接
资料
轮播图也可以使用
当校验没有通过的时候，使用scrollIntoView滚动到上方
if(!this.form.eventType){
this.$refs.eventType.$el.scrollIntoView({behavior:"smooth", block: "start"})
}
33、console
console.time和console.timeEnd可以打印函数耗时时间
console.dir可以打印dom对象结构
console.trace展示堆栈
34、B站弹幕人像闪避
首先是存在AI生成的图片
35、中文输入法多次触发监听
可以在input监听里，设置true/false值
36、统计字符个数
中庸版本
let str='fgasdfadfdasd'
let obj={}
for (let i = 0; i < str.length; i++) {
if(obj[str[i]]){
obj[str[i]]++
}else{
obj[str[i]]=1
}
}
let str = 'fgasdfadfdasd'
let result = str.split('').reduce((a, b) => {
if(a[b[i]]){
a[b[i]]++
}else{
a[b[i]]=1
}
})
let str = 'fgasdfadfdasd'
let result = str.split('').reduce((a, b) => ( a[b]++ || (a[b] = 1), a ), {})
reduce首先把第二个参数作为初始值，传到形参a里去，把遍历到的值传到b里去
undefined++等于NaN
括号运算符（x,xx,xxx,xxxx）一定会返回最后一个值
37、parseInt和Math.floor
function random(min,max){
max++//可以取到最大值
return Math.floor(Math.random()*(max-min)+min)//不能用parseInt，Math.random() [0,1)
}
在负数情况下，parseInt的概率是不一样的
38、为什么原型链上自己定义的值可以被遍历，而其他值无法被遍历？
enumerable可遍历的
如果c不想被遍历，那么这样定义↓
39、容器均分三列
我以前经常使用的是33.33333333%，但不是最优解
三个子元素宽度不设置的话就是0，flex-grow:1表示每个子元素都吃一份
假如三个子元素加上内容，就不均分了
flex-grow表示在当前元素宽度的基础上，吃掉剩余空间。第一个元素本身就有宽度，剩余空间再三等分
解决方法是.part{flex-basis:0;//表示起跑线，默认值auto}
缩写就是flex :1 0（这个值是压缩） 0;
40、[ ]+![ ]
A+B，A和B会进行以下步骤
1、调用对象Symbol.toPrimitive作为原始值，
{
[Symbol.toPrimitive](){
return 123//假如返回[]，报下图错误
}
}
2、假如没有Symbol.toPrimitive属性，查看有没有valueOf，查看有没有toString，还没有则报错
————
[ ]+![ ]
当加上感叹号时，进行布尔判定，除了
所以是[]是真，所以[ ]+![ ]输出’false’
41、call和apply还能这样比较
像a.b.c.d.e.f()这种表达式，最后值肯定是f
函数.apply(参数1，[1,2])相当于参数1.函数(1,2)
本题转换为(a=>a).call(1,2)，绑定this为1，传入参数2
所以运行不会有结果，外部加个console.log才输出2
改成这样还是2
42、形参数量的问题
输出2和1和1，为什么？
length表示这个函数他期望的最少的形参数量，不会包含剩余参数
43、是否会堆栈溢出？
每次调用会在栈里面加上个执行上下文，吞掉内存，函数执行完成才会被丢出栈，如果你在这个函数里面调用自身，就会导致还没有运行结束，又在调用自己，把栈堆满。
但是这个不会溢出是因为，调用自己是用异步操作的，异步操作不会导致栈溢出，扔到别的队列里去了
function foo() {
setTimeout(foo(),0)
}//会溢出，时间到了，先执行foo()，把这个foo作为计时器到达后要执行的东西，所以溢出
44、如何触发迅雷下载？
45、图片边框
46、ESM符号绑定造成的神奇现象
counter一般可以当做是常量，但是它有可能也会被改变
只有导入这里会出现符号绑定，即两个东西（两个counter）是一块内存空间，输出1和2；
假如是解构输出两个1，值是拷贝过去的
会导致上述方法在文件一调用increase方法后，把变量莫名其妙改动了，所以解决方法是，文件二let改成const
——————————
这种情况用的也不是一块内存空间
以上是ES6首次出现引用传递，之前一直是值传递
var a=1
var b=a
b++
log(a)//是1不是2
47、网格布局
<style>
.container {
width: 300px;
height: 200px;
margin: 0 auto;
border: 2px solid #ccc;
}
.item {
background: #f19752;
border: 2px solid #ee772f;
text-align: center;
line-height: 50px;
font-size: 1em;
}
.container {
display: grid;
/*3列，每列宽度50px*/
grid-template-columns: 50px 50px 50px;
/*2行，每行高度30px */
grid-template-rows: 30px 30px;
;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>
</html>
47.2、改变列的方向
47.3、单元格之间的间隙
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
/*行间隙为10px*/
row-gap: 10px;
/*列间隙为20px*/
column-gap: 20px;
/* 行间隙为10 列间隙为20px*/
gap: 10px 20px;
}
47.4、单元格内部对齐
默认情况下，网格项目在单元格内部水平和垂直拉伸，以撑满单元格。
使用属性justify-items设置水平方向的排列方式
使用属性align-items设置垂直方向的排列方式
他们的可选值如下：
justify-items:start 左| end 右| center 中| stretch 拉伸
align-items:start 左| end 右| center 中| stretch 拉伸
place-items: center center;//可以使用速写属性place-items: 垂直对齐方向 水平对齐方式 同时设置这两个值;
47.5、网格项目定位
默认情况网格项目依次排列在单元格，每个网格占据一个单元格，可以使用grid-area改变这种形式。
使用方式如下：
grid-area:起始行线编号/起始列线编号/结束行线编号/结束列线编号 ;
例:
grid-area:1/2/3/4
左上角和右下角
48、元素倒影-webkit-box-reflect
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, #005);
//-webkit-box-reflect:元素方向 元素间隔
49、let和var的区别
1、污染全局
一旦var声明后，该变量将会挂载到全局window上，let不会
2、块级作用域
3、重复声明
另，前面用var后面用let也是会报错的
4、暂时性死区（TDZ）
let、const都会提升，
在翻阅MDN文档时，发现中文翻译，原文会砍半
let虽然提升了，但是做了个处理，在提升的第一行和声明语句前，形成了暂时性死区，
在暂时性死区内，是不能访问的
50、复制文本到剪切板
navigator.clipboard.writeText('哦豁')
navigator.clipboard对象只能在安全网络环境中才能使用，也就是localhost中，或者https中才能正常使用
直接在本地192.168获取不到该对象，显示undefined
2744
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
