javascript
文章平均质量分 62
boss-qiu
这个作者很懒,什么都没留下…
展开
-
从 iterator 讲到 async/await
Iterator,即我们常说的迭代器。在许多编程语言中都有它的身影。而 JavaScript 在 ES6 规范中正式定义了迭代器的标准化接口。为什么需要迭代器这个问题嘛?需要从设计模式讲起了。我们知道设计模式中就有迭代器模式。迭代器模式要解决的问题是这样的:在遍历不同集合的时候(数组、Map、Set等),不同的集合有不同的遍历方式,每次都要针对集合的不同来重新编写代码。麻烦!懒惰的程序员们就想啊:是否可以有一种通用的遍历集合元素的方式呢?于是,迭代器模式诞生了。它是实现对不同集合进行统一遍历操作的一原创 2021-12-30 16:17:36 · 228 阅读 · 0 评论 -
js 继承的几种方式
首先,先写一个父类 Animal:function Animal(name) { this.name = name;}Animal.prototype.getName = function () { console.log(this.name);};// 测试用函数function test(Sup, Sub) { const o = new Sub(2, "name"); console.log(o); // 输出实例 console.log(o instanceof S原创 2021-12-28 17:59:48 · 260 阅读 · 0 评论 -
js实现单向链表
在js中存储多个数据的通常方式是使用数组,其实还可以使用链表这种数据格式来保存数据,但是原生js并没有提供链表这种特殊的数据格式在一些场景下,利用链表的的特性来解决一些算法类的问题是具有一定优势的。链表是什么先说说什么是链表,通常链表是由多个节点构成,每个节点都保存一个值(value),另外还保存了指向下一个节点的引用(指针next)上边的链表就由5个节点构成,其中第一个节点叫做链表的头部(head),最后一个节点叫做链表的尾部(tail)。我们猜想链表应该还具有一个length属性来记录链表长原创 2021-10-25 16:55:46 · 197 阅读 · 0 评论 -
从零开始实现一个promise(原理详解)
promise简单使用console.log(1);new Promise((resolve, reject) => { console.log(2); resolve("aaa");}) .then((value) => { console.log(4, value); return "bbb"; }) .then((value) => { console.log(5, value); return "ccc"; });co原创 2021-10-21 17:37:47 · 241 阅读 · 0 评论 -
js手写简易版本的Promise
原生Promise的基本用法const p = new Promise((resolve, reject) => { setTimeout(() => { resolve('我是resolve的值') }, 200)})p.then((value) => { console.log(`成功时时触发我:${value}`)}, (error) => { console.log(`失败时触发我:${error}`);})Pr原创 2021-10-09 14:58:20 · 131 阅读 · 0 评论 -
js实现构造函数继承的extend方法
现在有两个构造函数 Super 和 Child如何实现Child 继承 自Superfunction Super() { this.age = 12}Super.prototype.sayHello = () => { }function Child() { this.color = 'red'}Child.prototype.getColor = () => { }首先分别 new 一下两个函数控制台打印出两个实例,他们分别都有自己的实例属性以及原型原创 2021-10-08 09:51:59 · 872 阅读 · 0 评论 -
js构造函数继承实现原理
对象创建首先,我们知道对象有两种创建方式:字面量创建法// 字面量const p = { age: 23, weight: 60 }new创建法// 构造函数function Person(age, weight) { this.age = age this.weight = weight}const p = new Person(23, 60)console.log(p) // {age: 23, weight: 60}或者使用es6语法// 类c原创 2021-10-05 20:11:00 · 268 阅读 · 0 评论 -
js new的实现原理
new的使用方法new用来创建一个实例对象,其隐式原型__proto__指向构造函数的原型prototype1、在构造函数中使用new// 构造函数function Car(color, brand) { this.color = color this.brand = brand this.age = 0 // 默认返回实例对象 this}// 原型方法Car.prototype.getcolor = function () { return this.原创 2021-08-18 13:15:44 · 445 阅读 · 0 评论 -
十大经典排序算法(动图演示)
算法概述算法分类十种常见排序算法可以分为两大类:比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn),因此也称为非线性时间比较类排序。非比较类排序:不通过比较来决定元素间的相对次序,它可以突破基于比较排序的时间下界,以线性时间运行,因此也称为线性时间非比较类排序。算法复杂度相关概念稳定:如果a原本在b前面,而a=b,排序之后a仍然在b的前面。不稳定:如果a原本在b的前面,而a=b,排序之后 a 可能会出现在 b 的后面。时间复杂度:对排序数据的总的原创 2021-08-18 08:59:33 · 613 阅读 · 0 评论 -
js保留n位小数
先上完整代码,这里提供3种解决思路/** * 保留n位小数,四舍五入 * @param {Number} _m_ 原始数字 * @param {Number} _n_ 保留n位,默认2位 * @returns */function fixed(_m_, _n_ = 2){ const num = Number(_m_), n = Number(_n_); return num.toFixed(n) // 或者 // Number.prototype.toFixed.原创 2021-08-17 16:33:16 · 684 阅读 · 0 评论 -
js解决精度丢失问题
js精度丢失问题先上完整代码解析加法减法乘法除法总结先上完整代码const math = { /** * 加法 * @param {Number} a 加数 * @param {Number} b 加数 * @returns */ accAdd(a, b) { let m, n, x; // a的小数位数,b的小数位数,放大倍数 try { m = a.toString().split(".")[1].length; } catc原创 2021-08-17 15:49:35 · 1430 阅读 · 0 评论 -
js call方法实现原理
前言我们知道call方法可以改变this的指向使用方法如下const book = '《十万个为什么》'function log() { console.log('这本书是' + this.book)// this默认指向全局window对象}log() // 这本书是《十万个为什么》const instance = {book:'《从你的全世界路过》'}// 改变this指向instancelog.call(instance)// 这本书是《从你的全世界路过》log函数中使原创 2021-07-30 12:53:47 · 1244 阅读 · 0 评论 -
vue中v-model实现原理,几种实现思路
通过props接收value,作为input的property(dom属性),另外绑定input事件,通知父组件更新数据// input.vue<template> <input type="text" :value.prop="value" @input="notify" /></template><script>export default { props: { value: String },// 必须用 "value" 这个prop原创 2021-07-30 11:36:08 · 1229 阅读 · 0 评论 -
js bind方法实现原理
首先先了解下bind的使用方法(转MDN例子)bind() 方法创建一个新的函数 ,在 bind() 被调用时,这个新函数的 this 被指定为 bind() 的第一个参数而其余参数将作为新函数的参数,供调用时使用。语法:function.bind(thisArg[, arg1[, arg2[, ...]]])参数thisArg调用绑定函数时作为this参数传递给目标函数的值。arg1, arg2, …当目标函数被调用时,被预置入绑定函数的参数列表中的参数。返回值返回一个原函数原创 2021-07-29 11:56:47 · 1157 阅读 · 0 评论 -
es6 export 与 import完整用法
基本用法模块导入导出各种类型的变量,如字符串,数值,函数,类导出的函数声明与类声明必须要有名称(export default 命令另外考虑)不仅能导出声明还能导出引用(例如函数)export const str = '字符串'export const num = 123export const obj = { name: 'Tom', age: 24 }export const arr = [1, 2, 3]export const set = new Set([4, 5, 6])ex原创 2021-07-20 12:23:07 · 975 阅读 · 0 评论 -
vue的provide和inject使用方法及原理
provide / inject应用场景父子组件通讯:替代this.$parent祖孙组件通讯: 祖先组件不需要知道哪些后代组件在使用他提供的数据;后代组件也不需要知道注入的数据来自哪里使用方法// 父级组件提供 'foo'var Provider = { provide: { foo: 'bar' }, // ...}// 子组件注入 'foo'var Child = { inject: ['foo'], created () { console原创 2021-07-19 13:19:53 · 872 阅读 · 0 评论 -
js实现自定义事件
js实现自定义事件自定义事件类自身属性eventMapon方法off方法emit方法onOnce方法自定义事件类从自定义事件的功能上分析,它应该拥有以下几个方法:能够注册某个事件,并允许添加相应的方法能够移除某个事件能够触发某个事件有一个队列或者映射来缓存当前已注册的事件话不多说,先上代码class Observer { constructor() { this.eventMap = {} } /** * 注册事件 * @par原创 2021-07-16 09:42:29 · 2405 阅读 · 0 评论 -
控制台打印vue实例
前言:Vue项目运行后会把各个组件的数据挂载到对应的dom上根组件(#app)上获取实例首先app.vue会挂载到 id 为 “app” 的 div 上边打印这个divconsole.dir(document.querySelector('#app'))查看控制台,发现存在一个键:"__vue__"其实app.vue对应的实例就是这个__vue__对象打印这个对象console.dir(document.querySelector('#app'..原创 2021-04-07 11:38:36 · 8027 阅读 · 1 评论 -
平滑滚动的3种实现方式
引言:锚点跳转或者返回页面顶部的时候通常是“嗖”的一下直接滚动到目标位置,缺少动画效果,感觉有点奇怪。这里提供3种滚动实现方式示例都在vue当中实现<template> <div class="scroll"> <a href="#bottom"> <div class="tag">这里是a标签</div> </a> <div class="placeholder">这里是中间占位元素</原创 2021-02-18 12:05:25 · 3027 阅读 · 0 评论 -
js 求数组最大值的方法
/** * * @param {Array} list 传入数组 * @return {Number} 返回数组最大元素 */// 方法一:利用Math里边的max方法function maxItem(list) { // 利用Math里边的max方法 return Math.max(...list)}// 方法二:利用Math里边的max方法function maxItem(list) { return Math.max.apply(null, list)}//.原创 2021-02-01 10:43:17 · 1321 阅读 · 1 评论 -
js数组原生方法的实现
1、数组遍历 forEach()/** * 自定义forEach * @param {Function} fn 待执行方法 */function forEach(fn) { for (let i = 0; i < this.length; i++) { this[i] = fn(this[i], i) }}2、数组映射 map()/** * 自定义map * @param {Function} fn 待执行方法 */function map(f...原创 2021-01-27 17:07:48 · 188 阅读 · 0 评论 -
js数组与字符串转换
数组转字符串const list = [1,2,3]1、利用数组原型方法 toStringconst result = list.toString()console.log(result) // '1,2,3'2、利用String对象const result = String(list)console.log(result) // '1,2,3'3、利用数组原型方法 joinconst result = list.join(',')consol...原创 2021-01-26 09:47:57 · 638 阅读 · 0 评论 -
js时间戳和日期互相转换
获取当前日期:var date = new Date() // 2020 17:09:29 GMT+0800 (中国标准时间)获取当前时间戳:var timeStamp = new Date().getTime() // 1584954684507日期转时间戳:var timeStamp = new Date('2020 17:09:29 GMT+0800 (中...原创 2020-03-23 17:23:59 · 217 阅读 · 0 评论 -
JavaScript中forEach的实现原理(简单实现步骤)
新建一个数组对象arr:var arr = ['xiaoming','lihua']给arr添加一个方法for_Each:arr.for_Each = function (fn) { for (var i = 0; i < this.length; i++) { fn(this[i]) }}调用for_Each方法:arr.for_...原创 2020-02-19 15:08:22 · 3118 阅读 · 0 评论