![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
文章平均质量分 74
记录javascript相关的学习内容
yxlazy
终于学废了
展开
-
使用Rollup,TypeScript,SCSS配置React组件库
想写一个React的组件库,但不知道该如何配置一个开发环境?这篇文章将告诉你答案翻译 2023-01-04 17:45:09 · 862 阅读 · 0 评论 -
使用puppeteer获取网页信息
Puppeteer 是一个运行在Node端的浏览器,为我们提供了强大的功能,例如抓取页面数据,对页面进行截图等功能...原创 2022-11-21 10:58:17 · 2880 阅读 · 2 评论 -
FormData多文件上传并同时添加其他数据
前言在做项目时,有一个接口要求上传文件的同时能携带其它数据,在这里使用的是FormData对象来进行操作。简单介绍一下这个对象。FormData 接口提供了一种表示表单数据的键值对 key/value 的构造方式,并且可以轻松的将数据通过XMLHttpRequest.send() 方法发送出去,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。(以上出自这里)单文件上传这里使用FormData的append()方法,该方法原创 2021-09-13 17:07:31 · 12739 阅读 · 6 评论 -
eslint 搭配 vscode 的简单使用
前言刚开始时,由于嫌麻烦,并没有安装eslint,最近在新的项目上使用了eslint再配合vscode的插件,真是爽的不要太爽。因此打算写一篇简单的食用说明来记录食用过程前期准备没啥好准备的,作为开发肯定是具备yarn和node的,编辑器使用的是微软的亲儿子vscode然后新建一个文件夹eslint-example,cd进入这个文件夹并初始化一个package.json初始化package.json命令$ yarn init -y文件结构- eslint-example - packag原创 2021-05-12 11:39:55 · 3525 阅读 · 1 评论 -
this绑定规则
确定一个this具体引用的是谁首先查看是否使用new操作符调用,使用new操作符后,this绑定到这个新创建的对象实例上 。const bar = new fn()是否使用call, apply,bind,使用了这三个方法后,会将this显示绑定(硬绑定)到传入的第一个参数const bar = fn.call(obj)是否通过一个对象上下文来引用函数,如果是,则会将this隐式绑定到这个对象const bar = obj.fn()如果都不是,则使用默认绑定,绑定到win原创 2021-04-20 13:10:55 · 57 阅读 · 0 评论 -
创建对象和继承
通常我们都习惯性使用对象字面量的形式创建一个新对象。该对象是Object的实例。而如果想要创建其他类型的对象,可以自定义构造函数,再实例化对象。这里不讲解class方式创建的对象创建对象我们将会讲解几种不同方式来创建对象工厂模式function createObject() { const o = new Object() o.name = 'yan' o.age = 18 o.sayName = function () { return this.n原创 2021-04-14 23:32:27 · 118 阅读 · 0 评论 -
Map和WeakMap
Map和Set是ECMAScript6新添加的集合引用类型。MapMap可以用于存储键值对的数据。在ECMAScript6之前为了达到这种效果都是使用的Object对象。基本API可以通过new关键字和Map构造函数创建一个空的映射const stringKey = 'key1'const numberKey = 1const symbolKey = Symbol('key')//创建一个空的映射const map = new Map()//使用.size属性查看长度console.l原创 2021-04-10 23:08:47 · 131 阅读 · 0 评论 -
集合引用类型篇(二)
定型数组//创建一个12字节的缓冲const buf = new ArrayBuffer(12)//创建一个引用buf缓冲的Int32Arrayconst ints = new Int32Array(buf)console.log(ints) //Int32Array(3) [0, 0, 0]//length属性,打印长度console.log(ints.length) //3//与DataView一样,也有一个指向关联缓冲的引用console.log(ints.buffer) //Arr原创 2021-04-09 09:43:17 · 232 阅读 · 0 评论 -
集合引用类型篇(一)
Object显示创建Object的实例对象有两种方法,一种是new Object()来实例化一个对象,另一种是使用对象字面量形式在使用对象字面量表示法定义对象时,其实并没有调用Object()构造函数Array有几种方式可以创建数组,一种是数组字面量,一种是通过new关键字调用但不传递参数或者传递参数,也可以直接使用Array()创建,在ES6中新增了两个静态方法创建数组:Array.from和Array.oflet a = []let a1 = [1, 2,]let a2 = [, 1,原创 2021-04-06 23:26:56 · 327 阅读 · 1 评论 -
原始值包装类型
原始值包装类型ECMAScript提供了3种特殊的引用类型:Boolean, Number, String 。这些类型具有其他引用类型一样的特点,但也具有与各自原始值类型对应的特殊行为。Symbol虽然也是函数,但由于其不存在constructor,所以不能通过new操作符实例化对象。前言每当用到某个原始值的方法或属性时,其后台都会为这个原始值创建一个包装对象,从而暴露相应的属性和方法。let str = 'name'let s2 = str.sustring(1) 原始值不是对象,但是却能使原创 2021-04-01 23:54:40 · 127 阅读 · 0 评论 -
原始值和引用值
ECMAScript 变量可以包含两种不同类型的数据:原始值和引用值。原始值就是简单数据类型,引用值则是由多个值构成的对象原始值,引用值原始值包括:Undefined,Null,Boolean,Number,String,Symbol和BigInt (ES2020)引用值是保存在内存中的对象,即对象保存在堆中用来保存对象的变量其实只是保存了一个对象的引用,即地址对于原始值Boolean,Number和String都自带有一个包装对象let bool1 = truelet bool2 = n原创 2021-03-28 23:51:57 · 206 阅读 · 2 评论 -
操作符篇(二)
指数操作符ECMAScript 2017新增,使用两个**表示,相当于使用Math.pow()加性操作符即加法和减法操作符加法操作符如果有任一操作数是 NaN,则返回 NaN;如果是 Infinity 加 Infinity,则返回 Infinity;如果是-Infinity 加-Infinity,则返回-Infinity;如果是 Infinity 加-Infinity,则返回 NaN;如果是+0 加+0,则返回+0;如果是-0 加+0,则返回+0;如果是-0 加-0,则返回-0。不原创 2021-03-27 23:10:22 · 72 阅读 · 0 评论 -
操作符篇(一)
ECMAScript中的操作符是独特的,因为他们可用于各种值,包括字符串、数值、布尔值,甚至还有对象。一元操作符只操作一个值的操作符叫一元操作符。递增递减操作符递增递减操作符非常方便,但也有很大的误区let age = 12console.log(++age) //13 //前缀递增操作符console.log(--age) //12 //前缀递减操作符console.log(age++) //会打印什么?13? 不对,还是12console.log(age) //13 没错,后缀++会原创 2021-03-26 22:56:12 · 70 阅读 · 0 评论 -
数据类型篇(三)
Symbol 类型Symbol(符号)是ES6新增的数据类型。Symbol是原始值,且实例是唯一的,不可变的Symbol的用途是确保对象属性使用唯一标识符,不会发生属性冲突的危险Symbol使用Symbol()函数进行初始化let sym = Symbol()typeof sym // symbol let sym1 = Symbol('symbol')let sym2 = Symbol('symbol')console.log(sym1 == sym2) //falseSymbol(原创 2021-03-24 22:16:21 · 137 阅读 · 0 评论 -
数据类型篇(二)
数据类型篇(二)ECMAScript数据类型包含简单数据类型(也称为原始类型)和复杂数据类型(对象)。其中简单数据类型包括:Undefined, Null, Boolean, Number, String, Symbol(ES6新增),复杂数据类型包括:Object。前一篇已经介绍过Undefined,Null,Boolean,Number,这一篇将会介绍String,Symbol,Object 。String 类型String类型表示零或多个16位Unicode字符序列。可以使用单引号( ’ ),原创 2021-03-23 23:56:26 · 92 阅读 · 0 评论 -
数据类型篇(一)
ECMAScript数据类型包含简单数据类型(也称为原始类型)和复杂数据类型(对象)。其中简单数据类型包括:Undefined, Null, Boolean, Number, String, Symbol(ES6新增),复杂数据类型包括:Object。typeof 操作符typeof 操作符可以查看数据的类型,但有些可能不符合预期,例如null 和 functiontypeof undefined // "undefined"typeof null // "object" 注意,类型不是显示的'原创 2021-03-22 21:56:56 · 142 阅读 · 0 评论 -
var, let, const 声明变量详解
var 是ES6之前用来声明变量的关键字,而let和const是ES6之后的版本出现的。let和const是为了解决var带来的怪异行为。var 声明var声明的变量存在变量提升(hoist)function test() { console.log(a) var a = 10}test() //undefinedvar声明的变量会先将变量a提升到作用域的顶部(在这里是test函数作用域),并初始化为undefined,然后等到执行var a = 10 才真正进行变量的赋值,其原创 2021-03-21 16:00:56 · 409 阅读 · 5 评论 -
webpack打包工具学习(一)
webpack打包工具学习原创 2020-09-08 08:42:19 · 214 阅读 · 0 评论 -
在原生JavaScript中创建不可变对象
在原生JavaScript中创建不可变对象译文连接JavaScript是一种灵活的语言,你可以重新定义任何内容。但是,当项目变得复杂时,我们会发现可变数据结构存在问题。当我们使用最新版本的JavaScript,这个问题就会变得不一样了。因为现在,我们能创建不可变的对象。我将会通过三种不同的方式一步一步的告诉你怎么去完成操作。等等,什么是不可变?对象的不可变性意味着一旦创建好这个对象,就不希望它发生任何改变,也就是让它变成只读类型。假设我们需要定义一个car对象,并在整个项目中使用它的属性去执行操作翻译 2020-10-13 14:41:38 · 106 阅读 · 0 评论 -
koa2中的app.context.xxx与ctx.xxx以及Object.create
koa2 app.context当在使用koa2框架时,好奇为什么通过 app.context.xxx 添加的属性可以通过ctx.xxx 调用,于是乎看了下相关源码在application.js文件中,看到了构造函数中初始化部分代码如下:this.middleware = [];//用来存储中间件,也就是洋葱模型的核心this.context = Object.create(context);//实例化this.context对象this.request = Object.create(requ原创 2020-10-08 22:54:46 · 657 阅读 · 0 评论 -
JavaScript event loop
javascript 事件机制是单线程运行机制运行时将任务分为同步任务和异步任务异步任务又分为宏任务和微任务运行时又分为主线程和调用栈(执行栈)在运行时,首先将任务分为同步任务和异步任务,同步任务进入调用栈,并等待主线程依次执行。待调用栈执行完毕,清空调用栈。接着将宏任务放入入主线程。待宏任务执行完毕,清空宏任务队列,将微任务放入主线程,最后,所有的任务都执行完毕,清空微任务队列,再进行下一次循环。宏任务包括 setTimeout, setIntervals setImme..原创 2020-09-23 18:50:01 · 48 阅读 · 0 评论