![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript日常学习经验总结
文章平均质量分 52
想要成仙的菜鸟前端
这个作者很懒,什么都没留下…
展开
-
树形数据转换算法
/** * 树形数据转换 * @param data: 整体数据 * @param id : 当前id * @param pid: 父级id */export function treeDataTranslate (data, id = 'id', pid = 'parentId') { var res = [] var temp = {} for (var i = 0; i < data.length; i++) { temp[data[i][id]] = d原创 2021-02-25 21:58:21 · 421 阅读 · 0 评论 -
localStorage存储bool值,读取之后变字符串类型
今天遇到一个问题,其他的页面查询接口返回的一个参数,bool值,用来判断当前用户是否能购买特定商品,最开始想到的是,吧其他的页面接口返回的数据放到本地存储中去,在另外一个页面拿出来进行判断,决定前端是否能够购买的交互逻辑。在存储好之后,在读取的时候,发现了bool变成了字符串类型,所以使用if(localStorage.getItem('isTrue')){}这种方法判断,从本地存储读取出来的数据是字符串类型的 true/false,所以,不论true/false都是true ,显然不能用这种方原创 2021-01-22 18:16:27 · 2687 阅读 · 0 评论 -
分页算法
/** * 分页彩虹算法 * 通过传入的信息,生成一个分页列表显示 * [4,5,6,7,8] * @param currentPage 当前页 * @param pageCount 总页数 * @param displayCount 每屏展示的页数 * @return 分页条 */const rainbow = (currentPage, pageCount, displayCount = 5) => { var isEven = true; //奇数 isEven = d原创 2020-12-09 14:41:40 · 904 阅读 · 0 评论 -
setTimeout与requestAnimationFrame的区别
这两个东西是和动画相关的两个api什么是动画?动画其实是一种假象!是一种不连续的运动已帧的形式呈现给我们的东西。在二十一世纪,通常人们观看的电影其实就是通过胶片记录和投影的。他们是以每秒至少24帧的速度形成的视觉上的运动起来的假象。NTSC广播的标准的帧速率为23.975FPS,而PAL的形式为25FPS。FPS可以理解为我们常说的“刷新率(单位为Hz)”,例如我们装机选购显卡和显示器时候,都会注意到刷新率。一般我们设置缺省刷新率都在75Hz(即75帧/秒)以上。例如:75Hz的刷新率也就是指屏幕一秒内转载 2020-11-12 15:56:37 · 829 阅读 · 0 评论 -
日常开发IE浏览器的坑及解决方法总结(二)
Object.defineProperty 添加监听IE浏览器不支持 Object.defineProperty。ie上写了先提醒缺少参数或者某个参数不能为false,然后去掉对应的参数就会显示不支持 Object.defineProperty 这是因为,IE浏览器有支持 Object.defineProperty ,但是值允许在操作DOM时使用,对于和vue中对于某个变量进行监听是不支持的。在网上找了一个 工具文件 ,地址是:https://gitee.com/ambit/object-definepr原创 2020-09-29 16:09:33 · 686 阅读 · 0 评论 -
浮点数精度丢失解决方案
产生原因Javascript采用了IEEE-745浮点数表示法(几乎所有的编程语言都采用),这是一种二进制表示法,可以精确地表示分数,比如1/2,1/8,1/1024。遗憾的是,我们常用的分数(特别是在金融的计算方面)都是十进制分数1/10,1/100等。二进制浮点数表示法并不能精确的表示类似0.1这样 的简单的数字,上诉代码的中的x和y的值非常接近最终的正确值,这种计算结果可以胜任大多数的计算任务:这个问题也只有在比较两个值是否相等时才会出现。javascript的未来版本或许会支持十进制数字类型以避转载 2020-09-29 10:56:12 · 950 阅读 · 0 评论 -
判断一个对象是否为空
for…infor(var i in obj){ return false; //不为空}return true; //为空JSON.stringfy()if(JSON.stringfy(obj) === '{}'){ return true;}else{ return false;}Object.keys(obj) ES6if(Object.keys(obj).length === 0){ return true;}else{ return false原创 2020-09-18 16:35:57 · 228 阅读 · 0 评论 -
iframe标签及父子页面传递数据
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。frameborder:0/1(规定是否显示框架周围的边框。0:不显示,1:显示)iframe 元素,父子之间数据传递:1.子向父通信parent.htmlwindow.addEventListener('message',function(e){ console.log(e.data); if(e.data.msg==='xxx'){ //一些自己的业务逻辑原创 2020-09-14 15:33:05 · 854 阅读 · 0 评论 -
正则限制input框中只允许用户输入大于0的数字
<input type= "text" name= "days" class="" oninput="value=value.replace(/\D/^0/g,'')" onblur="value=value .replace(/\D/^0/g,'')"/>这里之所以既使用了oninput 又使用了 onblur是因为要兼容ie8,ie不支持 oninput事件。原创 2020-08-14 16:54:19 · 2491 阅读 · 0 评论 -
正则匹配new RegExp 与 / /区别
创建一个正则对象有两种方法:new RegExp(“正则匹配的字符串”)var regObj = / /g;当在使用绕匹配的正则字符串中有 / 要匹配这个斜杠的时候,注意,在使用 new RegExp("") 字符串中可以直接写 / 而不需要进行 \/ 进行转义。但是在使用 var regObj = / /g; 这种方式的时候,必须对里面的 / 进行 \/ 转义var urlReg = new RegExp("([hH][tT]{2}[pP]://|[hH][tT]{2}[pP][原创 2020-06-30 17:00:23 · 2647 阅读 · 0 评论 -
try-catch 使用与理解
含义:try-catch语句标记要尝试的语句块,并指定一个出现异常时抛出的响应。可以通过try catch 来捕获代码异常MDN上解释基本语法及含义:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/try…catch淘宝前端团队解释:https://fed.taobao.org/blog/taofed/do71ct/try-catch-runing-problem/?spm=taofed.blo原创 2020-06-18 11:45:37 · 951 阅读 · 0 评论 -
validform插件基本使用与总结
引入插件如下:其中的 validform.css 就是下载下来的包里面的 style.css 文件中 /*==========以下部分是Validform必须的===========*/ 这行代码以下的。html页面引入:在js文件中引入或者在html页面通过script 标签引入都可以。给需要验证的表单元素绑定附加属性必须是一个form表单,每一条是一个input或者是textarea,绑定name,datatype,mullmsg,或者errormsg属性。其中的datatype可以原创 2020-06-18 09:45:34 · 320 阅读 · 0 评论 -
判断一个字符串是否是JSON格式的字符串
function isJSON(str) { if (typeof str == "string") { try { var jsonObj = JSON.parse(str); if (typeof jsonObj == "object") { return true; } else { return false; }原创 2020-06-17 10:38:48 · 1766 阅读 · 0 评论 -
页面的防抖与节流
之前看了一点这个概念,面试被问到,回答的不太清楚,这次再一次详细的学习和了解。首先 模拟在输入框输入后做ajax查询请求,没有加入防抖和节流的效果,这里附上完整可执行代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>没有...原创 2020-02-29 20:02:04 · 373 阅读 · 0 评论 -
深入理解let到底有没有被提升
这是我根据下面的文章做的测试和深一步的理解: let a = 'global' { console.log(a)// 打印结果:初始化前无法访问“a” // let a let a = 3 // 这说明let a 是被提升了的。否则a 的值就是 global了。let只是...转载 2020-02-20 17:06:22 · 820 阅读 · 2 评论 -
对象的继承
继承:现实生活中 子承父业程序中的继承// 继承演示(对象的继承)function extend(child, parent) { for (var key in parent) { if (child[key]) continue; // 如果child中有该成员,不替换成parent对象中的成员 child[key] = parent[key]; }}...原创 2020-02-15 22:45:47 · 94 阅读 · 0 评论 -
定义函数的方式及this指向问题
定义函数的方式1.函数声明2.函数表达式var fn = new Function( "var name = 'zs'; console.log(name); " )fn();// console.dir(fn)// 这种定义函数的方式解析起来会比前两种慢// 这种方式的执行过程是这样的。首先把function 中的字符串解析成js代码,然后将js代码解析成cpu可以执行的代码。所以...原创 2020-02-15 22:42:32 · 295 阅读 · 0 评论 -
js执行机制 特殊易错 情况总结
一:函数表达式中的函数并不会被预解析首先需要知道什么是函数声明与函数表达式、以下是他们的区别:// 函数声明fn(); // 没有出错function fn (){ console.log('test')}// 函数表达式// fn1();// undefined 出错 原因是?var fn1 = function (){ console.log('test')} /...原创 2020-02-15 22:35:44 · 113 阅读 · 0 评论 -
正则与exec、match、分组提取
正则对象 reg// 方式一var reg = new Reg(\d+)// 方式二var reg = /\d+/gi;exec 从字符串中提取(每次只能匹配一组数据) var reg = /\d+/; var str = '张三:2000;李四:5000;王五:10000;'do{ var content = reg.exec(str)// 匹配到一组数字就是一个数组,多次匹...原创 2020-02-15 22:24:00 · 718 阅读 · 0 评论 -
对象的深拷贝与浅拷贝
var obj = { name:'zs', age:18, sex:'男'}var obj2 = { }// 遍历对象中的成员for(var key in obj){// 注意这里使用 obj.key 是错误的,因为这种格式是把key当做了obj对象中的属性来看待。但是for in 中的key 是变量 使用obj[key]这种形式就是将key当做变量来看的。所以obj.ke...原创 2020-02-13 17:45:19 · 98 阅读 · 0 评论 -
闭包
MDN解释:闭包是使用被作用域封闭的变量,函数,闭包等执行的一个函数的作用域。通常我们用和其相应的函数来指代这些作用域。(可以独立访问数据的函数)首先这是个错误的说法:闭包就是 在一个作用域中可以访问另一个作用域的变量。一个函数嵌套一个函数,在嵌套的函数中访问到了外部函数(作用域)中的变量或者函数,就会发生闭包现象例子:function fn(){ var n= 10; return...原创 2020-02-12 17:14:28 · 89 阅读 · 0 评论 -
bind、call、aplay改变函数中的this
一:bind函数(改变函数的this指向并返回一个新的函数,不会调用函数而是将函数复制一份。这是与其他两个不同的地方)function fn (){ console.log(this) console.log(x + y)}var o = { name :'zs'}var f = fn.bind(o,1,3)//bind函数返回一个新的函数,fn是原有的函数,bind的第一个参数是...原创 2020-02-12 11:56:30 · 1529 阅读 · 0 评论 -
原型对象与原型链(结合案例分析)
原型对象原型链所有的构造函数都有一个属性,原型/原型对象(本质就是一个对象)prototypeStudent.prototypefucntion Student(name,age,sex){ this.name = name; this.age = age; this.sex = sex;}console.log(Student.prototype)// 就是一个对象// 通过原...原创 2020-02-10 15:04:16 · 304 阅读 · 0 评论 -
jsonp与cors解决跨域问题的原理
jsonpjsonp原理:动态创建script标签jsonp发送的不是ajax请求(本质上没有用到xmlHttpRequest这个请求对象 )不支持ajax请求不支持post请求(只支持get请求)cors中文意思是跨域资源共享,需要服务器端进行cors配置(前端不需要进行任何的配置)cors发送的是真正的ajax请求cors支持ajax的跨域(ajax可以在cors模式下进行...原创 2020-02-07 12:55:41 · 181 阅读 · 0 评论 -
==与===总结
let str1 = '123';let str2 = new String('123');console.log(str1 == str2); // trueconsole.log(str1 === str2); // falseconsole.log(null == null); // trueconsole.log(null === null); // trueconsol...原创 2020-02-07 12:09:33 · 83 阅读 · 0 评论 -
ES6展开运算符
// 将字符串转成数组 var str = "abcd" console.log([...str]) // 将集合转成数组 var sets = new Set([1,2,3,4,5]) console.log([...sets]) // 两个数组的合并 var a1...原创 2019-12-05 11:10:31 · 96 阅读 · 0 评论 -
js变量提升 函数名与变量名重复的时候以函数名为主
var txt = "hx"; function hello() { var txt; fn(); //world 函数名与变量名重复的时候,以函数名为主 var fn = function() { alert("hello"); }; function fn() { ...原创 2019-12-05 11:09:27 · 300 阅读 · 0 评论 -
const 类型的变量(是可以被修改的)
可以将一个对象 赋值给另外一个变量 const obj = { name:'zs', age:18 } console.log(obj) obj.name = 'lisi' console.log(obj) // obj 被修改成功 {name: "lisi", age: 18} const objNew = obj ...原创 2019-12-05 11:09:03 · 1219 阅读 · 0 评论 -
数组去重方法总结
new Set(),用来去重数组。Set 数据结构,类似数组,区别在于它所有的成员都是唯一的,不能有重复的值。它本身是一个构造函数。 答案:let arr = [1, 2, 2, 3];let set = new Set(arr);console.log(set); 结果如下图所示let newArr = Array.from(set);console.log(newArr); ...原创 2019-12-04 18:03:48 · 543 阅读 · 0 评论 -
serilizeUrl函数(提取 URL 中的各个 GET 参数(参数名和参数个数不确定),将其按 key-value 形式返回到一个 json 结构中)
简单的面试题:例如一个url http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段 JS 程序提取 URL 中的各个 GET 参数(参数名和参数个数不确定),将其按key-value 形式返回到一个 json 结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}...原创 2019-11-13 15:30:40 · 218 阅读 · 0 评论 -
js中改变原数组的方法
pop(),push(),shift(),unshift(),sort(),reverse(),splice() var s1 = ["s", 1, 4, 9, 0, 1]; let mm = s1.pop(); console.log(s1); //["s", 1, 4, 9, 0] 原来的数组发生了改变。方法返回的是被删除掉的元素 ...原创 2019-10-16 18:27:09 · 878 阅读 · 0 评论 -
js实现字符串翻转
方法一: // 字符串翻转 字符串没有反转函数,但是数组有 reverse函数,可以将字符串转成数组,然后再转成字符串 let arr = str .split("") .reverse() .join(""); console.log(arr); // 654321方法二: function reverseStr(param) { ...原创 2019-10-16 17:04:56 · 986 阅读 · 0 评论 -
js实现交换两个变量的值(不使用临时变量)5种方式
let a = 5; let b = 7; 方法一:加减法: a = b - a; b = b -a; a = a + b; 或者: a = a + b; b = a - b; a = a - b; 方法二: 乘除法: a = a * b; ...原创 2019-10-16 16:47:12 · 1232 阅读 · 0 评论 -
javascript学习经验技巧
JavaScript经验总结小技巧一.点击按钮切换1.设置flag 0,12.使用toggle方法(如果有的话)二.循环精灵图1.在循环的时候不能直接加 “-”,而是要"0-" + index + “px”;2.精灵图是 用图片来作为盒子的背景,所以是改变 他的backgroundPosition三:background与background-image的区别:1.backgrou...原创 2019-08-03 13:40:38 · 212 阅读 · 0 评论