分类：JavaScript

2020
10-08

JavaScript装箱及拆箱boxing及unBoxing用法解析

首先我们来看看这段代码vars1="abc";vars2=s1.indexOf("a")s1是个string啊，怎么会有indexOf()方法呢？这里就涉及到了JavaScript中的装箱与拆箱的概念了装箱：把基本数据类型转化为对应的引用数据类型的操作在《javascript高级程序设计》中有这样一句话：每当读取一个基本类型的时候，后台就会创建一个对应的基本包装类型对象，从而让我们能够调用一些方法来操作这些数据。还是拿最开始的例子vars1="abc";vars2=... 继续阅读 >
2020
10-08

通过实例解析JavaScript for in及for of区别

对数组的遍历大家最常用的就是for循环，ES5的话也可以使用forEach，ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等，只不过他们的返回结果不一样。但是使用foreach遍历数组的话，使用break不能中断循环，使用return也不能返回到外层函数。那么接下来我们一起看一下forin和forof的区别吧。forin看一个简单的例子//forin应用于数组Array.prototype.sayHello=function(){console.log("Hello")... 继续阅读 >
2020
10-07

JavaScript Event Loop相关原理解析

JavaScript Event Loop相关原理解析 1.单线程模型单线程模型指的是，JavaScript只能在一个线程上运行，也就是说只能同时指向一个任务，其他任务都必须在后面排队等待。注意：虽然JavaScript只在一个线程上运行，但并不代码JavaScript引擎只有一个线程。事实上，JavaScript引擎有多个线程，单个脚本只能在一个线程上运行（主线程），其他线程都是在后台配合。JavaScript为什么要采用单线程，而不是多线程？不想让浏览器变得复杂（避免复杂性），因为多线程需要共享资源... 继续阅读 >
2020
10-06

基于javascript处理二进制图片流过程详解

