分类：Javascript

2021
05-29

理解与使用JavaScript中的回调函数

概述在JavaScript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。因为函数是第一类对象，我们可以在JavaScript使用回调函数。在下面的文章中，我们将学到关于回调函数的方方面面。回调函数可能是在JavaScript中使用最多的函数式编程技巧，虽然在字面上看起来它们一直一小段JavaScript或者jQue... 继续阅读 >
2021
05-29

测量JavaScript函数的性能各种方式对比

概述测量执行一个函数所需的时间总是一个很好的办法，证明某些实现比另一个实现的性能更好。这也是一个很好的方法，可以确保性能没有在某些改变后受到影响，也可以追踪瓶颈。良好的性能有助于获得良好的用户体验，良好的用户体验会让用户回头客。一项研究显示，88%的在线消费者因为性能问题，在用户体验不佳后用户回来的可能性较小。这就是为什么能够识别代码中的瓶颈并测量改进的原因。尤其是在为浏览器开发JavaScript时，要注意... 继续阅读 >
2021
05-29

测量JavaScript函数的性能各种方式对比

概述测量执行一个函数所需的时间总是一个很好的办法，证明某些实现比另一个实现的性能更好。这也是一个很好的方法，可以确保性能没有在某些改变后受到影响，也可以追踪瓶颈。良好的性能有助于获得良好的用户体验，良好的用户体验会让用户回头客。一项研究显示，88%的在线消费者因为性能问题，在用户体验不佳后用户回来的可能性较小。这就是为什么能够识别代码中的瓶颈并测量改进的原因。尤其是在为浏览器开发JavaScript时，要注意... 继续阅读 >
2021
05-29

如何用JavaScript检测当前浏览器是无头浏览器

什么是无头浏览器(headlessbrowser)？无头浏览器是指可以在图形界面情况下运行的浏览器。我可以通过编程来控制无头浏览器自动执行各种任务，比如做测试，给网页截屏等。为什么叫“无头”浏览器？“无头”这个词来源于最初的“无头计算机(Headlesscomputer)”。维基百科关于的“无头计算机”词条：无头系统（headlesssystem）是指已配置为无须显示器（即“头”）、键盘和鼠标操作的计算机系统或设备。无头系统通常通过网络连接控... 继续阅读 >
2021
05-28

如何使JavaScript休眠或等待

概述JavaScript不具有sleep()函数，该函数会导致代码在恢复执行之前等待指定的时间段。如果需要JavaScript等待，该怎么做呢？假设您想将三则消息记录到Javascript控制台，每条消息之间要延迟一秒钟。JavaScript中没有sleep()方法，所以你可以尝试使用下一个最好的方法setTimeout()。不幸的是，setTimeout()不能像你期望的那样正常工作，这取决于你如何使用它。你可能已经在JavaScript循环中的某个点上试过了，看到setTimeout... 继续阅读 >
2021
05-28

详解JS中的compose函数和pipe函数用法

compose函数compose函数可以将需要嵌套执行的函数平铺，嵌套执行就是一个函数的返回值将作为另一个函数的参数。我们考虑一个简单的需求：这个需求很简单，直接一个计算函数就行：constcalculate=x=>(x+10)*10;letres=calculate(10);console.log(res);//200但是根据我们之前讲的函数式编程，我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤，于是我们拆出了一个加法函数和一个乘法函数:constadd=x=>... 继续阅读 >
2021
05-28

详细讨论JavaScript中的求值策略

最近在研究lambda演算中的η-变换在JavaScript中的应用，偶然在stackoverflow上看到一个比较有意思的问题。关于JavaScript的求值策略，问js中函数的参数传递是按值传递还是按引用传递？回答很经典。一栗以蔽之functionchangeStuff(a,b,c){a=a*10;b.item="changed";c={item:"changed"};}varnum=10;varobj1={item:"unchanged"};varobj2={item:"unchanged"};changeStuff(num,obj1,obj2);consol... 继续阅读 >
2021
05-28

详细讨论JavaScript中的求值策略

最近在研究lambda演算中的η-变换在JavaScript中的应用，偶然在stackoverflow上看到一个比较有意思的问题。关于JavaScript的求值策略，问js中函数的参数传递是按值传递还是按引用传递？回答很经典。一栗以蔽之functionchangeStuff(a,b,c){a=a*10;b.item="changed";c={item:"changed"};}varnum=10;varobj1={item:"unchanged"};varobj2={item:"unchanged"};changeStuff(num,obj1,obj2);consol... 继续阅读 >
2021
05-28

