
JavaScript
赵乘风_i
前端搬砖
展开
-
近期遇到的数组对象处理
一个数组对象,根据另一个数组的ids来过滤数据。arrF.filter(i => arrZ.includes(i.id))判断一个数组是否是另一个数组的 子集arrF.every(i => arrZ.includes(i))数组对象选择出一个与之id相等的对象使用 find 方法会更加优雅一些,使用 filter也是可以的,但需要多一步操作,因为filter返回的...原创 2020-04-26 18:44:50 · 282 阅读 · 0 评论 -
JavaScript基础复习(六) 对象,原型(链),继承
最近在复习基础知识,这次整理的内容是JS对象,原型,原型链,继承~本次知识的复习是基于《JavaScript高级程序设计》加上自己的理解,如果有什么问题,望不吝赐教。对象什么是对象: 无序属性的集合,其属性可以包含基本值,对象或者函数。 在js中就是 key-value 的键值对对象的属性类型数据属性访问器属性数据属性包含一个数据值的位置,可以读取和写入。包含4个特性[Con...原创 2020-04-18 17:56:00 · 334 阅读 · 0 评论 -
JavaScript基础复习(十一) 异步编程
总是纠结js是异步还是同步?对于JS 异步还是同步这个问题,不需要纠结太多,在执行DOM渲染时,确实是同步执行的,也是为了安全起见,一步一步执行,如果上一步未完成,下一步是不会运行的。但本质还是单线程但是对于 网络请求 这样的场景,一个网络资源啥时候返回,这个时间是不可预估的,所以不能傻傻的等着,也就是这样,设计了异步,不管返回结果,执行后就执行下一步,上一步的执行结果什么时候返回,就什么时...原创 2020-04-14 18:04:55 · 283 阅读 · 0 评论 -
JavaScript基础复习(七) Ajax&跨域
Ajax原理通过 XMLHttpRequest对象来向服务器发送异步请求,从服务器获得数据,然后用JS操作DOM,从而更新页面。编写步骤创建AJAX对象 XMLHttpRequest打开一个连接 open(“GET”,URL,asnyc)发送数据 send();事件处理函数,处理服务器的响应结果 onreadystatechange实现步骤//创建ajax对象var...原创 2020-04-14 15:55:37 · 310 阅读 · 2 评论 -
JavaScript基础复习(九) 常见JS算法
排序算法AlgorithmAverageBestWorstextra spacestable冒泡排序O(N^2)O(N)O(N^2)O(1)稳定直接插入排序O(N^2)O(N)O(N^2)O(1)稳定折半插入排序O(NlogN)O(NlogN)O(N^2)O(1)稳定简单选择排序O(N^2)O(N^2)O(N^2)...原创 2020-04-14 15:49:28 · 326 阅读 · 0 评论 -
JavaScript基础复习(十) JS事件机制
事件用户交互行为,用户或浏览器自身执行的某种动作事件流页面接收事件的顺序,事件触发的顺序,分为 事件冒泡(子级先触发,冒泡到父级)和事件捕获(父级先触发,再到达子级) 先捕获->处于目标阶段 -> 再冒泡事件冒泡:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,子级元素先触发事件捕获:事件从最不精确的对象(document对象)开始触发,...原创 2020-04-07 17:42:52 · 279 阅读 · 1 评论 -
JavaScript基础复习(五) 作用域(链),闭包,this,执行上下文
作用域作用域: 变量与函数的可访问范围量分为全局作用域: 在代码中任何地方都能访问到的对象拥有全局作用域局部作用域: 一般只在固定的代码片段内可访问到。最常见的是在函数体内定义的变量,只能在函数体内使用。在函数体内,局部变量的优先级高于同名的全局变量。如果在函数内声明的一个局部变量或者函数参数中带有的变量和全局变量重名,那么全局变量就被局部变量所遮盖。声明提前:JavaScript...原创 2020-03-31 17:10:56 · 328 阅读 · 0 评论 -
JavaScript基础复习(四) 函数详解
创建函数的方式函数声明和函数表达式// 函数表达式 匿名函数 赋值给这个变量var foo1 = function(...){}// 函数表达式 命名var foo2 = function acc(...){}// 函数表达式 也就是立即执行函数(function(){...})// 函数表达式setTimeout(funciton timer(){...},200)/...原创 2020-03-31 17:08:48 · 295 阅读 · 0 评论 -
fileReader 读取文件内容
原创 2019-12-29 17:18:45 · 440 阅读 · 0 评论 -
JS精度丢失导致的问题及解决
遇到的问题:项目中出现了 17652.19 + 7673.78 - 25325.97 = -3.64 的问题,最后发现是JS精度丢失的问题,那么就先来看看这个结果是怎么产生的。产生原因:JavaScript 中所有数字包括整数和小数都只有一种类型 — Number。它的实现遵循 IEEE 754 标准,使用 64 位固定长度来表示,也就是标准的 double 双精度浮点数(相关的还有floa...原创 2019-10-13 14:00:19 · 18275 阅读 · 1 评论 -
jquery失去焦点与获取焦点事件blur() focus()
对于元素的焦点事件,我们可以使用jQuery的焦点函数focus(),blur()。focus():得到焦点时使用,和javascript中的onfocus使用方法相同。如: 代码如下 复制代码 $("p").focus(); 或$("p").focus(fn) blur():失去焦点时使用,和onblur一样。 如: 代码如下 复制代码...转载 2018-09-20 15:38:15 · 27307 阅读 · 0 评论 -
antd tree 选择子节点是否关联父节点
选择某个子菜单时,需要将父菜单也发送过去,后端要判断权限,如果只发子菜单,就做不到匹配,导致父菜单都不会显示在菜单栏。需要解决的问题是antd tree中,父子节点是受控的,默认如果只选择一个子节点,就只把这一个子节点放进数组,如果选择了父节点下的所有子节点,就会将父节点也放进去。现在需要的是,只选择一个子节点的时候,也将父节点放进去。但是antd tree组件没有提供这个属性。于是自己按照后...原创 2018-09-20 12:30:47 · 12364 阅读 · 2 评论 -
react项目中使用antd的form组件,动态设置input框的值
问题:创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了原因:点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了。解决办法:不使用initialValue设置动态更新的值,而是使用 this....原创 2018-09-14 19:31:54 · 34172 阅读 · 0 评论 -
如何保障前端项目的代码质量
对于中大型前端项目,项目规范与代码质量尤为重要。当功能需求变更或需要重构时,随心所欲的(糟糕的)代码可能带来比重新开发还麻烦的问题。1 前端项目代码中的常见问题1.1 凌乱的书写风格,阅读体验差这个问题不用作过多阐述,想必接手过他人代码的同学,多少都有些体会。简单来说,太过随意的代码会让强迫症患者难以容忍,难以阅读理解的代码有时甚至不如推倒重来。1.2 低质量的编码,bug 不断...转载 2018-09-10 11:05:49 · 3068 阅读 · 0 评论 -
向后台发送params时,某些字段值为空就不传
向后台发送params时,特别是在使用筛选项查询的时候,如果某个条件为空,我们的做法是传个空数组或空字符串,但是现在后台的要求是如果值为空,那就不传这个字段值。还有一种适用条件是,如果新建和编辑是同一个页面,那么就可以使用如下的方法,使用同一个params对象,避免在新建的时候传过去的params中有id:null,这种情况。解决办法:id:record.id||undefined...原创 2018-09-12 15:28:34 · 6350 阅读 · 0 评论 -
fetch使用formdata数据格式发送请求
修改请求content-type请求接口都是使用的封装好的request,对于post请求统一都是application/json。但是后台同学可能是为了能直接使用之前已有的接口,让我将仅仅这一个的接口请求改为formdata的提交形式,也就是application/x-www-form-urlencoded。之前所有请求都走的request,现在就要修改两种方式修改:1、在req...原创 2018-09-04 10:03:34 · 26770 阅读 · 2 评论 -
sessionStorage实现草稿数据存入和读取
实现一个功能:表单编辑的时候可以存入 sessionStorage中,如果没有点击保存,下一次或者刷新进入页面的时候可以读取session中的值填入表单中。使用的技术点当然是操作sessionStorage,主要用到以下几个API。sessionStorage.setItem(key, value) // 设置sessionsessionStorage.getItem(key) /...原创 2019-02-27 16:25:12 · 2614 阅读 · 0 评论 -
react 父子组件调用传值问题
问题:componentWillReceiveProps,在父子组件传值中,如果子组件不能在constructor中通过props拿到值,就使用这个挂载函数。如果需要在子组件中改变父组件传来的值,就直接修改,但是修改后如果更新了props的值,componentWillReceiveProps函数就会再调用一次啊,导致你要修改的值重新初始化,就达不到修改的效果。解决:在父组件中修改这个...原创 2018-08-27 20:21:32 · 2659 阅读 · 0 评论 -
怎么轻松学习JavaScript
js给初学者的印象总是那么的“杂而乱”,相信很多初学者都在找轻松学习js的途径。我试着总结自己学习多年js的经验,希望能给后来的学习者探索出一条“轻松学习js之路”。js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置对象、DOM。B:本身内容很多,如函数库、对象库就一大堆。C:混合多种编程思想。它里面不但牵涉面向过程编程思想,又有面向对象编程思...转载 2018-11-05 15:17:03 · 1643 阅读 · 2 评论 -
JavaScript基础复习(二) DOM详解
学过JavaScript的同学应该知道,JS由三部分组成,ECMAScript,DOM,BOM。这节我们详细了解一下DOM(Document Object Model 文档对象模型)。 很久不直接操作DOM了,现在要写还是需要回忆许久的。首先查阅了之前的笔记,列出如下导图,文章也将按照导图的点来进行详解。一、基础DOM1、DOM概述Document Object ...原创 2018-11-13 15:46:44 · 362 阅读 · 0 评论 -
JavaScript基础复习(一) 语言特性及数据类型
终于要开始写JS系列了,目标列了好久,导图也做了,但总没有行动,近来无事,总结一下这个系列的学习。零、是什么 JavaScript是前端必学语言,和HTML,CSS并称为前端三剑客,是一门运行在浏览器端的脚本语言,功能是操作DOM,处理数据,渲染特效等一、语言特性1、弱类型 说白了就是类型定义,对应的就是强类型,比如Java,C等都是强类型语言,在使用变量...原创 2018-11-08 17:05:57 · 556 阅读 · 0 评论 -
JavaScript基础复习(三) BOM详解
又来学习BOM了,哈哈,Boooooom一、BOM概述 BOM(Browser Object Model)即浏览器对象模型,是前端操作浏览器的核心,该对象提供了与浏览器交互相关对象结构。BOM由多个子对象组成,其核心为window对象,它是BOM的顶层对象。二、window 表示在浏览器环境中的一个全局的顶级对象,所有在浏览器环境中使用的对象都是wi...原创 2018-11-15 21:24:41 · 383 阅读 · 1 评论 -
react + antd 封装一个图片预览,旋转,查看原图组件
最近在项目中的一个需求是, 小图点击可以弹框放大,然后能查看原图,顺时针一直旋转,每次90度。实现方法:使用react开发,所以直接选用antd 的组件, Upload 。结合CSS3的旋转属性;查看原图可以直接使用window.open()打开新的标签页。实习代码: constructor(props){ super(props); ...原创 2018-11-26 20:31:47 · 15785 阅读 · 3 评论 -
过滤掉某个数组对象中 属性全部为某个值的 数组元素
JS数组操作方法问题: 过滤掉某个数组对象中 属性全部为某个值的 数组元素涉及的问题是 数组嵌套对象再嵌套数组aList && aList.filter( item => !(item.iList.every(({ state }) => state === 2) && item.iList.length > 0)...原创 2019-05-18 14:49:20 · 8743 阅读 · 0 评论 -
map出的数据拼接,使用;隔开,删除最后一个符号
问题: 后台返回一个数组,需要取到每个对象的name和sex,自己拼接成字符串,以 ; 隔开解决:1、 拼接出字符串,然后删除最后一个 ;号let asd = '';objList && objList.map(({ name, sex }) => { const sexN = sex && '('+ sex + ')'; retu...原创 2019-05-24 09:52:27 · 1427 阅读 · 0 评论 -
JavaScript基础复习(八) 字符串,数组操作
数组截取相关slice 截取 不会影响原始数组var arr = [1,2,3,4,5];// 截取 从 i 到 j的数组,不会改变原数组console.log(arr.slice(3)); // [4,5]console.log(arr); // [1,2,3,4,5]console.log(arr.slice(1,3)) // [2,3]...原创 2019-06-14 10:51:48 · 291 阅读 · 0 评论 -
彻底理解JavaScript的深拷贝,浅拷贝
是什么js中有基础类型和引用类型。基础类型是存储在栈内存中的,按值存储,按值访问。基本类型有Number,String,Boolean,Null,Undefined,Symbol引用类型是存储在堆内存中的,值是可变的。在栈中保存对应的指针(一个指向堆的引用地址),指向堆中实际的值。比如数组,对象,正则等,除了基本数据类型,都是引用类型了。基本类型的复制,是不会相互影响的。因为直接改变的就是...原创 2019-06-24 15:56:27 · 318 阅读 · 0 评论 -
JavaScript性能优化之小技巧
避免全局查找在一个函数中会用到全局对象存储为局部变量来减少全局查找,因为访问局部变量的速度要比访问全局变量的速度更快些?123456789functionsearch() { //当我要使用当前页面地址和主机域名 alert(windo转载 2017-07-16 15:18:50 · 436 阅读 · 0 评论 -
阿拉伯数字转汉字字符 js方法实现
index是1,2,3阿拉伯数字。但需求是显示一,二,三,四等汉字。switch case就没有必要去实现了, 有一种简易的方式,用到字符串的方法chartAt(),但只适用10以内。设置初始值的时候设置一个汉字的字符串 Han = '一二三四五六七八九十'然后在使用的时候 Han.chart(index) ,就可以拿到对应的汉字。 如果需要适用于所有的阿拉伯数字转汉字,那...原创 2018-08-08 16:59:48 · 6753 阅读 · 1 评论 -
经常遇见的正则校验
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。1. 校验基本日期格式 var reg1 = /^\d{4}(\-|\/|\.)\d{1,2}\1\d{1,2}$/; var reg2 = /^(^(\d{4}|\d{2})(\-|\/|\.)\d{1,2}\3\d{1,2}$)|(^\d{4}年\d{1,2}月\d{1,2}日$)$/; 2. 校验...转载 2018-08-15 18:09:11 · 317 阅读 · 0 评论 -
HTML,CSS,JavaScript知识树思维导图
最近师父布置的学习任务,就是构建知识树。一个周末终于完成了任务,有一些是网上有的,就直接用了,有些没有,就是自己总结的。整理的过程中发现前端的知识真是错综复杂,还有层出不穷的各种框架。任重而道远想要原稿的可以留言邮箱,统统发给你!PS:微信公众号 FEtoss回复 hcj 即可获取下载地址正文~HTMLCSSJ...原创 2018-03-14 13:32:03 · 10336 阅读 · 45 评论 -
前端自动化 package gulp webpack浅析
package.json NPM包的相关信息,包含各种所需要的模块以及项目的配置信息包括 名称 , 版本 , 许可证等在执行npm init时,会自动下载所有依赖项。 { "name" : "packageDemo", //当前包(项目)的名字 "description" : "learn npm package.", "keywords" : ["npm", &quo原创 2018-03-14 10:48:04 · 310 阅读 · 0 评论 -
jQuery获取Select选择的Text和 Value(转)
一、基础取值问题例如1、设置value为pxx的项选中 $(".selector").val("pxx");2、设置text为pxx的项选中 $(".selector").find("option:contains('pxx')").attr("selected",true); 注意:之前$(".selector").find("转载 2018-01-08 16:13:19 · 4287 阅读 · 0 评论 -
前端资源分享(从入门到精通)
分享一波资源 上个博客分享了我这一段时间来学习前端的方法以及春招秋招的经历。话不多说,上一波干货。很多人说以下资源失效了。最近重新写了一篇文章,收集了这些资源 https://mp.weixin.qq.com/s/vnzApo412HWLXrQfBcZQzAps: 有什么问题可以问我,我一定知无不言言无不尽哈哈;想要前端资源或其他开发资源,我这还是有一些的。...原创 2018-01-08 15:03:27 · 5118 阅读 · 9 评论 -
input type="checkbox" 选中传值,不选中传值
最近在使用form表单时,出现了一个问题,checkbox如果选中会传true,没选中就什么都不传,但是这不是想要的效果呀,希望做到选中时传true,不选中时传false。那么就有以下两种方法1.<input name="public" type="checkbox" onclick="javascript:document.getElementById('public'...原创 2018-01-07 22:09:14 · 27365 阅读 · 3 评论 -
ES6新特性浅析
首先先了解ES6的新特性有哪些let 块级作用域,可以解决es5中需要闭包或闭包引起的问题const 常量变量 就是当我们引用第三方库的时声明的变量,用const来声明可以避免未来不小心重命名而导致出现bugclass ,extends,super和es5中原型,原型链,继承,来对比学习首先,在ES5中,继承使用原型链,或构造函数来实现,最常原创 2017-08-04 15:33:18 · 555 阅读 · 0 评论 -
js中的定时器和计时器使用
最近写一些JS动画,常用到JS中的定时器(setTimeout & set Interval),查找相关资料,有些心得与大家一起分享。使用setTimeout & set Interval创建的定时器可以实现有趣且有用的功能,初学者可能对JavaScript的定时器有误解,认为它们是线程,其实Javascript是运行于单线程中的,而定时器仅仅是计划在未来的某个时间执行,而具体的执行时间是转载 2017-06-04 12:08:25 · 7786 阅读 · 1 评论 -
常见几种排序之javascript实现
各种排序方法都可以用JS实现,这里只是写了几种常见的JS实现,包括冒泡,选择,插入,希尔,归并,快排以及堆排序。还有各排序算法的时间复杂度和空间复杂度。Algorithm Average Best Worst extra space stable 冒泡排序 O(N^2) O(N) O(N^2) O(1) 稳定 直接插入排序 ...原创 2017-04-24 15:58:05 · 1153 阅读 · 0 评论 -
JS作用域、作用域链与闭包详解
作用域就是变量与函数的可访问范围量作用域有全局作用域和局部作用域两种全局作用域:在代码中任何地方都能访问到的对象拥有全局作用域局部作用域:一般只在固定的代码片段内可访问到。最常见的是在函数体内定义的变量,只能在函数体内使用。在函数体内,局部变量的优先级高于同名的全局变量。如果在函数内声明的一个局部变量或者函数参数中带有的变量和全局变量重名,那么全局变量就被局部变量所遮盖。原创 2017-04-15 16:52:29 · 392 阅读 · 0 评论 -
Ajax异步请求
以前的web应用要涉及大量的页面创新:用户点击了某个链接,请求发送回服务器,然后服务器根据用户的操作再返回新页面。即使用户看到的只是页面的一小部分有变化 ,也需要刷新整个页面,这样不仅耗费响应时间而且用户体验极差。在2005年,Ajax诞生了,对页面的 请求以异步方式发送到服务器。而服务器不会用整个页面来响应请求,它会在后台处理请求,与此同时用户还可以继续浏览页面并与页面进行交互。你的脚本则可原创 2017-03-08 15:44:50 · 352 阅读 · 0 评论