js必会手写
数据类型判断
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) &# ...
js垃圾回收机制
垃圾回收机制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格式的歌词
用 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) {//遍历歌词数组 ...
js深拷贝与浅拷贝
对象的深拷贝和浅拷贝
递归的方式实现深拷贝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
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 ...
QA测试
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); });});
在 ...
es5核心知识点笔记
变量提升以及函数提升
变量是会变量提升的,看现象
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); } & ...
