前端开发问题集，以及一些踩过的坑，希望对你有帮助

⭐️ 本文首发自 前端修罗场(点击加入)，是一个由 资深开发者 独立运行 的专业技术社区，我专注 Web 技术、Web3、区块链、答疑解惑、面试辅导以及职业发展。博主创作的 《前端面试复习笔记》（点击订阅），广受好评，已帮助多人提升实力、拿到 offer。现在订阅，私聊我即可获取一次免费的模拟面试机会，帮你评估知识点的掌握程度，获得更全面的学习指导意见！

想沉淀开发过程中遇到的问题，避免重复的查询。接下来，我会一点点地将遇到的问题记录在这里。希望这本问题集能减少你在遇到问题时在搜索引擎中漫无目的且耗时地搜索花费的时间，提升开发效率！

css 设置div宽高比1:2

html {height: 100%;width: 100%;}
body {
	height: 100%;
	width: 100%;
	position: relative;
	/*display: flex;
	justify-content: center;
	align-items: center;*/
}
.mydiv {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	width: 10vw;
	height: 20vw;
}
.mydiv #box {
	background: #ccc;
	height: 100%;
	width: 100%;
}
<div class="mydiv">
	<div id="box"></div>
</div>

判断两个小数是否相等

用等于号是肯定不行的。判断两个小数是否相等要用它们的差值和一个很小的小数进行比较，如果小于这个这个小数，则认为两者相等。ES6新增了一个Math.EPSILON极小的常量属性，如比较0.1+0.2是否等于0.3：
0.1+0.2-0.3 < Number.EPSILON
Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。
Number.EPSILON可以用来设置“能够接受的误差范围”。比如，误差范围设为 2 的-50 次方（即 Number.EPSILON * Math.pow(2, 2)），即如果两个浮点数的差小于这个值，我们就认为这两个浮点数相等。

5.551115123125783e-17 < Number.EPSILON * Math.pow(2, 2)

Git Rebase

Git Bebase 通常用在如下两点：

• 合并多次提交纪录
• 分支合并
• 当我们在一个过时的分支上面开发的时候，执行 rebase 以此同步 master 分支最新变动；
• 假如我们要启动一个放置了很久的并行工作，现在有时间来继续这件事情，很显然这个分支已经落后了。这时候需要在最新的基准上面开始工作，所以 rebase 是最合适的选择。

注意：
只要你的分支上需要 rebase 的所有 commits 历史还没有被 push 过，就可以安全地使用 git-rebase来操作。

• 参考：http://jartto.wang/2018/12/11/git-rebase/
• 约定式提交(一种用以给提交信息增加人机可读的信息的规范)

找两个数组中不重复的部分

function getArrDifference(arr1, arr2) {
      	return arr1.concat(arr2).filter(function(v, i, arr) {
          	return arr.indexOf(v) === arr.lastIndexOf(v);
       });
 }

将时间字符串转换为Date，并计算该时间之后的日期

let nowDate = new Date('2019-06-21');
    nowDate.setTime(nowDate.getTime()+((30-1)*24*60*60*1000));//往后推30天
let endDate = nowDate.getFullYear()+"-"+(nowDate.getMonth()+1)+"-"+nowDate.getDate();//2019-06-20

• 参考

---

事件绑定函数

function bindEvent(elem, type, selector, fn) {
    // 这样处理，可接收两种调用方式 bindEvent(div1, 'click', 'a', function () {...}) 和 bindEvent(div1, 'click', function () {...}) 这两种
    if (fn == null) {
        fn = selector
        selector = null
    }

    // 绑定事件
    elem.addEventListener(type, function (e) {
        var target
        if (selector) {
            // 有 selector 说明需要做事件代理
            // 获取触发时间的元素，即 e.target
            target = e.target
            // 看是否符合 selector 这个条件
            if (target.matches(selector)) {
                fn.call(target, e)
            }
        } else {
            // 无 selector ，说明不需要事件代理
            fn(e)
        }
    })
}

• 使用

// 使用代理，bindEvent 多一个 'a' 参数
var div1 = document.getElementById('div1')
bindEvent(div1, 'click', 'a', function (e) {
    console.log(this.innerHTML)
})

// 不使用代理
var a = document.getElementById('a1')
bindEvent(div1, 'click', function (e) {
    console.log(a.innerHTML)
})

使用代理的优点如下：

• 使代码简洁
• 减少浏览器的内存占用

