我的笔记本：工作中遇到的一些小问题a=b=val，val是直接赋值，相等于b=val;a=val。而不是b=val,a=

1.Canvas标签有自己的默认宽高300px×150px

如果Canvas中没有直接定义width和height没或值不正确，就会被设置成默认值, 宽高要写在canvas元素上,如果写在外联文件上会因为优先级问题仍然在渲染的时候使用300*150,但是会显示成外联文件设置的宽高,这样会使页面有拉伸变形的情况

2.css中:not()失效

css中:not()只对已经定义过的元素生效例如，:not(A元素) 子元素 {} 这个子元素之前必须定义过才可以被生效(直接使用:not 而没有前缀的时候)

3.body中出现&#65279占位符

body下面出现&#65279占位符,页面中以莫名空行出现,是因为html文档用记事本打开保存位utf-8 BOM格式了,用notepad++打开重新保存为UTF-8 无BOM格式就行了

4.getMonth()获取月份比实际月份少一个月

js里面的月份范围是0-11,1月从0开始；

使用Date.parse()时传入的字符串使用实际月份01~~12，转换为Date对象后getMonth()获取的月份值为0~~11

5.clear:both原理

是为了清除掉当前元素前面相邻的兄弟级（.prev()）浮动元素对当前元素的影响，所以很多clear：both都是放在after里面的；但是只有块元素有效

6.赋值

a=b=val，val是直接赋值，相等于b=val;a=val。而不是b=val,a=b。

更正，之前只用对象验证的a=b=Object.assign({},val)这是错误的
他的本质应该是

temp = Object.assign({},val}<br>
b = temp<br>
a = temp<br>

可用以下代码验证

obj = {
  get b() {
    return {val: 0}
  }
}
a = obj.b = {val: 1}

7. 0==''为true

首先区分一下==和===的区别

===是等同符：会比较类型和值

==是等值符：类型相等的时候比较值，类型不等的时候转换为同等类型比较值

所以0和‘’都被转换为Number后进行比较了

类型转换规则：

如果等号两边是boolean、string、number三者中任意两者进行比较时，优先转换为数字进行比较。
如果等号两边出现了null或undefined,null和undefined除了和自己相等，就彼此相等 NaN==NaN //返回false，NaN是个特殊的Number和所有值包括自己都不相等。

8.浮点数比较大小

因为精度问题，浮点数在比较过程中会产生误差 1 / 3 === (1 - 2 / 3); // false

对于这种浮点数的比较可以计算它们之差的绝对值，看是否小于某个阈值： Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true

9.var不是全局变量!

使用var声明变量,在方法内部是局部变量,在方法外部是全局变量
没有使用var声明的变量,在方法内部或外部都是全局变量,但如果是在方法内部声明,在方法外部使用之前需要先调用方法,告知系统声明了全局变量后方可在方法外部使用。

10.拍平多维数组

Array.flat()还要把维度传进去，实际用的时候太麻烦了 Array.prototype.pia = function () { return this.reduce((prev, cur) => prev.concat(Array.isArray(cur) ? cur.pia() : cur),[]); };

11.在页面中按TAB键使页面错乱

这是一个老项目了,里面是js+smart,页面里激活模块用的是display,这样在按下tab键的时候会出现页面错乱,或者不该出现的input获取焦点这个TAB键的按下,获取焦点的是和tabindex的设置有关系,但是项目也挺老了,代码也传了好几代,这个页面对于TAB按钮也没有什么执念,所以直接选择禁用TAB键

if (evt.keyCode == 9) {
     if (evt.preventDefault) { evt.preventDefault(); }
    else { evt.returnValue = false; }
}

12.antd的表格总是有一条固定数据（非后端返回）

因为<Table/>组件的rowkey没有设置好,rowkey是表格的每一行的key值，可以接受传入fn(row,index),因为设置的值不是唯一的，所以会在改变以后还会保留，修改一下加个后缀就可以了

13.堡垒机中报错its MIME type (‘text/html’) is not executable

Refused to execute script from ‘XXXX’ because its MIME type (‘text/html’) is not executable, and strict MIME type checking is enabled. 安全头部X-Content-Type-Options: nosniff遇到了格式不正确的Content-Type格式，造成了请求的阻塞。
动态引入了一个外部资源js,测试环境和正式环境都没报错,只有堡垒机报以上错误
这是加载的js文件返回Content-Type为text/html,与文件类型不匹配,所以not executable
可能是因为最近护网,然后堡垒机的环境里加了一个X-Content-Type-Options: nosniff
本来呢,我们发起的请求,浏览器会根据响应头的Content-Type字段来分辨它们的类型,如果contentType写错了或有问题,浏览器会启用MIME-sniffing来进行修正,(利用浏览器的这个特性，攻击者甚至可以让原本应该解析为图片的请求被解析为JavaScript)现在定义了X-Content-Type-Options可以阻止浏览器的这种修正行为
解决方案:因为护网行动,下掉X-Content-Type-Options也不现实,所以规范一下Content-Type字段

14.antd的Select控件实时搜索,输入数字检索结果正常回显,输入汉字检索结果无法回显

select默认是根据value回显下拉框的,因为项目里option上挂载的value是工号,所以输入汉字的时候不在value中,无法显示解决方法是在option上多挂了一个字段,把所有能检索的字段都拼在上面,并手动指定了Select的optionFilterProp属性指向这个字段

15.react函数组件中对对象的setStatus

formInputSource是个对象，getFormInputSource循环调用,通过不同的type像后台传值，拿到回参push进formInputSource 理想状态最后得到结果是

{
type1:value,type2:value
}

但是因为react的收集更新，一波渲染的机制，最后只会得到

{
type2:value
}

因为...formInputSource只会是初始状态对于复杂结构，react的setSta提供另一种函数格式，函数是在setstate执行完并页面渲染了之后再执行

16.快速获取URL地址栏参数

let params = new URLSearchParams(location.search);
params.get("xxx")

17.随机id

Math.random().toString(36).substr(2)

18.向下取整

~~num

我的笔记本：工作中遇到的一些小问题