JavaScript-成长之路
文章平均质量分 55
坏丶毛病
一只努力学习的web前端小菜鸟,欢迎大家一起学习进步。
展开
-
监听localStorage中值的变化实现跨页面通信
本次分享一个之前困扰很久的,跨页面之间的通信方式。以前跨页面通信,就拿我们之前vue项目中多页面为例,每个页面都是一个独立的vue实例,通过main.js初始化,各个页面之间的数据不互通,而通信方式最常见的方式是往缓存中存储值,其他需要得到这个值的页面通过定时器去实时查询缓存中该值的变化,然后进行通信。但是定时器终究不是一个好的实现方式,而定时器的时间长短设置多少都很有考究,时间太短太耗性能,时间太长的话,又会存在一段时间拿不到最新值的情况。现在有一个很方便的方式,那就是 监听,其他页面正常像以前一样原创 2021-06-15 23:31:26 · 3620 阅读 · 6 评论 -
处理数组空值
前言:大家是不是经常很头疼数据中存在一些诸如undefined、null等字符的情况呢?本文介绍如果快速过滤掉这些数据用map操作数组一般是很常见的使用方式,但是map需要我们返回一个值,我们通常会判断这个值是否存在,存在才会返回,如下:const cameraData = collect.map(item => { const res = await service.getCameraInfo(item.id); if(res) return res;})但是呢,eslint/snoa原创 2021-06-05 22:17:59 · 1828 阅读 · 0 评论 -
utc时间处理
需求:起初是为了处理不同地区的项目(如:迪拜项目),可能和我们东八区存在时区问题,导致项目部署到现场展示的是我们东八区的数据时间,如东八区数据入库的时间是 " 2020-12-29 12:38:33 ",但是放到迪拜实际这条数据对应的时间应该是 " 2020-12-29 08:38:33 "。所以为了避免这种情况,处理时间格式化之前就得首先设置时区。而每次人为配置时区比较麻烦,所以使用了moment自带的guess方法去获取当前所在的时区。但是为了适配后期需要修改时区的问题,所以抽离配置后可以人为去..原创 2021-05-09 20:22:54 · 761 阅读 · 0 评论 -
vue项目安装babel巧用es2020新语法
操作运算符:??对应babel插件:@babel/plugin-proposal-nullish-coalescing-operator方法介绍:当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。与逻辑或 || 运算符不同的是,逻辑或会在左操作数为 假值 时返回右侧操作数,可能会遇到隐式类型转换造成意外情况(如左侧操作数为 ’ ’ 或 0 时)const foo = null ?? 'default string';console.log(foo);..原创 2021-05-05 19:54:55 · 6728 阅读 · 6 评论 -
sort排序改变数组中的子项顺序
有时候,我们得到的数组并不是按照我们期望的顺序排列的,那么我们需要按照我们的需求把他们进行排序。例如:我们有个数组,我们希望按照从小到大的顺序排列const arr = [1, 3, 6, 768, 11, 42, 56];arr.sort((a,b) => a-b));console.log(arr); // [1, 3, 6, 11, 42, 56, 768]这里看...原创 2019-11-06 10:00:07 · 945 阅读 · 0 评论 -
js/es6判断对象是否为空,并判断对象是否包含某个属性
js判断对象为空以及有好几种方法了,但是个人觉得不是特别方便。比如:1、把对象通过 JSON.stringify 转为字符串,再判断字符串是否等于 " {} "2、for in循环,判断key是否存在3、jq的方法es6已经帮我们很好的解决了此类问题。es6针对对象增加了3个新方法(数组也有):(1)、Object.keys:返回一个数组,成员是参数对象自身的(不含继承...原创 2019-10-21 10:25:01 · 31795 阅读 · 0 评论 -
数组超实用的常见方法:find、findIndex、some、every
这里介绍几个数组常用的而且超级实用的方法,主要都是用来获取数组中符合条件的某个值1、find:给定条件,返回数组中第一个满足该条件的值,之后的值不再进行检测,当没有找到满足该条件的值时,返回undefinedlet arr = [ { name: '小明', sex: '男', age: 23 }, { name: ...原创 2019-09-29 12:14:26 · 16407 阅读 · 3 评论 -
es6实现伪数组转数组
伪数组:拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解),并且不具有数组所具有的方法我们需要把它转为真正的数组才能使用一些数组的方法。Array.from:该方法用于将两类对象(伪数组)转为真正的数组:类似数组的对象和可遍历对象(包括es6新增的数据结构Set和Map)下面我们看一个类数组对象,并使用es5的方法和...原创 2019-09-17 10:43:13 · 2442 阅读 · 0 评论 -
js数组复制给另一个空数组,改变其中一个,另一个数组也会改变
场景:在vue中,我在data定义了变量,接收到了后台的数据,数组类型我把它传递给了子组件,但是我并不想直接改变这个数据于是我定义了一个空的数组,把当前数据赋值给了它。但是,我们都知道,数组所指向的是内存地址,直接赋值会使它们指向同一地址。(深拷贝和浅拷贝)那么问题就来了,当我改变其中一个数组的值,另一个数组也会随之发生变化。其实解决办法最简单粗暴的办法就是循环数据数组,然...原创 2019-09-03 09:50:47 · 11499 阅读 · 5 评论 -
js交换数组中2个元素的位置,实现排序功能
原始数据:数组中有三个关于电影的对象数据const movies = [ { title: 'a', year: 2018, rating: 4. 3 }, { title: 'b', year: 2018, rating: 4.7 }, { title: 'c', year: 2018, rating: 4.9 }];需求:需要根据评分(rating)的高低,...原创 2019-07-25 09:50:01 · 3774 阅读 · 0 评论 -
js中复制对象的属性值给新的对象
我们有一个对象,且包含很多属性值和方法,但是我们想把它的内部属性复制给一个新的对象时,我们如何去做呢?你可能会说直接 a = b就可以了。no no no,这样两个对象其实指针指向的还是一个内存中的对象,当一个发生变化的时候,另一个也是变化的,这并不是我们想要的结果。那么,以三种方法来看看具体实现过程吧。如下,有一个circle对象,其中包括一个属性值,一个属性方法const...原创 2019-07-05 17:10:32 · 16382 阅读 · 0 评论 -
JavaScript中的dom对象和jQuery对象的相互转换
可能大家在开发中,使用原生获取dom对象进行相关操作的时候,一些原生的方法并不能满足我们的需求,这时我们可能会使用到jQuery,但是dom元素并不能直接使用jQuery的方法,这时我们就需要先把原生dom对象转换为jQuery对象,而有时候也可能需要我们把jQuery对象转化为dom对象进行相关操作,所以这里就涉及到两个对象的互相转换1、jQuery对象转换为dom对象因为jQuery对...原创 2019-03-08 09:44:58 · 571 阅读 · 0 评论 -
JavaScript中Number的数值范围以及判断
在日常开发中,我们可能会忽略掉Number类型的取值范围,因为它的取值范围足够大,也足够小(怎么感觉怪怪的),但是当我们的开发涉及到特别大的数值计算时,难免出现超出范围的问题,尽管可能性很小,但是为了严谨,我们也不得不避免这个问题。那么我们先来说说Number的取值范围。Number.MIN_VALUE:最小值,值为5e-324Number.MAX_VALUE:最大值,值为1.7976...原创 2019-03-12 09:34:40 · 6360 阅读 · 0 评论 -
mock.js模拟数据实现前后端分离
众所周知,在日常开发中,前后端分离是最常见的开发模式,前端完成页面渲染,后端提供接口数据。但是起初项目刚开始,后端还没有写好接口数据,前端要构建页面,还得考虑结构以及后期真实数据的问题。所以前后端统一接口数据和格式是必要的。而当统一好接口数据和格式后,前端就可以通过mock.js来模拟对应格式的数据,以此来完成页面的搭建,当后端完成接口和数据后,因为前期数据格式都是规范好的,所以只要去...原创 2019-03-25 10:15:13 · 687 阅读 · 0 评论 -
控制台打印带样式的文字
今天给大家分享个好玩的。大家想必平时都会在控制台打印东西,用来测试一些东西。但是大家直达怎样在控制台打印出我们想要的带样式的文字嘛?带大家来看看。console.log('%c 何以解忧,唯有暴富!!!','color:white;font-size:50px;text-shadow: 0px 0px 5px green;');注:必须带 %c然后在第二个引号中写上对应的...原创 2019-03-19 09:24:35 · 1651 阅读 · 0 评论 -
原生JS实现不固定行和列的表格
之前有个需求,就是需要一个不固定行和列的表格,第一行的所有列的标题内容,用来表示数据对象中的key,而表格中的其他行,分别显示对应key的value。起始显示一行一列的表格th,然后根据用户是否输入值,动态增加行和列,每次根据倒数第二行是否有值,以此来判断是否要新增行,每次根据倒是第二列是否有值,以此来判断是否要新增列,然后根据行和列的值是否清空,以此来判断是否要删除行和列。代码部分:...原创 2019-04-01 09:44:25 · 2092 阅读 · 2 评论 -
js设计模式-观察者模式来模拟vue的双向数据绑定
vue的双向数据绑定大家应该很熟悉了,当一方的值发生改变时,另一方绑定的值也会随之变化,用起来是挺嗨的。但是在原生中我们怎么使用这种机制呢?最近有个需求是通过对接websocket获取后台服务器实时变化的值,推送给web端使用。基于这个需求,我使用到了js中的设计模式-观察者模式。那么,让我们来一起了解一下吧。先来看看具体机制://发布订阅模式的代码var observ...原创 2019-04-19 09:50:00 · 513 阅读 · 2 评论 -
js中的with语句
学习过js的童鞋都知道js中我们常用的一种类型是对象。let obj = { a:"aa", b:"bb", c:"cc"}而提到对象,我们要获取它中的属性值,可以使用如下方法:// 一:let a = obj.a//二:let b = ojb["b"]好吧,这不是今天要说的重点。我们知道,我们取出对象中的每一个属性值,我们都需要obj.....原创 2019-05-10 10:00:44 · 10795 阅读 · 1 评论 -
js数组splice删除某个元素爬坑
先来看下几个概念:// splice:返回从原始数组中删除的项(如果没有任何删除,则返回空数组) // 当指定2个参数时,表示删除 // 当指定3个参数,且第2个参数为0时表示插入 // 当指定3个参数,且第2个参数为1时表示替换本次就拿删除举例,本身我们想删除数组中的某个指定元素,我们需要知道它所在数组中的下标,我们可以用 数组.indexOf获取它所在的...原创 2019-06-12 10:06:21 · 6265 阅读 · 0 评论 -
this指向问题
this指向,是我们在开发中不得不关注的一个点,当我们进行事件处理时,如果疏忽this的指向问题,可能会发生意想不到的错误。那么,让我们来了解一下this吧。this呢,是函数的内置对象,所以,this只能出现在函数里this的四种指向:当this所在的函数是事件处理函数时,this是当前事件源(即DOM对象) 当this所在的函数是构造函数时,this是new出来的对象(即Ja...原创 2019-03-10 21:02:58 · 894 阅读 · 0 评论