12 2021 档案
摘要：toRef toRef 用于为源响应式对象上的属性新建一个ref，从而保持对其源对象属性的响应式连接。 接收两个参数：源响应式对象和属性名，返回一个ref数据。例如使用父组件传递的props数据时，要引用props的某个属性且要保持响应式连接时就很有用。 import {defineProps, t
阅读全文
摘要：Script setup语法糖中使用props和emit方法 import {defineEmits, defineProps, toRefs} from "vue" const props = defineProps({ route:{ type:String, default(){ return
阅读全文
摘要：flex布局 使用display:flex开启flex布局 display: flex; 主轴方向 flex-direction可以设置主轴为x轴还是y轴，元素根据主轴排列，横轴为row，纵轴为column，顺序反转为row-reverse flex-direction: row; 主轴子元素排列方
阅读全文
摘要：定义 name：包名（必须是唯一的防止对外公布时产生冲突） description：包简介 version：版本号 keywords：关键词数组 repositories：托管源代码位置列表 author：包作者 bin：一些包作者希望包可以作为命令行工具使用，配置好bin字段后，通过 npm in
阅读全文
摘要：模块加载流程 在Node中引入模块，需要经历如下3个步骤 1.路径分析 2.文件定位 3.编译执行 模块种类 在Node中，模块分为两类，一类是Node提供的模块，称为核心模块，一类是用户编写的，称为文件模块 核心模块在Node源码编译过程中，编译进了二进制执行文件。在Node进程启动时，部分核心模
阅读全文
摘要：HTML文档 <body> <span>呵呵呵</span> <div id="container"> <span>哈哈哈</span> <input type="text"> <input type="text"> <input type="text"> <button id="btn">点我</
阅读全文
摘要：问题 给你一个有序数组 nums ，请你 原地 删除重复出现的元素，使每个元素 只出现一次 ，返回删除后数组的新长度。不要使用额外的数组空间，你必须在 原地 修改输入数组 并在使用 O(1) 额外空间的条件下完成。 解题思路 条件： 1.有序数组：意味着数组已经从小到大排好序了（即使没排好也可以先用
阅读全文
摘要：通过CustomEvent可以定义一个自定义事件，用来定义一个全新的事件目标 CustomEvent()可接收两个参数，第一个参数是一个字符串，用来表示事件类型，第二个参数是一个对象，指定事件属性，可以将这个对象的detail属性设置为一个字符串、对象或其他值，表示事件的上下文 如下代码： // 定
阅读全文
摘要：Proxy对象提供了一种途径，让我们能够自己实现基础操作，创建具有普通对象无法企及能力的代理对象，创建代理对象时,需要指定另外两个对象,即目标对象(target)和处理器对象(handler) let proxy = new Proxy(target, handler) 创建Proxy 代理对象没有
阅读全文
摘要：es6提供了一个全新的api Reflect，其将object对象一些内部的方法，放到Reflect对象上，将来可能彻底取代Object对象内部的这些方法，方法的返回值也更改为true或false new.target 在介绍API之前我们先说一个属性，new.targer指向直接被new执行的构造
阅读全文
摘要：Promise期约 偏原理向，方法使用移步 https://www.cnblogs.com/xt112233/p/15137255.html 链式写法 期约的错误写法(fetch会返回一个期约)，大量的嵌套回调函数，违背了期约的初衷 fetch("/api/user/profile").then(r
阅读全文
摘要：生成器 生成器使用function*进行定义，调用生成器，并不会执行函数体，而是会返回一个生成器对象，这个生成器对象是一个迭代器，调用next()方法会开始执行函数体，直到遇到yield语句。yield语句的值会成为next()方法的返回值 function* getText(){ yield "t
阅读全文
摘要：迭代器 可迭代对象和迭代器是ES6的一个特性，迭代器可使用 for/of 进行迭代 for(let i of [1, 2, 3]){ console.log(i); } 迭代器可使用扩展操作符，也可进行解构 let chars = [..."abcde"] // ["a", "b", "c", "d
阅读全文
摘要：URL 创建URL 使用URL对象时，要传入一个绝对URL作为参数 let url = new URL("https://127.0.0.1:8080/path/name?age=18&sex=man#hashtest") url.href // https://127.0.0.1:8080/pat
阅读全文
摘要：let o = { a: 1, b: 2, c: 3 } let s = JSON.stringify(o) typeof s // string let p = JSON.parse(s) typeof p // object 如果传入了json不支持的数据结构，例如Map, Set, RegEx
阅读全文
摘要：通过继承原生Error类，实现定制的error class HTTPError extends Error{ constructor(status, statusText, url){ super(`${status} ${statusText}: ${url}`) this.status =sta
阅读全文
摘要：Date() 创建日期对象 若不传参数，则输出该对象会返回当前时间 let now = new Date() 若传一个数值参数参数，则将其视为毫秒数，计算1970年1月1日经过了相应毫秒数后的日期 let epoch = new Date(0) // 1970-01-01T00:00:00.000Z
阅读全文
摘要：Int8Array // 有符号字节，元素值在0-255之间，溢出会翻转 Uint8Array // 无符号字节，元素值在0-255之间，溢出会翻转 Uint8ClampedArray // 无符号字节，溢出不归零，会顾定为0或255（绘制颜色时很有用） Int16Array // 有符号16位短整
阅读全文
摘要：映射 映射可以理解为字典，不同于数组，允许使用任何值作为索引，映射的键是唯一的，若传入重复的键值对，会用新的值代替旧的值 创建映射 let m = new Map() let n = new Map([ // Map(2) { 'one' => 1, 'two' => 2 } ["one", 1],
阅读全文
摘要：Set集合 集合的使用 创建集合，参数类型没有明确限制，但必须是一个可迭代对象，集合是不能包含重复值的 let s = new Set() let t = new Set([1, s]) let uniqe = new Set("Mississippi") // "M", "i", "s", "p"
阅读全文
摘要：文件目录如下 静态加载 静态加载模块，保证导入的值在代码运行之前就可以使用 import {add} from "./module.js" add(1, 2) // 3 动态加载 ES2020引入import()支持动态加载模块，如通过网络传输的模块，由于动态加载模块是异步的，所以要配合then或
阅读全文
摘要：call和apply允许间接调用一个函数 call和apply可以改变this指向，或者可以说是将一个函数作为某个对象的方法进行调用 call将参数逐一传入，apply是以数组形式进行传入 const o = { x: 1 } const f = function(y, z){ return thi
阅读全文
摘要：设置默认参数，默认参数可以使用前面的形参来定义 const rectangle = (width, height = width * 2) => {} 剩余形参，是个数组，必须放在最后，若不传就是空 function max(first, ...args){ let maxVal = first f
阅读全文
摘要：构造函数调用会创建一个新对象，一般不使用return，会默认返回当前对象 使用return会有2种情况 1.返回一个新的对象，则会变成该新对象 2.返回一个原始值，则还是返回当前对象，不会返回该原始值 const Obj1 = function(){ this.name = "abc" } cons
阅读全文
摘要：嵌套函数不会包含函数的this值！！！ 如果嵌套函数被当做方法调用，this就指向调用他的对象 若果嵌套函数被当做函数调用，this就指向全局对象或者undefined ES6之前，解决办法可以使用bind来改变其this指向 ES6之后，解决这个方法的一个技巧是使用箭头函数，箭头函数会继承外部的t
阅读全文
摘要：数组 扩展操作符 ES6中可使用扩展操作符在一个数组字面量中包含另一个数组 let a = [1, 2, 3] let b = [0, ...a, 4] // [0, 1, 2, 3, 4] // 扩展操作符可用于任何可迭代对象 let digits = [..."adsadassfasfasfsf
阅读全文
摘要：如果想终结并非最近的循环或switch，可以使用标签来控制 // 给外侧循环打标签后,在内侧循环使用continue或break也可以操作外侧循环 test1: for (let i = 0; i < 10; i++) { console.log(" ", i) for (let j = 0; j
阅读全文
摘要：ES6添加了一个新的循环语句:for/of for/of本质是对可迭代对象进行迭代操作 例： for(let element of data){ // data.push(sum) // 这样会创造一个无穷的循环，因为迭代永远不能触及最后一个数组 sum += element } 若对象不可迭代，则
阅读全文
摘要：桥接模式 有一个需求，要对一个组件实现鼠标滑过特效，但组件内部有很多元素，每个元素滑过的特效可能有一定的共同点，此时我们可以将共同点抽象出来 例： function changeColor(dom, color, bg){ dom.style.color = color dom.style.back
阅读全文
摘要：装饰者模式 当有很多元素，原有功能不能满足需求，需要添砖加瓦，可以采用装饰者模式 比如修改一个表单内所有input框的点击事件，为了不破坏原有onclick事件，同时添加新的onclick事件，需要先找到原来的功能部分，然后针对性的去修改或添加事件，为了避免麻烦，可以写一个装饰者去简化 const
阅读全文
摘要：如下方法，由于参数太多，导致使用很麻烦，顺序也难以记忆 function doSomeThing(name, title, age, color, size, prize){} 所以我们可以采用对象的方式配置参数 /* name: name title: title age: age color:
阅读全文
摘要：创建无法修改的静态变量 通过暴露一个取值器让外界可以访问到，但无法修改 const Conf = (function () { // 私有变量 const conf= { // 静态变量尽量大写 "MAX_NUM": 100, "MIN_NUM": 1, "COUNT": 1000 } return
阅读全文
摘要：建造者模式 建造者模式主要是将构建层与表示层分离，一种模块化的思想，使单个模块可以高效灵活的复用，但这种拆分同样增加了一定复杂度 实例：招聘简历 创建一个人类的类 const Human = function(param){ this.skill = param && param.skill ||
阅读全文
摘要：简单工厂模式，又叫静态工厂模式，由一个工厂创建某一种对象的实例，主要用来创建同一种对象 对不同类的实例化 有一个需求，要创建登录提示框，登录的确认框，登录成功的提示框，因为逻辑不完全相同，所以我们写成三个类 const LoginAlter = function (text) { this.cont
阅读全文
摘要：简介 在原型写法中，我们常用Object.create()和Object.setPrototypeOf()，记录一下自己的学习理解 Object.create() 创建一个对象，直接上代码 function SuperClass(name) { this.name = name this.color
阅读全文