你可能不需要在JavaScript使用switch语句

没有switch就没有复杂的代码块switch很方便：给定一个表达式，我们可以检查它是否与一堆case子句中的其他表达式匹配。考虑以下示例：constname="Juliana";switch(name){case"Juliana":console.log("She'sJuliana");break;case"Tom":console.log("She'snotJuliana");break;}当name为“Juliana”时，我们将打印一条消息，并立即中断退出该块。在switch函数内部时，直接在case块使用return，... 继续阅读 >
2021
05-28

Javascript前端优化代码

if判断的优化JavaScript条件语句在我们平时的开发中是不可避免要用到的，但是很多时候我们的代码写的并不好，一连串的if-else或者多重嵌套判断都会使得代码很臃肿，下面举例进行优化。需求：现在有4个产品，分别是手机、电脑、电视机、游戏机，当然每个产品显示的价格不一样。1、最简单的方法：if判断letcommodity={phone:'手机',computer:'电脑',television:'电视',gameBoy:'游戏机',}functionprice(name){... 继续阅读 >
2021
05-28

JavaScript哪些场景不能使用箭头函数

1.定义对象方法 JS中对象方法的定义方式是在对象上定义一个指向函数的属性，当方法被调用的时候，方法内的this就会指向方法所属的对象。letobj={array:[1,2,3],sum:()=>{console.log(this===window);//truereturnthis.array.reduce((result,item)=>result+item);}};console.log(this===window);//trueobj.sum();//报错：UncaughtTypeError:Cannotreadproperty... 继续阅读 >
2021
05-25

Javascript怎样使用SessionStorage和LocalStorage

前言作为Web开发人员，在Web浏览器中存储数据以改善用户体验和提升Web应用程序性能是非常常见的。在大多数情况下，可供我们使用就是LocalStorage和SessionStorage。本文中，我们将会从安全性和用户体验两个方面对SessionStorage和LocalStorage进行评估。然后我们将讨论如何根据您的要求挑选合适使用的对象。SessionStorage和LocalStorage简介在HTML5之前，开发人员一般是通过使用Cookie在客户端保存一些简单的信息的。在HTML5发布... 继续阅读 >
2021
05-25

详解JavaScript Promise和Async/Await

概述一般在开发中，查询网络API操作时往往是比较耗时的，这意味着可能需要一段时间的等待才能获得响应。因此，为了避免程序在请求时无响应的情况，异步编程就成为了开发人员的一项基本技能。在JavaScript中处理异步操作时，通常我们经常会听到"Promise"这个概念。但要理解它的工作原理及使用方法可能会比较抽象和难以理解。四个示例那么，在本文中我们将会通过实践的方式让你能更快速的理解它们的概念和用法，所以与许多传统干巴... 继续阅读 >
2021
05-25

怎样用Javascript实现函数柯里化与反柯里化

函数柯里化（黑人问号脸）？？？Currying（黑人问号脸）？？？妥妥的中式翻译既视感；下面来一起看看究竟什么是函数柯里化：维基百科的解释是：把接收多个参数的函数变换成接收一个单一参数（最初函数的第一个参数）的函数，并返回接受剩余的参数而且返回结果的新函数的技术。其由数学家HaskellBrooksCurry提出，并以curry命名。概念往往都是干涩且难懂的，让我们用人话来解释就是：如果我们不确定这个函数有多少个参数，我们可... 继续阅读 >
2021
05-25

怎样用Javascript实现单例模式

概述单例模式也称为单体模式，规定一个类只有一个实例，并且提供可全局访问点；在读这篇文章之前，也许你对单例模式的概念感到模糊或者不清楚，但是其实在日常的开发中你肯定用到过单例模式；JavaScript中没有类的定义，单例模式的特点是”唯一“和”全局访问“，那么我们可以联想到JavaScript中的全局对象，利用ES6的let不允许重复声明的特性，刚好符合这两个特点；是的，全局对象是最简单的单例模式；letobj={name:"咸鱼"... 继续阅读 >
2021
05-25

怎样用Javascript实现建造者模式

概述建造者模式是相对比较简单的一种设计模式，属于创建型模式的一种；定义：将一个复杂的对象分解成多个简单的对象来进行构建，将复杂的构建层与表现层分离，使相同的构建过程可以创建不同的表示模式；优点：建造者模式的封装性比较好，创建对象和构建过程解耦；建造者模式很容易扩展，当我们需要扩展的时候，通过一个新的建造者就可以实现；模式作用：分步创建一个复杂的对象解耦封装过程和具体创建组件无需... 继续阅读 >