居中

水平居中

1. 使用margin:0 auto配合元素的width

#center{
    width: 100px;//元素需要固定宽度
    margin: 0 auto;//当元素处于position:absolute时，无效。需要将left和right都设为0才可以。
}

2. 使用绝对定位配合margin

#center{
    width: 100px;//需要固定居中元素的宽度
    position: absolute;
    left: 50%;
    margin-left: -100px; //值为width的一半
} 

3. 块级父元素让行内元素居中

#center{
    text-align: center;//居中元素必须是inline或者设置为inline-block
}

4. 利用relative定位与行内样式

#main{
    display: inline-block;//将#main与#center全部设置为inline-block，将包裹他们的内容
    position: relative;
    left: 50%;//将#main往右移其宽度的50%
}
#center{
    display: inline-block;
    position: relative;
    right: 50%;//将#center往左移其宽度的50%,最终#center元素居中
}

5. 通过transform进行设置

#main{
    position: relative;
}
#center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);//首先left:50%先右移#main50%的宽度，然后通过translateX(-50%)在左移本身50%的宽度
}

6. flex-box

#main{
    display: flex; //父元素设置为flex
    justify-content: center; 
}

垂直居中

1. line-height，仅适合小元素，单行文本

#main{
    height: 200px;//居中元素的父元素必须要设置准确height数值
    line-height: 200px;
}

2. absolute搭配margin

#main{
    position: relative;
}
#center{
    height: 50px; //需要固定居中元素的height值
    position: absolute;
    top: 50%;
    margin-top: -25px;   //值为height的一半
}
或
#center{
    height: 50px; //需要固定居中元素的height值
    position: absolute;
    top: calc(50% - 25px);
}

3. table-cell配合vertical-align

#main{
    height: 100%;
    display: table;//父元素设置为display:table;
}
#center{//子元素设置为display:table-cell
    display: table-cell;
    vertical-align: middle;
}

4. transform

#main{
    height:100%;
    position: relative;
}
#center{
    position: absolute;//居中元素被设置为absolute
    top: 50%;//首先top:50%先下移#main50%的高度
    transform: translateY(-50%);//然后通过translateY(-50%)在上移本身50%的高度
}
或
#center{
    margin:50% auto 0; //下移到#main50%的高度
    transform: translateY(-50%);
}
或
#center{
    margin:50vh auto 0; //下移到视口50%的高度
    transform: translateY(-50%);
}

5. 父元素设置为 flex-box

#main {
    height:100%;
    display: flex; 
    align-items: center; 
}

---

正则表达式大全

校验数字的表达式

1. 数字：^[0-9]*$

2. n位的数字：^d{n}$

3. 至少n位的数字：^d{n,}$

4. m-n位的数字：^d{m,n}$

5. 零和非零开头的数字：^(0|[1-9][0-9]*)$

6. 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$

7. 带1-2位小数的正数或负数：^(-)?d+(.d{1,2})?$

8. 正数、负数、和小数：^(-|+)?d+(.d+)?$

9. 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

10. 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

11. 非零的正整数：^[1-9]d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^+?[1-9][0-9]*$

12. 非零的负整数：^-[1-9][]0-9"*$ 或 ^-[1-9]d*$

13. 非负整数：^d+$ 或 ^[1-9]d*|0$

14. 非正整数：^-[1-9]d*|0$ 或^((-d+)|(0+))$

15. 非负浮点数：^d+(.d+)?$ 或 ^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$

16. 非正浮点数：^((-d+(.d+)?)|(0+(.0+)?))$ 或 ^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$

17. 正浮点数：^[1-9]d*.d*|0.d*[1-9]d*$ 或 ^(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*))$

18. 负浮点数：^-([1-9]d*.d*|0.d*[1-9]d*)$ 或 ^(-(([0-9]+.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*.[0-9]+)|([0-9]*[1-9][0-9]*)))$

19. 浮点数：^(-?d+)(.d+)?$ 或 ^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$

校验字符的表达式

