javaScript
文章平均质量分 81
鸭绒
追求起点是大厂。
展开
-
JavaScript、TypeScript中的Class的本质与特性
文章目录1. 类2. 类的相关概念3. ES6中类的用法3.1属性和方法1. 类传统方法中,JavaScript 通过构造函数实现类的概念,通过原型链实现继承。而在 ES6 中,我们终于迎来了 class。其中class的本质:构造函数 + 原型链。2. 类的相关概念虽然 JavaScript 中有类的概念,但是可能大多数 JavaScript 程序员并不是非常熟悉类,这里对类相关的概念做一个简单的介绍。类(Class):定义了一件事物的抽象特点,包含它的属性和方法对象(Object):类的实转载 2021-05-19 18:25:03 · 671 阅读 · 0 评论 -
数组的去重和扁平化
数组的去重和扁平化的方法有很多,但实现相同的功能,某些方法有人实现的就很复杂,下面我们来说几个简单的方法。1.数组去重1.1 ES5语法 function unique(arr){ var res = arr.filter((item,index,array)=>{ return array.indexOf(item) === index }) return res } console.log(un.原创 2021-04-15 00:01:57 · 279 阅读 · 0 评论 -
JS模块化CommonJS、ES6模块化 、AMD、CMD知识总结
1. 什么是模块化?将一个复杂的程序依据一定的规则封装成几个块(文件),并最终组合在一起。块(文件)的内部数据/实现是私有的,只是向外部暴露一些接口(方法)与外部其他模块通信。2.模块的进化史1.最早的代码风格,全局被污染,容易造成命名冲突。function foo(){ //...}function bar(){ //...}2.简单封装:namespace模式。虽然减少了全局变量的数目,但本质是对象,不安全。var myApp={ foo:function(原创 2021-02-06 14:21:39 · 151 阅读 · 0 评论 -
力扣题库JS版:最小路径和
题目:给定一个包含非负整数的 m x n 网格 grid ,请找出一条从左上角到右下角的路径,使得路径上的数字总和为最小。说明:每次只能向下或者向右移动一步。示例 1:输入:grid = [[1,3,1],[1,5,1],[4,2,1]]输出:7解释:因为路径 1→3→1→1→1 的总和最小。示例 2:输入:grid = [[1,2,3],[4,5,6]]输出:12解题思想:辅组数组dpt需从下往上初始化,下面的代码实现就是从上面方程式转化而来,但需要加入一些特殊判断,因为原创 2020-12-27 11:38:20 · 566 阅读 · 0 评论 -
JavaScript 疑难、易错笔试选择题+分析
1.以下代码执行时不会在控制台输出错误信息的是:BA. let a = decodeURIComponent('%');B. var a; a(); function a() { console.log(a);C. Promise.reject(123).finally(a => { console.log(a); }); }D. var a = 1; let a = 2; console.log(a);分析B:js有变量提升和函数原创 2020-12-24 20:19:13 · 12862 阅读 · 1 评论 -
JS封装深拷贝、数组去重、获取和设置cookie方法
深拷贝:针对的是数组、对象,因为数组和对象是引用类型,直接利用“=”进行拷贝,则拷贝的只是对象或数组在堆中的地址,这相当于浅拷贝,即新、旧对象或数组任一个修改值,新、旧对象或数组都会受到影响。深拷贝就是要做到新立门户,生成一个全新的对象或数组,只是内容相同而已,这样的话,谁改变都不再影响对方,不再有任何瓜葛。 function deepClone(Obj) { var buf if (Obj instanceof Array) { buf = []原创 2020-12-16 19:44:53 · 182 阅读 · 0 评论 -
思维导图--JS的事件流以及事件流兼容性问题
思维导图内容:如何使用JS事件,以及IE和标准DOM事件模型之间存在的差别。原创 2020-12-09 21:37:45 · 166 阅读 · 0 评论 -
JS判断数据的“类型”最稳定的、没局限的方式:Object.prototype.toString.call()
JS有三种判断数据类型的方法:typeofinstanceofObject.prototype.toString.call()但是前面两种方法是有局限性的,它们能判断的数据类型只适用某些数据。详细的不再多说,想继续学习typeof、instanceof的作用范围和原理,可以看我这篇博客。下面就说说判断数据的“类型”最稳定、全面的方式:<!DOCTYPE html><html lang="en"> <head> <meta charset原创 2020-12-09 11:30:12 · 151 阅读 · 0 评论 -
彻底搞懂JS“+”号操作符导致的隐式类型转换:var str=true+11+null+9+undefined+“zhuanbang“+false+null+9+[]
题目:var str=true+11+null+9+undefined+“zhuanbang”+false+null+9+[];问题:str值等于多少?理解下面这张图,便能得出题目的正确答案:分析:注意: 加法规则从左到右计算console.log(true + 11):true转化为1,结果为12console.log(true + 11 + null):null转化为0,结果为12console.log(true + 11 + null + 9):12+9=21console.原创 2020-12-08 00:21:39 · 288 阅读 · 0 评论 -
原生前端与NodeJS服务端使用socket.io实现单聊的关键思想
先来展示我简单实现的单聊功能:这是我在浏览器打开的两个聊天页面,实现的单聊功能,由于只是一个实验,所以就没太注意样式。官方对socket.io的介绍:使用LAMP (PHP)等流行的web应用程序堆栈编写聊天应用程序通常非常困难。它涉及到轮询服务器以查看更改、跟踪时间戳,而且它比应该的速度要慢得多。套接字在传统上是大多数实时聊天系统架构的解决方案,它提供客户机和服务器之间的双向通信通道。这意味着服务器可以向客户端推送消息。每当您编写一个聊天消息时,其思想是服务器将获得它并将其推给所有其他连接的客原创 2020-11-20 12:21:11 · 582 阅读 · 0 评论 -
数据结构:JS实现构建堆、堆排序
上一篇博客已经学习了堆以及堆排序的思想,不了解堆的可以先学习这篇博客。直接上JS实现堆以及堆排序:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>堆排序</ti原创 2020-11-14 20:01:26 · 270 阅读 · 0 评论 -
HTML5之Web Workers多线程的使用与不足
什么是Web Worker ?当HTML页面中执行JS时,页面的状态是不可响应的,直到脚本已完成。Web Worker是运行在后台的JavaScript,独立于其它脚本,不会影响页面的性能。您可以继续继续做任何想做的事情:点击、选取内容等,而此时web worker在后台运行。在学习Web Worker前,我们先举个例子看看执行复杂的JS时,是不是会影响页面性能。封装一个函数实现斐波那契数列:数学公式:F(n)=F(n-1)+F(n-1);即当前值等于前两个值之和。代码示例:<!DOC原创 2020-11-12 17:36:25 · 697 阅读 · 0 评论 -
通俗易懂的学习JS线程
很多文章在介绍线程以及线程之间的关系,都存在着脱节的现象。还有的文章过于广大,涉及到了内核,本文希望以通俗易懂的话去描述晦涩的词语,可能会和实际有一丢丢的出入,但是更易理解。我们都知道JS是单线程的,即js的代码只能在一个线程上运行,也就说,js同时只能执行一个js任务,但是为什么要这样呢?这与浏览器的用途有关,JS的主要用途是与用户互动和操作DOM。设想一段JS代码,分发到两个并行互不相关的线程上运行,一个线程在DOM上添加内容,另一个线程在删除DOM,那么会发生什么?以哪个为准?所以为了避免复杂性,J转载 2020-11-11 23:20:53 · 233 阅读 · 0 评论 -
JS中的单线程运行,宏任务、微任务、EventLoop详解
在前端的面试中经常会问到关于代码执行顺序的问题,尤其是下面的一段代码setTimeout( () => console.log(4))new Promise(resolve => { resolve() console.log(1)}).then( () => { console.log(3)})Promise.resolve(5).then(() => console.log(5))console.log(2)问题是:在浏览器上面 1 2 3 4转载 2020-11-11 18:09:04 · 392 阅读 · 0 评论 -
两道关于prototype原型链的面试题
第一道: function A() {} A.prototype.n = 1 var b = new A() A.prototype = { n: 2, m: 3, } var c = new A() console.log(b.n, b.m, c.n, c.m)题目分析:下面图中画出了上面程序执行时,变量在内存中的状态,A.prototype最后改变了指向,但实例b仍然指向原来的地址,原创 2020-11-11 16:16:40 · 1160 阅读 · 0 评论 -
JS的基本类型、引用类型数据在内存存储和变量赋值的区别
JS有两种变量类型:1.基本数据类型:nullundefinedstringnumberboolean3.引用(对象)类型:functionarrayobject这两种变量类型在内存中的存储区别非常大。两种变量类型的存储:变量是基本类型:变量保存的值就是数据。变量是引用类型:变量保存的值是地址值。注意:全局、局部变量都是存储在栈中,而对象是存储在堆中(对象包括数组、函数)。正由图所示那样,基本类型变量,其变量与值都是存在栈中,而引用类型是在栈中存了变量名和一个指原创 2020-11-10 23:11:50 · 435 阅读 · 0 评论 -
JS 中 undefined、null的区别
1.undefined与null的区别?undefined表明定义了变量但是还未赋值。null表明定义了变量并且赋值了,但赋值为null。2.什么时候给变量赋值为null?常见两种情况:变量初始化为null时,表明将要赋值为对象。 let obj = null; //经过一系列逻辑 obj={ name:'鸭绒' }某全局变量或闭包对象无意义后,赋值为null全局变量或闭包若不赋值为null,则浏览器不会将它视为垃圾对象,这将会占用资源或导致内存泄漏。..原创 2020-11-10 20:15:00 · 99 阅读 · 0 评论 -
JS的 typeof 与 instanceof 的判断范围详解
typeof 与 instanceof用于判断变量数据的类型,便于进一步操作数据,那它们两个判断类型都是有限制的,只能判断某一类,下面我们会明确区分它们的判断类型。JS有五种基本数据类型:nullundefinednumberbooleanstring三种复杂类型:Object(任意对象)Function(一种可以执行的特殊对象)Array(一种数值类型的下标的特殊对象)注意:函数和数组也是对象。1.typeof的判断范围可判断:undefined、数值、字符串、布尔.原创 2020-11-10 19:55:01 · 342 阅读 · 0 评论 -
JS原型对象prototype与__proto__的区别搞清楚没?
理解protopype和__proto__的区别在于一句话:只有函数Function和对象Object有prototype属性,而实例对象没有prototype属性,但它们的实例对象有__proto__属性,并且它们(prototype、_proto_)指向同一个原型对象,即它们是相等的 (指向同一地址)。我常听到一个容易令人误解的观点:对象没有protype属性,只有函数有prototype属性。这句话让我晕了很久,为什么呢?因为函数不就是一个对象吗?我们不是经常看到Object.prototy原创 2020-11-06 23:40:46 · 735 阅读 · 0 评论 -
JS严格模式和正常模式有哪些语法区别?
官方在ES5添加“严格模式”这种运行模式的目的:消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为;消除代码运行的一些不安全之处,保证代码运行的安全;提高编译器效率,增加运行速度;为未来新版本的Javascript做好铺垫。使用严格模式很简单,只需下面这个标志: "use strict";我们重点学习的是严格模式和正常模式在语法上有什么差别。1.全局变量必须显式声明在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式原创 2020-11-04 23:42:40 · 414 阅读 · 0 评论 -
正则表达式知识总结
文章目录1.特殊语法1.1 特殊字符 “.”1.2 特殊字符 “ \ ”1.3 特殊字符“[ ]”1.4 特殊字符“-”1.5 特殊字符“^”1.特殊语法1.1 特殊字符 “.”含义:可以匹配任何一个单个的字符。在同一个正则表达式里允许使用多个 “.” 字符,它们可以连着出现,也可以间隔着出现在模式的不同位置。1.2 特殊字符 “ \ ”含义: 如果一个模式需要一个英文的句号,就要想办法告诉正则表达式你需要的是. 字符本身而不是它在正则表达式的特殊含义。为此,你必须在.前面加上一个(反斜杠)字原创 2020-08-30 22:59:23 · 259 阅读 · 0 评论 -
前端疑难题 每日一题,365天就多掌握365个知识点 查漏补缺
这个题集是关于JS一些有点深度,且容易让人犯错的题目,每日更新一道,相信你们也能从中学到知识。1.如下代码的输出结果: console.log(1 + "2" + "2"); console.log(1 + +"2" + "2"); console.log("A" - "B" + "2"); console.log("A" - "B" + 2);知识点:隐式强制类型转换。“+”可以进行强制类型转换,而“-”号没有。2.下面关于块内声明函数的做法哪些是.原创 2020-08-29 01:47:42 · 1007 阅读 · 0 评论 -
【JS总结】JS操作数组的完整方法与使用总结
数组是用于存储大量数据常用的类型,因此操作数组的方法很多,在此我做个总结,便于在要管理数据时有个条件反射。文章目录1.concat()2. every()3. filter()4. indexOf()||lastIndexOf()5. join()6. map()7. pop()&&shift()8. push()&&unshift()9. reverse()10. slice()1.concat()定义:concat()方法用于连接两个或多个数组。实例: .原创 2020-07-30 11:47:05 · 362 阅读 · 0 评论 -
【前端进阶】 ES6之“生成器”学习+ 生成器和Promise的结合使用
前言:ES6生成器是一种可以实现看似同步的异步流程控制表达风格。1.1 打破完整运行在代码中几乎普遍依赖的一个假定:一个函数一旦开始执行,就会运行到结束,期间不会有其他代码能够打断它并插入其间。这是个错误的假定。ES6引入了一个新的函数类型,它并不符合这种运行到结束的特性,这类新函数被称为生成器。看下面代码:var x=1; function *foo(){ x++; yield;//暂停 console.log("x:",x); }原创 2020-06-16 11:10:10 · 472 阅读 · 0 评论 -
【前端进阶】 全面分析JS之“Promise”的局限性&&“Promise”是如何解决“回调函数”的几个缺陷
前言:文章共两部分:谈Promise的局限性Promise如何解决了回调函数的缺陷首先“回调函数”的几个缺陷在我上一篇博客提出,如有兴趣可看看。1.Promise的局限性1.1 顺序错误处理看下面代码:var p=Promise.resolve(42); p.then( function fulfilled(msg){ //数字没有string函数,所以这里会抛出错误 console.log(msg.toLowerCase());原创 2020-06-13 11:34:43 · 624 阅读 · 2 评论 -
【前端进阶】谈JS之“回调函数”两大缺陷
前言:我们都知道在Promise等异步技术还没出现时,回调函数是实现异步的重中之重。很多人知道使用回调函数,却不知回调函数出现的作用主要是实现异步。但随着现在应用越来越复杂强大,回调函数在异步处理中已然是不够用了,尽管还是很多人坚持认为回调函数够用。本博客主要谈谈回调函数的两个缺陷:缺乏顺序性缺乏可信任性1.缺乏顺序性看下面伪代码(嵌套回调): listen("click",function handler(evt){ setTimeout(function request(){原创 2020-06-11 12:10:17 · 1338 阅读 · 0 评论 -
【前端进阶】从底层剖析JS之异步编程原理
前言:异步:现在与未来的理解?假设我们在运行一段for循环,开始到结束的过程,当然这也需要持续一段时间(几微秒或几毫秒)才能完成。它是指程序的一部分现在执行,而另一部分则将来运行。现在与将来之间有段间隙,在这段间隙中,程序没有活跃执行其它程序,而是等待for循环的完成。这将浪费了这段间隙的时间,给了用户很不好的体验。我们需要管理这段时间间隙,这段间隙可能是在等待用户输入、从数据库或文件系统中请求数据、通过网络发送数据并等待响应。或者是在以固定时间间隔执行重复任务等等。这些情况我们都需管理这段时间间隔的原创 2020-06-09 21:22:12 · 514 阅读 · 0 评论 -
【前端】 JS之“强制类型转换” 小知识点大BUG
前言我不得不承认类型转换是让人头痛的一个知识点,但这又是我们不得逃避的知识点,所以我们还是硬着头皮学吧,积少成多,总会发光发亮。概念:将值从一种类型转换为另一种类型转换通常称为类型转换,这是显式的情况,隐式的情况称之为强制类型转换。1.1 值类型转换如何区分显式和隐式类型转换,显式转换很明显,而隐式转换通常是某些操作产生的副作用。看下面代码:var a=42;var b=a+"";//隐式强制类型转换var c=String(a);//显示强制类型转换对变量b而言,强制类型转换是隐式的原创 2020-06-08 16:03:02 · 309 阅读 · 0 评论 -
【前端进阶】 全面剖析JS之“Object” 看到最后发现你原来枪里没有子弹
1.1 语法对象有两种形式定义:1. 声明(文字)形式2. 构造形式1.声明形式 var myObj={ key:value, //.... }2.构造形式 var myObj=new Object(); myObj.key=value;构造形式和文字形式生成的对象是一样的。唯一的区别是:在文字声明种你可以添加多个键/值对,但在构造形式中,你必须逐个添加属性。注意: 通常使用内置对象的构造函数声明对象往往影响性能。1.2 类型在javascript中,一共有六种主要类型原创 2020-06-07 13:28:54 · 571 阅读 · 2 评论 -
【前端JS】深拷贝与浅拷贝的理解与实现
1. 前言javaScript有深拷贝与浅拷贝之分,两者的区分在于由拷贝生成的新对象是否会随着源对象的改变而改变。举例:对象B是通过对象A拷贝而来的,当对象A的某个属性发生改变时,若对象B相应的属性没有发生改变就是深拷贝;否则就是浅拷贝。浅拷贝好理解,看下面代码:var objA={ a:"foo", b:"baz"}var objB=objA;objA.a="FOO";console.log(objA);//a:"FOO",b:"baz"console.log(objB);//a:.原创 2020-06-06 22:36:38 · 232 阅读 · 0 评论 -
【前端进阶】全面剖析JS之“this” 看到最后发现你原来枪里没有子弹
1.认识this1.1为什么要用this对于一个javaScript开发者来说,this是一种非常复杂的机制的机制,那它到底有用在哪里呢?它值得我们付出大代价去学习吗?的确。解释一下为什么要使用this。function identify(){ return this.name.toUpperCase();}function speak(){ var greeting="Hello,I'm"+identify.call(this); console.log(greetin原创 2020-06-04 22:13:18 · 211 阅读 · 0 评论 -
「前端进阶」完全吃透Promise,深入JavaScript异步
完全吃透PromisePromise晋级,需要的全部都在这主要内容:promise基本实现原理promise 使用中难点(链式调用,API基本上返回都是一个新Promise,及参数传递)promise 对异常处理promise 简单实现及规范参考:漫谈promise使用场景30分钟,让你彻底明白Promise原理阮一峰ES6入门JavaScript Promise:简介牛刀小试对于现在的前端同学来说你不懂promise你都不好意思出门了。对于前端同学来说promise已经成为.转载 2020-06-02 22:57:51 · 264 阅读 · 0 评论 -
javaScript闭包和模块机制
前言:对于那些有一点Js使用经验但却完全不理解闭包概念的人来说,理解闭包可以看作是某种意义上的重生,但是需要付出非常多的努力和牺牲才能理解这个概念。一、什么是闭包?函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中,每当函数被创建,就会在函数生成时生成闭包。二、闭包用途1、在自身词法作用域之外的地方读取函数内部的变量2、让这些变量的值始终保持在内存中。不原创 2020-05-25 21:52:42 · 145 阅读 · 0 评论 -
call()和apply()的详解
一、语法1.apply(thisObj,[argArray]):thisObj是指想改变某函数中this指针,让this指针指向thisObj的对象,[argArray]是参数数组。2.call(thisObj,arg1,arg2,...argN):thisObj同上,传递给函数的参数必须列举出来。注意:如果没有提供thisObj参数,那么Global对象被用于thisObj。二、两者异同1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。2. 相同点:这两个方法的原创 2020-05-22 22:09:28 · 920 阅读 · 0 评论 -
图片获取、格式转换与后台存储
后端是如何存储图片的呢?将图片以独立文件的形式存储在服务器的文件夹中,再将该文件路径存入数据库中.将图片转化为二进制流,直接存储到数据库的Image类型字段中.第一种方式存储,则前端可以直接将存储路径赋值给src属性显示图片.第二种方式存储,则前端得到的是二进制流数据,需将二进制流交由blob对象处理,然后通过blob的API生成临时的URL赋值给src属性来显示图片.个人认为第一种...原创 2020-03-14 21:56:29 · 8820 阅读 · 0 评论