开发笔记
使用JS实现文件下载代码
// create URL and Link
const url = window.URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
document.body.appendChild(a);
// Invoke download
a.click();
// remove URL and Link
window.URL.revokeObjectURL(url);
a.remove();
简要说明var、let、const之间的区别
var声明变量可以重复声明，而let不可以重复声明
var是不受限于块级的，而let是受限于块级
var会与window相映射（会挂一个属性），而let不与window相映射
var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错
const声明之后必须赋值，否则会报错
const定义不可变的量，改变了就会报错
const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错
JavaScript数组去重的两种方法
1、indexof 去重使用for遍历后使用indexof判断数组元素是否存在，如果不存在那么push到数组中
var arr =[1,6,12,0,4,7,6,3];
var arr1 = [];
// 新建一个数组来存放arr中的值
for(var i=0,len=arr.length;i<len;i ){
if(arr1.indexOf(arr[i]) === -1){
arr1.push(arr[i]);
}
}
2、ES6方法set()去重
let arr = [212, 3, 25, 3, 6, 7, 25];
let item = [...new Set(arr)];
关于forEach、for in、for of三者遍历数据的说明
forEach更多的用来遍历数组
for in 一般常用来遍历对象或json
for of数组对象都可以遍历，遍历对象需要通过和Object.keys()
for in循环出的是key，for of循环出的是value
怎么判断数组所有元素都相同
通过ES6 Set方法去重，再判断去重后的数组长度是否等于1
let arr = [23, 23, 23, 23, 23, 23, 23];
let item = [...new Set(arr)];
if(item.length === 1){
console.log("true")
}else{
console.log("false")
}
前端常用正则校验规则
1、校验手机号码
// 正则
const regex = /^1[3456789]d{9}$/;
2、校验邮箱地址
// 正则
const regex = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/;
3、校验身份证号码
// 身份证号码为15位或18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
const regex =
/^[1-9]d{5}(19|20)d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$/;
4、校验密码强度
// 正则
const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;
5、校验 URL 地址
// 正则
const regex = /^(http|https)://([w-] .) [w-] (:d )?(/S*)?$/;
6、校验 IP 地址
const regex =
/^([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5])$/;
7、校验中文名
// 正则
const regex = /^[u4e00-u9fa5]{2,4}$/;
8、校验首位不为零的数字
// 正则
const regex = /^[1-9]d*$/;
9、校验只允许字母和数字
// 正则
const regex = /^[A-Za-z0-9] $/;
JavaScript复制文本到剪切板中
判断navigator.clipboard是否为undefined，因为navigator.clipboard对象只能在安全网络环境中才能使用，比如在localhost或者https中才能正常使用，直接用ip地址和http访问出现undefined，所以需要表单元素来实现。
HTML部分
<body>
<button id="copy">复制</button>
<div id="text">你好啊</div>
</body>
JavaScript部分
<script>
var copy = document.getElementById('copy')
copy.onclick = function copy(e) {
var text = document.getElementById('text')
if (navigator.clipboard && window.isSecureContext) {
return navigator.clipboard.writeText(text.innerHTML)
} else {
let input = document.createElement('input')
document.body.appendChild(input)
input.value = text.innerHTML
input.focus()
input.select()
if (document.execCommand('copy')) {
document.execCommand('copy')
}
input.blur()
document.body.removeChild(input)
}
}
</script>
JavaScript常用的日期时间方法大全
let date = new Date(); // 获取中国标准时间
date.getFullYear(); / /获取完整的年份(4位)
date.getMonth(); // 获取当前月份(0-11,0代表1月)
date.getDate(); // 获取当前日(1-31)
date.getDay(); // 获取当前星期(0-6,0代表星期天)
date.getTime(); // 获取当前时间的时间戳
date.getHours(); // 获取当前小时数(0-23)
date.getMinutes(); // 获取当前分钟数(0-59)
date.getSeconds(); // 获取当前秒数(0-59)
date.getMilliseconds(); //获取当前毫秒数(0-999)
date.toLocaleDateString(); // 获取当前日期
date.toLocaleTimeString(); // 获取当前时间
date.toLocaleString(); // 获取当前日期与时间
date.setFullYear(); // 设置年份信息 获取该年份当前月日时分秒的时间戳
date.setMonth(); // 设置月份信息 获取该月份当前年日时分秒的时间戳 (0-11,0代表1月)
date.setDate(); // 设置日信息 获取该日当前年月时分秒的时间戳
date.setHours(); // 设置小时信息 获取该小时当前年月日分秒的时间戳
date. setMinutes(); // 设置分信息 获取该分当前年月日时秒的时间戳
date.setSeconds(); // 设置秒信息 获取该秒当前年月日时分的时间戳
原生JavaScript绑定事件的3种方法
1.行内绑定：在标签上写οnclick=“事件名”
<button onclick="handleClick">Click Me</button>
2.在script中绑定
document.getElementById("标签").onclick=function(){
/* 函数体 */
}
3.绑定事件监听函数
绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数
元素选择器.addEventListener(事件名（click,keydown...）, 回调函数, true捕获/false冒泡);
移除事件监听
document.getElementById("选择的标签").removeEventListenner('click')
dom创建与dom操作
创建：新的标签(元素节点) = document.createElement("标签名")
删除：父节点.removeChild(子节点);
插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点
追加：appendChild(新的节点的名) 当前对象追加一个子节点