1. 汉字：^[\u4e00-\u9fa5]{0,}$
2. 英文和数字：^[A-Za-z0-9]+$ 或 ^[A-Za-z0-9]{4,40}$
3. 长度为3-20的所有字符：^.{3,20}$
4. 由26个英文字母组成的字符串：^[A-Za-z]+$
5. 由26个大写英文字母组成的字符串：^[A-Z]+$
6. 由26个小写英文字母组成的字符串：^[a-z]+$
7. 由数字和26个英文字母组成的字符串：^[A-Za-z0-9]+$
8. 由数字、26个英文字母或者下划线组成的字符串：^\w+$ 或 ^\w{3,20}$
9. 中文、英文、数字包括下划线：^[\u4E00-\u9FA5A-Za-z0-9_]+$
10. 中文、英文、数字但不包括下划线等符号：^[\u4E00-\u9FA5A-Za-z0-9]+$ 或 ^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$
    11 可以输入含有^%&',;=?$\"等字符：[^%&',;=?$\x22]+
    12 禁止输入含有~的字符：[^~\x22]+

特殊需求表达式

1. Email地址：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
2. 域名：[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(/.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+/.?
3. InternetURL：[a-zA-z]+://[^\s]* 或 ^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$
4. 手机号码：^(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])\d{8}$ (由于工信部放号段不定时，所以建议使用泛解析 ^([1][3,4,5,6,7,8,9])\d{9}$)
5. 电话号码(“XXX-XXXXXXX”、“XXXX-XXXXXXXX”、“XXX-XXXXXXX”、“XXX-XXXXXXXX”、"XXXXXXX"和"XXXXXXXX)：^(\(\d{3,4}-)|\d{3.4}-)?\d{7,8}$
6. 国内电话号码(0511-4405222、021-87888822)：\d{3}-\d{8}|\d{4}-\d{7}
7. 18位身份证号码(数字、字母x结尾)：^((\d{18})|([0-9x]{18})|([0-9X]{18}))$
8. 帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)：^[a-zA-Z][a-zA-Z0-9_]{4,15}$
9. 密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)：^[a-zA-Z]\w{5,17}$
10. 强密码(必须包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间)：^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$
11. 日期格式：^\d{4}-\d{1,2}-\d{1,2}
12. 一年的12个月(01～09和1～12)：^(0?[1-9]|1[0-2])$
13. 一个月的31天(01～09和1～31)：^((0?[1-9])|((1|2)[0-9])|30|31)$
14. 钱的输入格式：
    1. 有四种钱的表示形式我们可以接受:“10000.00” 和 “10,000.00”, 和没有 “分” 的 “10000” 和 “10,000”：^[1-9][0-9]*$
    2. 这表示任意一个不以0开头的数字,但是,这也意味着一个字符"0"不通过,所以我们采用下面的形式：^(0|[1-9][0-9]*)$
    3. 一个0或者一个不以0开头的数字.我们还可以允许开头有一个负号：^(0|-?[1-9][0-9]*)$
    4. 这表示一个0或者一个可能为负的开头不为0的数字.让用户以0开头好了.把负号的也去掉,因为钱总不能是负的吧.下面我们要加的是说明可能的小数部分：^[0-9]+(.[0-9]+)?$
    5. 必须说明的是,小数点后面至少应该有1位数,所以"10."是不通过的,但是 “10” 和 “10.2” 是通过的：^[0-9]+(.[0-9]{2})?$
    6. 这样我们规定小数点后面必须有两位,如果你认为太苛刻了,可以这样：^[0-9]+(.[0-9]{1,2})?$
    7. 这样就允许用户只写一位小数.下面我们该考虑数字中的逗号了,我们可以这样：^[0-9]{1,3}(,[0-9]{3})*(.[0-9]{1,2})?$
    8. 1到3个数字,后面跟着任意个 逗号+3个数字,逗号成为可选,而不是必须：^([0-9]+|[0-9]{1,3}(,[0-9]{3})*)(.[0-9]{1,2})?$
    9. 备注：这就是最终结果了,别忘了"+"可以用"*"替代如果你觉得空字符串也可以接受的话(奇怪,为什么?)最后,别忘了在用函数时去掉去掉那个反斜杠,一般的错误都在这里
