js
CherryLee_1210
正在朝着自己梦想一步一步的努力的前行着
展开
-
js实现递归去重(适用对象数组,并且对象里面依然还包含下级children数组)
【代码】js实现递归去重(适用对象数组,并且对象里面依然还包含下级children数组)原创 2024-07-15 13:13:15 · 122 阅读 · 0 评论 -
moment.js的一些使用小场景
moment插件一些特定小场景的总结原创 2022-11-17 18:15:44 · 650 阅读 · 1 评论 -
ES10 中的 Object.fromEntries() 妙用
当我们在操作对象 key或value的时候,有如下表的方法Object.keys()生成一个对象key的数组Object.values()生成一个对象value的数组Object.entries()生成一个对象 key和value的二维数组Object.fromEntries()将 Object.entries()生成的二维数组专成对象这里我们重点讲一下 ES10 新提出的 Object.fromEntries()这个方法。首先是Object.entries(原创 2022-03-04 12:00:32 · 600 阅读 · 2 评论 -
JS中不使用toLowerCase()/toUpperCase()方法的情况下,讲字母转成小写/大写?
例如:将‘HELLO WORLD’转成‘hello world’。方法一、根据字典项循环匹配(较笨)let str = 'HELLO WORLD';// 转小写let dic = { 'A': 'a', 'B': 'b', 'C': 'c', 'D': 'd', 'E': 'e', 'F': 'f', 'G': 'g', 'H': 'h', 'I': 'i', 'J': 'j', 'K': 'k', 'L': 'l', 'M': 'm', 'N': 'n', 'O':原创 2021-10-27 16:52:20 · 342 阅读 · 0 评论 -
处理软键盘弹出问题
let isReset = false;document.body.addEventListener('focusin', () => { // 软键盘弹出的事件处理 window.document.body.style.position = 'fixed'; isReset = false;});document.body.addEventListener('focusout', () => { isReset = true; setTimeout(() =>原创 2021-04-25 17:38:27 · 244 阅读 · 0 评论 -
获取当前时间距离目标时间的年月
// 月份不足十位的补零function complementZero(num) { if (num >0 && num < 10) { return `0${num}` } else if (num >= 10 && num <= 12) { return `${num}`; }}// 获取当前时间距离目标时间的年月function getYearAndMonthOfMinus (ta原创 2021-04-07 11:59:59 · 252 阅读 · 0 评论 -
通用的事件侦听器函数
鉴于IE浏览器与普通浏览器在dom事件上的区别,特此封装一个事件监听函数来兼容彼此之间的却别。const EventUtils = { // 视能力分别使用dom0||dom2||IE方式 来绑定事件 // 添加事件 addEvent: function(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); }原创 2021-03-17 19:58:37 · 226 阅读 · 0 评论 -
小数点左边的整数每三位添加一个逗号,如 10000.9 转为10,000.9
// 方法一:function format(number) { return number && number.replace(/(?!^)(?=(\d{3})+\.)/g, ",");}// 方法二:function format2(number) { return number.toLocaleString('en');}原创 2021-03-17 18:21:43 · 316 阅读 · 0 评论 -
js判断是否为空对象
思路就是采用for in 循环。function isEmptyObject (obj) { for (const nameKey in obj) { return false; } return true;}let obj1 = {};let obj2 = { name: 'cherry'}console.log(isEmptyObject(obj1)); // trueconsole.log(isEmptyObject(obj2)); //原创 2020-12-24 20:33:25 · 141 阅读 · 1 评论 -
对数组中每个对象对某个值进行求和
当我们在进行一些求和操作的时候就会使用数组的reduce方法。let total = 0;let array = [1, 2, 3, 4, 5];total = array.reduce((prev, next) => { return prev + next;}, 0);console.log(total);例如我们数组里面是几个商品的价格,怎么去求商品总价呢开始我是这么处理的,代码如下let totalPrice = 0;let goodsList = [ { pric原创 2020-10-31 19:24:37 · 5225 阅读 · 3 评论 -
js 实现深拷贝 保留继承关系 可以实现各种类型的拷贝及实现递归拷贝
function deepClone(obj) { if (typeof obj !== 'object') return Object; if (obj === null) return null; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return ne...原创 2020-04-20 22:23:18 · 415 阅读 · 1 评论 -
js获取当日凌晨0:00:00与当日23:59:59
1、获取当日凌晨0:00:00(零时整)控制台效果如下:代码如下:new Date().toLocaleDateString()"2020/2/9"new Date(new Date().toLocaleDateString()).getTime()1581177600000new Date(new Date(new Date().toLocaleDateString()).get...原创 2020-02-09 22:21:46 · 2374 阅读 · 0 评论 -
js实现侧边栏拖动宽度伸缩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>可拖拽侧边栏</title> <style type="text/css"> .container { position: absolute;...原创 2019-12-31 16:00:05 · 2109 阅读 · 0 评论 -
关于CSS3动画中的animation自己遇到的问题
首先是animation动画的书写 先定义@keyframes@keyframes roll { 0%{ transform: rotateZ(0deg); } 100%{ transform: rotateZ(360deg); }}然后引用到animation中.double-coin{ color: #ff5369; displ...原创 2018-06-12 15:07:12 · 1176 阅读 · 0 评论 -
IE9及以下版本中兼容HTML5元素
记得要放到head中&lt;head&gt; &lt;!--[if lt IE 9]&gt; &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt; &lt;![endif]--&a原创 2018-07-25 09:30:23 · 287 阅读 · 0 评论 -
关于JS中文档碎片的理解
我们大家都知道,当我们在操作DOM的时候,是一个很耗性能的过程,尤其是改变DOM的结构就更加的消耗性能,但是有些时候我们不得不在DOM中添加内容,改变DOM的结构,此时我们就要减少DOM结构改变时的性能消耗,怎么减少性能消耗呢,这时我们就要引用“文档碎片”,其目的就是将我们每次增加的节点先存储在文档碎片中,在将文档碎片再添加到DOM结构中,这样将多次增加节点改变DOM结构,变了只改变一次DOM结构,原创 2017-12-11 23:45:18 · 672 阅读 · 0 评论 -
JS中for 循环 与 for in 循环的区别
首先得先介绍一下什么是for 循环,什么是for in循环for循环语法: for (设置初始值;设置循环执行的条件;步长累加){ //条件成立,执行循环体中的内容(循环体中存放的就是我们需要重复处理的事情)。}第一步:设置初始值第二步:验证(设置)循环能够执行的条件第三步:条件成立,执行循环体中的内容,不成立直接结束循环。第四步:每一次执行完成循环体中的内容,为了能够执行下一次的循环,做原创 2017-11-16 23:55:22 · 1656 阅读 · 0 评论 -
随机打乱数组
学习不能温故而知新,就总是在遗忘的路上。。。随机生成一个随机数是什么来着?数组的sort方法是是什么意思来着?再这么下去,都快忘了自己是谁了,Oh,My God!Math.random() // 随机生成一个0~1之间的随机数(包括0但不包括1)Math.round(Math.random(m-n)+n //生成一个m到n之间的随机数 export defa...原创 2019-04-28 14:29:00 · 283 阅读 · 0 评论 -
$(window).height() 和 $(document).height()的区别
$(window).height()代表了可见区域的大小相当于JS盒模型中的获取网页可视区域的高度document.documentElement.clientHeight||document.body.clientHeight;$(document).height()代表了整个文档的高度。相当于JS盒模型中获取当前页面的真实高度。document.documentElement.scrollHei原创 2017-12-10 01:59:33 · 566 阅读 · 0 评论 -
js加载时间线
1、创建一个document对象,开始解析web页面,解析html元素和他们的文本内容后添加element对象和text节点到文档中。这个阶段的document.readyState = “loading”。2、遇到link外部css,创建线程加载,并继续解析文档。3、遇到script外部js,并且没有设置,async、defer,浏览器加载并阻塞,等待js加载完成并执行该脚本,然后继续解...原创 2018-07-30 15:35:23 · 291 阅读 · 0 评论 -
在遍历中,for,for in,for of,forEach的区别。
无论在我们的平时学习练习中还是工作中,总是需要遍历一些我们想要的值。从{}中或是[]中。let arr = [1,2,3,4,5];arr.b='100';for (let i = 0; i &amp;lt; arr.length; i++) { //编程式 普通的遍历方式 console.log(arr[i]);}for(let key in arr){ //key会变成...原创 2018-08-15 11:56:18 · 373 阅读 · 0 评论 -
身份证匹配正则
var reg = /^\d{17}(\d|X)$/i;// 满足18位身份证号校验var str = '123123123123123123';var str1 = '12312312312312312x';var str2 = '12312312312312312X';reg.test(str); truereg.test(str1); truereg.test(st...原创 2018-08-28 11:53:22 · 1198 阅读 · 0 评论 -
js实现无缝向上滚动
说那么多干嘛,还是直接看代码吧。。。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">&l...原创 2018-09-11 19:45:01 · 1608 阅读 · 0 评论 -
关于MUI中禁用、启用上拉加载的探索
首先得明白一件事情,那就是MUI提供的禁用和启用的方法是不起作用的。。。 “MUI上拉刷新” -=-=-=-=-=-=-=-=-=-文档引用start-=-=-=-=-=-=-=-=-= 禁用上拉刷新 在部分场景下希望禁用上拉加载,比如在列表数据过少时,不想显示“上拉显示更多”、“没有更多数据”的提示语,开发者可以通过调用disablePullupToRefresh()方法实现类似需求,...原创 2018-09-13 16:46:47 · 2546 阅读 · 0 评论 -
mui在调起软键盘时,底部内容被推起的解决办法
在用mui做账号绑定的页面时,当软键盘被调起时,就会出现底部绝对定位的背景图被“推上来”。来两张效果图。图1是键盘没有被调起时的页面。图2是键盘调起之后,被挤压的背景图。(小米手机截屏时不会截取到软键盘,只好手机辅助拍照了。原创 2018-11-06 15:17:57 · 4620 阅读 · 1 评论 -
给json加注释
我们要知道的是在json文件中用传统的注释格式(// /**/)进行注释,是不符合json规范的。json里面有自己约定俗成的注释规范。1、在json文件中,采用"//",其value就是添加的注释内容。{ "//": "设置起始刻度, 目的是为了是数据展示不从零起始显示,突出数据的层次性, 例如所有数据中最小是60300,给一个58000", "min": "58000",...原创 2019-06-29 19:33:57 · 41999 阅读 · 1 评论 -
数组去重
今儿听周啸天老师讲解了一种数组去重方法,觉得非常的不错。我们可以通过在Array的原型上创建一个方法,以后可以通过调用这个方法就可以实现数组的去重了,不学要每次都得重写写一次!!!废话不多说直接撸代码:Array.prototype.myArrayWeighting = function myArrayWeighting(){ var obj = {};//定义一个空对象。 for(原创 2017-10-31 22:37:10 · 504 阅读 · 0 评论 -
函数的三种角色
函数一共有三个角色,普通函数、类、普通对象。 第一种角色:普通函数 在函数当做普通函数的时候有以下内容栈内存作用域链形参argumentsreturn。。。第二种角色:类实例私有属性和公有属性prototype“__proto__”。。。第三种角色:键值对操作。。。函数的三种角色没有直接的关系function(){}fn();new fn();fn.prot原创 2017-11-15 21:01:59 · 493 阅读 · 0 评论 -
对JS中Object.prototype.toString.call([value])的理解
通过获取Object原型上的toString方法,让方法中的this变为需要检测的数据类型,并且让方法执行。在我们使用toString检测数据类型,不管你是什么类型的值,我们都可以正常检测出需要的结果(此方法检测是万能的)。typeof不能具体的检测出是数组类型还是正则类型;instanceof(当前实例是否所属这个类)不能检测出基本数据类型,instanceof检测的原理是基于原型链检测的:只要当原创 2017-11-20 23:14:42 · 1024 阅读 · 0 评论 -
JS使用xxx.index=0 和 xxx.setAttribute(‘index’,0) 这两种设置自定义属性的区别?
在JS中有两种设置自定义属性的的方式:第一种是 xxx.index:是把当前元素当做一个普通对象,为其设置一个属性名(和页面中HTML没有关系)。 第二种是 xxx.setAttribute:是把元素当做特殊元素来处理,设置的自定义属性是和页面结构中的DOM元素映射在一起的。在JS获取DOM的元素对象,我们可以理解为两种角色 与页面中的HTML结构无关的普通对象 与页面HTML结构的存在原创 2017-11-14 23:31:18 · 1871 阅读 · 0 评论 -
JS中出现undefined与null几种常见情况
在我们执行JS的一些代码的时候,有的时候就会有一些结果出现null和undefined。我就为大家总结了一些常见的情况。undefined在变量提升(预解析)阶段,只声明未定义,默认值就是undefined。在JS的严格模式下(”use strict”),没有明确的主体,this指的就是undefined。函数定义没有返回值(return或者return后面什么也不带),默认的返回值就是und原创 2017-11-01 22:44:01 · 20548 阅读 · 6 评论 -
JS中字符串的方法
字符串中常用的方法: 在真实项目中经常操作字符串,此时我们需要掌握常用的的一些字符串操作方法。我会在下文中将每个方法前面添加一个str,代表字符串。目的是可以让大家更加好的理解字符串中常用到的方法。1、str.charAt() 返回指定索引位置的字符。 在这里我们需要注意的是: str[0]和str.charAt(0)都是获取第一个字符;在使用charAt无法获取有效字符的时候返回的是一个空原创 2017-10-24 16:56:34 · 449 阅读 · 0 评论 -
关于JS中的继承(三)
ES6中的类及继承首先我们先说一下,ES6中的类,在ES6中定义类如下代码所示。class Fn {//ES6中定义类用class关键字,而不是function constructor(){//构造函数 //=>constructor:Fn //=>这里面的 this.xxx=xxx 是给当前实例设置的私有属性 } xxx(){}//=>这里设原创 2017-11-10 00:39:41 · 259 阅读 · 0 评论 -
关于JS中的继承(二)
JS中的call继承在子类的构造体中,把父类当做普通方法执行,让父类方法中的this指向子类的实例。call继承的原理 把父类构造体中私有的属性和方法,原封不动复制了一份给子类的实例(继承完成后,子类和父类是没关系的)。call继承的细节 我们一般把call继承放在子类构造体中的第一行,也就是创建子类实例的时候,进来的第一件事情就是先继承,然后再给实例赋值自己私有的(好处:自己的可以把继承过来的原创 2017-11-10 00:31:01 · 260 阅读 · 0 评论 -
关于JS中的继承(一)
首先我们要知道什么是类的继承? 其实就是子类继承父类中的一些属性和方法。在JS中实现继承有多种方式,有原型继承、call继承、寄生组合继承、ES6中的类以及继承等几种方式。 接下来,我将一一介绍每一种继承方式。原型继承所谓原型继承,指的是让子类的原型指向父类的实例Children.prototype=new Parent();我们要注意一些细节: 一、我们首先让子类的原型指向父类的实例,再向子原创 2017-11-09 23:48:00 · 248 阅读 · 0 评论 -
浏览器内核及其分类
浏览器内核所谓的浏览器内核 作为一名前端开发工程师,会使用HTML/CSS/JS编写代码,在编写代码的时候遵循一些规范(W3C制定的规范) 浏览器开发商开发的浏览器,目的就是为了按照W3C的规范,识别出开发者开发的代码,并且在页面中绘制出开发者预想的页面和效果,通过GPU(显卡)显示出来的页面效果,我们把浏览器中识别代码绘制页面的东西称为”浏览器的内核或者渲染引擎”。 谷歌浏览原创 2017-10-23 11:22:41 · 590 阅读 · 0 评论 -
JS中的逻辑与(&&)逻辑或(||)
首先我们有这样一个问题,看看输出结果是什么。var num1 = 3;var num2 = 5;var sum1 = num1&&num2;var sum2 = num1||num2;console.log(sum1);console.log(sum2);这道题的答案是sum1=5 sum2=3;这道题答案原因的由来是因为: 在运算过程中,首先js 会将 && 和|| 两边的值转成B原创 2017-10-30 01:30:17 · 2020 阅读 · 0 评论 -
关于JS多态中的重载问题分析
在一些后台的面向对象的编程语言中,例如Java 、c#等里面出现的函数多态的重载的概念都是指的是,方法名相同,但是参数参数不同,叫做方法的重载。 上代码帮助理解。public void sum(int num1,int num2){ //CODE}public void sum(int num1){ //CODE}public void sum(int num1,strin原创 2017-11-08 22:46:51 · 441 阅读 · 0 评论 -
obj[age]和obj[‘age‘]有什么区别?
age:变量名,代表的是它存储的值。 ‘age’:常量,字符串的具体值。var age = 'name';var obj ={ name='zhufeng', age:8};console.log(obj.age); //=> 8console.log(obj['age']);// =>8console.log(obj[age]); //=>obj[age变量] =>ob原创 2017-11-07 23:25:52 · 4533 阅读 · 2 评论 -
JS中的函数初识
首先我们要了解函数是单线程的。函数分为两部分:创建函数和执行函数。 并且每一次执行函数都有执行结果。 函数是指一段在一起的可以做某一件事儿的程序,也叫作子程序(OOP)中的方法。 其实我们就可以认为函数是实现某一功能的方法。接下来我们先从创建函数说起吧。创建函数函数分为函数名和函数体 首先会在当前作用域中声明一个函数名(声明的函数名和使用var声明的变量名是一样的操作:var sum ; f原创 2017-10-29 23:09:14 · 477 阅读 · 0 评论