JavaScript
关注
分享
扫一扫
文章平均质量分 93
JavaScript 脚本。
DonV
前端
展开
-
参考 Promise/A+ 规范和测试用例手写 Promise
这可能是手写promise较清晰的文章之一。由浅至深逐步分析了原生测试用例，以及相关Promise/A+规范。阅读上推荐以疑问章节为切入重点，对比Promise/A+规范与ECMAScript规范的内在区别与联系，确定怎样构建异步任务和创建promise实例。然后开始手写章节，过程中代码与测试可参考仓库。也试着回答以下关键问题。什么是广义对象？如何检验promise类型？promise与thenable两类型有何区别？Promise有多种社区规范，例如Promise/APromise/B。原创 2023-03-01 22:28:51 · 618 阅读 · 1 评论 -
ES6 Reflect
前言 此文总结了Reflect对象的部分语法，对比了与Object方法的差异性，希望对你有用。 语法 Reflect与Math类似，都是JavaScript内置对象，提供了工具方法。 get Reflect.get(target, property, receiver) 用于读取对象属性，其中target为目标对象，property为属性名称。 读取目标对象的访问器属性时，访问器getter内this上下文就是参数receiver。未指定参数receiver，默认为目标对象。 set R原创 2022-12-04 16:21:25 · 619 阅读 · 0 评论 -
ES6 Proxy
前言 全文共计5万字左右，大约可阅读两小时，并不定时持续更新中。 此文可能是关于Proxy相对较全的文章之一，总结了Proxy代理几乎所有的用法、示例和注意事项，也有对部分代码的细节分析。结合语法和ECMAScript规范，系统性地阐释了JavaScript对象的内部方法和内部槽，对比了普通对象与代理对象之间的差异和共同点。另外也包括一些运用场景，如何分析代理的错误问题，以及如何优化解决等等。 建议阅读中根据目录细化拆分，并试着回答以下问题。 什么是trap？ 内部方法与trap、不变量三者的关原创 2022-10-24 10:31:20 · 10677 阅读 · 0 评论 -
ES6 集合
前言 此文介绍了ES6中集合相关的Set和Map结构，跟随此文你将了解到。 ES6为什么引入Set结构 强弱引用与垃圾回收 WeakMap之polyfill实现 WeakMap的应用场景 Set Set 是值的集合，类似数组，元素有序且唯一。 属性方法 Set.prototype.size 用于返回Set实例中的元素个数 Set.prototype.add 用于向Set实例末尾添加元素，并返回实例 注意重复的元素不会被添加进去，也就说明了Set内元素是唯一的。 Set.prototype.del原创 2022-09-27 17:21:34 · 798 阅读 · 0 评论 -
ES6 Symbol
前言 此文对ES6中涉及的Symbol类型做了简单说明，也包括部分开放的内置Symbol。 属性方法 Symbol 为符号类型，属于基本数据类型之一。 Symbol()可以用来生成唯一值，也是ES6引入Symbol的原因。 创建一个Symbol包装对象。 Symbol.prototype.description Symbol.prototype.description 用于返回Symbol的描述信息，String或toString方法会包含Symbol()字符串。 Symbol.for原创 2022-08-11 16:54:53 · 624 阅读 · 0 评论 -
JavaScript 属性描述符
前言 此文总结了属性描述符的作用和特性，以及限制对象操作的部分方法。 Object.defineProperty Object.defineProperty 用于指定对象属性的描述符。 函数的第三个参数descriptor为属性的描述符，包括数据描述符和存取描述符两种。 注意属性描述符固定包括configurable、enumerable、writable和value四个键，存取描述符两种。 注意属性描述符固定包括configurable、enumerable、writable和valu原创 2022-07-23 18:50:47 · 3235 阅读 · 0 评论 -
自动化签到稀土掘金，拥抱 GitHub Actions 吧
前言 最近儿童节刚过不久，就收到了腾讯云的扣费短信，原来是之前部署在腾讯云的SCF没有免费额度，开始付费了。根据短信提示呢，结掉了长达一天的逾期费用。比较纳闷的是，快到期了不提前通知吗，或者说临时暂停云函数都可。但是呢，不，就不，一定要先强制扣费，然后才发通知。 之前部署的腾讯云，仅仅用在简单且普遍的功能上，例如自动化脚本，或者提供功能函数等。实际上，腾讯云函数的功能还有些问题，部分配置参数没有文档，只能与在线客服沟通解决，过程中也提交了很多的改进建议。总体来说，非常繁琐，也浪费了时间，于是干脆注销原创 2022-07-17 20:17:53 · 4235 阅读 · 3 评论 -
JavaScript 中常见的排序类型
前言 此文浅总结了常见的几大排序，并介绍了相关特性和优化方式。对稳定性、复杂度的含义和分析也做了简单说明，另外对于递归函数中，分析时间复杂度的master公式也做了阐述，希望对你有用。排序冒泡排序 冒泡排序（Bubble Sort）非常形象，数组在每次循环时，从左至右，相邻元素两两比较，将最大的元素逐渐交换到最后，每一轮循环最大元素在视觉上像是冒泡一样上浮到数组末尾。 以数组[4, 3, 2, 1]为例子，数组前一个元素与后一个元素比较，若前一个元素大则交换，一轮下来最大值被交换至末尾。.原创 2022-05-30 21:25:13 · 2895 阅读 · 0 评论 -
ES6 flat 与数组扁平化
前言 flat 用于将多维数组拉平（扁平化），不影响原数组，返回新的数组。[1, 2, [3, [4]]].flat() // [1, 2, 3, [4]] 仅有一个参数depth，用于指定拉平的深度，默认值为1。若depth指定为非正数，将返回原数组，指定为Infinity，无论多少层都将扁平化为一维数组。[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4][1, 2, [3, [4]]].flat(0) // [1, 2, [3, [4]]][1, 2, .原创 2022-04-10 14:16:50 · 5105 阅读 · 0 评论 -
ES6 copyWithin
前言 copyWithin 用于浅复制数组的一部分到另一位置。[1, 2, 3, 4, 5].copyWithin(0, 2, 4) // [3, 4, 3, 4, 5] 其中参数分别为target（复制到的索引）、start（开始复制的索引）、end（结束复制的索引，不包括end位置的元素）。参数 参数start默认值为0，end默认值为数组长度，若参数为负数，函数toAbsoluteIndex会将其转换为正数。function toAbsoluteIndex(target, le.原创 2022-04-07 15:57:24 · 3009 阅读 · 0 评论 -
关于取消 ES6 函数尾递归的相关探究
前言 ES6中的尾递归优化非常实用，于是乎去初步探究。但是你会非常失望，发现绝大多数浏览器已经不支持，node也在很早的版本中取消了支持。关于尾递归优化的相关文档，也都仅仅是简单提及，只言片语，优化点原理几乎就不提，了解起来非常麻烦。 因此查阅了很多文档，并简单汇总，希望可以由斐波那契数列，逐步展开，引导你了解尾递归的知识点。 以下内容中的知识点包括。STC、TCO和STC分别是什么尾调用优化的优化点是什么V8为何取消支持尾调用优化PTC与STC的优缺点尾调用调用栈 Jav.原创 2022-03-31 20:13:09 · 3202 阅读 · 0 评论 -
JavaScript 箭头函数
前言 ES6中的 箭头函数 作用非常简单，即简化函数且不绑定this。 内容仅是记录箭头函数的部分特性，包括一些发散和总结，希望对你有用。语法特性没有 this 箭头函数没有this，它的this是根据词法作用域派生而来，由上下文决定。function fn() { setTimeout(() => { console.log(this) })}fn() // Window {} 结合babel转换后的es5代码，简单概括就是，箭头函数的this总是.原创 2022-03-09 14:11:24 · 3250 阅读 · 0 评论 -
JavaScript 严格模式差异性对比
前言 严格模式（strict mode）由ES5引入，用于消除部分语法错误，提高运行效率，规范JavaScript语法等。 此文细致梳理了严格模式与非严格模式的差异， 目的仅是为了加深对严格模式的认识。开启脚本文件 为脚本文件开启严格模式，以下第一个脚本未开启严格模式，第二个脚本将开启严格模式。<body> <script> foo = 33 console.log(window.foo) // 33 </script> .原创 2022-01-24 14:05:57 · 3141 阅读 · 0 评论 -
关于 ES6 参数默认值形成的第三作用域问题
前言 最近系统回顾《ES6 标准入门》时，在函数的拓展一章下的作用域小节，又看到了以下代码。var x = 1function foo(x, y = function () { x = 2 }) { var x = 3 y() console.log(x)}foo()console.log(x) 大约一分钟时间思考一下结果吧😁。 如果你有仔细阅读文初的结论，一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域，结果想必一目了然。foo() // .原创 2022-01-12 17:46:08 · 3085 阅读 · 0 评论 -
你不知道的 JSON.stringify 特性
前言 JSON.stringify可配合JSON.parse来进行对象深拷贝，也可以用于字符串转换为对象，但是会有很多问题。语法特性 JSON.stringify 用于将JavaScript对象或值转换为JSON字符串。undefined、函数、Symbol作为对象属性值 undefined、函数或者Symbol在序列化时会被忽略，换句话说会丢失掉。const object = { foo: undefined, bar: function () { console.l.原创 2022-01-05 19:38:18 · 3659 阅读 · 0 评论 -
JavaScript 正则表达式
前言 MDN 对正则表达式有更为详细的描述，此文仅是学习正则表达式过程中的记录和发散，相关的内容后面会逐步进行完善。方法test test 用来检查字符串是否与正则表达式相匹配，返回布尔值。/hello/.test('hello_world') // true 来看一个特殊情况。const reg = /hello/reg.test('hello_world') // truereg.test('say_hello') // trueconst reg = /hello/g.原创 2021-12-30 15:42:12 · 2900 阅读 · 0 评论 -
JavaScript 浮点数陷阱
前言 JavaScript中的浮点数经常会有奇怪的运算结果，例如0.1 + 0.2 != 0.3或者是1.005.toFixed(2)结果为1.00，又或者Number.MAX_VALUE与Number.MAX_SAFE_INTEGER的区别等等。 此处对JavaScript浮点数的存储标准和以上疑问做了比较细致的整理，希望对你有用。IEEE 754 JavaScript与其它语言不同，Number类型是不区分整型和浮点的。对于所有的数字包括整数和小数相同存储，遵循IEEE 754的双精度标.原创 2021-12-24 13:52:54 · 3602 阅读 · 0 评论 -
解析图片的瀑布流（含懒加载）原理，并搭配服务端交互数据
前言 瀑布流是一种很常见的网页图片交互方式，效果可以参考 花瓣网。准备工作 首先来查看一下目录结构，其中app.js为服务端启动文件，主要用来提供接口，返回所需的图片数据，index.html为瀑布流页面。├── app.js├── index.html├── package.json├── node_modules/ 服务端app.js利用express搭建本地服务器，其中访问http://127.0.0.1:3000默认返回瀑布流页面，获取图片接口一般是以pageNo和page.原创 2021-09-28 17:33:54 · 4460 阅读 · 0 评论 -
进行浏览器原生的图片懒加载的几种方式和原理
前言 对于图片较多的网站，倘若一次性加载所有图片，一方面由于同时加载的图片较多，页面的DOM元素将非常多，会造成页面卡顿性能严重下降，另外服务器的压力也会很大。另一方面若加载了很多图片，而用户浏览的图片仅有几张，将会耗费大量流量，造成浪费。 而懒加载就是针对此情况做的优化，同时会极大地提升用户体验。一句话总结就是，懒加载即延时加载，当图片要用到的时候再去加载。offsetTop 懒加载的图片一般是固定宽高的，为避免图片较大时拉伸，可运用object-fit: cover来裁剪。<st.原创 2022-03-07 19:02:22 · 1583 阅读 · 0 评论 -
JavaScript 浮点数取整
前言 此文整理了JavaScript中常见的浮点数取整函数，当然也包括一些更为高效的位操作取整。Math.trunc Math.trunc 用于返回数字的整数部分。Math.trunc(-11.25) // -11Math.trunc(NaN) // NaNMath.trunc(Infinity) // InfinityMath.trunc() // NaN Math.trunc内部也会调用Number将参数隐式转换为数值，然后再取整。const object = { val.原创 2021-12-30 15:33:58 · 4888 阅读 · 0 评论 -
ES6 不完全手册（上）
前言 此篇是阅读《ES6 标准入门》的记录小册，保留了阅读当时的记忆和拓展，以便于后续查阅，分享出来，希望对你有用。关于ES6的API更为详细的部分还是推荐参考《ES6标准入门》，只是文中相对会精简很多，同时也包括一些未提及的内容。 语法提案 一个新语法从提出到成为正式标准，需要经历 5个阶段，一般只要能进入Stage 2阶段，就可能会包括在以后的正式标准中。 Stage 0：Strawman，稻草人阶段，只能由TC39成员或TC39构建者提出 Stage 1：Proposal，提案阶段，只能由TC原创 2022-07-23 19:14:32 · 4177 阅读 · 0 评论