今天学习怎么生成二维码，我习惯所有请求都用ajax完成但是今天发现jquery的ajax不支持二进制，只能搞纯文本于是百度之后手动实现这一功能functiongetBinary(url,args,success){varxmlhttp=newXMLHttpRequest();vardata=eval(args);vari=0;for(varkeyindata){if(i++===0){url+='?'+key+"="+data[key];}else{url+='&'+key+"="+data[key];}}xmlhtt... 继续阅读 >
2020
10-04

JavaScript冒泡算法原理与实现方法深入理解

本文实例讲述了JavaScript冒泡算法。分享给大家供大家参考，具体如下：在面试中经常会遇到面试官问到冒泡算法。今天总结一下。###概念有一组数，依次比较两个相邻的数，如果他们的顺序（如从大到小或从小到大等）错误就把他们交换过来。我们先假设这一组数是有顺序的，那么我们找出它的规则。我们按照从小到大的顺序依次交换长方形，得到以下的结果。第一轮交换结果：CBAD    交换次数：3次第二轮交换结果：B... 继续阅读 >
2020
10-04

JavaScript字符和ASCII实现互相转换

在处理字符时，有时需要和ASCII码相互转换，博主便简单整理了一篇。字符转ASCII需要用变量的方法（js自带函数）。单个字符转ASCIIletx='a';x.charCodeAt();//会输出'a'的ASCII码，即97字符串转ASCIIletx='abc';//x必须严格为char类型//若x=1，会报错，而不会转换成'1'x.charCodeAt(1);//会输出x[1],即'b'的ASCII码，即98x.charCodeAt(0,1);//只会输出x[0],即默认只看第一位参数x.charCodeAt(3);//x[3]没有数据... 继续阅读 >
2020
10-04

JavaScript监听键盘事件代码实现

在写网页的时候，常常需要监听键盘事件，让我们来看看如何实现吧。监听方式键盘事件往往是全局监听，设监听的函数为keyboard()。keyup事件类型。该类型触发条件为按键按下去并松开。//长按并松开只触发一次document.addEventListener('keyup',keyboard);document.onkeyup=keyboard;//记得不要加括号！keydown事件类型。该类型触发条件为按键按下去。//长按可以触发多次document.addEventListener('keydown',keyboard);documen... 继续阅读 >
2020
10-01

JavaScript forEach中return失效问题解决方案

JavaScript forEach中return失效问题解决方案 在最近学习并使用ES6过程中，在一次循环数组并且作判断时返回值无效，return拿到的结果是undefined我们分别使用for循环和forEach方法来验证：结果：for循环里的可以return终止遍历，forEach里的return不能终止遍历以上是return终止for循环的遍历和forEach循环的遍历测试。--------------------------------------------------------------分割线----------------------------------------------------------------------------... 继续阅读 >
2020
09-30

JavaScript Window浏览器对象模型原理解析

浏览器对象模型(BOM)使JavaScript有能力与浏览器"对话"。浏览器对象模型(BOM)浏览器对象模型（BrowserObjectModel(BOM)）尚无正式标准。由于现代浏览器已经（几乎）实现了JavaScript交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。Window对象所有浏览器都支持window对象。它表示浏览器窗口。所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性。全... 继续阅读 >
2020
09-30

基于JavaScript或jQuery实现网站夜间/高亮模式

创建夜间/高亮模式的步骤：创建一个HTML文档。为文档文件以及黑暗模式创建CSS。添加一个开关转换器按钮，以在明暗模式之间进行切换。使用javascript或jQuery代码向开关转换器添加功能，以在明暗模式之间切换。示例1：以下示例演示了使用JQuery代码在明暗模式之间进行切换。它基本上通过使用函数hasClass（），addClass（）和removeClass（）方法来工作。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8">... 继续阅读 >
2020
09-30

JavaScript闭包原理与用法学习笔记

本文实例讲述了JavaScript闭包原理与用法。分享给大家供大家参考，具体如下：闭包(Closure)闭包是一个函数和词法环境的组合，函数声明在这个词法环境中。词法作用域：看下面的一个例子：functioninit(){varname='GaoPian';//name是局部变量functiondisplayName(){//displayName();是内部函数，一个闭包alert(name);//使用外部函数声明的变量}displayName();}init();init()创... 继续阅读 >
2020
09-30

JavaScript如何实现图片处理与合成

引言：图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。首先，我这里将前端图片处理暂且分成两种类型：基础类型与算法类型；基础类型的图片处理技术:图片缩放，旋转，添加边框，图片合成，拼图等业务都属于基础类型的图片处理，其区分点在于无需使用像素级别的算法，而是通过计算改变图片的尺寸及位置等来改造图片。例如常用的贴纸功能... 继续阅读 >
2020
09-30

JavaScript基于用户照片姓名生成海报

前言最近在为公司的一个比赛制作专题页，碰到一个使用参赛者上传的照片生成专属海报的需求，实现过程中用到了一些以前没用过的api，也踩了一些坑，于是将其记录下来。需求描述用户点击按钮进行照片上传照片上传完成后，将照片进行裁剪，并和海报背景、姓名等组合得到海报将生成的海报上传效果大概如下：海报背景：成品：实现过程1、初始化canvascanvas#poster-canvas(width='960'height='1280')functioninitCanvas(){ca... 继续阅读 >
2020
09-30

JavaScript设计模式之策略模式实现原理详解

俗话说，条条大路通罗马。在现实生活中，我们可以采用很多方法实现同一个目标。比如我们先定个小目标，先挣它一个亿。我们可以根据具体的实际情况来完成这个目标。策略模式的定义定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。举个例子：表单校验在一个Web项目中，注册、登录等功能的实现都离不开表单提交。表单校验也是前端常常需要做的事。假设我们正在编写一个注册的页面，在点击提交按钮之前，有如下几条... 继续阅读 >
2020
09-30

JavaScript隐式类型转换代码实例

值类型之间的数据类型转换:（1）数字和字符串使用+运算符:数字和字符串如果使用+运算符进行操作，那么会将数字先转换为字符串，然后进行字符串连接操作:varstr="stringtext";varnum=10;console.log(str+num)//"stringtext10"(2）布尔值参与的+运算符操作:如果有布尔型参与，那么首先会将布尔值转换为对应的数字或者字符串，然后再进行相应的字符串连接或者算数运算。varnum=12;varbool=true;varstr="text";... 继续阅读 >