前端
文章平均质量分 53
筱语悠里
这个作者很懒,什么都没留下…
展开
-
字符串转驼峰方法
基于数组的方法function cssStyle2DomStyle(sName) { let name=sName.split("-"); for(let i=1;i<name.length;i++){ name[i]=name[i].charAt(0).toUpperCase()+name[i].substring(1); } return name.join(''); } let str="font-size-css"; console.log(c.原创 2020-09-09 19:55:29 · 779 阅读 · 1 评论 -
map,filter, for...of... 的区别
对于过滤数组而言,map返回的是布尔值,filter则是返回满足条件的值。想改变数组的时候用map,想对数组进行过滤用filter,累加数组用reduce原创 2020-09-04 11:35:18 · 503 阅读 · 0 评论 -
transition ,animation学习
.tra { margin: 20px auto; width: 100px; height: 200px; background-color: #99CCFF; transition: all 1s; color: #AA00FF; font-size: 30px; } /* .tra:hover{ transform: translateX(100px); } */ .trans { transfor原创 2020-08-14 19:14:13 · 131 阅读 · 0 评论 -
网页布局时,三张背景图片出现白线的解决办法
项目开发中发现两个背景图片之间有一条白线如如下图所示。在分析代码之后发现白线是由设置了水平居中margin:0 auto造成:所以我们可以使用负margin技术设置margin-top:-1px解决这个问题。.center { height: 855px; width: 1920px; background: url('https://static-ftcms.jd.com/p/files/5.jpg') center no原创 2020-08-06 10:51:01 · 3653 阅读 · 0 评论 -
input输入框短信验证码处理
项目开发中实现获取手机验证码的功能,短信验证码的特点1.只有六位 2.只能为数组。第一种方法,我们可以用正则+maxlength的方式去实现 <input placeholder="请输入验证码" v-model="code" maxlength="6" onkeyup="value=value.replace(/[原创 2020-08-05 10:45:41 · 2706 阅读 · 0 评论 -
扩展运算符(三点运算)运算是不是深拷贝呢?
今天我们学习一下ES6中最好用的 …三点运算符是不是深拷贝。let obj = { person:{name:"dxy",age:22}, age: 18 }let obj3 = { ...obj } console.log(obj3); obj3.person.age=30; obj3.age=10; console.log(obj);//不是深拷贝 如上图所示,有多层对象时,三点运算符就无法实现深拷贝了。...原创 2020-07-23 10:50:04 · 1979 阅读 · 0 评论 -
前端中对含有数字字符串的处理及展示
项目开发中可能会遇到这个问题,当你从后端拿到一个字符串例如:“12个月”,数字和字符在页面中显示不同的样式。如下图所示:那么如何对字符串进行处理呢?首先用parseInt()拿出数字,需要考虑到不含数字字符串的处理,也就是非有效数字NaN的处理;使用正则表达式匹配其中的字符。代码如下: let str="12个月"; let str1=parseInt(str); if(!NaN(str1)){ str1=parseInt(str); }原创 2020-07-08 14:47:11 · 946 阅读 · 0 评论 -
前端开发中静态文本发生乱码,如何解决呢??
在前端项目开发的过程中,在css中content属性设置文本,浏览器中偶现乱码现象,查了很多博文,尝试使用<meta http-equiv="content-type" content="text/html; charset=UTF-8" />却不能很好的解决这个问题。然后我采用了 Unicode 将中文转成Unicode很好的解决了这个问题。.con::before { content: "\67e5\770b\8be6\60c5"; //查看详情 margin-ri.原创 2020-07-07 09:52:11 · 389 阅读 · 0 评论 -
前端面试常考数组去重方法
数组的几种去重方法站在巨人的肩膀上,利用Set集合的属性实现去重function unique (arr) { return Array.from(new Set(arr)) } console.log(Array.from(new Set([1,4,5,5])));通过定义新数组来实现数组去重,可通过数组的includes()或者indexof方法判断数值是否属于新数组let a=[1,2,2,3,3,4];function red(arr){ let arr1=原创 2020-07-03 18:00:21 · 382 阅读 · 0 评论 -
javascript函数中的this指向
1. this是什么?一个关键字, 一个内置的引用变量在函数中都可以直接使用thisthis代表调用函数的当前对象在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的2. 如何确定this的值?test()obj.test()new test()test.call(obj)*本质上任何函数在执行时都是通过某个对象调用的function Person(color) { console.log(this) this.color = color;原创 2020-06-28 17:49:08 · 139 阅读 · 0 评论 -
网页布局中margin-top失效,解决办法
项目开发中,想要要实现如下布局,但是我们发现直接设置子元素的margin-top属性,其会作用于父元素,垂直方向的margin值通常会叠加。 <div class="father"> <div class="son"></div> </div>.father { box-sizing: border-box; width: 300px; height: 300px; margin:原创 2020-06-19 16:12:09 · 707 阅读 · 0 评论 -
用JSX语法糖需要渲染出一组数据,实现和v-for相同的效果
在项目开发中,通常会用到jsx语法糖,但是vue中的指令在其中是失效的。想要实现一下效果图:在项目开发中数组的map方法超高频,我们的解决方案也是用到了map方法map方法:https://blog.csdn.net/LzzMandy/article/details/104524798 formatter: data => { return ( <ul>原创 2020-06-18 20:27:18 · 752 阅读 · 1 评论 -
:class 和 :style 的使用技巧
总结在项目开发中三目运算的推荐使用方法:class:class="'true'?'dot':'hidden'":class="[三元表达式?'classA' :'classB']" style<:style="{'属性名':三元表达式}"> <:style="{'color': 三元表达式 ? '#FF5757':'#757575'}"><el-button :style="{'color':status === true ? '#FF5757':'#原创 2020-06-09 17:21:09 · 496 阅读 · 0 评论 -
前端面试知识总结
CSS盒子模型中用什么属性改变宽度和高度(box-sizing)margin属性:(collaps)opsition:属性及其区别JS闭包及其作用ES6 class面向对象继承箭头函数的特征JS事件委托DOM点击行为冒泡及捕获AJAXAJAX调用的APIAJAX如何实现跨域过程cookies session之前的关联及如何清楚cookies...原创 2020-03-12 15:20:59 · 481 阅读 · 0 评论 -
前端数据交互中JS中find,include方法的使用场景
前端开发最重要的事情之一是处理后台展示的数据,很多时候我们要对拿到的数据进行一些处理才能符合页面的显示规则,今天就和大家分享一下用find和include来筛选符合条件的数据。find()没有改变原始数组的值,讲找到的第一个元素返回场景:我们从后台拿到一组数组对象,如:`[{name:“dxy”,age:18},{name:“zhang”,age:28}]我们需要对某条数据进行一些操作(状态判断等等),前端可能通过点击事件拿到操作的数据对象,这时我们就需要用find方法找到点击事件操作的对象属原创 2020-06-03 10:02:38 · 4246 阅读 · 0 评论 -
ul列表li标签前加带有颜色的圆点技巧
项目开发中,ul列表布局时li标签带有样式圆点??应该如何去处理呢?一般情况下,默认的li标签前是有黑色小圆点,但是其颜色无法改变。在布局初始化的时候我们会去掉默认样式。所以,今天就为大家讲解一个小技巧来解决这个问题。代码如下:利用伪标签,使用css中的圆角border-radius: 50%;来实现 li:before { content: ""; width: 6px; height: 6px; disp原创 2020-06-01 09:54:59 · 16266 阅读 · 0 评论 -
今天面试官问了我函数节流和函数防抖,前端优化中常用的方法
为什么需要节流和防抖呢例如:百度输入框,输入框中的内容发生改变时,就会发送服务端请求;若输入hello(连续输入),会发送5次请求,这样会影响浏览器的性能。此时,我们需要改变其发送请求的次数降低浏览器的压力,输入hello发送一次请求就可以。在js使用函数节流或者函数防抖和函数节流来解决上述问题,下面我们就来了解一下这两种方法函数防抖什么是函数防抖[debounce]?函数...原创 2020-05-07 16:26:34 · 267 阅读 · 0 评论 -
Promise对象异步编程的一种解决方案学习总结
什么是PromisePromise对象用于表示一个异步操作的最终状态(完成或失败)以及其返回的值同步任务会阻塞程序执行(alert、for、…)异步任务不会阻塞程序执行(setTimeout、fs.readFiles)特点:对象的状态不受外界影响‘一旦状态改变就不会再变,任何时候都是这种结果.回调函数与Promise回调函数实现元素平移function moveTo(el...原创 2020-05-05 21:20:00 · 410 阅读 · 0 评论 -
JavaScript中数组对象方法总结
如何创建一个数组解构赋值及三点运算符(展开语法)数据出战入栈操作splice与slice实现数组的增删改查includes方法的实现原理find与findIndex循环操作方法forEachiteratorevery与somefilter 过滤元素的使用map and setreduce方法...原创 2020-04-27 22:21:44 · 461 阅读 · 0 评论 -
CSS3你用的最多的特性有哪些呢?
选择器nth-of-typenth-child定义和用法nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素。n 可以是数字、关键词或公式。nth-of-type(n)和nth-child(n)的用法类似,不过nth-of-type(n)必须指定子元素的标签类型参考文章-----》盒子模型 box-sizingbox-sizing:conte...原创 2020-04-27 20:56:24 · 224 阅读 · 0 评论 -
事件代理,事件委托,事件捕获,事件冒泡每次面试官都要提及,检验一下自己到底掌握了没有
什么是事件什么是事件对象?事件对象就是一个系统自动创建的一个对象当注册的事件被触发的时候, 系统就会自动创建事件对象事件对象的注意点:在高级版本的浏览器中, 会自动将事件对象传递给回到函数在低级版本的浏览器中, 不会自动将事件对象传递给回调函数在低级版本的浏览器中, 需要通过window.event来获取事件对象注册事件var oBtn=getElementByoId("btn...原创 2020-04-26 23:45:40 · 397 阅读 · 0 评论 -
JavaScript中的内置类
JS中的内置类Object 对象类(基类)Number数字类0,NaN 1.3都是数字类的实例StringBooleanNullUndefinedArray每一个数组都是Array的实例RegExpFunctionDateHTMLCollection 每个元素集合都是它的实例NodeListClassList…EventTargetnode(element(...原创 2020-04-23 23:34:02 · 364 阅读 · 0 评论 -
vue 实例的生命周期实现过程
一 什么是生命周期 从vue实例的创建、运行、到销毁的时间,总是伴随着各种各样的的事件,这些事件,统称为生命周期生命周期钩子:就是生命周期事件的别名而已生命周期钩子=生命周期函数=生命周期事件二 生命周期的分类创建期间的生命周期函数:beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和 methods 属性created:实例已经在内存中创...原创 2020-04-23 16:41:43 · 469 阅读 · 0 评论 -
vue中的数据劫持实现方法
代理的作用 1. 拦截和监视外部对对象的访问 2. 降低函数或类的复杂度 3. 在复杂操作前对操作进行校验或对所需资源进行管理两种实现方法Object.defineProperty数据劫持 let obj={ name: '' } Object.defineProperty(obj,'name',{ get(){ ...原创 2020-04-22 17:23:03 · 842 阅读 · 0 评论 -
JavaScript核心知识点总结(一)
JS数据类型数据类型 2+7基本数据(值)类型: number string Boolean null undefined symbol bigint(ES6 )引用数据类型:object(普通对象 数组对象 正则对象,日期对象 Math数学函数对象) function数据类型检测typeof 检测数据类型的逻辑运算符typeof null //object 所...原创 2020-04-22 23:33:23 · 472 阅读 · 0 评论 -
ES6中Symbol类型
介绍Symbol属性对应的值是唯一的,解决命名冲突问题Symbol值不能与其他数据进行计算,包括同字符串拼串for in, for of遍历时不会遍历symbol属性使用:调用Symbol函数得到symbol值let symbol = Symbol();let obj = {};obj[symbol] = 'hello';传参标识 let symbol = Sy...原创 2020-03-21 21:56:45 · 141 阅读 · 0 评论 -
小白前端学习之路
我的前端学习之路原创 2020-04-24 22:20:01 · 387 阅读 · 0 评论 -
JavaScript核心知识总结BOM DOM(三)
DOM/BOM 及事件处理机制一 DOM/BOM核心操作二 DOM2级事件的核心运行机制三 事件对象四 浏览器底层渲染机和DOM的回流和重绘五 事件传播机制和事件代理六 发布订阅者模式...原创 2020-04-25 11:21:44 · 424 阅读 · 0 评论 -
JS中晕头转向的继承,今天就来一步步搞定它
JS中的继承主要是根据原型链来实现,我们今天就来一步步剖析每一种继承方式的优缺点方式一:原型链继承套路定义父类型构造函数给父类型的原型添加方法定义子类型的构造函数创建父类型的对象赋值给子类型的原型将子类型原型的构造属性设置为子类型给子类型原型添加方法创建子类型的对象: 可以调用父类型的方法关键子类型的原型为父类型的一个实例对象 sub.showSupperProp()...原创 2020-04-25 10:56:56 · 213 阅读 · 0 评论 -
前端学习中的面试问题总结
前端面试题总结1.HTML, HTTP,web综合问题1、前端需要注意哪些SEO合理的title、description、keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有所不同;description把页面内容高度概括,长度合适,不可过分堆砌关键词,不同页面description有所不同;keywords...原创 2020-04-24 12:26:25 · 1394 阅读 · 0 评论 -
JavaScript核心知识总结(二)
目录面向对象(OOP)和this的处理单例设计模式类和实例原型和原型链new运算符的实现机制call/apply/bindconstructor 构造函数设计模式JS 中五种 this 情况综合梳理JS中四大继承方案面向对象(OOP)和this的处理单例设计模式类和实例原型和原型链new运算符的实现机制call/apply/bindconstructor 构造函数设计模式JS 中五...原创 2020-04-23 23:32:49 · 419 阅读 · 0 评论