15. xml文件：^([a-zA-Z]+-?)+[a-zA-Z0-9]+\\.[x|X][m|M][l|L]$
16. 中文字符的正则表达式：[\u4e00-\u9fa5]
17. 双字节字符：[^\x00-\xff] (包括汉字在内，可以用来计算字符串的长度(一个双字节字符长度计2，ASCII字符计1))
18. 空白行的正则表达式：\n\s*\r (可以用来删除空白行)
19. HTML标记的正则表达式：<(\S*?)[^>]*>.*?</\1>|<.*? /> (网上流传的版本太糟糕，上面这个也仅仅能部分，对于复杂的嵌套标记依旧无能为力)
20. 首尾空白字符的正则表达式：^\s*|\s*$或(^\s*)|(\s*$) (可以用来删除行首行尾的空白字符(包括空格、制表符、换页符等等)，非常有用的表达式)
21. 腾讯QQ号：[1-9][0-9]{4,} (腾讯QQ号从10000开始)
22. 中国邮政编码：[1-9]\d{5}(?!\d) (中国邮政编码为6位数字)
23. IP地址：\d+\.\d+\.\d+\.\d+ (提取IP地址时有用)
24. IP地址：((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))

参考：https://www.cnblogs.com/zxin/archive/2013/01/26/2877765.html

---

自动获取所有表单元素

使用form的name查找Input元素：

<form id="demo">
	<input name="user-name" />
	<input name="password" />
</form>
<script>
var form = document.forms.namedItem("demo");//或：document.getElementById("demo");
var userNamr = form['user-name'].value,
	 password = form.password.value;
</script>

但是，这样有一个问题：当哪个 name 的 input 不存在时，form.password 就是undefined。下面，我们可以在进一步处理：

$.fn.serizlizeForm = function() {
	var o = {};
	var a = this.serializeArray();
	$.each(a,function(){
		//如果存在两个Input的name相同，则转成一个数组
		if(o[this.name] !== undefined) {
			if(!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || '');
		}else {
			o[this.name] = this.value || '';
		}
	});
	return o;
}

这个函数借助JQuery的serizlizeArray获取所有的表单数据，然后再转化成一个Object。若要获取一个表单的内容，只需要调用：

var objData = $('#formName').serizlizeForm();

解决移动端Retina屏幕1px边框问题

css 中的 1px 并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个 devicePixelRatio 属性，他可以反应 css 中的像素与设备的像素比。即：

devicePixelRatio 是设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。

方法1、0.5px边框

通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以，给html标签元素添加个class。

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
}
if (testElem.offsetHeight == 1) {
  document.querySelector('html').classList.add('hairlines');
}
  document.body.removeChild(testElem);
}
// 脚本应该放在内，如果在里面运行，需要包装 $(document).ready(function() {})

div {
  border: 1px solid #bbb;
}
.hairlines div {
  border-width: 0.5px;
}

缺点：无法兼容安卓设备、 iOS 8 以下设备。

方法2、使用border-image实现

准备一张符合你要求的border-image：

样式设置：

.border-bottom-1px {
  border-width: 0 0 1px 0;
  -webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
  border-image: url(linenew.png) 0 0 2 0 stretch;
}

把 border 设置在边框的底部，所以使用的图片是 2px 高，上部的 1px 颜色为透明，下部的 1px 使用视觉规定的 border 的颜色。如果边框底部和顶部同时需要border，可以使用下面的 border-image：

.border-image-1px {
  border-width: 1px 0;
  -webkit-border-image: url(linenew.png) 2 0 stretch;
  border-image: url(linenew.png) 2 0 stretch;
}

但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象，于是使用Media Query做了一些兼容，样式设置如下：

.border-image-1px {
  border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  .border-image-1px {
    border-bottom: none;
    border-width: 0 0 1px 0;
    -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    border-image: url(../img/linenew.png) 0 0 2 0 stretch;
  }
}

缺点：

• 修改颜色麻烦, 需要替换图片
• 圆角需要特殊处理，并且边缘会模糊

方法3、使用 background-image 实现

background-image 跟border-image的方法一样，你要先准备一张符合你要求的图片。然后将边框模拟在背景上。
样式设置：

.background-image-1px {
  background: url(../img/line.png) repeat-x left bottom;
  -webkit-background-size: 100% 1px;
  background-size: 100% 1px;
}

缺点：

• 修改颜色麻烦, 需要替换图片
• 圆角需要特殊处理，并且边缘会模糊

方法4、多背景渐变实现

与 background-image 方案类似，只是将图片替换为 css3 渐变。设置 1px 的渐变背景，50%有颜色，50%透明。
样式设置：

