JS
前端三疯
这个作者很懒,什么都没留下…
展开
-
Generator异步方案
Generator 函数 是一种懒函数,相比普通函数而言,前面多个 *,但是使用起来大不同。首先先创建generator 实例,然后调用next 方法,让函数进行运行。会返回当前yield后的值 和 generator实例状态。当我们通过next 传值时,会将值赋给 上个yield 的结果并且返回下一个yield后的值。通过generator.throw() 方法主动抛出异常使用Generator 函数构造异步函数生成器方法封装上边方法有个局现性,要手写各种情况,不智能啊,可以用递归解决原创 2022-11-26 10:08:10 · 269 阅读 · 0 评论 -
页面加载进度
在我们切换目录路径时,如果页面还未加载完成,通常我们使用nprogress 显示加载动画。原创 2022-11-20 18:57:59 · 78 阅读 · 0 评论 -
网页全屏模式
全屏我们通过快捷键来实现,在显示世界中,我们也可以通过API来实现。原创 2022-11-20 18:39:45 · 254 阅读 · 0 评论 -
JavaScript中bind、call、apply语法必知
bind、call、apply主要用于改变函数内部的上下文。bind方法会返回一个函数,方便后续调用;而call、apply方法会直接调用,当然也有参数的不同。对于传参 apply 需要将参数包装成数组依次传递给原始函数;bind、call则和原始函数传参形式一致。例如:let obj = { name: "小李", trajectory: function(from, to){ console.log(`${this.name} from ${from} to ${t原创 2021-08-19 21:26:21 · 110 阅读 · 0 评论 -
JavaScript运行模式
单线程JavaScript是单线程。JavaScript被定义成单线程,是和它起初功能有关,主要用于操作DOM。原创 2021-09-19 13:15:43 · 692 阅读 · 0 评论 -
ES6_class必知知识
在ES6 之前,我们实现类大部分是通过 构造函数 和 继承 的方式来实现。在ES6之后,出现class关键字,可以让我们快实现类,今天我们先不管class内部实现,先学习一下语法方面的知识。下面我们实现一个最简单的类 和 实例:class Point { constructor(x, y) { this.x = x; this.y = y; } play() { console.log("我会玩") }}let p原创 2021-09-05 17:00:33 · 69 阅读 · 0 评论 -
获取树数据的本级和子级
在我们做项目期间,肯定会遇到根据登录权限或一些限制 来处理树类型数据的场景,本文介绍 如何根据条件获取自己 和 子级数据。假如原始数据为:let originTrerData = [{ code: "330000", name: "浙江省", children:[ { code: "330100", name: "杭州市", children:[ { code: "330101", name: "上城区" }, { co原创 2021-09-05 15:41:17 · 407 阅读 · 0 评论 -
in Vs hasOwnProperty 判断属性是否存在
在原型继承过程中,会遇到一个问题是,某个属性是对象本身的 还是 继承下来的那 ? 如果有哪位同学对原型链知识有点遗忘,可以点击原型链这样还搞不懂,拿砖拍你自己吧,别拍我查看一波。in 关键字in 关键字用来判断对象的自有属性和继承来的属性是否存在function Foo() { this.name = "胡三疯";}Foo.prototype.nationality = "中国"let foo = new Foo()console.log('name' in foo) // tr原创 2021-09-05 14:10:20 · 217 阅读 · 0 评论 -
原型链这样还搞不懂,拿砖拍你自己吧,别拍我
很多初学者接触原型链总以为很难,很高大上,其实不然,只要是搞懂几个属性,原型链就可明明白白的理解构造函数当我们创建 对象时,我们需要定义构造函数。构造函数 有什么特殊吗?然而并没有,就是普通的函数,只不过是我们人为的将首字母变为大写。当我们创建对象时,在执行构造函数前 加 new后得到 对象实例,这时候就有 原型链的 故事了。function Foo(name) { this.name = name; this.nationality = "中国"}let foo = ne原创 2021-09-04 19:42:28 · 102 阅读 · 0 评论 -
一文了解函数组合
前言当一个功能由多个函数嵌套实现时,就会写出类似洋葱形式的代码:h(f(g(x)))个人并不认为,洋葱形式代码有什么不好,但是如果层数太深,估计维护代码人员就要骂娘喽相比较洋葱形式代码,有一种类似管道形式的代码,在组合函数和复用细粒度函数方面,可能更有优势...原创 2021-08-31 21:31:20 · 241 阅读 · 0 评论 -
一文搞懂函数柯里化
啥子是柯里化函数柯里化 是根据老外的名翻译而来,个人认为应该叫 参数颗粒化更合适一些。举一个小栗子,写一个是否成年 的函数,如下function exceedLevel(level, age) { return level < age;}console.log(exceedLevel(18, 20));console.log(exceedLevel(18, 30));console.log(exceedLevel(18, 12));上边的代码每次都要传递参数 18,是不是有点烦原创 2021-08-26 23:32:08 · 455 阅读 · 0 评论 -
编程中常见英语
在 编程中 我们是不是经常碰到两种比较尴尬的情况:查看英文api 时傻傻看不懂 或阅读困难在编程过程中,定义变量时抓耳挠腮在编程中的英语含义,有时候和通用含义不太一样,这里叫 编程英语吧,本篇会总结在编程过程中经常碰到的英语单词 和 含义,持续更新~~accept 接收arguments 参数invoke 调用 例子:invoke function – 调用函数remaining 剩余的...原创 2021-08-26 22:21:41 · 404 阅读 · 0 评论 -
函数式编程
前言最先了解函数式编程是从React开始的,后面Vue3 出现Composition API,使用之后发现函数式编程是真香,感觉这种编程范式跟有利于代码的组织和维护。因此,就带大家了解一下函数式编程的。可能大家在项目编程过程中也有用到,没有去关注这一点。啥是 函数式编程 ?我们常听说面向过程编程、面向对象编程,其实这些包括函数式编程是编程范式。编程范式 可以理解为编程的风格。 在一个项目中 我们可能用到多种编程范式。面向对象编程:把事物抽象成类和对象,通过封装、继承和多态来演示事物之间的关联。原创 2021-08-26 20:50:33 · 54 阅读 · 0 评论 -
合理使用记忆函数,优化程序性能
import { memoize } from "lodash-es";function fee(distance) { console.log("打印", distance); return distance * 5 + 500;}function _memoize(fn) { let cache = {}; return function () { let key = JSON.stringify(arguments); if (cache[key]) {原创 2021-08-24 21:05:32 · 79 阅读 · 0 评论 -
学习Promise,这些知识点就够了
用法promise对象是通过new Promise(arg) 而来,对于传递的arg参数是由要求的,arg是处理器函数,这个处理器函数有接受两个函数作为参数–resolve和reject,通过调用resolve函数将promise的状态变为fulfilled,通过调用reject函数将状态变为rejected。let promise = new Promise((resolve, reject)=>{ resolve(10); // reject(new Error("promsie erro原创 2021-07-28 19:47:58 · 311 阅读 · 0 评论 -
巧用 &&优化代码
在我们写代码的时候,我们是否遇到这样一个场景:当某个变量有值时,进行某些操作,通常情况下我们的代码是这样的:if(value) { operate()}其实我们可以利用 && 的短路和隐形转换(其他类型数据转化为布尔类型)的特性来简化代码,具体&&的用法,可以参考逻辑与(&&),因此代码就变为这样滴:value && operate()...原创 2021-07-08 19:50:51 · 212 阅读 · 0 评论 -
ES Module必知
ES Module 是模块化的一种方式,除IE 外,其他主流浏览器都支持通过下面方式加载模块<script type="module" src="..."></script>默认延迟加载模块,执行时机,在文档解析之后,触发DOMContentLoaded事件前执行。对于浏览器加载的时序,我们新建一个index.html 和 index.js 例子来说明:index.html<body> <div id="foo">hello world&原创 2021-07-04 00:26:29 · 565 阅读 · 0 评论 -
JS中堆和栈
什么是栈和堆栈和堆的主要作用存储变量,根据变量值得不同存储的位置也不同在JS中,栈主要是存储基本类型的变量,包括String、Number、Boolean、Undefined、Null 和 对象类型的指针地址;堆主要用于存放对象类型的变量假如有以下基本变量:let name = '胡三疯'let age = 18let isMan = truelet idCard = undefinedlet address = nulllet educationBackground = { scoo原创 2021-06-21 20:17:42 · 209 阅读 · 0 评论 -
JS中两个吊炸天的操作符(?? 和 ?.)
今天在某个项目中,看到两个陌生的操作符?? 和 ?,感觉比较有意思,就查了一下资料发现分别叫:空值合并操作符(??)和 可选链操作符(?.),就找资料学习了一下,发现这两个操作符可以帮助我们在实际项目中偷不少懒空值合并操作符(??)在说 ?? 之前,我们先说一下 逻辑或操作符(||) ,估计大家很熟悉。当||左侧表达式为假值时,返回右侧操作数的值,否则返回左侧的值。||的工作原理就是,先把|| 左侧表达式的值进行隐式类型转化为Boolean类型的值,若转化后的值为true,就返回左侧的值,反之,返回右原创 2021-06-21 09:07:56 · 1483 阅读 · 2 评论 -
一个有意思的let面试题
今天看到一个面试题: let des = "我在外边" let obj = { des: "我在里面", foo: function() { console.log(this.des) } } let bar = obj.foo; bar();这个bar()调用后会打印出什么?本以为是考 this,前两天刚好总结过this,自以为这方便还阔以。大眼一看这肯定打印 我在外边,还想骗我写我在里面。作为一个谨慎的程序员,我就写了一个d原创 2021-03-29 10:18:26 · 197 阅读 · 2 评论