js
于丸
想做个前端大
展开
-
后台返回平行结构,前端js递归实现凑树形结构
//假设这是后台返回的数据const list = [ {parent:null, id:1}, {parent:null, id:2}, {parent:1, id:3}, {parent:1, id:4}, {parent:2, id:5}, {parent:2, id:6}, {parent:3, id:7} ] //结果数组 var result原创 2021-01-15 15:07:00 · 241 阅读 · 0 评论 -
前端获得url上的拼接参数
function getURLParameter(paramName) { var urlParams = window.location.href.split("?")[1]; var paramArray = urlParams.split("&"); var len = paramArray.length; var paramObj = {};//json对象 var arr = [];//数组对象 for (var i = 0; i <原创 2020-08-17 10:37:13 · 856 阅读 · 0 评论 -
根据省市首个汉字按照字母排序
list.sort(function(a,b){ return a.name.localeCompare(b.name); });原创 2020-04-22 16:32:29 · 154 阅读 · 0 评论 -
javascript原型链,看完这个你肯定懂了
一言不合先上图原创 2019-12-26 10:38:48 · 246 阅读 · 0 评论 -
promise链式调用,省市县为例
//复制粘贴即可看到效果,过5秒获取到省,再过5秒获取到市,再过5秒获取到县<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> &l...原创 2019-12-25 09:53:40 · 173 阅读 · 0 评论 -
instanceof到底怎么判断的
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> //就是判断对象的原型链(__proto__)和构...原创 2019-12-12 14:54:34 · 329 阅读 · 0 评论 -
js数组常用方法汇总
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><script> let l = [1,2,3,4] //n...原创 2019-12-11 10:41:40 · 115 阅读 · 0 评论 -
css和js对dom解析和渲染的影响
转载原创 2019-11-27 14:27:35 · 289 阅读 · 0 评论 -
js递归凑树形结构
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //我匹配的规则是最大级4位,第二季6位,前四位为属于哪个父类,每一级加俩位 ...原创 2019-09-01 17:04:14 · 158 阅读 · 0 评论 -
由定时器了解js的运行机制
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> // for(var i=0;i<10;i++){// ...原创 2019-09-01 22:03:55 · 132 阅读 · 0 评论 -
js的冒泡排序
<script> const l = [2,1,4,5,3] for(var i = l.length-1;i >= 1; i--){ // 4 // 3 // 2 // 1 for(var j = 0; j < i; j++){ // 0 1 2 3 // 0 1 2 // 0 1 // 0 if(l[j] > l[j+1]...原创 2019-09-17 09:04:06 · 80 阅读 · 0 评论 -
js的快速排序
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //递归 1.阶乘 2.数组扁平化 3.深克隆 4.快速排序 5.杨辉三角 6.输...原创 2019-09-17 09:04:42 · 87 阅读 · 0 评论 -
js对象的属性名如果是数组123或者字符串123他们是会互相覆盖的
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var obj = {100:"于春辉"}, console.log(obj...原创 2019-09-17 09:05:57 · 309 阅读 · 0 评论 -
js箭头函数相关的知识
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //箭头函数没有自己的this //用call和apply不能改变他的thi...原创 2019-09-17 09:06:28 · 99 阅读 · 0 评论 -
js实现字母大小写变换
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> let str = "aaaAAA" console.log(str...原创 2019-09-17 09:07:10 · 250 阅读 · 0 评论 -
js的call比apply性能好
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //apply和call都可以改变this的指向,返回值就是函数的返回值 ...原创 2019-09-17 09:08:03 · 235 阅读 · 0 评论 -
实现简易的图片懒加载
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } </style> </head>...原创 2019-09-17 10:27:46 · 182 阅读 · 0 评论 -
js异步加载
在介绍他们之前,我们有必要先了解一下页面的加载和渲染过程:浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM;在构建DOM过程中,如果遇到外联的样式声明和脚本声明,则暂停文档解析,创建新的网络连接,并开始下载样式文件和脚本文件;样式文件下载完成后,构建CSSDOM;脚本文件下载完成后,解释并执行(注意这里是立即执行,所以如果你写在head里,并且里面有dom操...原创 2019-09-18 15:14:35 · 109 阅读 · 0 评论 -
js把单引号全换成双引号
let x = "{'a':1}"let y = x.replace(/\'/g,'"');console.log(y)原创 2019-08-26 13:21:54 · 1462 阅读 · 0 评论 -
js当中的this指向问题
function f1(){ console.log(this) //普通函数中的this是window}window.f1() //只是我们调用函数的时候省略了thiswindow.setInterval(()=>{ console.log(this) //定时器中的this是window,也是window被我们省略了 },5000)function Per(name)...原创 2019-08-22 14:28:07 · 75 阅读 · 0 评论 -
上传不经过后台返显图片
// 上传文件 change(file){ let me = this var reader = new FileReader() reader.readAsDataURL(file.raw); reader.onload = function (...原创 2019-06-13 11:35:00 · 169 阅读 · 0 评论 -
js运行机制
讲得不错原创 2019-07-31 14:19:24 · 97 阅读 · 0 评论 -
js的sort()根据每一个对象当中的一个属性从小到大排序
var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8}];function compare(property){ return function(a,b){ var value1 = a[property]; var value2 = b[...原创 2019-07-31 13:59:54 · 2253 阅读 · 0 评论 -
验证isNaN
111原创 2019-07-31 15:07:04 · 134 阅读 · 0 评论 -
获取元素节点的位置
// get absolute Left position function getAbsoluteLeft(ob){ if(!ob){return null;} var mendingOb = ob; var mendingLeft = mendingOb .offsetLeft; while( mendingOb != null &&...原创 2019-07-30 15:17:23 · 333 阅读 · 0 评论 -
js的缺陷
http://www.ruanyifeng.com/blog/2011/06/10_design_defects_in_javascript.html转载 2019-07-12 11:12:32 · 622 阅读 · 0 评论 -
js动态创建a标签并点击
var a = document.createElement('a');a.setAttribute('href', href);document.body.appendChild(a);a.click();原创 2019-07-16 10:58:28 · 11159 阅读 · 3 评论 -
注意在js中 0 == " "返回true
1原创 2019-07-09 15:45:36 · 219 阅读 · 0 评论 -
获取月份的最后一天
//var lastDay= new Date('2018','05',0);var lastDay= new Date('2018','05',0);var year = lastDay.getFullYear();var month = lastDay.getMonth() + 1;month = month < 10 ? '0'+ month : month;var day...原创 2019-08-06 09:56:14 · 537 阅读 · 0 评论 -
闭包的总结
先介绍一下全局变量和局部变量的优缺点全局变量:可以重用、但是会造成全局污染而且容易被篡改局部变量:仅函数内使用不会造成全局污染也不会被篡改、不可以重用从上面可以看出全局变量和局部变量的优缺点刚好是相对的。闭包的出现正好结合了全局变量和局部变量的优点。何时使用闭包希望重用一个对象,又保护对象不被污染篡改时缺点:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否...原创 2019-08-19 16:01:54 · 129 阅读 · 0 评论 -
call和apply的总结
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //apply和call都可以改变this的指向,返回值就是函数的返回值 ...原创 2019-08-20 13:08:41 · 90 阅读 · 0 评论 -
变量和函数声明当中的问题
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> console.log(a) //undefined var a = 1...原创 2019-08-20 11:53:50 · 103 阅读 · 0 评论 -
js里函数一定是对象,对象不一定是函数
如何通过原型图判断对象还是函数,有__proto__的是对象,有prototype的是函数所有的构造函数都是Function的实例,包括Object和Function本身举个反例console.dir(Math) //就只是对象顺便说一下[].from不可以而[].push可以的原因,from的地位是Array是实例对象,push等的观察点是Array是构造函数...原创 2019-08-20 11:34:14 · 432 阅读 · 0 评论 -
js原型链继承的实现
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function Person(name){ this.name = na...原创 2019-08-20 11:22:06 · 131 阅读 · 0 评论 -
ES7持续补充
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> //指数运算符号 console.log(3**3) //判断数组中是...原创 2019-08-20 11:04:20 · 93 阅读 · 0 评论 -
js伪数组转真数组
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> const btnList = document.querySelector...原创 2019-08-20 11:03:41 · 119 阅读 · 0 评论 -
js深拷贝的最终解决方案
知识点准备// JSON.parse(JSON.stringify()) 这种深拷贝缺点里面不能有函数// for in 枚举对象时得到的是键值,枚举数组时得到的是索引,所以Object[i]或者Array[i]都会得到值先封装一个判断数据类型的方法//封装检测数据类型的函数function checkedType(data){ return Object.prototype.to...原创 2019-08-20 10:37:40 · 531 阅读 · 0 评论 -
js判断数据类型
typeof ""; //stringtypeof 1; //numbertypeof false; //booleantypeof undefined; //undefinedtypeof function(){}; //functiontypeof {}; //objecttypeof null; //objecttypeof []; //objecttypeof ne...原创 2019-08-19 20:51:00 · 105 阅读 · 0 评论 -
补0的日期
new Date().getFullYear() + '-' + (Array(2).join(0) + (Number(new Date().getMonth())+1)).slice(-2) + '-' + (Array(2).join(0) + (Number(new Date().getDate()))).slice(-2)原创 2019-06-25 13:36:47 · 377 阅读 · 0 评论