分类：JS

2021
06-13

详解JS中的reduce fold unfold用法

fold（reduce）说说reduce吧,很喜欢这个函数，节省了不少代码量，而且有一些声明式的雏形了，一些常见的工具函数，flatten，deepCopy，mergeDeep等用reduce实现的很优雅简洁。reduce也称为fold，本质上就是一个折叠数组的过程，把数组中的多个值经过运算变成一个值，每次运算都会有一个函数处理，这个函数就是reduce的核心元素，称之为reducer，reducer函数是个2元函数，返回1个单值，常见的add函数就是reducerconstaddReducer=... 继续阅读 >
2021
06-13

如何用JS WebSocket实现简单聊天

短轮询（Polling）短轮询的实现思路就是浏览器端每隔几秒钟向服务器端发送HTTP请求，服务端在收到请求后，不论是否有数据更新，都直接进行响应。在服务端响应完成，就会关闭这个TCP连接，代码实现也最简单，就是利用XHR，通过setInterval定时向后端发送请求，以获取最新的数据。setInterval(function(){fetch(url).then((res)=>{//successcode})},3000);优点：实现简单。缺点：会造成数据在一小段时间内不... 继续阅读 >
2021
06-13

如何写出优雅的JS 代码

变量使用有意义和可发音的变量名//不好的写法constyyyymmdstr=moment().format("YYYY/MM/DD");//好的写法constcurrentDate=moment().format("YYYY/MM/DD");对同一类型的变量使用相同的词汇//不好的写法getUserInfo();getClientData();getCustomerRecord();//好的写法getUser();使用可搜索的名字我们读的会比我们写的多得多，所以如果命名太过随意不仅会给后续的维护带来困难，也会伤害了读我们代码的开发者。让你的变量... 继续阅读 >
2021
06-13

JS 9个Promise面试题

1.多个.catchvarp=newPromise((resolve,reject)=>{reject(Error('TheFails!'))})p.catch(error=>console.log(error.message))p.catch(error=>console.log(error.message))以上代码的输出将会是什么？请选择正确的答案：[]打印一次消息[x]打印两次消息[]UnhandledPromiseRejectionWarning[]程序退出解析：我们使用构造函数方法创建一个Promise，并通过reject回调立即触发错误。然后.catch工... 继续阅读 >
2021
06-12

图片该如何优化来提高网站性能

概述图像是web上提供的最基本的内容类型之一。他们说一张图片胜过千言万语。但是如果你不小心的话，图片大小有时高达几十兆。因此，虽然网络图像需要清晰明快，但它们尺寸可以缩小压缩的，使用加载时间保持在可接受的水平。在我的网站上，我注意到我的主页的页面大小超过了1.1MB，图片占了约88%，我还注意到我提供的图像比它们需要的大(在分辨率方面)，显然，还有很多改进的空间。我开始阅读AddyOsmani的优秀EssentialImageO... 继续阅读 >
2021
06-12

JS根据奖品权重计算中奖概率

一、示例场景1.1、设置抽奖活动的奖项名称奖项名称：["一等奖","二等奖","三等奖","未中奖"]。假设抽奖活动设置了这四个奖项，当然开发者可以扩展更多。varprizes=["一等奖","二等奖","三等奖","未中奖"];//奖项名称数组1.2、设置各奖项权重奖项权重：[1,5,20,74]。奖项权重主要用来表征各奖项的中奖几率，这里奖项权重数组的和值为100（=1+5+20+74），其中1表示一等奖的中奖概率为1%；5表示一等奖的中奖概率为5%；20... 继续阅读 >
2021
06-12

如何用JS实现简单的数据监听

概述主要是用Object.defineProperty实现类似vue的数据绑定。第一步constdata={name:"tom",age:14}Object.defineProperty(data,"name",{get(){return"name被读取了"},set(val){console.log(‘我被赋值了‘,val)}})//将此代码放到浏览器控制台查看效果console.log(data.name)输出的data.name并不是tom，而是name被读取了，因为defineProperty对data的name字段进行的监听劫持，修改了，name字段本应该返回... 继续阅读 >
2021
06-12

详解JS浏览器储存

引言随着对前端的了解越来越深入，了解到了很多种浏览器的存储方案，如Cookie、LocalStorage等，哪这些存储方案有何异同，分别的适用场景又是什么呢。CookieCookie的来源Cookie被创造出来的本意并不是本地储存，而是为了辨别用户身份。众所周知，Http协议是无状态的，也就是说你每一次发送给服务器的请求对于服务器来说都是孤立的，服务器不知道这这些请求来自于谁。比如你向购物车里面添加了一些商品，但是当发送结账请求的时... 继续阅读 >
2021
06-12

深入理解JavaScript中的语法和代码结构

概述所有编程语言都必须遵守特定的规则才能运行。确定编程语言的正确结构的这组规则称为语法。许多编程语言主要由具有语法变化的类似概念组成。在本教程中，我们将介绍JavaScript语法和代码结构的许多规则和约定。功能性和可读性在开始使用JavaScript时，功能性和可读性是关注语法的两个重要原因。有些语法规则是JavaScript功能所必需的。如果不遵循它们，控制台将抛出一个错误，脚本将停止执行。考虑“Hello，World！”中的语法... 继续阅读 >
2021
06-11

JS关于for循环中使用setTimeout的四种解决方案

概述我们先来简单了解一下setTimeout延时器的运行机制。setTimeout会先将回调函数放到等待队列中，等待区域内其他主程序执行完毕后，按时间顺序先进先出执行回调函数。本质上是作用域的问题。因此若是这样将不会得到想要的结果输出1.2.3.4.5，而会连续输出5个6。for(vari=1;i<=5;i++){setTimeout(functiontimer(){console.log(i);},i*1000);}这是因为setTimeout是异步执行，每一次for循环的时候，set... 继续阅读 >
2021
06-11

JS快速掌握ES6的class用法

1.如何构造？先复习一下es5常用的构建类的方法：首先es5的写法使用原型进行对象的方法的，为什么不在构造函数里添加方法呢？因为实例化对象的时候，会重复的建立好多相同的方法，浪费资源。所以需要把对象的方法挂载到prtotype里。关于new和this的绑定问题，可以大概简化为：首先通过new生成一个新的对象然后让这个对象绑定到构造函数的this中去然后绑定这个构造对象的原型对象上最后把这个对象返回给前面定义的对... 继续阅读 >
2021
06-11

聊一聊JavaScript的URL对象是什么

概述如果我们自己编写从URL中分析和提取元素的代码，那么有可能会比较痛苦和麻烦。程序员作为这个社会中最“懒”的群体之一，无休止的重复造轮子必然是令人难以容忍的，所以大多数浏览器的标准库中都已经内置了URL对象。那么现在，有了它，我们就可以将URL字符串作为参数传递给URL的构造函数，并创建它的实例解析URL内容了吗？答案是：“是的！”。要使用URL构造函数创建URL对象，我们在以下代码中使用new来创建：newURL('https:/... 继续阅读 >
2021
06-09

深入JS继承

前言对于灵活的js而言，继承相比于java等语言，继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多，当然也是面试时绕不开的点。撇开ES6class不谈，传统的继承方式你知道几种？每种实现原理是什么，优劣点能谈谈吗。这里就结合具体例子，按照渐进式的思路来看看继承的发展。准备谈到js继承之前先回顾下js实例化对象的实现方式。构造函数是指可以通过new来实例化对象的函数，目的就是为了复用，避免每次都手动声明对象实例... 继续阅读 >
2021
06-09

无编译/无服务器实现浏览器的CommonJS模块化

引言平时经常会逛Github，除了一些star极高的大项目外，还会在Github上发现很多有意思的小项目。项目或是想法很有趣，或是有不错的技术点，读起来都让人有所收获。所以准备汇总成一个「漫游Github」系列，不定期分享与解读在Github上偶遇的有趣项目。本系列重在原理性讲解，而不会深扣源码细节。好了下面进入正题。本期要介绍的仓库叫one-click.js。1.one-click.js是什么one-click.js是个很有意思的库。Github里是这么介... 继续阅读 >
2021
06-09

如何用JavaScript实现一个数组惰性求值库

概述在编程语言理论中，惰性求值（英语：LazyEvaluation），又译为惰性计算、懒惰求值，也称为传需求调用（call-by-need），是一个计算机编程中的一个概念，它的目的是要最小化计算机要做的工作。它有两个相关而又有区别的含意，可以表示为“延迟求值”和“最小化求值”，除可以得到性能的提升外，惰性计算的最重要的好处是它可以构造一个无限的数据类型。看到函数式语言里面的惰性求值，想自己用JavaScript写一个最简实现，加深... 继续阅读 >