方先生の博客

数据类型判断 js 本身就自带一些可以检测数据类型的方法，但各有缺点 typeof typeof可以用于判断除null以外的基本数据类型，对于引用数据类型均返回object,函数返回function 12345console.log(typeof 1); //numberconsole.log(typeof new Number(1)); //objectconsole.log(typeof null); //objectconsole.log(typeof undefined); //undefinedconsole.log(typeof function () {}); //function instanceofinstanceof 原理并手写 检测某个实例的原型链上是否含有这个类的原型属性 123***789101112function myInstanceof(left, right) { let proto = left.__proto__; while (true) { if (proto == null) &# ...

垃圾回收机制1. 垃圾回收的方式手动垃圾回收和自动垃圾回收 c语言是手动垃圾回收 javaScript是自动垃圾回收 2. javaScript垃圾回收的方式 调用栈中的垃圾数据回收方式 堆中垃圾数据的回收方式 3. 调用栈中的垃圾数据回收方式当一个函数执行结束之后，JavaScript 引擎会通过向下移动 ESP 来销毁该函数保存在栈中的执行上下文 123***78910function foo(){ var a = 1; var b = {name:"王美丽"}; function showName(){ var c = 2; var d = {name:"闷倒驴"}; }; showName()};foo() 4. 堆中的垃圾回收方式 当函数直接结束，栈空间处理完成了，但是堆空间的数据虽然没有被引用，但是还是存储在堆空间中，需要垃圾回收器将堆空间中的垃圾数据回收 4.1 代际假说代际假说有以下两个特点： 第 ...

布局1. 盒模型宽度的计算 普通盒模型 默认盒子属性：box-sizing: content-box; offsetWidth = (width + padding + border) 不算margin 怪异盒模型 设置语句：box-sizing: border-box; offsetWidth = width padding和border都挤压到内容里面 2. margin纵向重叠 margin纵向重叠取重叠区最大值，不进行叠加 3. margin负值问题 margin-top和margin-left 是负值，元素会向上或者向左移动 margin-right 负值，右侧元素左移，自身不受影响 margin-bottom负值，下侧元素上移，自身不受影响 4. BFC Block Format Context ：块级格式化上下文 一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素 形成BFC的条件 float 不设置成none position 是absolute或者fixed overflow 不是visible display是f ...

排序算法冒泡排序123***78910111213***15let arr = [1, 22, 4, 67, 12, 2, 3, 0, 44, 34];function bubble(arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { let temp = arr[j + 1]; arr[j + 1] = arr[j]; arr[j] = temp; } } } return arr;}bubble(arr);console.log(arr); //[0, 1, 2, 3, 4, 12, 22, 34, 44, 67] 插入排序123***78910111213***1617let arr = [1, 22, 4 ...

基本实现123***789101112131*****171***2*****232***26272829303132*****536***839404142let box = document.querySelector("#box");let curMouse = {}; //当前鼠标位置信息let startMouse = {}; //按下时鼠标位置信息let startBox = {}; //按下时box位置信息let moveFn = function (e2) { // 移动函数 curMouse = { x: e2.clientX, y: e2.clientY, }; let distance = { x: curMouse.x - startMouse.x, y: curMouse.y - startMouse.y, }; operateCss(box, "top", startBo ...

用 JS 解析 LRC 格式的歌词 废话少说，下面是 api 返回的数据 把 LRC 歌词解析为 JS 对象123***789101112131*****171***2*****232***26272829303132*****536***839404142*****546***8createLrcObj(lrc) { var oLRC = { ti: "", //歌曲名 ar: "", //演唱者 al: "", //专辑名 by: "", //歌词制作人 offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置 ms: [] //歌词数组{t:时间,c:歌词} } if (lrc.length == 0) return; var lrcs = lrc.split('n');//用回车拆分成数组 for(var i in lrcs) {//遍历歌词数组 ...

对象的深拷贝和浅拷贝 递归的方式实现深拷贝123***789101112131*****171***2*****232***262728293031function deepClone(target) { //定义一个返回变量 let res; //如果target是对象如null，array等 if (typeof target === "object") { if (Array.isArray(target)) { //target为数组 res = []; for (let i in target) { res.push(deepClone(target[i])); } } else if (target === null) { //target为null res = null; } else if (target.constructor === RegExp) { ...

call 与 apply 与 bind 异同 作用：均为改变 this 指向 call/bind 传参为多个参数，apply 传参为一个参数数组 bind 的时候 function 函数不执行，需手动执行，call/apply 的时候函数自动执行 手写 call123***789101112131*****171***2021Function.prototype.myCall = function (obj, ...arr) { // 基本原理就是用传进来的对象obj来调用 调用call的函数 let context = obj || globalThis; //谁调用Call this指向谁，而Call在Function的原型上,所以如调用obj.fn.myCall()时此函数this指向obj.fn context.func = this; let res = context.func(...arr); delete context.func; return res;};this.a = "window";var obj ...

unit 单元测试 使用 karma 进行测试 http://karma-runner.github.io/ 安装及使用 创建一个测试文件夹 unit,并npm init 安装 karma 12npm install karma --save-devnpm install -g karma-cli 在 unit 文件夹创建要测试的 index.js 1234//+1 函数window.add = function (num) { return num == 1 ? 1 : num + 1;}; 创建测试脚本 index.spec.js 123***7describe("基本api测试", function () { it("+1函数测试", function () { //测试+1函数是否符合预期 expect(window.add(1)).toBe(1); expect(window.add(2)).toBe(3); });}); 在 ...

变量提升以及函数提升 变量是会变量提升的，看现象 123***78910if (false) { var a = 3;}console.log(a); //undefined/**********相当于***********/var a;if (false) { a = 3;}console.log(a); //undefined 函数也存在函数提升 12345console.log(test); //ƒ test(){ console.log(1); }test(); //打印1function test() { console.log(1);} 函数提升要注意的地方 123***789101112131*****171819(function () { console.log(test); //undefined if (false) { function test() { console.log(1); } & ...