前端小知识点总结（持续更新）
前端小知识点总结~持续更新
-
- 1、如何将new Date（）转换为标准的时间格式（YYYY-MM-DD HH:mm:ss），直接在js里面，不使用moment,也不使用getFullYear()，getMonth()这样拼接的方法。
- 2、组成sql查询 in所需结构：
- 3、前端遍历（map/forEach/for...of/for...in）：
- 4、指定位数随机密码生成：大小写字母、数字（或包含特殊字符见例2）
- 5、正则验证身份证与电话号码
- 6、浏览器自动填充密码问题--input框自动填充账号
-
- 方案一：
- 方案二：
- 方案三：
- 7、常用电话、身份证等常用规则验证--使用正则
-
- 1、定义验证规则
- 2、调用规则验证
1、如何将new Date（）转换为标准的时间格式（YYYY-MM-DD HH:mm:ss），直接在js里面，不使用moment,也不使用getFullYear()，getMonth()这样拼接的方法。
封装成function
function dateFormat(time) {
let date = new Date(time+8*3600000);//转换为东八区时间
let str = date.toISOString().replace('T',' ');
//"2020-09-28 11:33:17.104Z"
return str.substr(0,str.lastIndexOf('.'));
}
dateFormat(Date.now());//"2020-09-28 11:33:17"
只取年月日(注意格式),Date.now()取得当前时间戳，new Date(Date.now()).toLocaleDateString()----“2020/9/28”
new Date(Date.now()+8*3600000).toISOString().substring(0,10)
//"2020-09-28"
ps：new Date()对象中有很多日期格式的函数，可以自己看看适合的
2、组成sql查询 in所需结构：
var str=“'”+arr.join(“,”)+“'”;
3、前端遍历（map/forEach/for…of/for…in）：
遍历分为遍历对象和遍历数组，又可以分为遍历键值和遍历值
首先，map()和forEach()是Array自带的方法，Map对象也有forEach()方法，而for…in和for…of是对数组/类数组元素进行for循环操作的方法。
也就是说，在使用map()和forEach()的时候，需要用数组调用
map()和forEach()包含的匿名函数都是三个参数(item,index,input)（当前项，当前项的索引，原始数组）
- map方法
map只能遍历数组，不能遍历对象,map 遍历的时候必须要有 return
如果数组本身是普通对象（如，number、string等）那么即使在 map中做了改变自己属性的操作也是无法生效的，如果数组本身是个对象，那么被改变的属性就会在原对象中生效
const arr = [11, 12, 13];
const b = arr.map(i => {
console.log(i);
return i*2;
})
console.log(arr,b);
// arr = [11, 12, 13];
// b = [22, 24, 26];
const arr = [{t: 1}, {t: 2}];
const b = arr.map(i => {
const newObj = i;
newObj.t = newObj.t*2;
return newObj;
})
console.log(arr,b);
// arr = [{t: 2}, {t: 4}];
// b = [{t: 2}, {t: 4}];
- forEach方法
forEach只能遍历数组，不能遍历对象,没有return属性，只有循环的作用，不能改变原先对象的属性，相当于 for() 循环
const arr = [11, 12, 13];
const b = arr.forEach(i => {
return i*2;
})
console.log(arr,b);
// arr = [11, 12, 13];
// undefined
- for…of 方法
forEach只能遍历数组，不能遍历对象,只有循环的作用，不能改变原先对象的属性
for of 不同于 forEach, 它可以与 break、continue和return 配合使用,也就是说 for of 循环可以随时退出循环
如果对象也想用该方法遍历, 可以使用 Object.keys() 获取对象的 key值集合后,再使用 for of
const arr = [11, 12, 13];
for (let i of arr) {
console.log(i);
}
// 11, 12, 13
const arr = {a: 11, b: 12, c: 13}
for (let i of Object.keys(arr) {
console.log(i)
}
// 11, 12, 13
- for…in 方法
这个方法也是一个遍历的方法，和上面三种不一样的是，他不是遍历值，他是遍历键值，即属性名
如果是数组，则返回下标，如果是对象，则返回对象的键值
for in 循环会以任意顺序遍历键名
const arr = [11, 12, 13];
for (let i in arr) {
console.log(i);
}
// 0, 1, 2
const arr = {a: 11, b: 12, c: 13};
for (let i in arr) {
console.log(i);
}
//前端遍历map集合：var map={k1:v1,k2,v2}
for(var prop in map){
if(map.hasOwnProperty(prop)){
console.log('key is ' + prop +' and value is' + map[prop]);
}
}
//a, b, c
4、指定位数随机密码生成：大小写字母、数字（或包含特殊字符见例2）
（1）例1：随机生成指定位数的字母数字、组合字符串可选择字母大小写（简单），但有缺陷，存在不能完全包含大小写字母和数字的可能；
//1.1
$rootScope.randomString = "";
$scope._getRandomString = function(len){
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
var maxPos = $chars.length;
var pwd = '';
var num = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
num+=Math.floor(Math.random()*10);
}
pwd.toLowerCase();
$rootScope.randomString = pwd+num;//不太理解为啥加这行
return pwd;
}
//1.2：改进1.1：
/**
* 生成随机密码，必包含大写小写数字
* @param length，生成随机密码长度
* @param arr，生成密码字符串数组，默认大写，小写，数字
* @return 返回生成的密码字符串
*/
function randPassword(length, passwordArray) {
length = length || 6;
// 密码串----默认 大写字母 小写字母 数字
passwordArray = passwordArray || ['ABCDEFGHIJKLMNOPQRSTUVWXYZ', 'abcdefghijklmnopqrstuvwxyz', '1234567890'];
var password = '';
// 随机生成开始字符串
var startIndex = parseInt(Math.random() * (length));
var randIndex = [];
for (var i = 0; i < length; i++) {
// 创建数组，用于取随机位置 [0,1,2,3,4,5,....]
randIndex.push(i);
}
for (var i = 0; i < length; i++) {
// 根据随机数组生成随机位置
var r = parseInt(Math.random() * (randIndex.length));
var num = randIndex[r] + startIndex;
// 根据随机值取余数
var randRemainder = num % passwordArray.length;
// 当前密码串【大写字母，小写字母，数字等】
var currentPassword = passwordArray[randRemainder];
// 根据当前密码串长度取随机数
var index = parseInt(Math.random() * (currentPassword.length));
// 获取随机字符串
var str = currentPassword.substr(index, 1);
// 删除随机数组中已经使用的值
randIndex.splice(r, 1);
password += str;
}
return password;
}
console.log('生成的密码:', randPassword(6));
//转自：https://www.cnblogs.com/linx/p/5844834.html
注：注意使用随机数的随机
（2）例2：js实现随机生成复杂字符串，要求必须大于等于6位字符，必须包含大小写字母、数字和特殊字符
/**
* 产生指定长度随机字母数字特殊字符组合（此方法因为生产的字符串中必须包含
* 大小写字母、数字和特殊字符，所以最短长度都是4）
* @param {number} strLength 指定生成字符串的长度
* @returns {string}
*/
var randomWord = function(strLength) {
var str = "",
pos = 0,
range = strLength,
arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z',
'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
'-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'],
numArr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
capital = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'],
minuscule = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
spechars = ['-','.','~','!','@','#','$','%','^','&','*','(',')','_',':','<','>','?'];
// 因为要求生产的字符串中必须包含大小写字母、数字和特殊字符，所有把定义
// 好的存储大小写字母、数字和特殊字符的数组放到一个数组中，遍历取值
var arrName = [numArr, capital, minuscule, spechars, arr, arr];
if(strLength > 6) {
for(let i = 0; i < (strLength - 6); i++) {
arrName.push(arr);
}
}
for (let i = 0; i < range; i++) {
pos = Math.round(Math.random() * (arrName[i].length - 1));
str += arrName[i][pos];
}
return str;
}
5、正则验证身份证与电话号码
function checkId(idcard){
var Errors = new Array("验证通过!", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!");
var area = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外"
}
var retflag = false;
var idcard, Y, JYM;
var S, M;
var idcard_array = new Array();
idcard_array = idcard.split("");
// 地区检验
if (area[parseInt(idcard.substr(0, 2))] == null) return Errors[4];
// 身份号码位数及格式检验
switch (idcard.length) {
case 15:
if ((parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0 || ((parseInt(idcard.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/; // 测试出生日期的合法性
} else {
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/; // 测试出生日期的合法性
}
if (ereg.test(idcard)) {
return Errors[0];
}
else {
return Errors[2];
}
break;
case 18:
if (parseInt(idcard.substr(6, 4)) % 4 == 0 || (parseInt(idcard.substr(6, 4)) % 100 == 0 && parseInt(idcard.substr(6, 4)) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/; // 闰年出生日期的合法性正则表达式
} else {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/; // 平年出生日期的合法性正则表达式
}
if (ereg.test(idcard)) { // 测试出生日期的合法性
// 计算校验位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y, 1); // 判断校验位
if (M == idcard_array[17]) return Errors[0]; // 检测ID的校验位
else return Errors[3];
} else return Errors[2];
break;
default:
return Errors[1];
break;
}
};
// 实际调用的地方
Model.prototype.msrDataValueChanged = function(event){
if (event.col = "QLRZJH" && event.row && event.row.val("QLRZJH")) {
var msg = this.checkId(event.row.val("QLRZJH"));
if ("验证通过!" != msg) {
app.hint(msg);
}
}
if (event.col = "QLRDH" && event.row && event.row.val("QLRDH")) {
// 网上电话格式正则为：/^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/，但16651549988真实存在，缺验证不通过，更改为如下
var reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
if (!reg.test(event.row.val("QLRDH"))) {
event.row.val("QLRDH", "");
app.hint("联系电话不合法，请重新输入！");
}
}
};
6、浏览器自动填充密码问题–input框自动填充账号
笔者总是最后一个input框自动填充账号，如下图
解决方式：
其他参考方法如下：
以Chrome为例，当浏览器遇到type="text"与type="password"的input标签紧邻时，会触发浏览器自动填充行为，默认为浏览器颜色背景。Firefox和360浏览器的处理方式是：只要检测到页面里有满足填充机制的，不管是不是display: none的，只要检测到就直接往里填充
方案一：
使用HTML5新属性autocomplete="off"但禁用自动填充或者 autocomplete=“new-password”。这个属性好像是Firefox发起的，并不是标准属性，所以这块主要是针对IE和火狐浏览器生效。谷歌不承认这个属性，所以在谷歌浏览器上并没有产生任何效果。
方案二：
在表单元素的前面插入两个替身使者，用来欺骗浏览器
<!-- 浏览器认为的 -->
<input disabled type="text" style="width:0;height:0;border:0">
<input type="password" disabled style="width:0;height:0;border:0">
<!-- 用户看见的 -->
账号：<input name="email" placeholder="手机号或邮箱">
密码：<input type="password" name="pwd">
但在谷歌中输入密码时还是会提示填充密码
方案三：
控制type根源上解决问题,控制 变量pass,focus触发时修改pass=false
7、常用电话、身份证等常用规则验证–使用正则
身份证号、营业执照、统一社会信用代码
1、定义验证规则
// 规则验证
Model.prototype.rulesVerify = function(event){
var arr_rule = {
// 15位营业执照的校验规则
businessLicense15: function(ints) {
let ti = 0;
let si = 0;// pi|11+ti
let cj = 0;// （si||10==0？10：si||10）*2
let pj = 10;// pj=cj|11==0?10:cj|11
let lastNum = '', i;
for (i=0;i<ints.length;i++) {
ti = parseInt(ints[i]);
si = pj + ti;
cj = (0 == si % 10 ? 10 : si % 10) * 2;
pj = cj % 11;
if (i == ints.length-1) {
//lastNum =(1 - pj < 0 ? 11 - pj : 1 - pj) % 10;
lastNum = si%10
}
}
if(lastNum==1){
return true;
}else{
return false
}
},
/*** 18位营业执照的校验规则
统一社会信用代码设计为18位，使用阿拉伯数字或英文字母表示，由五个部分组成。
第一部分（第1位）：为登记管理部门代码；第二部分（第2位）：为等纳税人类别代码；第三部分（第3-8位）：为登记管理机关行政区划码；
第四部分（第9-17位）：为主体标识码；第五部分（第18位）：为校验码，由系统自动生成
***/
businessLicense: function(value){
if(value.length==15){
return this.rulesVerify().businessLicense15(value);
}else{
var reg = /^([159Y]{1})([1239]{1})([0-9ABCDEFGHJKLMNPQRTUWXY]{6})([0-9ABCDEFGHJKLMNPQRTUWXY]{9})([0-9ABCDEFGHJKLMNPQRTUWXY])$/;
if(!reg.test(value)){
console.log(334234);
return false;
}
var str = '0123456789ABCDEFGHJKLMNPQRTUWXY';
var ws =[1,3,9,27,19,26,16,17,20,29,25,13,8,24,10,30,28];
var codes = new Array();
codes[0] = value.substr(0,value.length-1);
codes[1] = value.substr(value.length-1,value.length);
var sum = 0;
for(var i=0;i<17;i++){
sum += str.indexOf(codes[0].charAt(i)) * ws[i];
}
var c18 = 31 - (sum % 31);
if(c18 == 31){
c18 = 'Y';
}else if(c18 == 30){
c18 = '0';
}
if(str.charAt(c18) != codes[1].charAt(0)){
return false;
}
return true;
}
},
// 验证身份证号
checkId :function(idcard){
var Errors = new Array("验证通过!", "身份证号码位数不对!", "身份证号码出生日期超出范围或含有非法字符!", "身份证号码校验错误!", "身份证地区非法!");
var area = {
11: "北京",
12: "天津",
13: "河北",
14: "山西",
15: "内蒙古",
21: "辽宁",
22: "吉林",
23: "黑龙江",
31: "上海",
32: "江苏",
33: "浙江",
34: "安徽",
35: "福建",
36: "江西",
37: "山东",
41: "河南",
42: "湖北",
43: "湖南",
44: "广东",
45: "广西",
46: "海南",
50: "重庆",
51: "四川",
52: "贵州",
53: "云南",
54: "西藏",
61: "陕西",
62: "甘肃",
63: "青海",
64: "宁夏",
65: "新疆",
71: "台湾",
81: "香港",
82: "澳门",
91: "国外"
}
var retflag = false;
var idcard, Y, JYM;
var S, M;
var idcard_array = new Array();
idcard_array = idcard.split("");
// 地区检验
if (area[parseInt(idcard.substr(0, 2))] == null) return Errors[4];
// 身份号码位数及格式检验
switch (idcard.length) {
case 15:
if ((parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0 || ((parseInt(idcard.substr(6, 2)) + 1900) % 100 == 0 && (parseInt(idcard.substr(6, 2)) + 1900) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}$/; // 测试出生日期的合法性
} else {
ereg = /^[1-9][0-9]{5}19[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}$/; // 测试出生日期的合法性
}
if (ereg.test(idcard)) {
return Errors[0];
}
else {
return Errors[2];
}
break;
case 18:
if (parseInt(idcard.substr(6, 4)) % 4 == 0 || (parseInt(idcard.substr(6, 4)) % 100 == 0 && parseInt(idcard.substr(6, 4)) % 4 == 0)) {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}[0-9Xx]$/; // 闰年出生日期的合法性正则表达式
} else {
ereg = /^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|3[0-1])|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|1[0-9]|2[0-8]))[0-9]{3}[0-9Xx]$/; // 平年出生日期的合法性正则表达式
}
if (ereg.test(idcard)) { // 测试出生日期的合法性
// 计算校验位
S = (parseInt(idcard_array[0]) + parseInt(idcard_array[10])) * 7 + (parseInt(idcard_array[1]) + parseInt(idcard_array[11])) * 9 + (parseInt(idcard_array[2]) + parseInt(idcard_array[12])) * 10 + (parseInt(idcard_array[3]) + parseInt(idcard_array[13])) * 5 + (parseInt(idcard_array[4]) + parseInt(idcard_array[14])) * 8 + (parseInt(idcard_array[5]) + parseInt(idcard_array[15])) * 4 + (parseInt(idcard_array[6]) + parseInt(idcard_array[16])) * 2 + parseInt(idcard_array[7]) * 1 + parseInt(idcard_array[8]) * 6 + parseInt(idcard_array[9]) * 3;
Y = S % 11;
M = "F";
JYM = "10X98765432";
M = JYM.substr(Y, 1); // 判断校验位
if (M == idcard_array[17]) return Errors[0]; // 检测ID的校验位
else return Errors[3];
} else return Errors[2];
break;
default:
return Errors[1];
break;
}
},
/**
18位统一社会信用代码校验：
1、第1位到第16位每一位都代表不同的含义，不能随意更改。
2、第17位为校验码，采用ISO 7064:1983，MOD 11-2算法计算得出。
3、第18位为数字或字母X，表示校验码可能为数字或字母。
4、统一社会信用代码中字母必须使用大写，无空格、符号等其他字符。
**/
checkCreditCode: function(code) {
if (code.length !== 18) {
return '位数不正确'
}
if (!/^[^_IOZSVa-z\W]{2}\d{6}[^_IOZSVa-z\W]{10}$/g.test(code)) {
return '格式不正确'
}
// 代码字符集 不含I、O、S、V、Z
var charts = '0123456789ABCDEFGHJKLMNPQRTUWXY'
var totalCode = code
.split('')
.slice(0, 17)
.reduce(function(total, value, index) {
// 权重与加权因子相乘之和
return total + charts.indexOf(value) * (Math.pow(3, index) % 31)
}, 0)
if (code.substr(-1) !== charts[31 - (totalCode % 31)]) {
console.log('输入的校验位：', code.substr(-1))
console.log('校验位应为：', charts[31 - (totalCode % 31)])
return '校验位不正确'
}
return true
}
}
return arr_rule;
}
2、调用规则验证
// 返回 true 则验证通过，符合规则
Model.prototype.validateForm = function(curRow, colName){
if (colName == "QLRZJH") {
if ("身份证" == curRow.val("QLRZJZLMC") && curRow.val("QLRZJH")) {
var msg = this.rulesVerify().checkId(curRow.val("QLRZJH"));
return "验证通过!" == msg;
} else if ("营业执照" == curRow.val("QLRZJZLMC") && curRow.val("QLRZJH")) {
return this.rulesVerify().businessLicense(curRow.val("QLRZJH"));
} else if ("统一社会信用代码" == curRow.val("QLRZJZLMC") && curRow.val("QLRZJH")) {
return this.rulesVerify().checkCreditCode(curRow.val("QLRZJH"));
}
return true;
} else if (colName == "QLRDH" && curRow.val("QLRDH")) {
var reg = /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/;
return reg.test(curRow.val("QLRDH"));
}
}