javascript
ArthurHsing
前端菜鸟
展开
-
浅谈lazyload、prefetch、preload
1.lazyload(懒加载)懒加载,也可以说成是按需加载,常见的有图片懒加载,前端的路由懒加载。1)图片的懒加载,原理主要通过判断img标签有没有进入视口来确定是否给予其正确的src属性从而来加载资源,这样做的好处主要是减少http请求,节省网络资源,提高在视口内的图片的加载速度。2)前端路由的懒加载,原理主要是在前端的项目构建打包阶段,把不同路由对应的组件分割成不同的代码块,然后当路由访问的时候才加载对应的组件,这样其实做的好处是按需加载和解析代码,提高首屏渲染速度。因为大家想一想,如果所有JS代原创 2021-03-14 14:32:08 · 862 阅读 · 0 评论 -
通过Object.prototype.toString() 来对JS的类型判断
最常用的类型判断就是typeof 和 instanceof最近发现还有一种进行类型判断的方法,就是利用Object.prototype.toString()方法,注意不是对象本身身上的toString()方法。const isType = (obj) => Object.prototype.toString.call(obj).match(/(?<=\s)\w+(?=\])/g)[0].toLowerCase();有个注意点,typeof和instanceof会把包装类型的字符串、数字、原创 2021-03-13 20:56:05 · 250 阅读 · 0 评论 -
JS如何判断某个对象是不是原生的,而不是polyfill的
比如说Promise对象,如何判断它是原生的。直接打印:console.log(Promise.toString());控制台的结果就会是这样:看到没有,里面有个native code,这就代表这个Promise对象是原生的了。原创 2021-03-13 20:22:04 · 455 阅读 · 0 评论 -
数组去重的几种实现方式
// 数组去重1.利用indexOf返回最先碰到的下标的特性const arr = [2, 4, 5, 2, 4, 7, 9, 1, 9, 500];function getUniqueArray(arr) { const result = arr.filter((v, i) => { return arr.indexOf(v) === i; }); return result;}console.log(getUniqueArray(arr));// 数组去重2.构造一原创 2021-03-12 16:45:17 · 183 阅读 · 0 评论 -
JS函数柯里化例子(手写代码)
function add() { var _args = Array.from(arguments); // 将函数参数保存起来 function _adder() { _args.push(...arguments); return _adder; } // 实现函数的功能 _adder.toString = function () { return _args.reduce((ac, cu) => { return ac + cu;原创 2021-03-06 09:50:48 · 842 阅读 · 1 评论 -
javascript 实现 addEventListeneroptions中第三options参数的once 选项
HTMLElement.prototype.addMyEventListener = function (type, listener, options) { const newListener = function (event) { listener.call(this, event); if (options.once === true) { this.removeEventListener(type, newListener);...原创 2021-02-15 13:11:58 · 771 阅读 · 0 评论 -
浏览器的历史状态管理
博客园原创 2021-01-29 14:35:21 · 83 阅读 · 0 评论 -
javascript自己实现函数的call(),apply(),bind()方法
call()和apply()差不多,要利用好函数的谁调用它,它的this就指向谁的特点。Function.prototype.call()的实现//实现Function.prototype.myCall = function (obj, ...args) { const _this = this; const fnName = _this.name; obj[fnName] = _this; const result = obj[fnName](...args); delete o原创 2021-01-26 16:47:53 · 129 阅读 · 1 评论 -
剑指offer19题(正则表达式匹配) javascript语言描述
const isMatch = (s, p) => { const n = s.length; const m = p.length; const dp = []; for (let i = 0; i <= n; i++) { dp[i] = []; for (let j = 0; j <= m; j++) { dp[i][j] = -1; } } return solve(0, 0, s, p, dp) === 1;};c原创 2020-12-22 15:45:39 · 120 阅读 · 0 评论 -
javascript严格模式的限制
1.变量必须声明后再使用2.函数的参数不能有同名属性,否则报错3.不能使用with语句4.不能对只读属性赋值,否则报错5.不能使用前缀 0 表示八进制数,否则报错6.不能删除不可删除的属性,否则报错7.不能删除变量delete prop,会报错,只能删除属性delete global[prop]8.eval不会在它的外层作用域引入变量9.eval和arguments不能被重新赋值10.arguments不会自动反映函数参数的变化11.不能使用arguments.callee12.不能使原创 2020-12-07 16:52:02 · 977 阅读 · 0 评论 -
Javascript set get方法注意点
1.get方法return的值就是当前属性与其绑定的值,我们可以通过直接改变与其绑定的值来改变当前的属性值。let value = 'arthur';const o = { get prop() { return value; }};value = 'hsing';console.log(o.prop);结果2.set方法内部只能通过改变绑定的值来改变当前属性值,下面这样写是不行的let value = 'arthur';const o = { get prop()原创 2020-12-06 16:28:49 · 430 阅读 · 0 评论 -
js怎么能取得多选下拉框选中的多个值?
https://zhidao.baidu.com/question/219288215.html?qbl=relate_question_3&word=html%20select%B6%E0%D1%A1%CA%B1%C8%E7%BA%CE%C8%A1%B5%C3%B6%E0%D1%A1%B5%C4%D6%B5转载 2020-11-06 14:22:52 · 746 阅读 · 0 评论 -
javascript es6深度冻结
const my = { a: { a1: [1, 2, 3], a2: () => { console.log('hahahaha'); } }, b: 'xc', c: [9, 8, 7, { c1: 'arthur', c2: 1234 }], [Symbol.for('xc')]: { name: 'hahaha' }}const deepFreeze = (obj) => { if (typeof obj ==原创 2020-11-03 14:56:01 · 391 阅读 · 0 评论 -
javascript es6实现深度克隆
const my = { a: { a1: [1, 2, 3], a2: () => { console.log('hahahaha'); } }, b: 'xc', c: [9, 8, 7, { c1: 'arthur', c2: 1234 }], [Symbol.for('xc')]: { name: 'hahaha' }}const deepClone = (obj) => { if (typeof obj ===原创 2020-11-03 14:36:24 · 618 阅读 · 0 评论 -
javascript手撕kruskal算法
kruskal是一种求最小生成树的贪心算法,与prim算法的以点为寻找目标不同,kruskal算法是以边为寻找目标,核心思想很简单,每次找到最小的边,把这些边串起来生成树就可以了,只是这个过程中要注意避免环的产生,以下是js代码const INF = Number.MAX_SAFE_INTEGER;const initializeCost = graph => { const cost = []; const { length } = graph; for (let i = 0; i原创 2020-10-24 11:35:30 · 300 阅读 · 2 评论 -
javascript原始值包装类型
为什么在js中的原始值,可以调用方法,比如说:let str = 'I love China!';console.log(str.slice(0,6));//I love但是却不能给原始值添加属性str.age = 18;console.log(str.age);//undefined这一切都和原始值包装类型及其声明周期有关:每当用到某个原始值的属性或者方法使,javascript总会在后台创建一个原始值包装类型的对象,从而暴露出操作原始值的各种方法。在以读模式访问字符串的方法或者属性时,原创 2020-10-20 15:02:46 · 579 阅读 · 0 评论 -
javascript构造函数的创建过程以及构造函数内部return值的影响
用new 构造函数()来创建一个对象时,构造函数内部发生了如下的步骤。1.创建一个新的对象。2.新对象的[[prototype]] 也就是__proto__属性设置为构造函数的prototype属性。3.把this指向这个对象。4.执行构造函数内部的代码。5.如果构造函数return了一个不为null的引用值(注意是引用值),那么则返回这个引用值,否则返回前面4部创建的新对象。...原创 2020-10-20 11:50:54 · 154 阅读 · 0 评论 -
javascript预编译
知乎原创 2020-10-20 11:35:18 · 104 阅读 · 0 评论 -
javascript 手撕dijkstra算法,求最短距离和最短路径(超详细注释)
图是用一个二维数组表示的,0表示不相邻或者本顶点,不为0的表示到相邻点的距离const INF = Number.MAX_SAFE_INTEGER;// 从当前的已知距离中,找出最短路径,返回最短路径的最后一个点const minRoute = (dist, visited) => { let minIndex = -1; let min = INF; for (let i = 0; i < dist.length; i++) { if (!visited[i] &am原创 2020-10-19 10:43:30 · 941 阅读 · 0 评论 -
javascript执行上下文、作用域、闭包总结
1.执行上下文和变量对象1)变量或函数的执行上下文决定了它们能够访问哪些数据,以及它们的行为。2)每个执行上下文都有一个与之关联的变量对象(variable object),这个上下文中定义的所有变量和函数都存在于这个对象上,这个对象我们无法访问。3)如果执行上下文是函数,那么它的活动对象(activation object)将作为变量对象,活动对象最初只有一个定义变量:arguments2.上下文栈1)上下文在其所有代码都执行完毕后会被销毁,包括定义在它上面的所有变量和函数。全局上下文只有在页面原创 2020-10-13 20:51:55 · 206 阅读 · 0 评论 -
javascript变量知识点
1.javascript的变量的类型分为两种:原始值和引用值。2.到目前一共有7种原始值:Undefined、Null、Number、String、Boolean、Symbol、BigInt。3.保存原始值的变量是按值进行访问的,保存引用值的变量是按引用(内存地址)进行访问的。4.用new Object()和字面量对象{}创造出来的对象的效果是一模一样的,所以我们一般用{}创建一个对象。5.原始值不能有属性,如果尝试给原始值添加属性,不会报错,但是不会生效。6.原始类型的初始化只能用原始字面量的方原创 2020-10-13 16:57:53 · 224 阅读 · 0 评论 -
javascript变量类型的确定
1.typeof操作符来确认类型1)typeof操作符一共会产生undefined、string、number、boolean、object、function、symbol、bigint8种结果,不严谨地说,跟8(7 + 1)种数据类型的数量是一样的,但是数据类型是没有Function这种类型的,typeof也没有null这种结果。2)typeof一个function(他是引用类型)的结果是function,typeof null的结果是object,见如下代码:function fn() {}c原创 2020-10-13 16:50:28 · 299 阅读 · 0 评论 -
javascript数组解构赋值交换变量的性能问题
原链接是墙外的链接,可能比较慢。总的意思就是解构赋值是遍历了数组的遍历器来获取的值,所以性能没有正常操作(索引操作)交换值来得快。原创 2020-10-12 15:59:46 · 992 阅读 · 0 评论 -
JavaScript的尾调用优化详解
尾调用优化原创 2020-10-05 15:19:55 · 345 阅读 · 0 评论 -
JS实现简单的拖拽元素的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; pa原创 2020-09-12 23:17:29 · 139 阅读 · 0 评论 -
webworker
阮一峰原创 2020-09-05 15:39:28 · 206 阅读 · 0 评论 -
javascript事件循环|消息队列|微任务|宏任务
CSDN简书原创 2020-09-04 21:34:08 · 369 阅读 · 0 评论 -
js addEventListener打印出event展开后currentTarget为null的原因
stackoverflow的解释这篇文章只说了为什么我们看见的为null,没有讲将其置为null的原因。俺也不明白,记录一下吧。原创 2020-08-22 15:46:15 · 696 阅读 · 0 评论 -
addEventListener 使用passive改善滚动新能
这是墙外的一个demo这是原理解释原创 2020-08-21 21:38:36 · 297 阅读 · 0 评论 -
JS/CSS:transitioned事件值得注意的地方
1.transitioned事件是双向的,动画完成或者动画回归最初状态都会触发transitioned事件2.transitioned事件只有在有过渡时间且过渡时间不为0时才会触发3.在父元素身上添加该事件,子元素的动画结束或回归最初状态时,也会触发该事件。若不想某个子元素触发父元素的该事件,在子元素的该时间函数上添加e.stopPropagation();使该事件停止冒泡即可。4.若想精确到某个具体动画,那就用事件委托,原生事件委托的介绍下面这片文章介绍的很不错https://davidwalsh原创 2020-08-21 18:38:53 · 758 阅读 · 0 评论 -
JS生成随机数函数
//默认为范围为10,开始值为1 function random(range = 10, start = 1) { return Math.floor(Math.random() * range + start); }原创 2020-08-21 16:52:16 · 625 阅读 · 0 评论 -
iframe实现点击后再加载
<body> <ul> <li> <a onclick="frameA.src='./a.html'">A</a> </li> <li> <a onclick="frameB.location='./b.html'">B</a> </li> <li> <a onclick="frameC.location='./c.html'">C<原创 2020-08-19 12:17:08 · 1331 阅读 · 0 评论 -
javascript自定义回调函数的实现
同步的回调函数function myCallBack(fn) { const str = 'I love China'; fn(str);}myCallBack((data) => { console.log(data);});console.log('我后执行');异步的回调函数function myCallBack(fn) { const str = 'I love China'; setTimeout(() => { fn(str) },原创 2020-08-10 13:54:54 · 551 阅读 · 0 评论 -
javascript 用Promise和XMLHTTPRequest手写ajax
<body> <button id="ajaxButton" type="button" onclick="ajax()">Make a request</button> <script> function getJson(type = 'GET', url = './test.json', data = {}) { //设定默认值 return new Promise((resolve, reject) => {原创 2020-08-10 09:39:20 · 591 阅读 · 0 评论 -
javascript原型以及原型链总结
以下代码可以直接跑 <script> function Grandpa(nationality) { this.nationality = nationality; } function Father(nationality, gender) { this.gender = gender; Grandpa.call(this, ...arguments); } Father.prototype = Object.c原创 2020-08-09 21:13:24 · 184 阅读 · 0 评论 -
【Vue】中 $attrs 中的使用方法
https://www.cnblogs.com/wuxianqiang/p/10452662.html转载 2020-08-08 11:04:46 · 1078 阅读 · 0 评论 -
JavaScript中Array.prototype.sort()的坑
先给出《JavaScript高级程序设计(第3版)》和MDN里面官方的sort()里面的比较函数:(这是直接复制的MDN上面代码,书里面跟这个差不多,就参数名不一样)function compare(a, b) { if (a < b ) { // 按某种排序标准进行比较, a 小于 b return -1; } if (a > b ) { return 1; } // a must be equal to b return 0;原创 2020-08-07 20:27:27 · 208 阅读 · 0 评论 -
JavaScript垃圾回收的总结
https://segmentfault.com/a/1190000018605776https://javascript.info/garbage-collection原创 2020-08-07 15:28:43 · 165 阅读 · 0 评论 -
JavaScript Object.create()的polyfill
if (typeof Object.create !== "function") { Object.create = function (proto, propertiesObject) { if (typeof proto !== 'object' && typeof proto !== 'function') { throw new TypeError('Object prototype may only be an Object: ' +转载 2020-08-05 16:23:09 · 187 阅读 · 0 评论 -
HTML的attribute和DOM的property的区别
https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#answer-6004028转载 2020-08-05 13:18:00 · 139 阅读 · 0 评论