原生JS总结
scrollIntoView‘锚点’效果滚动到指定位置
https://blog.csdn.net/hbiao68/article/details/87115207?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166374935716782425155829%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166374935716782425155829&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-87115207-null-null.142^v48^pc_rank_34_1,201^v3^control_1&utm_term=scrollintoview%E6%BB%9A%E5%8A%A8%E5%88%B0%E9%94%9A%E7%82%B9&spm=1018.2226.3001.4187
鼠标滚轮事件
window.onmousewheel = document.onmousewheel=(e)=>{ if(e.wheelDelta<0){ console.log("鼠标滚轮后滚") }else if(e.wheelDelta>0){ console.log("鼠标滚轮前滚") } }
找出数组中重复的元素记录重复次数
// _arr，plist原数组 _res结果数组 repeatnum数组重复次数 _arr.sort(); //排序很关键 for (let i = 0; i < _arr.length;) { var count = 0; for (var j = i; j < _arr.length; j++) { if (_arr[i] == _arr[j]) { count++; } } _res.push([_arr[i], count]); i += count; } for (let i = 0; i < _res.length; i++) { if(_res[i][1] >= repeatnum){ _newArr.push(_res[i][0]); } } //最后获取大于等于重复次数的元素 pointslist最终结果 _newArr.forEach(item=>{ let arr = plist.filter(v=>v.pointid == item); pointslist.push(arr[0]) })
数组去重 [{...},{...}]
//数组去重 let map = new Map(); for (let item of points_arr) { map.set(item.pointid, item); } this.points_list = [...map.values()];
直接把右键和F5键禁用：
document.oncontextmenu=function(){return false;} document.onkeydown=function(event){ var e = event ||window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==116){ return false; } }
页面加载时只执行onload
页面刷新时，刷新之前执行onbeforeunload事件，在新页面即将替换旧页面时onunload事件，最后onload事件。
页面关闭时，先onbeforeunload事件，再onunload事件。
监听切换事件（visibilitychang事件） 监听浏览器显示，隐藏
visibilitychange事件中有一个visibilityState属性，有两个值，分别是hidden和visible。 document.addEventListener('visibilitychange',()=>{ // document 身上有一个属性叫作 visibilityState // 表示当前页面是显示或者隐藏状态 if(document.visibilityState === 'hidden'){ // 如果隐藏（最小化，其他网页） // 关闭定时器 clearInterval(timer) }else if(document.visibilityState === 'visible'){ // 开启定时器 timer = setInterval(()=>{},1000) } }) document：出于兼容性原因，请确保使用 document.addEventListener而不是window.addEventListener来注册回调。 Safari <14.0仅支持前者。
js 监听离开当前页
window.onbeforeunload = onbeforeunload_handler(); window.onunload = onunload_handler(); function onbeforeunload_handler(){ var warning="确认退出?"; alert(warning); return warning; } function onunload_handler(){ var warning="谢谢光临"; alert(warning); }
switch case语句的用法
switch（表达式）｛ case 常量1 ： 代码块； break； case 常量2： 代码块； break； ........ case 常量n： 代码块； break； default： 代码块； break； ｝ 在使用switch case的时候一定要注意不要把break给漏写了，**如果没有break的话，程序在执行完所对应的代码块后会顺序执行下面的语句知道程序结束或者遇到下一个break为止 当表达式的值和下面哪一个常量相等就会执行那个常量所对应的代码块，如果没有与表达式相等的常量时就会执行default下面的代码块。
多次调用函数 只执行一次
//定义一个布尔类型 var flag = true; // 在调用方法中用IF进行判断 if(flag ){ //此时Flag = true flag = false; //函数执行完成再对Flag进行赋值，使其变为False } //在执行第二次的时候 因为 Flag = false 的缘故，进而无法再进行函数的调用
求数据最大值（如3） 且求出最大值的正整数（如10）区间
// 求出数组最大值 let arr1=Math.max.apply(null,this.left_data.num); let maxnum = parseInt((arr1+ 10) / 10) * 10;
字符串截取
let left = str.substr(0, 3); let right = str.substring(res.obj.userphone.length, 7);
str.search(str1) //返回作为参数传递的当前字符床中第一次出现字符串的位置 没有就返回-1
var p = document.getElementsByTagName('p'); for(var i = 0;i <p.length;i++){ //第一种方法，用classList这个H5 API，有兼容性问题 这种方法最好用 if(p[i].classList.contains('test')==true){
p[i].classList.remove("test") console.log(p[i].innerHTML); } //第二种方法，用className这个属性 if(p[i].className=='test'){ console.log(p[i].innerHTML) } //第三种方法，用getAttribute()这个方法 if(p[i].getAttribute("class")=='test'){ console.log(p[i].innerHTML); } }
换行在 JS 中用bai \n 表示，因此判断du textarea 的值zhi是否包含 \n 即可判断：
if (document.getElementById('textareaId').value.indexOf('\n') > -1) { // 内容bai中有换行du } else { // 内容中没有换行 }
str.includes() 字符串方法，判断是否包含改字符串
getBoundingClientRect()用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。
//该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height； <div id="box"></div> var object=document.getElementById('box'); rectObject = object.getBoundingClientRect(); rectObject.top：元素上边到视窗上边的距离; rectObject.right：元素右边到视窗左边的距离; rectObject.bottom：元素下边到视窗上边的距离; rectObject.left：元素左边到视窗左边的距离; rectObject.width：是元素自身的宽 rectObject.height是元素自身的高
js中return；、return true、return false;区别
在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页. Return False 就相当于终止符，Return True 就相当于执行符。 在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的 onclick时间（如果你指定的话）以外还要触发一个默认事件就是执行页面的跳转。所以如果 你想取消对象的默认动作就可以return false。 1.return false：相当于终止符，干了3件事，阻止默认行为，取消事件冒泡，以及停止回调执行立即返回； 2.return：停止回调执行立即返回； 3.return true：相当于执行符，继续执行下面语句。
将数组转换成数组套对象
let arrList = [];
for (let i in this.subData.check_fences) {
var j = {};
j.fence_id = this.subData.check_fences[i]
arrList.push(j);
}
for循环去掉最后一个符号
for (let i = 0; i < this.ques_model.questionPoints.length - 1; i++) { this.html += this.ques_model.questionPoints[i].pointname + "|"; } this.html += this.ques_model.questionPoints[ this.ques_model.questionPoints.length - 1 ].pointname;
Object.assign方法
//Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。(如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性)。
this.box={
a: 1,
b: 2
}
let data = {
c: 3,
a: 4
};
let baz = Object.assign(this.box, data);
console.log(baz); //a: 4,b: 2,c: 3
img图片加载出错处理 https://blog.csdn.net/milli236/article/details/78930720
设置页面滚动高度
document.querySelector(".content_inner2").scrollTop = 0;
document.body.scrollTop = 0;
document.title="" 当前网页的标题
表单验证数据 同一字段唯一
//这里有个坑 通常数据比对的时候会把自身忘记，导致修改的时候自身数据没有修改但是校验报错，这就是没有把自身过滤掉，解决办法就是比较ID不相等。
将一个数组分成多个数组
function group(array, subGroupLength) { let index = 0; let newArray = []; while(index < array.length) { newArray.push(array.slice(index, index += subGroupLength)); } return newArray; } 例如: var Array = [1,2,3,4,5,6,7,8,9,10,11,12];; var groupedArray = group(Array, 6); //得到的groupedArray 数组为： groupedArray[[1,2,3,4,5,6],[7,8,9,10,11,12]]
字符串方法
replace()：新值替换字符串中指定值。不会改变调用字符串，返回新字符串。
例：let str = 'hello, this is a beatiful day!'
注：1）默认替换首次出现的指定值。
例：let new2 = str.replace('is', 'at') // hello, that is a beatiful day!
若要替换所有出现的指定值，使用正则表达式（/g），全局搜索
例：let new3 = str.replace(/is/g, 'at') // hello, that at a beatiful day!
保留小数点后两位
Math.floor(百分比 * 10000) / 100;
js 绑定事件
<!-- 第三种方式--> <button id="btn" onclick="threeFn()">点我</button> <script type="text/javascript"> var btn = document.getElementById("btn"); // 第一种 通过点击事件 btn.onclick = function(){ alert("这是第一种点击方式"); } // 第二种 监听点击事件 btn.addEventListener('click', function(){ alert("这是第二中点击方式"); }) // 第三种 通过方法响应点击事件 function threeFn(){ alert("这是第三种点击方式"); } </script>
伪数组转真数组
Array.from(arr)
console.log(Array.from(arr))
<embed> 标签
<embed> 标签定义嵌入的内容，比如插件。 <embed src="helloworld.swf" />
FileReader的使用
//HTML5定义了FileReader作为文件API的重要成员用于读取文件，根据W3C的定义，FileReader接口提供了读取文件的方法和包含读取结果的事件模型。
https://blog.csdn.net/jackfrued/article/details/8967667
https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader
//多是用与上传时 图片预览
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
const _base64 = reader.result;
that.tempUrl.loginname = _base64; //将_base64赋值给图片的src，实现图片预览
};
抓包工具 Fiddler 使用介绍 https://blog.csdn.net/m0_53427919/article/details/116235806
isNaN,NaN详细解释
当Number碰到不能转换的常量时，则会返回‘NaN’结果； NaN有一个专门的方法是isNaN，这个方法会判断该常量是否为数字，如果是数字，返回false，如果不是，则返回true；当遇到像var a = '100'；这样是字符串，但里面的内容是数字，isNaN则会先调用Number方法，判断a是否为数字，然后再判断。 isNaN的用法：可以判断是否为数字。 var arr=[100,2,"100",'abc']; for(i=0;i<arr.length;i++){ if(isNaN(arr[i])){ alert(arr[i]);//返回abc说明isNaN会会把“100”也转换成数字 } }
接口获取IP地址
<script src="//pv.sohu.com/cityjson?ie=utf-8"></script> window.returnCitySN = returnCitySN; logip: window.returnCitySN["cip"], logaddress: window.returnCitySN["cname"],
HTML5_ScrollInToView方法
/*
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。
*/
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(true);
}
手写一个promise
function fetchData(params) {
setTimeout(() => {
params("我是返回的数据");
}, 3000);
}
//实现下面的代码
function promise(params) {
return new Promise(resolve => {
fetchData(resolve);
});
}
// promise().then(res => {
// console.log(res); //我是返回的数据
// });
Promise all let promiseArr = [];
imgArr.forEach(imgItem => {
let p = new Promise((resolve, reject) => {
this.axios({
method: "post",
url,
data: formData,
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
})
.then(data => {
if (data.data.code === 0) {
//...
});
} else {
that.$Message.error(data.data.msg);
reject();
}
})
.catch(() => {
reject();
});
});
promiseArr.push(p);
});
Promise.all(promiseArr)
.then(() => {
that.save();
that.saveImgObj = {};
})
.catch(() => {
that.btnloading = false;
});
数组去重
//数组去重 let array = [1, 3, 4, 5, 5, 3, 2, 1, 9, 7]; function unique(array) { //1.数组本身去重 // for (let i = 0; i < array.length; i++) { // for (let j = i + 1; j < array.length; j++) { // if (array[i] == array[j]) { // array.splice(j, 1); // j--; // } // } // } //2.得到一个去重后的新数组 // return [...new Set(array)]; // return Array.from(new Set(array)); // return array.reduce((accu, cur) => { // if (!accu.includes(cur)) { // accu.push(cur); // } // return accu; // }, []); //3 可以排序 const result = array.reduce((accu, cur) => { if (!accu[cur]) { accu[cur] = cur; } return accu; }, {}); return Object.values(result); } // unique(array); console.log(unique(array));
手写promise
function fetchData(params) {
setTimeout(() => {
params("我是返回的数据");
}, 3000);
}
//实现下面的代码
function promise(params) {
return new Promise(resolve => {
fetchData(resolve);
});
}
promise().then(res => {
console.log(res); //我是返回的数据
});
查找树形数据里的谋一项
//1、find：给定条件，返回数组中第一个满足该条件的值，之后的值不再进行检测，当没有找到满足该条件的值时，返回undefined
//2、findIndex：给定条件，返回数组中第一个满足该条件的值的下标，之后的值不再进行检测，当没有找到满足该条件的值时，返回 -1
//3、some：给定条件，只要数组中有一个值满足该条件，就返回true，之后的值不再进行检测，如果没有满足条件的值，返回false
//4.every：给定条件，只有当数组中所有值都满足该条件，才返回true，当有值不符合该条件时，返回false，之后的值不再进行检测
const address = [
{
id: 1,
name: "北京市",
children: [
{
id: 11,
name: "海淀区",
children: [
{
id: 111,
name: "中关村"
}
]
},
{
id: 12,
name: "朝阳区"
}
]
},
{
id: 2,
name: "天津市"
}
];
function getlist(params) {
//树形数据结构转数组（列表）
return params.reduce((accu, item) => {
if (item.children) {
const sublisyt = getlist(item.children);
accu.push(item, ...sublisyt);
} else {
accu.push(item);
}
return accu;
}, []);
}
function getnamebyid(address, id) {
let list = getlist(address);
let result = list.find(item => item.id == id);
return result ? result.name : "";
}
console.log(getnamebyid(address, 111));
数组去重
//数组去重 let array = [1, 3, 4, 5, 5, 3, 2, 1, 9, 7]; function unique(array) { //1.数组本身去重 // for (let i = 0; i < array.length; i++) { // for (let j = i + 1; j < array.length; j++) { // if (array[i] == array[j]) { // array.splice(j, 1); // j--; // } // } // } //2.得到一个去重后的新数组 // return [...new Set(array)]; // return Array.from(new Set(array)); // return array.reduce((accu, cur) => { // if (!accu.includes(cur)) { // accu.push(cur); // } // return accu; // }, []); //3 可以排序 const result = array.reduce((accu, cur) => { if (!accu[cur]) { accu[cur] = cur; } return accu; }, {}); return Object.values(result); } // unique(array); console.log(unique(array));
合并数组
let box1 = ["a", "b", "c", "d"];
let box2 = [1, 2, 3, 4];
function arr(box1, box2) {
return [...box1, ...box2];
}
console.log(arr(box1, box2));
//或者
let newarr = box1.concat(box2);
Array.prototype.splice.apply合并数组 可以将两个数组合并成你想要的
var arr1 = ['a', 'b', 'c'];
var arr2 = ['1', '2', '3'];
//合并数组arr1和arr2
arr2.unshift(2, 0); //在arr2前面插入两个元素2和0；arr2 = [2, 0, '1', '2', '3'];
//2和0的含义是从arr1的索引为2的元素前面删掉0个元素后，再往索引为2的元素前插入arr2的元素
Array.prototype.splice.apply(arr1, arr2);
console.log(arr1); //[ 'a', 'b', '1', '2', '3', 'c' ]
js 正则
//6-16位英文字母、数字组合
/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
//验证手机号 /^[1][3,4,5,6,7,8,9][0-9]{9}$/
js数组方法Array.fill
Array.fill arr.fill(value[, start[, end]]) fill() 方法用一个固定值填充一个数组中， 从起始索引到终止索引内的全部元素， 不包括终止索引， 返回被修改后的数组。 value:用来填充数组元素的值。 start:起始索引，默认值为0。 end:终止索引，默认值为 this.length。 // 填充数组 const arr = Array(3).fill(1); // [1, 1, 1] const arr1 = [1,2,3,4,5].fill(0,1,3); // [1, 0, 0, 4, 5] // 填充类数组 const obj = [].fill.call({ length: 3 }, 4); // {0: 4, 1: 4, 2: 4, length: 3}
