JavaScript
文章平均质量分 56
abloume
这个作者很懒,什么都没留下…
展开
-
【JavaScript】0.1 + 0.2 = 0.30000000000000004该怎样理解?
如果你以前没了解过类似的坑,乍一看似乎觉得不可思议。但是某些语言下事实确实如此(比如 Javascript):再看个例子,+1 后居然等于原数,没天理啊!如果你不知道原因,跟着楼主一起来探究下精度丢失的过程吧。事实上不仅仅是 Javascript,在很多语言中 0.1 + 0.2 都会得到 0.30000000000000004,为此还诞生了一个好玩的网站 0.30000000000000004。究原创 2017-11-27 00:25:43 · 506 阅读 · 0 评论 -
【JavaScript】如何模拟一个flat
首先了解下flat的概念 Array.prototype.flat() - JavaScript | MDN将数组元素展开一层1、concat + 扩展运算符const arr = [1, 2, 4, [1, 2, [1, 3, [1, 2, 3]]], 5];// 扩展运算符 + concat[].concat(...arr)// [1, 2, 4, 1, 2, [1, 3, [1, 2, 3]]], 5];2、concat + applyconst arr = [1, 2, 4, [1原创 2021-03-19 00:08:03 · 356 阅读 · 0 评论 -
【JavaScript】如何模拟一个instanceof
首先看一下instanceof的用法。a instanceof B 判断的是,a是否为B的实例,即a的原型链上是否存在B的构造函数。function Person(name) { this.name = name}const p = new Person('mike')p instanceof Person // true这里的 p 是 Person 构造出来的实例对象。p.__proto__ === Person.prototype // true同时,顺着 p 的原型链也能找到原创 2021-03-18 11:44:43 · 384 阅读 · 0 评论 -
【JavaScript】this指向的问题
this指向不是在创建时指定的,而是由最后调用它的对象决定的。全局对象的this在非严格模式下,this指向window;在严格模式下,this指向undefined。1)简单版function f1 () { console.log(this)}function f2 () { 'use strict' console.log(this)}f1() // windowf2() // undefined2)赋值版const foo = { bar: 10, fn: fun原创 2021-03-18 10:18:23 · 230 阅读 · 1 评论 -
【JavaScript】版本号和日期时间的比较
JS使用 ‘>’ 运算符比较两个字符串大小时,会把字符串转换为ASCII码依次比较。比较标准时间格式可以直接使用 ’ > ’ 比较; (2018-07-20格式)原创 2021-03-14 09:27:17 · 272 阅读 · 0 评论 -
【JavaScript】forEach中的坑
1. forEach不支持break在使用for循环时可以使用break跳出循环,比如我希望找到数组中符合条件的第一个元素就跳出循环,这对于优化数组遍历是非常棒的。很遗憾,forEach并不支持break操作,使用break会导致报错。let arr = [1, 2, 3, 4], i = 0, length = arr.length; for (; i < length; i++) { console.log(arr[i]); //1,2 if (arr[i]原创 2021-03-14 09:24:56 · 563 阅读 · 0 评论 -
btoa和atob
从IE10浏览器开始,所有浏览器就原生提供了Base64编码解码方法:btoa (Binary to ASCII):base64编码atob (ASCII to Binary):base64解码const str = 'Hello World';const enc = window.btoa(str); // SGVsbG8gV29ybGQ=const dec = window.atob(enc); // Hello World当然还有一些PC项目需要兼容IE8、IE9,这时候我们可以在s原创 2021-03-14 09:19:33 · 1368 阅读 · 1 评论 -
无编译/无服务器,实现浏览器的CommonJS模块化
前些天写一个demo,需要用到require去引一个node包,但是又不想将其混进公司的整个node工程中去,因为想着越简单越好。同时,webpack能不用也不用了吧,不然又得初始化个webpack工程。在我折腾了半天后,发现一个利器 —— one-click.js。我们知道,如果希望CommonJS的模块化代码能在浏览器中正常运行,通常都会需要构建/打包工具,如webpack、rollup等。而one-click.js是一个可以让你在不需要这些构件工具的同时,也可以在浏览器中正常运行基于Com原创 2020-05-17 11:05:58 · 171 阅读 · 0 评论 -
?= 正向零宽断言
场景要匹配微信版本号,前人写了这样一段代码:const reg = /^\d(?=.\d.\d$)/;在微信7.0.10版本之前的所有版本中均没有问题,但7.0.10版本报错了。为什么呢?因为(?=exp)是正向零宽断言,它断言自身出现的位置的后面能匹配表达式exp。这样的话,上述正则需要匹配的就是 x.x.x,7.0.10属于x.x.xx,所以就无法匹配了。...原创 2020-01-07 18:04:21 · 202 阅读 · 0 评论 -
setDate() 解决跨月问题
起因我要做一个可选择“今天”、“明天”、“后天”的时间控件供用户选择,并发送选定后的日期给服务端。刚开始我是获取当前日期进行 +0、+1、+2 操作的,怪我想的太简单,跨月跨年之后很快暴露问题!那么我要如何解决这个问题呢?算平年 or 闰年?算这个月有多少天?算下个月有多少天?(看起来好复杂啊,我太懒…)setDate还好此时看到前人一段代码中的 setDate(0),Ok 一起来学习...原创 2020-01-07 12:23:30 · 1732 阅读 · 0 评论 -
【JavaScript】encodeURIComponent 编码 与 解码
转载自:encodeURIComponent编码与解码 问题:JavaScript用encodeURIComponentt编码后无法再后台解码的问题。目前写法:window.self.location="list.jsp?searchtext="+encodeURIComponent(seartext);java处理的代码为:searchtext=java.net.U...转载 2018-03-08 12:38:28 · 671 阅读 · 0 评论 -
【JavaScript】实现继承的方式
引言:面向对象的编程语言都具继承这一机制,而 JavaScript 是基于原型(Prototype)面向对象程序设计,所以它的实现方式也是基于原型(Prototype)实现的。实现继承有多种方式,下面我们还是以Person和Student来分析function Person() {}function Student() {}Student.prototype = P...原创 2018-03-27 11:45:44 · 133 阅读 · 0 评论 -
【JavaScript】defer和async的区别
转载自:https://segmentfault.com/q/1010000000640869先来试个一句话解释仨,当浏览器碰到 script 脚本的时候:<script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不...转载 2018-04-16 20:44:52 · 830 阅读 · 0 评论 -
【JavaScript】`${SERVER_URL}/login`这是什么写法?
昨晚在阅读大佬源码时看到了这样一段login(values: any): Observable<any> { return this.httpClient.post(`${SERVER_URL}/login`, values, {responseType: 'text'}) .pipe(tap(jwt => this.handleJwtResponse...原创 2018-04-11 13:47:14 · 1511 阅读 · 0 评论 -
【JavaScript】表单 select 对象 和 checkbox 复选框
脚本编程最复杂的表单控件是 select 元素对象。select 对象其实是一个包含 option 对象数组的复合对象。此外,可在 HTML 中建立这个对象,把它显示为 下拉列表 或者 滚动列表,滚动列表可以配置为允许进行多选。 有些属性可用于整个 select 对象,其他属性则仅用于 select 对象中的单个选项。如果想要确定用户选择了哪一项,且编码处理最广泛的浏览器,就必须使用 s...原创 2018-03-08 12:06:46 · 1565 阅读 · 0 评论 -
【JavaScript】Array 对象(二)[并列数组、多维数组、数组字符串相互转换]
使用数组存储数据,常常允许用一个脚本查询数组中是否有某一个值(可能验证用户输入到文本框中的数据是否是可接受的)。另外,在查找匹配的项时,脚本可以在另一个数组中查找一些相关的信息。完成这个任务的一种方式是使用两个或多个并行数组另一种方式是模拟多维数组(并行数组的替代方法)并列数组考虑下面的三个数组:var regionalOffices = ["New York",...原创 2018-03-07 16:20:49 · 1342 阅读 · 0 评论 -
【JavaScript】Array 对象(一)[创建填充数组方式、删除数组项方式]
与其他编程语言不同,JavaScript 的数组对存储在数组中每个单元或者数组项中的数据类型要求不是很严格。创建空数组要创建新的数组对象,可使用静态 Array 对象的构造函数方法。例如:var myArray = new Array(); 与其他许多编程语言不同,预先设置 JavaScript 数组的大小没有什么特别的好处。如果需要先设置数组的大小,可以指定数组的初始大...原创 2018-03-06 23:07:54 · 645 阅读 · 0 评论 -
【JavaScript】重温 JSON
JSON(JavaScript Object Notation)是表示便于许多编程语言读写的数据结构的一种轻型方式。这使JSON(类似于XML)成为各种语言编写的应用程序之间(例如服务器端PHP 和客户端JavaScript)一种有效的数据交换格式。JSON 的工作原理JSON 合并了 JavaScript 语法中表示 数组 和 对象 的两个方面,来表示数据结构。1)使用方括号...原创 2018-03-06 22:12:11 · 210 阅读 · 0 评论 -
30秒内创建完整的REST API
转载自:https://www.jianshu.com/p/81373d90f9f0安装Json-Server:npm install -g json-server在项目中新建一个test.json文件,我们现在要模拟一个 /issues 和 /total 接口\\ test.json { "issues": [ { ...转载 2018-02-08 19:52:53 · 194 阅读 · 0 评论 -
【JavaScript】ES6中的Map和Set
JavaScript的默认对象表示方式 {} 可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对。 但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。 为了解决这个问题,最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范,请执行以下代码:'use原创 2016-11-01 22:17:35 · 481 阅读 · 0 评论 -
【JavaScript】 setTimeout(fn, 0) 意味着什么?
转载自:JavaScript 下的 setTimeout(fn, 0) 意味着什么?近期在研究异步编程的我对于 setTimeout 之类的东西异常敏感。在 SegmentFault 上看到了一个问题《关于SetTimeout时间设为0时》:提问者读了一篇文章,原文解释 setTimeout 延迟时间为 0 时会发生的事情,提问者提出了几个文章中的几个疑点。读了那篇文章之后发现原文的作者对于 ...转载 2018-04-12 22:05:28 · 1265 阅读 · 0 评论 -
【JavaScript】在循环体中了解定时器工作机制
for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000);}console.log(i); 如果我们约定,用箭头表示其前后的两次输出之间有 1 秒的时间间隔,而逗号表示其前后的两次输出之间的时间间隔可以忽略,代码实际运行的结果该如何描述?会有下面两种...原创 2018-05-03 11:15:33 · 438 阅读 · 0 评论 -
【JavaScript】parseInt() 数值转换的注意地方
语法:parseInt(string, radix);首先来看下列代码:parseInt("09") IE8下面parseint默认会把我的“09”当成八进制,但是又发现不是合法的八进制,最后就抛出了0这个false。 不过后来发现在IE9下面,parseInt在缺失radix的时候底层也是默认采用十进制的,终于微软为了符合大众口味做了正确的修改。 使用parseInt()你可以从字符串原创 2017-12-03 00:25:23 · 906 阅读 · 0 评论 -
【JavaScript】JS的NodeList对象
NodeList与HTML CollectiongetElementsByClassName()和getElementsByTagName()都返回NodeList对象,而类似document.images和document.forms的属性为HTML Collection对象。NodeList和HTML Collection对象不是历史文档状态的一个静态快照,而通常是实时的。也许你会问,...原创 2019-08-05 16:09:48 · 4493 阅读 · 0 评论 -
理清Hogan与Mustache模板引擎
Hogan与MustacheHogan与Mustache的关系就像V8与Node的关系一样。安装Hogannpm install hogan.js --save-devHogan用法// 引入hoganconst hogan = require('hogan.js'); // 渲染所需模板const tmpl = 引入模板文件 // 渲染所需数据let renderDat...原创 2019-08-05 14:33:48 · 244 阅读 · 0 评论 -
【JavaScript】JS的调用栈和堆
在JS代码的执行过程中会分配两个内存区域——调用栈和堆。第一个性能非常高,因此用于连续执行所提供的函数。每个函数调用在调用栈中创建一个所谓的“框架”,其中包含其局部变量的副本和this。你可以通过Chrome调试器查看它,就像在其他与堆栈类似的数据结构中一样,调用栈的栈被推送或弹出堆栈,具体取决于正在执行或终止的新函数。你可能见过调用栈上限溢出错误,通常是由于某种形式的无限循环导致的。谈到...原创 2019-08-05 11:55:11 · 343 阅读 · 0 评论 -
【JavaScript】this和event.target的异同
event.target每次触发DOM事件时会产生一个事件对象(也称event对象),而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,event.target表示该DOM元素,然后在获取其相应的属性值。this和event.target的区别:js中事件是会冒泡的 ,所以this是可以变化的,但是event.target不会变化,它永...原创 2019-08-05 11:45:51 · 295 阅读 · 0 评论 -
【JavaScript】JS变量生命周期:为什么let没有被提升
理解背后原理:变量生命周期声明阶段 是在作用域中注册一个变量初始化阶段 是分配内存并为作用域中的变量创建绑定,在此步骤中,变量将使用undefined自动初始化赋值阶段 是为初始化的变量赋值变量在通过声明阶段时是 尚未初始化 状态,但未达到初始化状态。let变量的处理方式与var不同,主要区别在于声明和初始化阶段是分开的。变量未初始化时,变量位于暂时死区。当解释器执行到语句let...原创 2019-08-05 09:59:41 · 359 阅读 · 0 评论 -
【JavaScript】深拷贝与浅拷贝
如何区分深拷贝与浅拷贝?假设B复制了A,当修改A时,如果B也跟着改了,这就是浅拷贝,否则就是深拷贝。堆内存与栈内存堆是堆内存的简称,栈是栈内存的简称。堆是动态分配内存,内存大小不一,也不会自动释放。栈是自动分配相对固定大小的内存空间,并由系统自由释放。JS的基本数据类型(Undefined、Null、Boolean、String、Number、Symbol)键名存储在栈内存中,例如l...转载 2019-07-17 14:51:53 · 112 阅读 · 0 评论 -
【JavaScript】从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue
转载自:从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue简要介绍:谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序1. 问题的引出event loop都不陌生,是指主线程从“任务队列”中循环读取任务,比如...转载 2018-09-04 10:43:47 · 419 阅读 · 0 评论 -
【JavaScript】JavaScript同步、异步、回调的执行顺序
口诀:同步优先、异步靠边、回调垫底(同步=>异步=>回调)有一道经典的面试题:for (var i = 0; i < 5; i++) { setTimeout(function() { console.log('i: ',i); }, 1000);}console.log(i);//输出5i: 5i: 5i: 5i: 5i: 5分析:for循原创 2017-11-18 17:42:32 · 338 阅读 · 0 评论 -
【JavaScript】H5多线程的实现 — Web Worker
什么是Web Worker 将JavaScript代码交给Web Worker在后台执行时,页面就可以在JavaScript运行期间依然可以响应用户操作,以防止出现页面卡死。用户可以创建多个Worker线程,这样就可以在前台做一些小规模分布式计算之类的工作。 分布式计算是一种计算方法,和集中式计算是相对的。随着计算基数的发展,有些应用需要非常巨大的计算能力才能完成,如果采用集中式...原创 2017-11-17 21:49:53 · 1510 阅读 · 0 评论 -
【JavaScript】JavaScript是多线程还是单线程?
之前在学浏览器渲染流程时了解的JavaScript是单线程执行的,时不时要考虑浏览器线程阻塞问题,然而又有人说JavaScript可以异步执行,比如setInterval、setTimeout以及Ajax等。那究竟是单线程还是多线程呢? 下图是浏览器所具有的线程: 单线程意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等原创 2017-11-17 00:34:55 · 1955 阅读 · 0 评论 -
【JavaScript】arguments.callee的作用及替换方案
arguments.callee的作用 arguments 的主要用途是保存函数参数, 但这个对象还有一个名叫 callee 的属性,该属性是一个指针,指向拥有这个 arguments 对象的函数。 请看下面这个非常经典的阶乘函数function factorial(num){ if (num <=1) { return 1;原创 2017-12-01 15:06:25 · 26699 阅读 · 5 评论 -
【JavaScript】AJAX之程序流程、异步同步请求、FormData类型、事件监听接口
试想这样一种情景,当用户点击页面中的某个按钮向服务器发送请求时,页面本质上只是一些数据发生了变化,而此时服务器却要将重绘的整个页面再返回给浏览器加载,这显然有悖于程序员的“DRY”原则,而且明明只是一些数据的变化却迫使服务器要返回整个HTML文档,这本身也会给网络带宽带来不必要的开销。 有没有办法在页面数据变动时,只向服务器请求新的数据,并且在阻止页面刷新的情况下,动态替换页面中展示的数据呢? –原创 2017-12-01 20:15:47 · 1107 阅读 · 0 评论 -
【JavaScript】原生JS实现AJAX、JSONP
function ajax(params) { params = params || {}; params.data = params.data || {}; // 判断是ajax请求还是jsonp请求 var json = params.jsonp ? jsonp(params) : json(params); // ajax请求转载 2017-12-01 20:41:18 · 689 阅读 · 0 评论 -
【JavaScript】反调试技巧 —— 函数重定义【自定义console对象】
console对象的所有方法都可以被覆盖,也就是说,我们可以自定义方法。原创 2017-12-01 20:59:47 · 776 阅读 · 0 评论 -
【JavaScript】欺骗词法的eval、with与catch及其性能问题
正常来说,执行期上下文的作用域链是不会改变的 JavaScript中的词法作用域并不是一成不变的 (词法作用域/静态作用域: 作用域由书写代码时函数声明位置决定) 有几种机制是可以欺骗词法的 它们是with()、eval()还有try-catch语句的catch子句 其中with和eval我们不应该去使用(会产生很多问题) 欺骗词法的意思就是欺骗词法作用域转载 2017-12-02 17:37:15 · 379 阅读 · 0 评论 -
【JavaScript】引擎、运行时
JavaScript 引擎 所谓JavaScript引擎是一个专门处理JavaScript脚本的虚拟机,一般会附带在网页浏览器中,用于解析和执行JavaScript脚本。 JavaScript虚拟机是一种进程虚拟机,它具备的一个特征就是有一个虚拟的指令集(ISA)。 JavaScript 引擎说起来最流行的当然是谷歌的 V8 引擎了, V8 引擎使用在 Chrome 以及 Node 中,但原创 2017-12-01 22:43:19 · 367 阅读 · 0 评论 -
【JavaScript】document.write()的用法和清空的原因
可能很多朋友都遇到过这样的情况,那就是使用document.write()函数向网页中写内容的时候,会把文档中的原来的内容给清空,这一点对于初学者来说算是一个困扰,下面就介绍一下为什么会出现这种情况,当然也就知道如何避免此种情况的发生了。 先看一段代码实例:<!DOCTYPE html> <html> <head> <meta charset原创 2017-12-02 23:34:10 · 6273 阅读 · 1 评论