JavaScript
文章平均质量分 74
JavaScript
WindrunnerMax
这个作者很懒,什么都没留下…
展开
-
Js中的位操作符
Js中的位操作符JavaScript的数字类型为双精度IEEE 754 64位浮点类型,但是在位运算中位运算符用于32位的数字上, 任何的数字操作都将转为32位, 运算结果再转化为Js数字类型。描述所有的按位操作符的操作数都会被转成补码形式的有符号32位整数,从概念上讲,按位逻辑操作符按遵守下面规则:操作数被转换成32位整数,用比特序列(0和1组成)表示,超过32位的数字会被丢弃。第一个操作数的每个比特位与第二个操作数的相应比特位匹配,第一位对应第一位,第二位对应第二位,以此类推。位运算符应用原创 2021-02-06 18:29:15 · 477 阅读 · 0 评论 -
深入理解Js中的this
深入理解Js中的thisJavaScript作用域为静态作用域static scope,但是在Js中的this却是一个例外,this的指向问题就类似于动态作用域,其并不关心函数和作用域是如何声明以及在何处声明的,只关心它们从何处调用,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,当然实际上this的最终指向的是那个调用它的对象。作用域我们先来了解一下JavaScript的作用域,以便理解为什么说this更类似于动态作用域,通常来说,一段程序代码中所用到的名字原创 2021-02-05 18:24:39 · 346 阅读 · 0 评论 -
Js实用小技巧
Js实用小技巧这是一份Js实用小技巧,也可以是一份Js挨打小技巧,下面的一系列操作虽然能够在一定程度上使代码更加简洁,但是在缺少注释的情况下会降低可读性,所以需要谨慎使用这些黑魔法。位元算取整console.log(~~(11.11)); // 11console.log(11.11 >> 0); // 11console.log(11.11 << 0); // 11console.log(11.11 | 0); // 11console.原创 2021-01-17 19:10:49 · 456 阅读 · 0 评论 -
Js中函数式编程的理解
函数式编程的理解函数式编程是一种编程范式,可以理解为是利用函数把运算过程封装起来,通过组合各种函数来计算结果。函数式编程与命令式编程最大的不同其实在于,函数式编程关心数据的映射,命令式编程关心解决问题的步骤。描述到近些年,函数式以其优雅,简单的特点开始重新风靡整个编程界,主流语言在设计的时候无一例外都会更多的参考函数式特性Lambda表达式、原生支持map、reduce、...,Java8开始支持函数式编程等等。在前端领域,我们同样能看到很多函数式编程的影子,ES6中加入了箭头函数,Redux引入E原创 2021-01-16 18:21:08 · 545 阅读 · 0 评论 -
Js将字符串转数字的方式
Js将字符串转数字的方式Js字符串转换数字方方式主要有三类:转换函数、强制类型转换、弱类型隐式类型转换,利用这三类转换的方式可以有5种转换的方法。parseInt()parseInt()和Number.parseInt()是最常用的转换字符串为整数数值的方法,其中Number.parseInt()是ES6之后为了减少全局方法的定义才增加的静态方法,实质与全局方法parseInt()相同,他们的规则如下:忽略字符串前面的空格,直至找到第一个非空字符。如果第一个非空字符不是数字或者是正负号则返回Na原创 2020-12-08 11:41:57 · 1226 阅读 · 0 评论 -
Js中的逻辑运算符
Js中的逻辑运算符JavaScript中有三个逻辑运算符,&&与、||或、!非,虽然他们被称为逻辑运算符,但这些运算符却可以被应用于任意类型的值而不仅仅是布尔值,他们的结果也同样可以是任意类型。描述如果一个值可以被转换为true,那么这个值就是所谓的truthy,如果可以被转换为false,那么这个值就是所谓的falsy。会被转换为false的表达式有: null、NaN、0、空字符串、undefined。尽管&&和||运算符能够使用非布尔值的操作数,但它们依然可以被原创 2020-11-30 11:04:00 · 1362 阅读 · 0 评论 -
Js中Reflect对象
Js中Reflect对象Reflect是ES6起JavaScript内置的对象,提供拦截JavaScript操作的方法,这些方法与Proxy对象的handlers中的方法基本相同。描述Reflect并非一个构造函数,所以不能通过new运算符对其进行调用,或者将Reflect对象作为一个函数来调用,就像Math对象一样,Reflect对象的所有属性和方法都是静态的。实际上Reflect对象是ES6为操作对象而提供的新API,而这个API设计的目的主要有:将Object对象的一些属于语言内部的方法放原创 2020-11-24 15:27:16 · 1373 阅读 · 0 评论 -
Js中Proxy对象
Js中Proxy对象Proxy对象用于定义基本操作的自定义行为,例如属性查找、赋值、枚举、函数调用等。语法const proxy = new Proxy(target, handler);target: 要使用Proxy包装的目标对象,可以是任何类型的对象,包括原生数组,函数,甚至另一个代理。handler: 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理proxy的行为。描述Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所原创 2020-11-19 16:25:53 · 3305 阅读 · 0 评论 -
常见的内存泄漏场景
常见的内存泄漏场景内存泄漏Memory Leak是指程序中已动态分配的堆内存由于疏忽或错误等原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前就失去了对该段内存的控制,从而造成了内存的浪费。对于内存泄露的检测,Chrome提供了性能分析工具Performance,可以比较方便的查看内存的占用情况等。内存回收机制像C语言这样的底层语言一般都有底层的内存管理接口,例如m原创 2020-11-08 16:01:42 · 1343 阅读 · 0 评论 -
Js模块化开发的理解
Js模块化开发的理解模块化是一个语言发展的必经之路,其能够帮助开发者拆分和组织代码,随着前端技术的发展,前端编写的代码量也越来越大,就需要对代码有很好的管理,而模块化能够帮助开发者解决命名冲突、管理依赖、提高代码的可读性、代码解耦以及提高代码的复用性。描述模块化开发其实就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能,同时也需要避免全局变量的污染,最初通过函数实现模块,实际上是利用了函数的局部作用域来形成模块。function func1(){ //...}原创 2020-11-04 16:50:00 · 823 阅读 · 0 评论 -
valueOf与toString
valueOf与toStringvalueOf和toString是Object.prototype上的方法,在Js几乎所有的对象都会继承自Object,同样由于包装对象的原因,几乎所有的数据类型都能够调用这两个方法,无法调用的有例如null、undefined以及Object.create(null)创建的对象等,通常我们一般不会主动调用这两个方法,而在代码执行的过程中这两个方法会经常被偷偷的调用,而且在不同的情况下会有选择的进行调用。valueOfJavaScript通过调用valueOf方法将对象原创 2020-10-27 17:18:28 · 850 阅读 · 0 评论 -
Js中Symbol对象
Js中Symbol对象ES6引入了一种新的基本数据类型Symbol,表示独一无二的值,最大的用法是用来定义对象的唯一属性名,Symbol()函数会返回symbol类型的值,该类型具有静态属性和静态方法,其静态属性会暴露几个内建的成员对象,它的静态方法会暴露全局的symbol注册,且类似于内建对象类,但作为构造函数来说它并不完整,因为它不支持语法new Symbol()。每个从Symbol()返回的symbol值都是唯一的,一个symbol值能作为对象属性的标识符。描述对于每一个Symbol的值都是不相原创 2020-10-25 16:44:20 · 1117 阅读 · 0 评论 -
Js中Date对象
Js中Date对象JavaScript的Date对象是用于处理日期和时间的全局对象,Date对象基于Unix Time Stamp,即自1970年1月1日UTC起经过的毫秒数。描述Date()构造函数能够接受四种形式的参数,分别为没有参数、Unix时间戳、时间戳字符串、分别提供日期与时间的每一个成员。此外创建一个新Date对象的唯一方法是通过new操作符,若将它作为常规函数调用,即不加new操作符,将返回一个字符串,而非Date对象。没有参数: 如果没有提供参数,那么新创建的Date对象表示实例化原创 2020-10-18 18:50:25 · 1482 阅读 · 0 评论 -
Js中Currying的应用
Js中Currying的应用柯里化Currying是把接受多个参数的函数变换成接受一个单一参数的函数,并且返回接受余下的参数且返回结果的新函数的技术,是函数式编程应用。描述如果说函数式编程中有两种操作是必不可少的那无疑就是柯里化Currying和函数组合Compose,柯里化其实就是流水线上的加工站,函数组合就是我们的流水线,它由多个加工站组成。对于加工站即柯里化Currying,简单来说就是将一个多元函数,转换成一个依次调用的单元函数,也就是把一个多参数的函数转化为单参数函数的方法,函数的柯里化是用原创 2020-10-16 10:40:47 · 479 阅读 · 0 评论 -
Js中Array对象
Js中Array对象JavaScript的Array对象是用于构造数组的全局对象,数组是类似于列表的高阶对象。描述在JavaScript中通常可以使用Array构造器与字面量的方式创建数组。console.log(Array(3)); // (3) [empty × 3]console.log(new Array(3)); // (3) [empty × 3]console.log([,,,]); // (3) [empty × 3]在JavaScript的数组是以稀疏数组的形式存在的,可以原创 2020-10-11 11:20:41 · 578 阅读 · 0 评论 -
Js中数组空位问题
Js中数组空位问题JavaScript中数组空位指的是数组中的empty,其表示的是在该位置没有任何值,而且empty是区别于undefined的,同样empty也不属于Js的任何数据类型,并且在JavaScript版本以及各种方法对于空位的处理也有不同,所以建议避免在数组中出现空位。描述在JavaScript的数组是以稀疏数组的形式存在的,所以当在某些位置没有值时,就需要使用某个值去填充。当然对于稀疏数组在各种浏览器中会存在优化的操作,例如在V8引擎中就存在快数组与慢数组的转化,此外在V8中对于em原创 2020-10-07 16:18:19 · 3868 阅读 · 3 评论 -
Js中Math对象
Js中Math对象Math是一个内置对象,它拥有一些数学常数属性和数学函数方法,Math用于Number类型,其不支持BigInt。描述Math不是一个函数对象,也就是说Math不是一个构造器,Math的所有属性与方法都是静态的,例如引用圆周率的写法是Math.PI,Math的常量是使用JavaScript中的全精度浮点数来定义的,需要注意的是,很多Math的函数都有一个精度,而且这个精度在不同实现中也是不相同的,这意味着不同的浏览器会给出不同的结果,甚至在不同的系统或架构下,相同的Js引擎也会给出不原创 2020-10-01 17:16:25 · 1431 阅读 · 1 评论 -
Js中Number对象
Js中Number对象JavaScript的Number对象是经过封装从而能够处理数字值的对象,Number对象由Number()构造器以及字面量声明的值在转化为包装对象时创建,JavaScript的Number类型为双精度IEEE 754 64位浮点类型。描述创建一个数字可以通过字面量的方式,通过字面量创建的数字变量在调用方法的时候能够自动转化为临时的包装对象,从而能够调用其构造函数的原型中的方法,也可以利用Number对象生成数值对象,,JavaScript的Number类型为双精度IEEE 75原创 2020-09-28 15:11:33 · 906 阅读 · 0 评论 -
Js中String对象
Js中String对象String全局对象是一个用于字符串或一个字符序列的构造函数。描述创建一个字符串可以通过字面量的方式,通过字面量创建的字符串变量在调用方法的时候能够自动转化为临时的包装对象,从而能够调用其构造函数的原型中的方法,也可以利用String对象生成字符串对象,此外在ES6标准还定义了模板字面量用以生成字符串的方式。var s = "s";console.log(typeof(s)); // stringvar s = new String("s");console.log(t原创 2020-09-18 11:00:18 · 585 阅读 · 0 评论 -
Js中RegExp对象
Js中RegExp对象RegExp对象表示正则表达式,是由普通字符和特殊字符也叫元字符或限定符组成的文字模板,用于对字符串执行模式匹配。描述创建一个RegExp对象通常有两种方式,一种是通过字面量创建,一种是通过RegExp对象构造函数创建。// var regex = /pattern/modifiers;var regex = /^[0-9]+$/g;// var regex = new RegExp("pattern", "modifiers");var regex = new Reg原创 2020-09-02 18:39:01 · 1143 阅读 · 0 评论 -
Js创建对象的方式
Js创建对象的方式Js创建对象的方式,这里的对象除了指Js内置Object对象之外还有更加广义上的面向对象编程中的对象。字面量方式对象字面变量是对象定义的一种简写形式,能够简化创建包含大量属性的对象的过程。var obj = { a: 1, b: function(){ return this.a; }}console.log(obj); // {a: 1, b: ƒ}在ES6中使用字面量创建对象时还可以配合Spread操作符与解构赋值使用。var原创 2020-07-07 11:13:46 · 749 阅读 · 0 评论 -
null和undefined的区别
null和undefined的区别在Js中null与undefined是两种基本数据类型,都可以用来表示"无"这个概念,但是在语义表达以及实际使用上是有所区别的。描述大多数计算机语言只有一个用来表示"无"这个概念的值,例如C与C++的NULL、Java与PHP的null、Python的None、lua与Ruby的nil,但是在Js中有null与undefined两种基本数据类型来表示"无"这个概念。在很多情况下null和undefined几乎等价,例如在if语句中,都会被自动转为false。var原创 2020-07-01 10:55:08 · 1020 阅读 · 0 评论 -
async/await剖析
async/await剖析JavaScript是单线程的,为了避免同步阻塞可能会带来的一些负面影响,引入了异步非阻塞机制,而对于异步执行的解决方案从最早的回调函数,到ES6的Promise对象以及Generator函数,每次都有所改进,但是却又美中不足,他们都有额外的复杂性,都需要理解抽象的底层运行机制,直到在ES7中引入了async/await,他可以简化使用多个Promise时的同步行为,在编程的时候甚至都不需要关心这个操作是否为异步操作。分析首先使用async/await执行一组异步操作,并不需原创 2020-06-20 21:20:58 · 912 阅读 · 0 评论 -
Thunk函数的使用
Thunk函数的使用编译器的求值策略通常分为传值调用以及传名调用,Thunk函数是应用于编译器的传名调用实现,往往是将参数放到一个临时函数之中,再将这个临时函数传入函数体,这个临时函数就叫做Thunk 函数。求值策略编译器的求值策略通常分为传值调用以及传名调用,在下面的例子中,将一个表达式作为参数进行传递,传值调用以及传名调用中实现的方式有所不同。var x = 1;function s(y){ console.log(y + 1); // 3}s(x + 1);在上述的例子中原创 2020-06-19 23:32:46 · 1063 阅读 · 0 评论 -
模板语法的简单实现
模板语法的简单实现模板语法允许在HTML中之插入Js变量以及表达式,当在Js中控制render的时候能够自动在页面上将变量或者是表达式进行计算并显示,比较常见的模板语法有mustcache风格的{{}}以及DSL风格的dsl-html等。ASTAST抽象语法树,全称为Abstract Syntax Tree是源代码的抽象语法结构的树状表现形式,每种源码都可以被抽象成为AST,在这里把模板解析成为AST,就是将模板的HTML结构进行解析,变成一棵附带结构、关系、属性的抽象树,这样做方便后续对模板进行处理原创 2020-06-15 16:47:57 · 1074 阅读 · 0 评论 -
深入理解Js数组
深入理解Js数组在Js中数组存在两种形式,一种是与C/C++等相同的在连续内存中存放数据的快数组,另一种是HashTable结构的慢数组,是一种典型的字典形式。描述在本文中所有的测试都是基于V8引擎的,使用的浏览器版本为Chrome 83.0,当然直接使用Node也是可以的。通常创建数组一般用以下三种方式,当然对于直接更改length属性的方式也可以达到改变数组长度的目的,从而实现创建指定长度的数组,只是并不常用。var arr = [];var arr = Array(100);var arr原创 2020-06-13 21:30:01 · 1513 阅读 · 0 评论 -
Js文件异步加载
Js文件异步加载浏览器中渲染引擎与Js脚本引擎是互斥的,在浏览器开始渲染页面时,如果遇到<script>标签,会停止渲染当前页面,也就是说在脚本加载与执行的过程中会阻塞页面的渲染,在网速较差的环境下可能会出现浏览器页面假死的情况,这也就是尽量将<script>文件放置于<body>后的原因,Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程,这称为非阻塞模式加载,当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥,解析执行Js脚本的时机取决于异步加载Js原创 2020-06-07 10:06:02 · 1025 阅读 · 0 评论 -
XML和JSON的比较
XML和JSON的比较XML与JSON都可以用来描述或者存储数据,两者都有各自的优点,使用场景取决于需求。描述XML可扩展标记语言Extensible Markup Language,是一种用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型、存储数据等,是一种允许用户对自己的标记语言进行定义的源语言,并提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。 XML基于标准通用标记语言SGML与超文本标记语言HTML发展而来,使用DTD文档类型定义Document Typ原创 2020-06-03 12:07:36 · 1053 阅读 · 0 评论 -
Js中fetch方法
Js中fetch方法fetch()方法定义在Window对象以及WorkerGlobalScope对象上,用于发起获取资源的请求,其返回一个Promise对象,这个Promise对象会在请求响应后被resolve,并传回Response对象。描述Promise<Response> fetch(input[, init])input: 定义要获取的资源,其值可以是:一个字符串,包含要获取资源的URL,一些浏览器会接受 blob和data作为schemes。一个Request对象。原创 2020-06-01 13:28:53 · 7617 阅读 · 0 评论 -
Js捕获异常的方法
Js捕获异常的方法JavaScript的异常主要使用try catch finally语句以及窗口对象window的onerror事件来捕获。try catch finallytry catch finally只能捕获运行时的错误,无法捕获语法错误,可以拿到出错的信息,堆栈,出错的文件、行号、列号。try catch finally语句标记要尝试的语句块,并指定一个出现异常时抛出的响应。try{ // try_statements throw new TypeError("Test"原创 2020-05-31 12:32:11 · 6479 阅读 · 1 评论 -
Object对象
Object对象Object对象是JavaScript中两个顶层对象之一,提供方法供直接调用以及原型链继承调用。Object.assignObject.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象,本文认为只有引用类型才有浅拷贝与深拷贝的概念,那么Object.assign拷贝方式就是浅拷贝。假如认为对于基本数据类型也有浅拷贝与深拷贝的概念的话,那么对于基本数据类型的拷贝可以理解为按值深拷贝,那么关于Object.assign第一层是深拷贝,第二层及以原创 2020-05-30 16:16:30 · 976 阅读 · 0 评论 -
Set与WeakSet
Set与WeakSetSet对象允许存储任何类型的唯一值,无论是原始值或者是对象引用,Set对象中的值不会重复。WeakSet对象允许存储对象弱引用的唯一值,WeakSet对象中的值同样不会重复,且只能保存对象的弱引用。Set描述Set对象是值的集合,可以按照插入的顺序迭代它的元素,Set中的元素只会出现一次,即Set中的元素是唯一的,常用来作数组去重。属性与方法Set.prototype.constructor: 返回构造函数。Set.prototype.size: 返回Set对象的值的原创 2020-05-28 13:17:02 · 1009 阅读 · 0 评论 -
Map与WeakMap
Map与WeakMapMap对象用来保存键值对,并且能够记住键的原始插入顺序,任何对象或者原始值都可以作为键或者是值。WeakMap对象同样用来保存键值对,对于键是弱引用的而且必须为一个对象,而值可以是任意的对象或者原始值。Map描述Map对象类似于一个普通的键值对的Object对象,也是键值对的集合,但是他们之间有一些重要的区别:描述MapObject意外的键Map默认情况不包含任何键,只包含显式插入的键。一个Object有一个原型, 原型链上的键名有可能和在对象上的原创 2020-05-26 13:21:13 · 994 阅读 · 0 评论 -
Js的GC机制
Js的GC机制在Js七种基本类型中的引用类型Object的变量其占据内存空间大且大小不固定,在堆内存中实际存储对象,在栈内存中存储对象的指针,对于对象的访问是按引用访问的。在栈区中执行的变量等是通过值访问,当其作用域销毁后变量也就随之销毁,而使用引用访问的堆区变量,在一个作用域消失后还可能在外层作用域或者其他作用域仍然存在引用,不能直接销毁,此时就需要通过算法计算该堆区变量是否属于不再需要的变量,从而决定是否需要进行内存回收,在Js中主要有引用计数与标记清除两种垃圾回收算法。引用计数算法对于引用计数垃原创 2020-05-20 11:46:29 · 10332 阅读 · 0 评论 -
防抖与节流
防抖与节流防抖debounce与节流throttle都是控制事件处理函数执行频率的方法,当函数会进行DOM操作或者具有请求服务器等行为并且作为高频事件例如onscroll触发的事件处理函数时,就需要进行事件处理函数执行频率的控制,否则会造成大量的资源浪费致使性能下降,当然无论是防抖与节流实质上并没有减少事件触发次数,而是通过减少事件处理函数的执行次数从而提高性能。防抖非立即防抖当持续触发事件的时候,事件处理函数是完全不执行的,等最后一次触发结束的一段时间之后,再去执行。最常见的例子就是搜索建议功能,原创 2020-05-19 12:51:45 · 1270 阅读 · 0 评论 -
Js中的堆栈
Js中的堆栈堆heap是动态分配的内存,大小不定也不会自动释放,栈stack为自动分配的内存空间,在代码执行过程中自动释放。栈区在栈内存中提供一个供Js代码执行的环境,关于作用域以及函数的调用都是栈内存中执行的。Js中基本数据类型String、Number、Boolean、Null、Undefined、Symbol,占用空间小且大小固定,值直接保存在栈内存中,是按值访问,对于Object引用类型,其指针放置于栈内存中,指向堆内存的实际地址,是通过引用访问。关于调用栈,每调用一个函数,解释器就会把该原创 2020-05-18 12:47:54 · 1246 阅读 · 0 评论 -
getter与setter
getter与settergetter是一个获取某个属性的值的方法,setter是一个设定某个属性的值的方法。描述通过getter与setter可以实现数据取值与赋值的拦截操作,当想监控某个值的变化的时候,通过getter与setter即可实现监听,而不需要找到并修改每一个操作这个值的代码。有时需要允许访问返回动态计算值的属性,或者需要反映内部变量的状态,而不需要使用显式方法调用,可以使用getter与setter来实现。尽管可以结合使用getter和setter来创建一个伪属性,但是不能将ge原创 2020-05-14 17:16:52 · 1269 阅读 · 0 评论 -
Js实现链表操作
Js实现链表操作JavaScript实现链表主要操作,包括创建链表、遍历链表、获取链表长度、获取第i个元素值、获取倒数第i个元素值、插入节点、删除节点、有序链表合并、有序链表交集。创建链表class Node{ constructor(data){ this.data = data; this.next = null; }}function createLinkList(arr){ var L = new Node(null); v原创 2020-05-13 11:57:27 · 1999 阅读 · 0 评论 -
Object.definePropety
definePropertyObject.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象,也就是说,该方法允许精确地添加或修改对象的属性。语法Object.defineProperty(obj, prop, descriptor)obj: 要定义属性的对象。prop: 要定义或修改的属性的名称或Symbol。descriptor: 要定义或修改的属性描述符。属性描述符对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述原创 2020-05-12 11:51:10 · 1086 阅读 · 0 评论 -
Js实现数组排序
Js实现数组排序常用排序的Js实现方案,包括原型链方法调用、简单选择排序、冒泡排序、插入排序、快速排序、希尔排序、堆排序、归并排序。原型链方法调用var arr = [1, 7, 9, 8, 3, 2, 6, 0, 5, 4];arr.sort((a,b) => a-b); // arr.__proto__.sortconsole.log(arr); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]简单选择排序var arr = [1, 7, 9, 8, 3, 2,原创 2020-05-11 13:24:51 · 1247 阅读 · 0 评论