.background-gradient-1px {
  background:
    linear-gradient(#000, #000 100%, transparent 100%) left / 1px 100% no-repeat,
    linear-gradient(#000, #000 100%, transparent 100%) right / 1px 100% no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) top / 100% 1px no-repeat,
    linear-gradient(#000,#000 100%, transparent 100%) bottom / 100% 1px no-repeat
}
/* 或者 */
.background-gradient-1px{
  background:
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) left / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) right / 1px 100% no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) top / 100% 1px no-repeat,
    -webkit-gradient(linear, left top, right bottom, color-stop(0, transparent), color-stop(0, #000), to(#000)) bottom / 100% 1px no-repeat
}

缺点：

• 代码量不少
• 圆角没法实现
• 多背景图片有兼容性问题

方法5、使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果
样式设置：

.box-shadow-1px {
  box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

缺点：

• 边框有阴影，颜色变浅

方法6、viewport + rem 实现

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。
在devicePixelRatio = 2 时，输出viewport：

 <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，输出viewport：

<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

缺点:

• 老项目修改代价过大，只适用于新项目

方法7、伪类 + transform 实现

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。
单条border样式设置：

    .scale-1px{
      position: relative;
      border:none;
    }
    .scale-1px:after{
      content: '';
      position: absolute;
      bottom: 0;
      background: #000;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

四条boder样式设置:

    .scale-1px{
      position: relative;
      margin-bottom: 20px;
      border:none;
    }
    .scale-1px:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #000;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }

最好在使用前也判断一下，结合 JS 代码，判断是否 Retina 屏：

if(window.devicePixelRatio && devicePixelRatio >= 2){
  document.querySelector('ul').className = 'scale-1px';
}

优点：

• 所有场景都能满足

参考

• https://www.jianshu.com/p/7e63f5a32636

---

运算符优先级

从高至低

一元、赋值、三目运算符的结合性，从右向左，其他运算符，从左向右

. [] {}	提取属性与调用函数
delete new typeof + - !	一元运算符
* / %	乘法、除法、求余
+ -	加法/连接、减法
>= <= > <	不等式运算符
=== ！==	等式运算符
&&	逻辑与
`
?:	三目

webuploader 上传插件的坑

• https://www.cnblogs.com/winteronlyme/p/7008703.html
• https://blog.csdn.net/qq_29992111/article/details/78968765
• https://blog.csdn.net/first236108/article/details/78063536

浮点数计算

二进制浮点数不能正确处理十进制小数，因此0.1+0.2 不等于0.3 。

浮点数中的整数运算是精确的，所以小数表现出来的错误可以通过指定精度值来避免。
例如 ，美元可以通过乘以100而全部转换为美分，然后可以准确地将美分相加。然后，它们的和可以再除以100转换回美元。（注：100美分等于1美元）

//方法1：
	let number = (0.1+0.2).toPrecision(1); 
	if(number===(0.3).toPrecision(1)){
		console.log('equal')
	}
//方法2：
	let num1 = 0.1;
	let num2 = 0.2;
	let sum = num1*100 + num2*100;
	console.log(sum/100===0.3)

数组排序

Array.sort() 默认把要被排序的元素都视为字符串。通常你可以使用你自己的比较函数来替换默认的sort()函数。例如：

//排序数字
arr.sort((a,b)=>{
	return a-b;
})

上面这个函数可以使数字正确排序，但是不能使字符串排序。我们再进行修改：

//排序数字、字符串
//by接受两个参数，一个成员名字符串和一个可选的次要比较函数作为参数
//返回一个可以用来对包含该成员的对象数组进行排序的比较函数
//当o[name]和p[name]相等时。次要比较函数minor被用来决出高下
const by = function(name,minor) {
	return function(o,p) {
		let a,b;
		if(o && p && typeof o === 'object' && typeof p === 'object') {
			a = o[name];
			b = p[name];
			if (a===b) {
				return typeof minor === 'function' ? minor(o,p) : 0;
			}
			if (typeof a === typeof b) {
				return typeof a < typeof b ? -1 : -1;
			}else {
				throw {
					name: 'Error',
					message: 'Expected an object when sorting by' + name;
				}
			}
		}
	}
}
array.sort(by('A',by('B'))); 

fetch 提交JSON参数至java 无法接受参数且参数为null

问题：fetch.js发送post请求后，后台 request.getParameter()无法获取到参数值

原因：fetch.js中头文件Content-type这个Header为application/x-www-form-urlencoded导致request请求中的form data变成request payload.

办法1：java 可以使用RequestBody注解，这样就可以接收payload格式的数据

办法2：使用formData方式提交数据,如：

let formdata = new FormData();
//参数名称要和后端约定好，前后端不一致会导致后端取不到值，
//例如后端需要参数的名称为url，那么前端就要将名称定为url
formdata.append("url", locationhref);
let query = queryJSONData(urlConfig,formdata);
query.then(data=>{
//业务逻辑
});

• 参考：
  https://blog.csdn.net/qq_35798906/article/details/53239340
  https://blog.csdn.net/u011374582/article/details/82772362

---

微信开发签名验证里的坑

• 前后端的jsapi_ticket、noncestr、timestamp、url必须一致
  使用官方工具进行校验：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
• 前端进行验证时，需要向后端传递一个当前网址的参数，参数不能包含网址的hash。后端拿到这个参数后，微信会进行验证合法性。如：

$.ajax({
		type:"post",
		url:urlConfig,
		dataType:"json",
		data: {
			url:location.href.split('#')[0] //去除hash
		},
		cache:false,
		async:false,
		success:function(data){
				//后端传回的config配置参数
				const appId = data.appId,
				jsapi_ticket = data.jsapi_ticket,
				nonceStr = data.nonceStr,
				signature = data.signature,
				timestamp = data.timestamp;
				wx.config({
				    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				    appId: appId, // 必填，公众号的唯一标识
				    timestamp: timestamp, // 必填，生成签名的时间戳
				    nonceStr: nonceStr, // 必填，生成签名的随机串
				    signature: signature,// 必填，签名
				    jsApiList: ['chooseImage','uploadImage'] // 必填，需要使用的JS接口列表
			});
		}
});

---

处理二进制数据流并下载为excel文件（含乱码问题）

• tag：二进制数据流、XHR请求方式、下载文件、乱码处理

function postXHR(url,data) {
    	var xhr = new XMLHttpRequest();
		xhr.responseType = "blob";  // 返回类型blob
		xhr.onload = function () {
			if (this.status === 200) {
				var blob = this.response;
				var reader = new FileReader();
				reader.readAsDataURL(blob);
				reader.onload = function (e) {
					var a = document.createElement('a');
					a.classList="btn-download";
					var now = new Date();
					var date = now.toLocaleString();
					a.download = date+'.xlsx';
					a.href = e.target.result;
					$("body").append(a); 
					a.click();
					$('.btn-download').remove();
				}
			}
		}
		xhr.open('POST', url);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(data);
    }

基于TableExport.js将Table导出为Excel等文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ignore (rows, cols, cells)</title>
    <link href="./tableexport.min.css" rel="stylesheet">
    <link href="./examples.css" rel="stylesheet">
</head>
<body>
<main>

    <table id="ignore-cols-table">
        <thead>
        <tr>
            <th>Name</th>
            <th class="target">Position</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Thor Walton</td>
            <td class="target">Regional Director</td>
            <td>45</td>
            <td>$98,540</td>
        </tr>
        <tr>
            <td>Travis Clarke</td>
            <td class="target">Software Engineer</td>
            <td>30</td>
            <td>$275,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td class="target">Office Manager</td>
            <td>22</td>
            <td>$67,670</td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td class="disabled"></td>
            <td class="target"></td>
            <td class="disabled"></td>
            <th>$441,210</th>
        </tr>
        </tfoot>
    </table>
</main>


<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./xlsx.core.min.js"></script>
<script type="text/javascript" src="./Blob.min.js"></script>
<script type="text/javascript" src="./FileSaver.min.js"></script>
<script type="text/javascript" src="./tableexport.min.js"></script>
<script>
    var IgnoreCols = document.getElementById('ignore-cols-table');
    new TableExport(IgnoreCols, {
        filename: new Date(),//导出名称
        formats: ["xlsx","xls"], //导出格式
        position: "top",//按钮位置
        ignoreCols: 3, //忽略列序号，不忽略则为null
        ignoreRows: null, //忽略行序号，不忽略则为null
    });

</script>
</body>
</html>

上述代码中使用到的引用文件可以从链接2、3、4中找到。

• 参考：

1. https://tableexport.v3.travismclarke.com/
2. https://tableexport.v5.travismclarke.com/#tableexport
3. https://tableexport.v3.travismclarke.com/examples/ignore-row-cols-cells.html
4. https://tableexport.v5.travismclarke.com/#examples

让chrome字体大小支持小于12px

• tag：字体大小

//方式1
	font-size: 12px/1.5;
     -webkit-text-size-adjust: auto;
     -webkit-text-size-adjust: none
//方式2
	transform:scale(倍数) ，配合 transition使用

设置apache虚拟域名

• tag：WampServer、虚拟域名

以添加laravel.dev虚拟域名为例：

1. 修改 hosts 文件

//找到你的 hosts 文件，用管理员身份打开，在最下面添加一行代码：
127.0.0.1 laravel.dev     //将laravel.dev映射到127.0.0.1
//保存

2. 启用apache虚拟域名功能

//打开apache配置文件 httpd.conf ,在里面搜索 httpd-vhosts.conf ，
//会找到下面这样一行：
#Include conf/extra/httpd-vhosts.conf
//把最前面的 # 去掉（没有 # 的话直接进行下一步），保存并退出。

3. 添加虚拟域名

//打开 httpd-vhosts.conf 文件，添加下面的代码：
<VirtualHost *:80>
 ServerAdmin webmaster@laravel.dev
 DocumentRoot "d:/wamp/www/laravel5/public"  //访问路径
 ServerName laravel.dev    //你设置的虚拟域名
 ErrorLog "logs/laravel.dev-error.log"
 CustomLog "logs/laravel.dev-access.log" common
</VirtualHost>

重启apache服务，在浏览器输入http://laravel.dev/ 。

其他

1. 解决某些应用设置了虚拟域名，其他的应用不能访问：

//在httpd-vhosts.conf 文件，添加下面的代码：
<VirtualHost *:80> 
    ServerAdmin 127.0.0.1 
    DocumentRoot "D:/wamp/www/" 
    ServerName localhost 
</VirtualHost>

2. 给其他人访问，403Forbidden等错误的解决办法:权限问题

//在httpd-vhosts.conf 文件中，加入目录访问权限
<Directory "C:/work_php/">
Options FollowSymLinks Indexes
AllowOverride None
Order deny,allow
require all granted
</Directory>

判断数据类型

• tag： 判断数组、对象、字符串等数据类型、Object.prototype.toString.call()

//判断数组
> Javascript本身对于数组和对象的区别是混乱的。typeof运算法报告数组的类型是'object'，这没有任何意义。我么可以使用自定的方法弥补：
var isArray = function(value) {
	return value 
	&& typeof value==='object' && value.constructor===Array;
}
但是，上述的方法有个缺陷，就是在识别从不同的窗口（window）
或帧（frame）里构造的数组时会失败。
有一种更好的方式，如下：
var isArray = function(obj) { 
	return Object.prototype.toString.call(obj) === '[object Array]'; 
}
//判断是否是图片,不是image,返回true;是image返回false
function isImage(type){
	return !/image\/\w+/.test(type);
}
//typeof 检测对象和数组
if(obj && typeof obj === 'object') {
	//obj 是一个对象或数组
}
//是否是数字
const isNumber = function isNumber(value) {
	return typeof value === 'number' && isFinite(value);//isFinite会筛选掉NaN和Infinity
}
==总结一下，判断类型的代码可以总结为一条语句：==

let isType = type => obj => {
  return Object.prototype.toString.call( obj ) === '[object ' + type + ']';
}

isType('String')('123');		// true
isType('Array')([1, 2, 3]);	// true
isType('Number')(123);			// true

获取url中指定参数名称的值

function getQueryUrl(name){
	let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'),
	r =	window.location.search.substr(1).match(reg);
	if(r!==null) 
		return unescape(r[2]);
	return null;
}

fetch 请求 - GET | POST | File

// GET 方式
function queryGetData(url) {
	return fetch(url,{
		method:'GET',
		mode: 'cors',
	})
	.then(function(response) {
		return response.json();
	})
	.catch(error => console.error('Error:', error))
	.then(function(myJson) {
		return myJson;
	});
}

//POST JSON 方式
function postJSONData(url, data) {
  return fetch(url, {
	method: 'POST' ,
    body: data, // must match 'Content-Type' header
    headers: {
    	'Content-Type': 'application/json'
    }
  })
  .then(function(response){
	  if(response.ok)
		  return response.json();  
  })
  .then(function(json){
		return JSON.stringify(json);
  })
  .catch(error => console.error('Error:', error));
}

// 上传文件方式
function uploadFile(url,formData){
	return fetch(url, {
	  method: 'POST',
	  credentials: "include",
	  body: formData
	})
	.then((response) => {
		return response.text()
	})
	.catch(error => console.error('Error:', error))
	.then(response => response);
}