随笔分类 - JavaScript随笔
个人学习历程随笔
摘要：1. 学过之后过了一些时间再回来看发现原型链还是比较容易理解的，不想再详细的去重复细节了. 2. 简单复习重要的知识点： 【1】原型链的形成：首先我们知道 构造函数A 会有一个 prototype 指向原型对象，原型对象又有一个 constructor 指回 构造函数A，构造函数A 的实例对象有一个
阅读全文
摘要：1. Object.keys 获取对象的键的数组 2. Object.values 获取对象的值的数组 const o = { foo: 'bar', baz: 1, qux: {} }; console.log(Object.values(o)); // ["bar", 1, {}] 3. Obj
阅读全文
摘要：1. 在对象设计模式提出之前，使用 new Object() 或者 对象字面量 的方式声明对象是可以的，但如果需要多个结构类似的对象，那么会写很多重复性代码。工厂模式解决了这个问题： function createPerson(name, age, job) { let o = new Object
阅读全文
摘要：js中==和 区别 【转载，见文末】 简单来说： == 代表相同， 代表严格相同, 为啥这么说呢， 这么理解： 当进行双等号比较时候： 先检查两个操作数数据类型，如果相同， 则进行 比较， 如果不同， 则愿意为你进行一次类型转换， 转换成相同类型后再进行比较， 而 比较时， 如果类型不同，直接就是f
阅读全文
摘要：1. Object.assign可以实现对象的合并，或者说把src对象的可枚举属性添加到dest对象上，返回dest对象. 实际上是调用src的getter以及dest的setter函数实现的. 2. Object.assign(dest, ...srcs) src参数可以有一个，也可以有多个，如果
阅读全文
摘要：1. 防抖：简单来说即当一个事件我们不希望其频繁被触发，可以使用防抖. 原理是当一个事件被触发后，如果在未被执行前【处于setTimeout的delay阶段】再次触发该事件，则事件重新计时. function debounce(func, delay) { let timer = undefined
阅读全文
摘要：1. 构建虚拟DOM，参考资料：https://juejin.cn/post/6844903806132568072#heading-2【仅做为个人学习笔记，如有侵权，请联系本人】 type: 指定元素的标签类型，如'li', 'div', 'a'等 props: 表示指定元素身上的属性，如clas
阅读全文
摘要：1. reflow: 回流，即对DOM文档中某些或全部元素的尺寸、结构或者字体大小等属性进行修改时，浏览器重新对这些元素或者全部元素渲染的过程. 触发回流的操作： 【1】修改元素的尺寸、结构 【2】修改元素的字体大小等属性 【3】页面首次加载渲染 【4】获取offset | client | scr
阅读全文
摘要：个人学习转载【如有侵权，立即删除】： https://es6.ruanyifeng.com/#docs/let#%E9%A1%B6%E5%B1%82%E5%AF%B9%E8%B1%A1%E7%9A%84%E5%B1%9E%E6%80%A7 https://es6.ruanyifeng.com/#do
阅读全文
摘要：参考资料：https://es6.ruanyifeng.com/#docs/let 1. var示例代码【结合之后特点对应查看】： /* 1. 变量声明提升举例 */ console.log(age); age = 16; console.log(age); var age = 18; /* 2.
阅读全文
摘要：1. v-model双向绑定是由数据劫持以及发布订阅【观察者模式】实现的，这篇随笔暂时不讲解原理，作为个人小复习. v-model可以由另一种方式实现：v-bind动态绑定value，配合v-on:input使用，利用event.target.value获取输入框的值， 当输入框的值改变时将其传给V
阅读全文
摘要：1. Object.defineProperty(object, propertyName, descriptor) 数据属性： descriptor描述符对象属性：【这里的默认为true是对象字面量形式声明属性时，如果使用object.defineProperty则默认为false】 config
阅读全文
摘要：1. instanceof可用于判断某个实例是否属于某构造函数 或者 在继承关系中用来判断一个实例是否属于它的父类型或者祖先类型的实例 2. 思路：获取目标类型的显式原型prototype以及需要判断的实例的隐式原型__proto__，将实例按原型链一级一级判断， 直到__proto__为null，
阅读全文
摘要：1. Promise基本使用： 【1】Promise：两个实例参数，分别为PromiseState和PromiseResult，前者表示Promise状态，后者表示改变状态时传入的data数据. const p = new Promise((resolve, reject) => { resolve
阅读全文
摘要：1. 原理： （1）获取需要添加动画的元素 （2）为此元素设置一个定时器 （3）动画效果代码书写 （4）当达到某种条件后，取消定时器 实例：一个方块盒子左移到一定位置停止. <style> .box { position: absolute; left: 50px; margin-top: 30px
阅读全文
摘要：1. mouseover 可以事件冒泡，因此若父盒子添加事件，父盒子内有一个子盒子，则鼠标经过子盒子也会触发事件 2. mouseenter 不可以事件冒泡，因此在经过子盒子时不会触发事件，搭配 mouseleave 使用【同样不会冒泡的鼠标离开事件】
阅读全文
摘要：1. offset 系列属性简介 element.offsetWidth ： 获取自身元素的宽度【padding + border + width】 element.offsetHeight ：获取自身元素的高度 【padding + border + height】 element.offsetL
阅读全文
摘要：1. startswith() 方法，判断字符串是否以...开头 endswith() 方法，判断字符串是否以...结尾 还可以有第二个参数，表示position，从指定位置开始判断 let str = "Hello Webpack, nice to meet u"; console.log(str
阅读全文
摘要：1. find()方法 find()方法查找数组中符合条件的第一个元素，并将其返回；若未查找到，则返回undefined. let arr = [{ id: 1, name: "James" }, { id: 2, name: "Messy" }, { id: 3, name: "Messy" }]
阅读全文
摘要：1. 扩展运算符可以将数组拆分成以逗号分隔的序列 let arr = ['blue', 'pink', 'green']; ...arr // blue, pink, green console.log(...arr); // blue pink green 联想到 join() 方法 consol
阅读全文
浙公网安备 33010602011771号