JS
JS是世界上最辣鸡的语言
Silencer_1
这个作者很懒,什么都没留下…
展开
-
JS中的reduce
基本用法reduce(function(total, currentValue, currentIndex, arr), initialValue)注意点&小技巧currentValue为遍历时的当前值,注意原始数据格式无法确定数组长度时,填好initialValue初始值,在回调中处理好意外数值、格式遍历前,可以考虑使用filter、map等处理原始数组,数据流动会更加清晰,便于维护数组的高阶函数确实好用,但for才是正道demo以下demo只是简单的思路,实际开发中需要自原创 2021-05-27 16:18:41 · 239 阅读 · 0 评论 -
关于localStorage的思考: js可能会搞崩一台电脑
前言周所周知,js在浏览器(客户端)运行的时候,往往只能影响到当前标签页,就算写的死循环,充其量也只能让整个浏览器崩溃直到有一天,我发现localStroage是储存在C盘里的(大约是为了读写更快吧),于是,奇怪的知识增加了.jpeg思路localStroage是有限制大小的,大约是2-5MB,但是它是永久储存的,所以可以用多个标签页储存打开标签页的动作未免太明显,会引起用户警觉,所以用一个隐藏掉的iframe不断地打开不同的域名,ip,再利用获取到的window对象写入localStroage原创 2020-07-06 10:01:35 · 11654 阅读 · 3 评论 -
Axios取消请求ajax请求
应用场景用户需要快速请求,比如抢购,前一次的请求数据是毫无意义的,直接取消就完事了接口返回数据占用同一个dom,比如快速切换tab后,前一次请求比后一次请求响应慢,这时的tab页已经切过去了,可是数据却是前一个tab页的Axios中的使用/** index.js */// 如果有前一次请求在,先取消this.cancel && this.cancel('message')this.$axios({ url, method, // 实原创 2020-07-02 15:23:08 · 11924 阅读 · 0 评论 -
前端壁咚!HTML!
元素displayblockinlineinline-blocktableflexflex-inline行内元素多个标签存在 一行宽高 属性值不生效块级元素默认为 100% 宽行内块元素宽高属性值生效,多个标签存在一行显示;替换元素(暂定)如 <img>,由加载进来的媒体替换以决定它的显示CSSbackground 属性...原创 2020-06-03 15:15:08 · 11859 阅读 · 0 评论 -
JS箭头函数的使用注意事项
this的指向普通函数:this 一般就是谁调用的,就指向谁,或者用 call 、 apply 等方法改变指向作为构造函数调用的时候, this 指向通过 new 关键字创建的实例箭头函数this 指向上下文,因为他没有自己的 执行上下文利用这个特性,在箭头函数作为类的方法时,可以直接用 this 获取类的实例对象构造函数箭头函数没有自己的 执行上下文 ,不能用作构造函数对箭头函数使用new关键字,报错: TypeError: xxx is not a construct原创 2020-06-08 08:48:46 · 12254 阅读 · 0 评论 -
JS字符串(String)的常用方法总结
ES5String.fromCharCode返回 Unicode 对应的字符串charAt返回指定索引处的字符, 与 [] 调用一致charCodeAt返回指定位置的字符的 Unicode 编码(0 - 65535)fromCharCode将 Unicode 编码转为一个字符concat连接字符串, 不改变原字符串slice(start, end)提取指定位置的字符串, 不改变原字符串substring同上, 但不支持负数substr原创 2020-06-04 14:43:25 · 12020 阅读 · 0 评论 -
JS对象(Object)的常用方法总结
没有对象? new 一个啊方法Object.create()接受一个对象作为返回对象的原型new Object() 原型直接指向 ObjectObject.assign()把第二个及以后的参数作为对象浅拷贝到第一个参数中,返回合并后的对象Object.keys返回一个迭代对象Object.values同上Object.entries同上Object.getPrototypeOfObject.setPrototypeOf(obj,prototyp.原创 2020-06-04 14:42:32 · 12039 阅读 · 1 评论 -
JS数组(Array)的常用方法总结
ES5concat(不改变原数组)传入一个以上的参数,参数会被转为数组,返回连接后的一个数组join (不改变原数组)传入一个字符串,作为分割符,返回分隔好的字符串push / unshift (改变原数组)传入一个以上的参数,参数会被转为数组,在数组的结尾/开头处添加元素,返回添加后的长度pop / shift (改变原数组)删除数组最后/第一个元素,返回这个元素slice (不改变原数组)第一个参数表示从何处开始获取,第二个参数表示从何处结束(负数为从后开原创 2020-06-04 14:41:20 · 11925 阅读 · 0 评论 -
正则表达式(RegExp)及其在JS中的使用
常用把你的猫放在键盘上让它走一圈一段完美的正则就写好了正数: /^[0-9]+(\.[0-9]+)?$/邮箱: /^.+@.+\..+$/JS 中String.match() 和 **RegExp.exec()**还返回两个属性, index : 匹配的第一个字符位置; input : 被检索的字符串原文String.search() : 接受一个字符串或者正则,返回匹配到的 第一个 字符的位置String.match() : 接受一个字符串或者正则,返回数组,或者N原创 2020-06-04 14:40:24 · 11978 阅读 · 0 评论 -
JS中一些常用的工具函数
Array转换为<li>标签并附加到给定ID的列表中const arrayToHtmlList = (arr, listID) => (el => ( (el = document.querySelector('#' + listID)), (el.innerHTML += arr.map(item => `<li>${item}</li>`).join(''))))();去除无效/无用值判断是否转换为 flaseconst原创 2020-06-04 14:39:13 · 11920 阅读 · 0 评论 -
JS工程化中模块的优雅导入
注意点require 不能直接导入用变量命名的路径字符串,可以用 require.contextrequire.context 有三个参数:匹配的路径目录,(从当前目录开始算起)是否深层遍历正则匹配,匹配出你需要的路径例子import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const routes = []const context = require.context('./router',原创 2020-06-04 14:38:05 · 11964 阅读 · 0 评论 -
JS里一些奇怪的知识
元素变为可编辑document.body.contentEditable=true监听屏幕方向 : window.orientationwindow.addEventListener("resize", () => { if (window.orientation === 180 || window.orientation === 0) { // 正常方向或屏幕旋转180度 // 竖屏 } if (window.orientation === 90 || wind原创 2020-06-04 14:36:53 · 12018 阅读 · 0 评论 -
对JS一点数据结构的感悟
浅克隆 & 深克隆栈在栈顶做操作,后进的先出, 基本 类型的数据(小)和指针存储在这里, 堆中,存储 引用 类型的数据所以, const ,Object.freeze等不能修改的其实是它的 指针浅克隆 的本质就是把 引用 类型的的指针指向同一个, 基本 类型会新开辟一个新的空间给它储存深克隆是相对于 引用 类型而言,意思就是要新开一个空间给它,而此时还需要考虑这个数据存储的 深度 ,比如数组中包含的一个对象,这时候就算遍历了数组,而这个数组中的对象还只是 浅克隆 而已(像不像原创 2020-06-04 14:36:03 · 11960 阅读 · 1 评论 -
JS的原型链 - 继承的一种实现
ES5/ES6 的继承ES5的继承(原型链继承)中,子类和父类的 __proto__ 都指向 [Function]ES6的继承(类的 extends ),子类的 __proto__ 会指向父类, 阮一峰 :子类必须在 constructor 方法中调用 super 方法,否则新建实例时会报错。这是因为子类自己的this对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用 super 方法,子类就得不到 this 对象原创 2020-06-04 14:35:10 · 11994 阅读 · 0 评论 -
JS中展开操作符的应用
基本操作这个就不写了移除对象的属性// 传入参数有待优化const delProp = ({ Prop1, Prop2, ...rest }) => rest属性排序const sortProp = object => ({ Prop1: undefined, ...object })有值的情况添加该属性更多操作有待研发...(Prop1 && { Prop1 })...原创 2020-06-04 14:33:38 · 12054 阅读 · 0 评论 -
async await 的大概
// 用 async 标识的函数在执行时遇到 await 标识的异步操作时会阻塞住,等待异步完成后继续执行// 执行完成后返回一个 Promise ,标识状态function getRamNum() { return new Promise( (resolve, reject) => { const sino = parseInt(Math.random() * 6 + 1) setTimeout(() => { resolve(sino) }, 300原创 2020-06-04 14:32:58 · 11791 阅读 · 0 评论 -
JS中if, else的优化思路
大体思路三元|| && ??如果是有规律的 key,可以用数组无规律的 key ,可以用对象的键值对的形式储存判断实例// 原意if (offsetTop < 0) { this.titleFixed = true} else { this.titleFixed = false}// 三元offsetTop < 0 ? this.titleFixed = true : this.titleFixed = false// 如果是要等于一个布尔原创 2020-06-04 14:31:41 · 12175 阅读 · 0 评论