javascript
文章平均质量分 89
酒 客
这个作者很懒,什么都没留下…
展开
-
axios的使用详解
axios的基本使用axios是什么 前端最流行的ajax请求库,react/vue官方都推荐使用axios发送ajax请求,是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。文档:https://hithub.com/axios/axios 细节:axios包括TypeScript定义。特性从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应拦截转换请求数据和响应数据取消原创 2022-03-11 19:27:44 · 13872 阅读 · 0 评论 -
js中的类型转换
javaScript中的类型转换概述JavaScript 是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。var x = y ? 1 : 'a';上面代码中,变量x到底是数值还是字符串,取决于另一个变量y的值。y为true时,x是一个数值;y为false时,x是一个字符串。这意味着,x的类型没法在编译阶段就知道,必须等到运行时才能知道。虽然变量的数据类型是不确定的,但是各种运算符对数据类型是有要求的。如果运算符发现,运算子的类型与预期不符,就会自动转换类型。比如,减法运算符预期左右两侧原创 2022-01-17 15:32:39 · 497 阅读 · 0 评论 -
深拷贝与浅拷贝解析
深拷贝与浅拷贝解析前言在 javascript 中有不同的方法来复制对象,如果你还不熟悉这门语言的话,复制对象时就会很容易掉进陷阱里,那么我们怎样才能正确地复制一个对象呢?读完本文,希望你能明白:什么是深/浅拷贝,他们跟赋值有何区别?深/浅拷贝的实现方式有几种?浅拷贝与深拷贝浅拷贝是创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的就是内存地址 ,所以如果其中一个对象改变了这个地址,就会影响到另一个对象。深拷原创 2022-01-09 15:02:01 · 150 阅读 · 0 评论 -
防抖节流函数解析
防抖节流函数的解析认识防抖和节流函数防抖和节流的概念其实最早并不是出现在软件工程中,防抖是出现在电子元件中,节流出现在流体流动中而JavaScript是事件驱动的,大量的操作会触发事件,加入到事件队列中处理。而对于某些频繁的事件处理会造成性能的损耗,我们就可以通过防抖和节流来限制事件频繁的发生;防抖和节流函数目前已经是前端实际开发中两个非常重要的函数,也是面试经常被问到的面试题。但是很多前端开发者面对这两个功能,有点摸不着头脑:某些开发者根本无法区分防抖和节流有什么区别(面试经常会被问到原创 2022-01-08 18:56:09 · 3544 阅读 · 2 评论 -
手写20个常用的简易js方法
Array篇定义一个测试数组// 自定义测试数组 const players=[ {name:'kobe',age:40}, {name:'james',age:30}, {name:'curry',age:28}, {name:'coder',age:20}, {name:'liu',age:21}, ]1、forEach参数代表含义item:遍历项index:遍历项的索引arr:数组本身// forEach原创 2022-01-08 11:25:36 · 647 阅读 · 0 评论 -
javaScript事件解析
javaScript事件解析事件流–事件冒泡和事件捕获事件流就是描述页面接受事件的顺序。冒泡结构上(非视觉上)嵌套关系的元素会存在冒泡事件功能,及同一事件,子元素向父元素冒泡。捕获IE没有将addEventListener第三个参数设置true结构上(非视觉上)嵌套关系的元素会存在捕获事件功能,及同一事件,父元素向子元素捕获DOM事件流DOM2 Event规范规定事件流分三阶段:事件捕获、到达目标、事件冒泡。通常不认为到达目标后的事件处理阶段不属于事件捕获,而被认为是冒泡阶段的一部分原创 2022-01-07 12:17:44 · 409 阅读 · 0 评论 -
数值的扩展
ES6数值Number的扩展数值分隔符欧美语言中,较长的数值允许每三位添加一个分隔符(通常是一个逗号),增加数值的可读性。比如,1000可以写作1,000。ES2021,允许 JavaScript 的数值使用下划线(_)作为分隔符。let budget = 1_000_000_000_000;budget === 10 ** 12 // true这个数值分隔符没有指定间隔的位数,也就是说,可以每三位添加一个分隔符,也可以每一位、每两位、每四位添加一个。123_00 === 12_300 //原创 2022-01-06 16:56:33 · 138 阅读 · 0 评论 -
ES6数组的扩展
ES6数组的扩展Array.from()Array.from方法用于将两类对象转为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括 ES6 新增的数据结构 Set 和 Map)。下面是一个类似数组的对象,Array.from将它转为真正的数组。let arrayLike = { '0': 'a', '1': 'b', '2': 'c', length: 3};// ES5的写法var arr1 = [].原创 2022-01-06 13:19:32 · 119 阅读 · 0 评论 -
正则的扩展
ES6正则的扩展1.RegExp 构造函数在 ES5 中,RegExp构造函数的参数有两种情况。第一种情况是,参数是字符串,这时第二个参数表示正则表达式的修饰符(flag)。var regex = new RegExp('xyz', 'i');// 等价于var regex = /xyz/i;第二种情况是,参数是一个正则表示式,这时会返回一个原有正则表达式的拷贝。var regex = new RegExp(/xyz/i);// 等价于var regex = /xyz/i;但是,E原创 2022-01-06 11:35:51 · 127 阅读 · 0 评论 -
DOM内容解析
DOM部分内容解析认识DOM和架构浏览器是用来展示网页的,而网页中最重要的就是里面各种的标签元素,JavaScript很多时候是需要操作这些元素的。JavaScript如何操作元素呢?通过Document Object Model(DOM,文档对象模型)。DOM给我们提供了一系列的模型和对象,让我们可以方便的来操作Web页面。EventTarget因为继承自EventTarget,所以也可以使用EventTarget的方法:Node节点所有的DOM节点类型都继承自Node接口。详细原创 2022-01-05 18:28:01 · 738 阅读 · 0 评论 -
BOM内容解析
BOM部分内容解析认识BOMJavaScript有一个非常重要的运行环境就是浏览器,而且浏览器本身又作为一个应用程序需要对其本身进行操作,所以通常浏览器会有对应的对象模型(BOM,Browser Object Model)。我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁。BOM主要包括一下的对象模型:window:包括全局属性、方法,控制浏览器窗口相关的属性、方法;location:浏览器连接到的对象的位置(URL);history:操作浏览器的历史;document原创 2022-01-04 17:26:26 · 409 阅读 · 0 评论 -
浏览器的存储方案
浏览器的存储方案认识StorageWebStorage主要提供了一种机制,可以让浏览器提供一种比cookie更直观的key、value存储方式:localStorage:本地存储,提供的是一种永久性的存储方法,在关闭掉网页重新打开时,存储的内容依然保留;sessionStorage:会话存储,提供的是本次会话的存储,在关闭掉会话时,存储的内容会被清除;localStorage和sessionStorage的区别我们会发现localStorage和sessionStorage看起来非常的相似原创 2022-01-04 15:02:44 · 1235 阅读 · 0 评论 -
JSON序列化解析
javaScript中的JSON序列化解析JSON的由来在目前的开发中,JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScript Object Notation(JavaScript对象符号):JSON是由Douglas Crockford构想和设计的一种轻量级资料交换格式,算是JavaScript的一个子集;但是虽然JSON被提出来的时候是主要应用JavaScript中,但是目前已经独立于编程语言,可以在各个编程语原创 2022-01-03 21:55:18 · 957 阅读 · 0 评论 -
包管理工具-npm-npx-yarn-cnpm
包管理工具解析代码共享方案我们已经学习了在JavaScript中可以通过模块化的方式将代码划分成一个个小的结构:在以后的开发中我们就可以通过模块化的方式来封装自己的代码,并且封装成一个工具;这个工具我们可以让同事通过导入的方式来使用,甚至你可以分享给世界各地的程序员来使用;如果我们分享给世界上所有的程序员使用,有哪些方式呢?方式一:上传到GitHub上、其他程序员通过GitHub下载我们的代码手动的引用;缺点是大家必须知道你的代码GitHub的地址,并且从GitHub上手动下载;需要原创 2022-01-03 16:27:08 · 8577 阅读 · 0 评论 -
javaScript模块化解析
JavaScript模块化解析什么是模块化?到底什么是模块化、模块化开发呢?事实上模块化开发最终的目的是将程序划分成一个个小的结构;这个结构中编写属于自己的逻辑代码,有自己的作用域,不会影响到其他的结构;这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用;也可以通过某种方式,导入另外结构中的变量、函数、对象等;上面说提到的结构,就是模块;按照这种结构划分开发程序的过程,就是模块化开发的过程;无论你多么喜欢JavaScript,以及它现在发展的有多好,它都有很多的缺陷:比如原创 2021-12-28 13:54:08 · 787 阅读 · 0 评论 -
javaScript中的异常处理
javaScript中的异常处理错误处理方案开发中我们会封装一些工具函数,封装之后给别人使用:在其他人使用的过程中,可能会传递一些参数;对于函数来说,需要对这些参数进行验证,否则可能得到的是我们不想要的结果;很多时候我们可能验证到不是希望得到的参数时,就会直接return:但是return存在很大的弊端:调用者不知道是因为函数内部没有正常执行,还是执行结果就是一个undefined;事实上,正确的做法应该是如果没有通过某些验证,那么应该让外界知道函数内部报错了;如何可以让一个函数告知原创 2021-12-27 11:34:39 · 1738 阅读 · 0 评论 -
javaScript中的事件循环详解---浏览器和Node中的事件循环
javaScript中的事件循环进程和线程线程和进程是操作系统中的两个概念:进程(process):计算机已经运行的程序,是操作系统管理程序的一种方式;线程(thread):操作系统能够运行运算调度的最小单位,通常情况下它被包含在进程中;听起来很抽象,这里还是给出我的解释:进程:我们可以认为,启动一个应用程序,就会默认启动一个进程(也可能是多个进程);线程:每一个进程中,都会启动至少一个线程用来执行程序中的代码,这个线程被称之为主线程;所以我们也可以说进程是线程的容器;再用一个形象原创 2021-12-26 18:59:27 · 138 阅读 · 0 评论 -
ES6生成器与async-await解析
ES6生成器与async/await内容解析什么是生成器? 生成器是ES6中新增的一种函数控制、使用的方案,它可以让我们更加灵活的控制函数什么时候继续执行、暂停执行等。平时我们会编写很多的函数,这些函数终止的条件通常是返回值或者发生了异常。生成器函数也是一个函数,但是和普通的函数有一些区别:首先,生成器函数需要在function的后面加一个符号:*其次,生成器函数可以通过yield关键字来控制函数的执行流程:最后,生成器函数的返回值是一个Generator(生成器):生成器事实上是一种特原创 2021-12-25 16:08:05 · 1010 阅读 · 0 评论 -
ES6迭代器内容详解
ES6迭代器内容解析什么是迭代器?迭代器(iterator),是确使用户可在容器对象(container,例如链表或数组)上遍访的对象,使用该接口无需关心对象的内部实现细节。其行为像数据库中的光标,迭代器最早出现在1974年设计的CLU编程语言中;在各种编程语言的实现中,迭代器的实现方式各不相同,但是基本都有迭代器,比如Java、Python等;从迭代器的定义我们可以看出来,迭代器是帮助我们对某个数据结构进行遍历的对象。在JavaScript中,迭代器也是一个具体的对象,这个对象需要符合迭代原创 2021-12-25 10:18:25 · 797 阅读 · 0 评论 -
Promise的使用详解
Promise内容详解–知识点整理异步任务的处理 在ES6出来之后,有很多关于Promise的讲解、文章,也有很多经典的书籍讲解Promise。虽然等你学会Promise之后,会觉得Promise不过如此,但是在初次接触的时候都会觉得这个东西不好理解;那么这里我从一个实际的例子来作为切入点:我们调用一个函数,这个函数中发送网络请求(我们可以用定时器来模拟);如果发送网络请求成功了,那么告知调用者发送成功,并且将相关数据返回过去;如果发送网络请求失败了,那么告知调用者发送失败,并且告知错误信息原创 2021-12-23 17:05:32 · 1504 阅读 · 0 评论 -
Proxy和Reflect内容详解
ES6中的Proxy和Reflect内容详解监听对象的操作我们先来看一个需求:有一个对象,我们希望监听这个对象中的属性被设置或获取的过程通过我们前面所学的知识,能不能做到这一点呢?其实是可以的,我们可以通过之前的属性描述符中的存储属性描述符来做到;监听对象的操作:下面这段代码就利用了前面讲过的 Object.defineProperty 的存储属性描述符来对属性的操作进行监听。const obj={ name:'liu', age:21}Object.keys(obj).for原创 2021-12-22 10:26:52 · 512 阅读 · 0 评论 -
ES7-12内容详解
ES7-ES12知识点解析一、ES7主要内容1. Array Includes在ES7之前,如果我们想判断一个数组中是否包含某个元素,需要通过 indexOf 获取结果,并且判断是否为 -1。在ES7中,我们可以通过includes来判断一个数组中是否包含一个指定的元素,根据情况,如果包含则返回 true,否则返回false。const names = ["abc", "cba", "nba", "mba", NaN]if (names.indexOf("cba") !== -1) { c原创 2021-12-21 15:22:34 · 723 阅读 · 0 评论 -
数组去重的九种方法
数组去重方法总结—十二种 数组去重,一般都是在面试的时候才会碰到,一般是要求手写数组去重方法的代码。如果是被提问到,数组去重的方法有哪些?你能答出其中的10种,面试官很有可能对你刮目相看。 在真实的项目中碰到的数组去重,一般都是后台去处理,很少让前端处理数组去重。虽然日常项目用到的概率比较低,但还是需要了解一下,以防面试的时候可能回被问到。一、利用ES6 Set去重(ES6中最常用)var obj={ name:'liu'}const arr=[1,1,2,3,5,6,6,7,{},{原创 2021-12-20 17:47:21 · 391 阅读 · 0 评论 -
ES6Set-Map数据结构详解
Set、WeakSet、Map、WeakMap数据结构详解Set的基本使用 在ES6之前,我们存储数据的结构主要有两种:数组、对象。 在ES6中新增了另外两种数据结构:Set、Map,以及它们的另外形式WeakSet、WeakMap。 Set是一个新增的数据结构,可以用来保存数据,类似于数组,但是和数组的区别是元素不能重复。 创建Set我们需要通过Set构造函数(暂时没有字面量创建的方式):我们可以发现Set中存放的元素是不会重复的,那么Set有一个非常常用的功能就是给数组去重。Set的常原创 2021-12-20 15:35:12 · 622 阅读 · 0 评论 -
ES6知识点解析(二)
ES6知识点解析(二)字符串模板基本使用 在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的(ugly)。ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接:首先,我们会使用 `` 符号来编写字符串,称之为模板字符串;其次,在模板字符串中,我们可以通过 ${expression} 来嵌入动态的内容;// ES6之前拼接字符串和其他标识符const name = "why"const age = 18const height = 1原创 2021-12-20 10:35:57 · 403 阅读 · 0 评论 -
ES6知识点解析(一)-let/const/var关键字详解
ES6知识点解析(一)字面量的增强ES6中对 对象字面量 进行了增强,称之为 Enhanced object literals(增强对象字面量)。字面量的增强主要包括下面几部分:属性的简写:Property Shorthand方法的简写:Method Shorthand计算属性名:Computed Property Namesvar name = "liu"var age = 18var obj = { // 1.property shorthand(属性的简写) name,原创 2021-12-19 17:50:40 · 805 阅读 · 0 评论 -
ES6中的class类内容详解
ES6中的class类认识class定义类 我们会发现,按照前面的构造函数形式创建 类,不仅仅和编写普通的函数过于相似,而且代码并不容易理解。在ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类;但是类本质上依然是前面所讲的构造函数、原型链的语法糖而已;所以学好了前面的构造函数、原型链更有利于我们理解类的概念和继承关系; 那么,如何使用class来定义一个类呢?–可以使用两种方式来声明类:类声明和类表达式;class Person{ //类声明}c原创 2021-12-19 13:33:05 · 1915 阅读 · 0 评论 -
js原型链与继承
javaScript中的原型链与继承一、通过原型链实现继承 如果我们现在需要实现继承,那么就可以利用原型链来实现了:目前stu的原型是p对象,而p对象的原型是Person默认的原型,里面包含running等函数;注意:步骤4和步骤5不可以调整顺序,否则会有问题原型链内存图继承创建对象的内存图原型链继承的弊端但是目前有一个很大的弊端:某些属性其实是保存在p对象上的;第一,我们通过直接打印对象是看不到这个属性的;第二,这个属性会被多个对象共享,如果这个对象是一个引用类型,那么就会造成问原创 2021-12-17 18:14:06 · 747 阅读 · 0 评论 -
javaScript原型与原型链
javaScript中的原型链认识对象的原型–隐式原型 JavaScript当中每个对象都有一个特殊的内置属性 [[prototype]](这个就是__proto__隐式原型),这个特殊的对象可以指向另外一个对象。那么这个对象有什么用呢?当我们通过引用对象的属性key来获取一个value时,它会触发 [[Get]]的操作;这个操作会首先检查该对象是否有对应的属性,如果有的话就使用它;如果对象中没有该属性,那么会访问对象[[prototype]]内置属性指向的对象上的属性;那么如果通过字面原创 2021-12-17 18:11:56 · 1927 阅读 · 0 评论 -
with语句-eval函数-strict严格模式内容补充
with语句-eval函数-strict严格模式内容补充1.with语句with语句 扩展一个语句的作用域链。// with语句: 可以形成自己的作用域// function foo(){// var message='hello'// console.log(message)// }// foo()const obj={ name:'liu', message:'world'}function foo(){ // var message='hello' wi原创 2021-12-15 13:51:53 · 274 阅读 · 0 评论 -
javaScript的函数式编程
javaScript的函数式编程理解JavaScript纯函数 函数式编程中有一个非常重要的概念叫纯函数,JavaScript符合函数式编程的范式,所以也有纯函数的概念;在react开发中纯函数是被多次提及的;比如react中组件就被要求像是一个纯函数(为什么是像,因为还有class组件),redux中有一个reducer的概念,也是要求必须是一个纯函数;所以掌握纯函数对于理解很多框架的设计是非常有帮助的;纯函数的维基百科定义:在程序设计中,若一个函数符合以下条件,那么这个函数被称为纯函数:原创 2021-12-15 12:04:34 · 884 阅读 · 0 评论 -
call-apply-bind函数的实现
call-apply-bind函数的实现call函数的实现// console.log(Object('123'))//通过Object这种方法就可以将非对象的数据类型转化为对象类型// console.log(Number('123a'))// console.log(Object({name:'liu'}))//以上就涉及到类型转化//call函数的封装Function.prototype.lycall=function(thisArg,...args){ //1.首先要获取到调原创 2021-12-14 16:13:52 · 345 阅读 · 0 评论 -
javaScript函数中的this指向
javaScript函数中的this指向为什么需要this?在常见的编程语言中,几乎都有this这个关键字(Objective-C中使用的是self),但是JavaScript中的this和常见的面向对象语言中的this不太一样:常见面向对象的编程语言中,比如Java、C++、Swift、Dart等等一系列语言中,this通常只会出现在类的方法中。也就是你需要有一个类,类中的方法(特别是实例方法)中,this代表的是当前调用对象。但是JavaScript中的this更加灵活,无论是它出现的位置还原创 2021-12-14 12:13:40 · 236 阅读 · 0 评论 -
深入JavaScript闭包
深入JavaScript闭包让人迷惑的闭包闭包是JavaScript中一个非常容易让人迷惑的知识点:这几天看到有伙伴在交流群中发了这么一张图片;闭包确实是JavaScript中一个很难理解的知识点,接下来我们就对其一步步来进行剖析,看看它到底有什么神奇之处。JS中函数是一等公民在JavaScript中,函数是非常重要的,并且是一等公民:那么就意味着函数的使用是非常灵活的;函数可以作为另外一个函数的参数,也可以作为另外一个函数的返回值来使用;自己编写高阶函数自己编写的高阶函数原创 2021-12-13 14:02:46 · 207 阅读 · 0 评论 -
js中的内存管理
JavaScript中的内存管理认识内存管理不管什么样的编程语言,在代码的执行过程中都是需要给它分配内存的,不同的是某些编程语言需要我们自己手动的管理内存,某些编程语言会可以自动帮助我们管理内存:不管以什么样的方式来管理内存,内存的管理都会有如下的生命周期:第一步:分配申请你需要的内存(申请);第二步:使用分配的内存(存放一些东西,比如对象等);第三步:不需要使用时,对其进行释放;不同的编程语言对于第一步和第三步会有不同的实现:手动管理内存:比如C、C++,包括早期的OC,都是需要原创 2021-12-13 09:12:30 · 2951 阅读 · 0 评论 -
浏览器的工作原理与v8引擎
浏览器的工作原理与v8引擎**JavaScript是一门高级的编程语言。**那么有高级编程语言,就有低级编程语言,从编程语言发展历史来说,可以划分为三个阶段:机器语言:1000100111011000,一些机器指令;汇编语言:mov ax,bx,一些汇编指令;高级语言:C、C++、Java、JavaScript、Python;但是计算机它本身是不认识这些高级语言的,所以我们的代码最终还是需要被转换成机器指令:浏览器的工作原理那么javaScript代码在浏览器中是如何被执行的?首先当我们原创 2021-12-12 11:17:33 · 975 阅读 · 1 评论 -
javaScript中的call、apply、bind函数以及this指向详解
javaScript中的call、apply、bind函数以及this指向问题的详解 call、apply、bind这三个方法都可以用来改变this的指向。三者最大的区别是call和apply会改变this的指向并且立即执行函数,但是bind方法不会立即执行函数,而是会返回this改变后的函数。fn.call()当call方法执行的时候会做三个事情:1.首先要把操作的函数中的this关键字变为call方法第一个传递的参数。2.把call方法第二个及以后的参数获取到3.把要操作的函数执行,并且原创 2021-12-11 14:18:55 · 545 阅读 · 0 评论 -
javaScript对象模块详解
javaScript对象模块详解对象Objectvar mrDeng = { name : "MrDeng", age : 40, sex : "male", health : 100, smoke : function () { console.log("I am smoking cool!!!") this.health -- }, drink : function () { console.lo原创 2021-12-11 10:21:15 · 482 阅读 · 0 评论 -
javaScript函数模块详解
javaScript函数模块详解 函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,和其他引用类型一样可以将函数名想象成指针,函数想象成对象 注意,严格模式下函数有以下规定:函数不能以eval或arguments作为名称,同样他们俩也不能做参数名,函数参数不能同名//函数声明//js引擎会在任何代码执行之前,先读取函数声明并在执行上下文中生成函数定义,叫做“函数声明提升”function test(a,b){}//函数体//必须等到代码执行的那一原创 2021-12-10 15:29:18 · 832 阅读 · 0 评论 -
javaScript的垃圾回收机制
JavaScript的垃圾回收机制一、垃圾回收的必要性 由于字符串、对象和数组没有固定大小,所有当他们的大小已知时,才能对他们进行动态的存储分配。JavaScript程序每次创建字符串、数组或对象时,解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存,最终都要释放这些内存以便他们能够被再用,否则,JavaScript的解释器将会消耗完系统中所有可用的内存,造成系统崩溃。这段话解释了为什么需要系统需要垃圾回收,JS不像C/C++,他有自己的一套垃圾回收机制(Garbage Collecti原创 2021-12-10 09:35:38 · 647 阅读 · 0 评论