javascript
关注
分享
扫一扫
文章平均质量分 94
hst❀
前端踩坑记录/速查本/不定期更新
展开
-
ES6 Promise对象的理解学习
文章目录前言一、定义二、基本用法三、应用前言Promise改善异步代码的处理，Async/await改善Promise的使用。一、定义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise对象有以下两个特点：（1）对象的状态不受外界影响。Promise对象代表一个异步原创 2021-01-07 14:39:29 · 279 阅读 · 0 评论 -
利用Object.defineProperty实现一个简单的MVVM双向绑定
文章目录一、Object.defineProperty介绍二、实现一个简单的MVVM参考文章一、Object.defineProperty介绍该函数可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。通俗理解就是：给对象添加一个新的属性，或者针对对象里的某些属性，可以给这个属性设置一些特性，比如是否只读，是否可以被for…in或Object.keys()遍历等。语法 Object.defineProperty(obj, prop, descriptor)例如：v原创 2020-12-30 15:24:25 · 176 阅读 · 0 评论 -
柯里化函数的实现和应用
文章目录一、什么是柯里化？二、举例柯里化函数思想实现的场景三、通用的封装方法四、性能五、扩展一道面试题参考文章一、什么是柯里化？柯里化通常也称部分求值，其含义是给函数分步传递参数，每次传递参数后部分应用参数，并返回一个更具体的函数接受剩下的参数，这中间可嵌套多层这样的接受部分参数函数，直至返回最后结果。基维百科上的解释是：柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。看这个解释有一点抽象，我原创 2020-12-30 11:22:45 · 837 阅读 · 0 评论 -
从浏览器多进程到JS单线程，全面梳理了解JS运行机制
一、区分线程和进程线程和进程区分不清，是很多新手都会犯的错误，没有关系。这很正常。先看看下面这个形象的比喻：进程是一个工厂，线程是工厂中的工人。工厂有它的独立资源 - 工厂之间相互独立 - 工厂内有一个或多个工人 - 工人之间共享空间 - 多个工人协作完成任务。如果是 windows 电脑中，可以打开任务管理器，可以看到有一个后台进程列表。对，那里就是查看进程的地方，而且可以看到每个进程的内存资源信息以及 cpu 占有率。所以，应该更容易理解了：进程是cpu资源分配的最小单位（系统会给它分配原创 2020-12-28 17:53:25 · 370 阅读 · 0 评论 -
渲染大量数据，利用setTimeout提升渲染速度
<!DOCTYPE html><html><head><meta charset="utf-8"/><title>渲染table测试</title></head><body><button onclick="renderTableFun()">点击渲染table</button><div id="box" class="container"></div&g原创 2020-12-24 15:38:35 · 661 阅读 · 0 评论 -
前端节流（throttle）和防抖（debounce）的区别和用法，并封装成vue指令
一、节流（throttle）在一定时间内（例n秒内），不管方法被调动多少次，只会在n秒后再调动第二次方法。也就是每隔n秒执行一次。var canFlag = true;window.onresize = function(){ console.log('resize') if (!canFlag) return; canFlag = false; setTimeout(function(){ canFlag = true; console原创 2020-12-23 18:04:57 · 842 阅读 · 1 评论 -
什么是闭包？闭包的作用及应用场景
一、什么是闭包假设，上面三行代码在一个立即执行函数中。三行代码中，有一个局部变量local，有一个函数foo，foo里面可以访问到local变量。好了这就是一个闭包：「函数」和「函数内部能访问到的变量」的总和，就是一个闭包。有的同学就疑惑了，闭包这么简单么？「我听说闭包是需要函数套函数，然后 return 一个函数的呀！」比如这样：function foo(){ var local = 1; function bar(){ local++; return local原创 2020-12-23 10:10:24 · 4670 阅读 · 2 评论 -
js立即执行函数
一、什么是立即执行函数顾名思义，声明一个函数并马上调用这个函数就叫做立即执行函数；也可以说立即执行函数是一种语法，让你的函数在定义以后立即执行，又叫自执行函数；二、立即执行函数的写法立即执行函数的写法有三种：( function ( “ 参数 ” ) { " 函数方法 " ; } ) ( “ 给参数传的值 ” )( function ( " 参数 " ) { “ 函数方法 ” ; } ( " 给参数传的值 " ) )! function ( " 参数 " ) { " 函数方法 " ; } (原创 2020-12-21 17:00:33 · 4577 阅读 · 2 评论 -
JS中的原始数据类型（基础数据类型）和 引用数据类型
文章目录js的数据类型划分方式为 原始数据类型（基础数据类型）和 引用数据类型两种类型的区别1.存储位置不同2.传值方式不同3.两种数据类型在实参和形参中的区别js的数据类型划分方式为 原始数据类型（基础数据类型）和 引用数据类型原始数据类型：Undefined，Null，Boolean，Number、String。引用数据类型：对象、数组、函数。两种类型的区别1.存储位置不同原始数据类型：直接存储在栈（stack）中的简单数据段，占据空间小，大小固定，属于被频繁使用的数据，所以存储在栈中；引原创 2020-11-26 10:36:20 · 3557 阅读 · 0 评论 -
JS中的栈内存、堆内存
先来看这样一个问题：const定义的值能改么？答案是部分能改，部分不能改。const定义的基本类型不能改变，但是定义的对象是可以通过修改对象属性等方法来改变的。例如：>>> const a = 1>>> a<<< 1>>> a = 2<<< VM1750:1 Uncaught TypeError: Assignment to constant variable. at <anonymou转载 2020-11-26 10:01:22 · 421 阅读 · 0 评论 -
ES6 ...三点扩展运算符常见用法（实例）
文章目录一、对象的扩展运算符1.取出参数对象中的所有可遍历属性，拷贝到当前对象之中二、数组的扩展运算符1.将数组转换为参数序列2.复制数组3.扩展运算符可以与解构赋值结合起来，用于生成数组4.将字符串转为数组5.任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组参考一、对象的扩展运算符1.取出参数对象中的所有可遍历属性，拷贝到当前对象之中let bar = { a: 1, b: 2 };let baz = { ...bar }; // { a: 1, b: 2 }上述方法实际上原创 2020-11-25 17:08:33 · 306 阅读 · 0 评论 -
简述forEach()、map()、filter()、every()、some()的用法
1.forEach()用于遍历数组，无返回值。var arr = [1,-2,3,4,-5];arr.forEach(function(item,index,array){ array[index] = item * 2;});console.log(arr); // [2,-4,6,8,-10]可以看到，forEach()可以传入一个匿名函数作为参数，而该匿名函数有含有三个参数，其依次代表数组遍历时的当前元素item，数组遍历时的当前元素的索引index，以及正在遍历的数组arr原创 2020-11-24 11:42:18 · 332 阅读 · 2 评论 -
JS中reduce()用法学习总结（实例）
文章目录前言一、语法1.定义和用法2.语法3.参数二、实例1.计算数组元素相加后的总和（官网例子）2.求数组项最大值3.计算一个字符串中每个字母出现次数4.数组去重/对象数组去重5.扁平一个二维数组6.递归利用reduce处理tree树形三、其他相关方法1.reduceRight()2.forEach()、map()、every()、some()和filter()总结参考前言写在前面，在写这篇文章之前，我一直不能理解reduce()的用法，实际项目中也很少用到。直到有一天，我下定决心想要好好学习redu原创 2020-11-24 10:42:43 · 1114 阅读 · 3 评论 -
记录一些常用的js工具方法的封装
日期格式化：/* * 格式化日期函数 * 参数: * {1} -> date : 日期对象(Date) * {2} _> format: 格式 (yyyy-MM-dd hh:mm:ss) */let dateUtil = {}; dateUtil.format = function(date, format) { var o = { "M+": date.getMonth() + 1, "d+": date原创 2020-07-24 10:03:28 · 244 阅读 · 1 评论 -
vue中使用websocket
第一次使用websocket，在网上找了很久的例子，找到了一个比较好用的demo，使用了没什么问题<template> <div class="test"> </div></template><script> export default { name : 'test', data() { return { websock: null, } }, creat转载 2020-06-17 10:02:38 · 250 阅读 · 0 评论 -
js 实现点击按钮复制文本
原理：浏览器提供了 copy 命令 ，可以复制选中的内容document.execCommand("copy")因为 select() 方法只对 和 有效，可以通过 select() 方法，选中输入框的文本，然后调用 copy 命令，将文本复制到剪切板，代码部分：html：<input readonly id="copy_select" :value="35085412124542154"><button @click="copyId()"></but原创 2020-05-28 11:33:07 · 453 阅读 · 0 评论 -
js 写一个前端图片查看器
网上已经有不少成熟的图片查看器插件，如果是单纯想要点击图片放大预览的话，可以直接使用插件。例如viewerjs但是，当打开图片后还需要对图片进行一些像删除、下载、标记等业务层面上的操作，使用插件就显得不那么便捷，于是决定自己简单写个图片查看器思路：项目中用的是vue+iview，于是使用Modal弹窗组件做为播放器的盒子，考虑需要用到的基本功能有：放大、缩小、拖拽、全屏查看、查看上/下一张、双击图片回到初始大小和初始位置完成效果如图：代码大致思路如下：html部分：<Modal id="原创 2020-05-18 11:30:47 · 2002 阅读 · 0 评论 -
zTree的使用踩坑记录（编辑、新增）
最近做了一个功能，在vue中使用到了zTree，要求实现树节点的新增和编辑，踩了不少坑，记录下~首先是先在main.js引入ztree插件记住，如果有用到ztree自带的编辑或删除，一定要记得引入 jquery.ztree.exedit.min；同时，ztree没有添加节点的按钮，需要我们自己创建添加html部分只需要：<ul id="resourceTree" class="ztree"></ul>接下来，在data里面设一下树的配置配置：setting: {原创 2020-05-14 18:35:27 · 2625 阅读 · 2 评论 -
JS 中call()和apply()以及bind()的用法与区别
一、方法定义：apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。上面的定义看一遍是很懵的，不过自己遍写例子遍反复读的时候，会有种拨开云雾的感觉。call 与 ap...原创 2020-01-15 15:24:27 · 191 阅读 · 0 评论 -
js 实现常见排序算法
传送门：算法可视化工具目录冒泡排序选择排序插入排序合并排序快速排序为了方便说明，默认按从小到大排序1.冒泡排序基本思路：1.依次比较相邻的两个数，如果第一个比第二个小，不变。如果第一个比第二个大，调换顺序。一轮下来，最后一个是最大的数2.对除了最后一个之外的数重复第一步，直到只剩一个数代码如下：function bubbleSort(myArray){ ...转载 2019-10-18 14:09:17 · 341 阅读 · 0 评论 -
js 实现经典阶乘函数的计算
在函数内部，有两个特殊的对象：argument和this。其中，argument是一个类数组对象，包含着传入函数中的所有参数，它的主要用途是用来保存函数参数。计算阶乘函数代码如下：function factorial(num){ if(num &amp;lt;= 1){ return 1; }else{ return num*factorial(num - 1); }}为了减少...原创 2018-10-27 20:55:39 · 5189 阅读 · 0 评论 -
数组排序方法sort()
在默认情况下，sort()方法按升序排序数组项------即最小的值位于最前面，最大的值排在最后面。为了实现排序，sort()方法会调用toString()转型方法，然后比较得到的字符串。也就是说，即使数组中的每一项都是数值，sort()方法比较的也是字符串。var values = [0,1,5,10,15];values.sort();alert(values);//0，1，10，15，...原创 2018-10-27 15:16:11 · 442 阅读 · 0 评论 -
JS中toString()、toLocaleString()和valueOf()方法的区别（摘录）
JavaScript中的toString()、toLocaleString()和valueOf()方法，主要用于Array、Boolean、Date、Number、String、Math、Error、Functionr等对象。Arrayvar array = new Array("123","123","123");console.log(array.valueOf());//Ar原创 2018-10-27 20:32:53 · 238 阅读 · 0 评论 -
jQuery 事件委托
相关文章：事件委托的概念和作用1.用on方法,代码如下：$(function(){ $("ul").on("click","li",function(event){ var target = $(event.target); target.css("background-color","red"); })})2.用delegate（）...原创 2019-10-17 14:24:05 · 209 阅读 · 0 评论 -
JS 事件委托的概念和作用
事件委托的作用：1.支持为同一个DOM元素注册多个同类型事件2.可将事件分成事件捕获和事件冒泡机制例子解析：1.注册多事件用以往注册事件的方法,如果存在多个事件,后注册的事件会覆盖先注册的事件<div id="div1"></div><script> window.onload = function(){ let div1 =...原创 2019-10-17 14:08:00 · 488 阅读 · 0 评论 -
即时反应的input和propertychange方法
在web开发中，我们有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时，会发现一些复制粘贴等操作用不了，同时，在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案：HTML5标准事件oninput、onchange和IE专属的事件properchange。1.oninput&onchange：oninput和...转载 2019-10-17 11:08:55 · 376 阅读 · 0 评论 -
jquery.base64.js 使用
前端使用 jquery.base64.js 进行加密、解密十分方便引入 jquery.base64.js<script src="js/jquery.base64.js" type="text/javascript"></script>使用时还需注意，先引入 jquery<script src="js/jquery-3.2.1.min.js" type="t...转载 2019-10-14 12:03:07 · 820 阅读 · 0 评论 -
json对象和json字符串之间的转化
json字符串----->json对象1.使用 JSON.parse() 函数var jsonStr = ‘{“name”:“zhangsan”,“age”:23,“email”:“chentging@aliyun.com”}’;var json = JSON.parse(jsonStr);console.log(json);//输出:Object {name: “zhangsan”...原创 2019-09-12 17:59:04 · 266 阅读 · 0 评论 -
forEach()与each()方法的区别
**forEach()为JavaScript(ES5)的方法，而each()**方法是JQuery的方法，forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。注意: forEach() 对于空数组是不会执行回调函数的。forEach()的回调函数有两个参数，index，value，index为当前元素的索引值，value为当前元素。var arr = ["你好","我好"...转载 2019-08-19 13:47:09 · 177 阅读 · 0 评论 -
添加网页水印
/*调用*/watermark({ watermark_txt0: LOGIN.user.police_id, watermark_txt1: LOGIN.user.police_name, watermark_txt2: "333333333333333333"});/*封装一个方法*/function watermark(settings) { //默...原创 2019-10-08 11:18:24 · 363 阅读 · 0 评论 -
Js/Jquery获取网页屏幕可见区域高度
获取浏览器窗口的可视区域高度和宽度、滚动条高度:document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight =...转载 2019-09-19 15:52:26 · 567 阅读 · 0 评论 -
Location hash 属性
hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。实例返回一个 URL 的主要部分。假设当前的 URL 是 http://www.runoob.com/test.htm＃PART2document.write(location.hash);以上实例输出结果： #part2...原创 2019-04-08 16:29:48 · 555 阅读 · 0 评论 -
javascript 代码注释规范与示例
文件注释文件注释位于文件的最前面，应包括文件的以下信息：概要说明及版本（必须）项目地址（开源组件必须）版权声明（必须）开源协议（开源组件必须）版本号（必须）修改时间（必须），以ISO格式表示（可使用Sublime Text的InsertDate插件插入）文件注释必须全部以英文字符表示，并存在于文件的开发版本与生产版本中。例如：/*! * jRaiser 2 Javascript Librar...原创 2019-04-10 17:02:26 · 1028 阅读 · 0 评论 -
jq获取动态生成的img宽高为0问题解决
主要原因是因为图片是在DOM结构渲染完成以后调用的，这时候网页中一些资源还没有加载，比如图片等资源，但是DOM结构已经渲染成功了因为项目中经常用的是jquery，所以，解决图片高度的时候就要在window.οnlοad=function(){}里调用，当然若是需在$(function(){})里的调用img的高度，那么就需要这样来写：$("#img").get(0).onload = func...转载 2019-08-15 17:51:04 · 1947 阅读 · 0 评论 -
页面带参数跳转，formatByObject处理参数格式
window.open((API.RECORD + ("?token={{token}}".formatByObject({ token: res.data[0].access_token}))), '_blank');原创 2019-08-16 16:31:29 · 666 阅读 · 0 评论 -
js 取消冒泡和阻止默认事件
取消冒泡function stopBubble(e) { //如果提供了事件对象，则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则，我们需要使用IE的方式来取消事件冒泡 wi...原创 2019-08-16 16:44:53 · 123 阅读 · 0 评论 -
for 循环的几种写法
常用的for循环var maArry = ['hst','sun','bb'];for (let index = 0; index < myArray.length; index++) { console.log(index,myArray[index])}返回结果：forEach//ES5写法myArray.forEach(function(value,inde...原创 2019-08-19 15:33:46 · 2704 阅读 · 0 评论 -
js 中判断变量的类型（ typeof 和 instanceof ）
typeof判断基本类型，返回一个字符串instanceof检查某个对象属于哪个构造函数，返回true/falsefunction A(){};function B(){};let a = new A();console.log(a instanceof A);console.log(a instanceof B);返回的结果：在实际的项目应用中，typeof...原创 2019-08-19 15:52:20 · 702 阅读 · 0 评论 -
js 创建对象的6种方式
字面式创建对象var person ={ name: "lisi", age: 21, family: ["lida","lier","wangwu"], say: function(){ alert(this.name); }};new 操作符 + Object 创建对象var person = new Object();perso...转载 2019-08-19 16:20:51 · 170 阅读 · 0 评论 -
js中的json
字面量字面量：固定的值，非变量，可从字面上理解脚本字符串字面量：使用 " 或 ’ 引号包围起来的零或多个字符组成对象字面量：使用 { } 括起来的零或多个键值对何时是json，何时不是？string 上下文中是json字符串对象字面量 上下文中是对象字面量// json字符串let str = '{"name": "张全蛋"}'// 对象字面量let obj = ...转载 2019-08-20 09:35:36 · 105 阅读 · 0 评论