JavaScript
friend_ship
这个作者很懒,什么都没留下…
展开
-
RxJS——合并数据流
RxJS的合并操作符,concat,merge,zip三个操作符。原创 2022-12-31 12:33:42 · 1173 阅读 · 0 评论 -
JavaScript中this的指向
this的指向大致可以分为以下4种:作为对象的方法调用。作为普通函数调用。构造器调用。Function.prototype.call 或 Function.prototype.apply调用。原创 2022-12-30 14:37:01 · 780 阅读 · 0 评论 -
RxJS初认识
RxJS的运行就是Observable和Observer之间的互动游戏。 Observable就是“可以被观察的对象”,即“可被观察者”,而Observer就是‘观察者’,连接两者的桥梁就是Observable对象的函数subscribe。原创 2022-12-25 14:14:21 · 867 阅读 · 0 评论 -
JavaScript到底算不算函数式编程语言?
JavaScript不算一个纯粹意义上的函数式编程语言,但是JavaScript中的函数有第一公民的身份,因为函数本身就是一个对象,可以被赋值给一个变量,可以作为参数传递,由此可以很方便地应用函数式编程的许多思想。RxJS兼具函数式和响应式两种编程方式的特点原创 2022-12-25 13:53:47 · 817 阅读 · 0 评论 -
对JavaScript对象解构的理解
ECMAScript6新增了对象解构语法,可以在一条语句中使用嵌套数据实现一个或多个赋值操作。简单地说,对象解构就是使用与对象匹配的结构来实现对象属性赋值。原创 2022-12-25 13:41:49 · 182 阅读 · 0 评论 -
JavaScript数据结构——栈(Stack)
数据结构——栈(Stack)原创 2022-12-17 17:36:08 · 266 阅读 · 0 评论 -
postcss postcss-pxtorem将px转为rem的实现
postcss与postcss-pxtorem将px转为rem的使用原创 2022-12-07 19:38:30 · 972 阅读 · 0 评论 -
JavaScript通过队列和双端队列实现击鼓传花游戏
JavaScript通过队列和双端队列实现击鼓传花游戏原创 2022-12-05 22:25:42 · 531 阅读 · 0 评论 -
【小技巧】实现数组浅复制的六种简单方式
数组浅复制的实现方式原创 2022-12-03 10:10:08 · 417 阅读 · 0 评论 -
一看即懂的JavaScript位运算
JavaScript位运算详细介绍,一看即懂原创 2022-09-30 14:52:06 · 851 阅读 · 0 评论 -
package.json文件中常见的版本号及限定符
在package.json文件中经常会见到类似^0.1.0,~0.1.0,0.1.0和>=之类的限定符的版本号。原创 2022-08-29 14:20:41 · 2566 阅读 · 0 评论 -
递归与尾递归的对比,及尾递归的优势
递归与尾递归的对比与原理原创 2022-05-18 20:42:44 · 347 阅读 · 0 评论 -
节流与防抖
事件节流与防抖,及节流防抖的结合原创 2022-03-27 18:51:40 · 540 阅读 · 0 评论 -
if-else还是switch及策略模式
首先,条件判断到底是该用if-else还是switch,似乎是所有编程语言都存在的讨论。// if语句:if ( val == 0) { // 对于0的相关处理} else if(val == 1) { // 对于1的相关处理} else if( val == 2) { // 对于2的相关处理} else { // 对于其他情况的相关处理}// switch语句:switch(val) { case 0: // 对于0的相关原创 2022-03-20 16:21:09 · 940 阅读 · 0 评论 -
常见上传文件对应的文件类型
文件格式 MIME文件类型 docx application/vnd.openxmlformats-officedocument.wordprocessingml.document doc application/msword xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet原创 2021-11-01 18:00:57 · 3176 阅读 · 0 评论 -
根据某一个字段值,返回数组中部分有效数据
场景:当数组数据中status状态类型较多时,只需要其中某几个状态,需要通过状态值返回仅需要的数据时。如:status:状态值为2,4,6是需要进行展示的示例代码如下:const showData = [2,4,6]; // 状态值需要进行展示/*** res 为返回的原始数据* showData.includes(item.status) 返回需要进行展示数据;如被过滤掉的数据较少时,可以采用取反操作*/const modalData = res.filter(item =>原创 2021-08-07 15:02:59 · 546 阅读 · 0 评论 -
数字字符串转换为数字数组
示例代码如下:const num = "2,3,4";const numArr = num ? num.split(',').map(t=> +t) : []当num为""时('').split(',').map(t=> +t); // [0]**当num为数字字符串时,一定要判断是否为空原创 2021-08-07 14:51:55 · 742 阅读 · 0 评论 -
字符串json对象转换为字符串,并以分号;隔开
通常情况下,我们拿到的字符串数据为json格式时,需要按要求进行转换,示例代码如下:const obj = "{\"firstStr\":\"我是第一个字符串\",\"secondStr\":\"我是第二个字符串\"}"Object.values(JSON.parse(obj) || '{}').join(";")// "我是第一个字符串;我是第二个字符串"具体执行过程:...原创 2021-08-07 14:40:54 · 1565 阅读 · 1 评论 -
js 中的toString()和join()方法的区别
当数组需要转换为字符串时,两个方法都可以。第一种:toString() 方法可把数组转换为字符串,并返回结果。语法:arrayObject.toString()说明:当数组用于字符串环境时,js会调用这个方法将数组自从转换为字符串。但是在某些情况下,需要显式的调用该方法。 let arr = [1, 2, 3, 4] console.log(arr.toString()) // 1,2,3,4第二种: join()方法用于把数组中的所有元素放入一个字符串。元素通过指定分隔符进行分割原创 2021-04-21 14:59:19 · 2169 阅读 · 0 评论 -
数组扁平化的几种实现方式
以一个三维数组[1, 2, [3, 4, [5, 6, 7]]]为例,实现扁平化:第一种方式:递归let arr = [1, 2, [3, 4, [5, 6, 7]]]function flattern(arr) { var res = []; arr.map(item => { if (Array.isArray(item)) { res = res.concat(flattern(item)) } else {原创 2021-04-21 14:20:00 · 230 阅读 · 0 评论 -
js中字符串截取substring()、substr()、slice()的区别
在js中字符串截取常用的三个函数:第一个 substring() 方法用于提取字符串介于两个指定下标之间的字符。语法: stringObjec.substring(start, stop)参数介绍 参数 描述 start 必需。一个非负的整数,表示截取字符串的开始位置。 stop 可选。一个非负的整数,表示截取到某个字符串的前一个字符;如果省略该参数,表示截取到字符串结尾。 let str = "hello world";co...原创 2021-04-21 13:48:12 · 324 阅读 · 0 评论 -
JavaScript 浅拷贝、深拷贝知识点整理
JS中,数据类型分为基本数据类型和引用数据类型,对于基本数据类型来说,它的值直接存储在栈内存中,而对于引用来说,它在栈内存中仅仅存储来一个引用,而真正的数据存储在堆内存中。一、基本数据类型var a = 1;var b = a;b = 3;console.log(a); //1console.log(b); // 3可以发现对于基本数据类型,我们将一个基本类型的值赋予a变量,接着将a的值赋予变量b;然后我们修改b,可以看到b被修改了,而a的值没有被修改,两个变量都使用的是独立数据。原创 2021-04-16 16:31:25 · 213 阅读 · 0 评论 -
浅谈JavaScript函数中this的指向
1.setTimeout 中的thislet timeout = setTimeout(function(){ console.log(this); // window对象})let timeout = setTimeout(() => { console.log(this); // window对象})2.普通函数中的thisfunction Demo() { console.log(this) // window对象}Demo()//原创 2021-04-12 18:11:43 · 136 阅读 · 0 评论 -
with语句使用的经典案例
with语句被用于在访问一个对象的属性或方法时避免重复使用指定对象引用。通过下面的js代码,展示说明:var date_time = new Date();with(date_time){ let a = getMonth() + 1; console.log(getYear() + '年' + a + '月' + getDate() + '日')}下面的代码是不使用with的写法:var date_time = new Date();let a = date_ti原创 2021-03-29 18:03:40 · 175 阅读 · 0 评论 -
js 常见的内存泄露有哪些又如何避免呢?
一、未声明/意外的全局变量let a = 'ceshi';function test() { b = 'aaa'; // b成为一个全局变量,不会被回收} test()解决方法: 在js开头添加 'use strict';二、遗忘的定时器(setTimeout/setInterval)let someData = getData()setInteval(function() { let node = document.getElementById('node'原创 2021-03-11 18:15:32 · 198 阅读 · 0 评论 -
Promise 和 setTimeout 的执行顺序
分析下面代码的执行顺序:function sleep(duration) { return new Promise(function(resolve, reject) { console.log('222') setTimeout(resolve, duration) })}console.log('111')sleep(2000).then(() => console.log('333'))这是一段非常常用的封装方法。分析代码执行原创 2021-03-11 16:46:54 · 244 阅读 · 0 评论 -
ES6新特性 async/await的异步处理经典案例:红绿灯效果
对async/await的理解:async/await的运行时基础是Promise,async函数必定返回Promise,我们把所有返回Promise的函数都可以认为是异步函数。async函数是一种特殊语法,特征是function函数之前加上async关键字,这就定义了一个async函数,我们可以在其中使用await来等待一个Promise返回结果。下面是一个红绿灯效果为例的代码,要求圆形div按照绿色3秒,黄色1秒,红色2秒循环改变背景色<!DOCTYPE html><原创 2021-03-11 15:57:22 · 700 阅读 · 0 评论 -
浅谈 js设计模式—— 适配器模式
定义:提供一个不同的接口,充当中间转换功能。作用:解决两个对象间的接口不兼容的问题。使用适配器模式后,原本由于接口不兼容不能工作的两个对象可以一起工作。生活的例子:iPhone7之后的耳机接口从3.5mm圆孔接口更改成为了苹果专属的接口。那么以前的圆孔耳机就需要一个转换器(适配器),才能在新买的iPhone上听歌儿。前端开发框架 vue computed属性,ES6类提供一个新的满足需求的方法,都是是适配器模式的实现场景。vue computed 属性,适配器模式实现方式:<!D原创 2021-01-15 11:24:12 · 268 阅读 · 0 评论 -
字符串与数组之间的互换
数组转变为字符串拼接,如下:let arr = ['aaa','bbb'];let str = ' ';if(typeof(arr) === 'object') { str = arr.join('/')}字符串转变为数组,如下:let str = 'aaa,bbb';let arr = [];arr = str.split(',')原创 2020-08-28 11:32:38 · 855 阅读 · 0 评论 -
vue form表单port端口号校验
port正则表达式:/^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/vue form表单对port端口号验证,代码如下:<template> <div> <el-form v-model="form" :rules="rules" ref="form"> <el-form-item label="端口号" prop="port">原创 2020-05-17 17:33:43 · 1759 阅读 · 2 评论 -
vue form表单匹配一个或者多个IP地址校验
IP正则表达式:/^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/vue form表单,代码如下:<template> <div> <el-form v-model="form" :rules="rules" ref="form"> <el-form-item label="IP地址" prop=".原创 2020-05-17 17:21:34 · 2608 阅读 · 0 评论 -
如何终止forEach循环?
let arr = []; try { arr.forEach(item => { if(item=='') { foreach.break = new Error("StopIteration"); } }) } catch (e) { if (e...原创 2020-04-15 17:27:41 · 2695 阅读 · 0 评论 -
对选择日期添加约束条件,选择今天以前或以后的日期限制
获取今天及以前的日期:return time.getTime() > Date.now() - 8.64e6;获取今天之后的日期(不能获取今天的):return time.getTime() <Date.now() - 8.64e6;获取今天及以后的日期:return time.getTime() < Date.now() - 8.64e7;获取今天之前...原创 2020-03-31 16:07:26 · 756 阅读 · 0 评论 -
sessionStorage存储数据和获取数据的方法,包含字符串和对象
存储字符串:sessionStorage.setItem('key', value)获取字符串:sessionStorage.getItem('key')存储对象: user为用户对象let obj = JSON.stringfy(user);sessionStorage.setItem('user', [obj])获取对象中的参数:如:idlet id = JSON.pa...原创 2020-03-27 18:44:37 · 3427 阅读 · 0 评论 -
for循环考点儿 搬砖问题:36块砖,36个人,男人一次搬4块,女人一次搬3块,两个小孩儿一次抬1块,请问共需几个男人,几个女人和几个小孩儿?
代码如下: for (let x = 1; x <= 9; x++) { for (let y = 1; y <= 12; y++) { for (let z = 1; z <= 36; z++) { if (x + y + z == 36 && 4 * x + 3 * y + 0.5 * z == 3...原创 2020-03-20 16:56:12 · 9219 阅读 · 11 评论 -
JavaScript有哪些函数,有什么区别?
函数声明使用function关键字。函数体共包含4种。分别介绍一下: 普通函数体 function foo() { // 函数体} 异步函数体 async function foo() { await sleep(3000)} 生成器函数体 function* foo() { yield 1; yield 2...原创 2019-10-29 14:21:58 · 524 阅读 · 0 评论 -
JavaScript通过异步生成器函数实现无限生成器
定义一个异步生成器函数,异步生成器函数每隔一秒打印一个数字无限循环,实现无限生成器。通过 for await of 循环访问异步生成器函数。 代码如下:function sleep(duration) { return new Promise(function(resolve,reject) { setTimeout(resolve,duration) ...原创 2019-10-29 11:33:24 · 417 阅读 · 0 评论 -
input file获取文件路径
html代码段:<input type="file" @change.prevent.stop="upload">vue 中script代码段:data() { fileName: ''},methods: { upload(event) { let files = event.target.files[0]; th...原创 2019-10-28 16:36:58 · 19264 阅读 · 18 评论 -
JavaScript立即执行函数的一个经典案例
立即执行的函数表达式,用来产生作用域。下面的这段代码非常经典,日常开发中常常见到,为文档添加了20个div元素,并且绑定了点击事件,打印它们的序号。for(var i = 0; i < 20; i ++) { void function(i){ var div = document.createElement("div"); div.in...原创 2019-10-25 10:17:25 · 259 阅读 · 0 评论 -
在JavaScript中,为什么0.1+0.2 != 0.3
console.log(0.1+0.2==0.3) // false结果为false,说明两边不相等,这是浮点运算的特别。正确的比较方法是使用JavaScript提供的最小精度值,检查等式两边差的绝对值是否小于最小精度。console.log(Math.abs(0.1 + 0.2 -0.3) <= Number.EPSILON) // true...原创 2019-10-16 18:06:58 · 390 阅读 · 0 评论