![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端js 基础笔记
前端基础笔记
ivanfor666
虽是一只小鸟,玩的却是整个天空。
展开
-
用原生 js 模拟多线程运行
【代码】用原生 js 模拟多线程运行。原创 2023-09-28 14:53:04 · 130 阅读 · 0 评论 -
css单位详细介绍
css单位详细介绍原创 2022-09-28 11:43:59 · 59 阅读 · 0 评论 -
页面渲染html的过程以及重排和重绘
页面渲染html的过程以及重排和重绘原创 2022-09-27 10:15:42 · 601 阅读 · 0 评论 -
分享一个超好用的 轮询 + 定时器管理器
轮询 , 定时器管理器原创 2022-07-12 17:32:53 · 473 阅读 · 0 评论 -
上下无状态筛选(js小技巧)
a = undefined; function click (){ if(a === false){ a = undefined }else{ a = !a } console.log(a) }原创 2021-11-10 17:32:22 · 653 阅读 · 0 评论 -
排序常见算法
排序算法 面试最常考:快速排序和希尔算法 (tips) 算法名称 时间复杂度 空间复杂度 冒泡排序 O(n2) O(1) 选择排序 O(n2) O(1) 快速排序 O(n*log2n) O(log2n)~O(n) 插入排序 O(n2) O(1) 希尔排序 O O(1) 冒泡排序: 原理:如果是想从小到大排序,拿出数组相邻两位数比较,小的放前,大的放后,如此反复的交换位置就可以得到排序的效果。原创 2021-08-16 16:27:58 · 79 阅读 · 0 评论 -
js 验证前端代码性能
// js 验证前端代码性能 const comparePerformance = (...fnArr)=>{ // 要验证的核心代码 const coreFn = (fn)=>{ new Promise(()=>{ console.time(fn.name); // comparePerformance.getParams() fn&&fn(...comparePe.原创 2021-08-16 15:48:27 · 128 阅读 · 0 评论 -
简单 deepclone
function deepclone(target) { // 手写简易版深克隆 支持原始值,function,obj,array if (typeof target === "object") { if (target instanceof Array) { const tempArr = []; for (let i = 0, len = target.length; i < len; i++) {.原创 2021-07-31 16:56:07 · 99 阅读 · 0 评论 -
认识map
/* * Map * * * */ let myMap = new Map(); let keyObj = {}; myMap.set(keyObj, "和键keyObj关联的值"); myMap.size; // 1 myMap.get(keyObj); // "和键keyObj关联的值" myMap.get({}); // undefined, 因为keyObj !== {} // 遍历Map for (var [key, value] of myMa.原创 2021-07-31 16:53:08 · 88 阅读 · 0 评论 -
继承--圣杯模式
var grailMode = (function () { return function (Origin, Target) { var Temp = function () { }; // 临时构造函数 Temp.prototype = Origin.prototype; Target.prototype = new Temp(); // 这里不是明白,为什么要加个临时构造函数 Ta.原创 2021-07-31 16:42:46 · 50 阅读 · 0 评论 -
Object.prototype.toString
var obj3 = {}; obj3.toString(); Object.prototype.toString.call(1) /* 返回 [object Number] --》 Number 为构造该对象的构造函数 --》 并非 constructor */原创 2021-07-31 16:41:24 · 72 阅读 · 0 评论 -
Generator 生成器 与 iteritor 迭代器 的区别
Generator 在一定程度上,理解为 可以自定义的迭代器; arr = ["a", "b", "c","d","e","f"]; function* fn(){ for (var i=0; i<arr.length;i++) { yield arr[i] } } var iterator = fn(); iterator.next() // {value: "a", done: false} arr = ["a", "b", "c","d",".原创 2021-07-31 14:49:28 · 104 阅读 · 0 评论 -
数组prototype 一些冷门方法
arr (6)["a", "b", "c", "d", "e", "f"] arr[-1] undefined arr[1] "b" arr.at(1) "b" arr.at(-1) "f" const array1 = ['a', 'b', 'c', 'd', 'e']; // copy to index 0 the element at index 3 console.log(array1.copyWithin(0, 3, 4)); // expected output: Array ["d"..原创 2021-07-31 13:47:24 · 77 阅读 · 0 评论 -
数组循环几种方式
arr = ["a", "b", "c","d","e","f"]; 1. /* 普通for循环 */ for (var i=0; i<arr.length;i++) { console.log(arr[i]) } 2. /* 迭代循环*/ for (var item of arr) { console.log(item) } 3./* 可中断恢复迭代循环*/ arr2 = arr[Symbol.iterator](); var count = 0; for (...原创 2021-07-31 12:12:49 · 160 阅读 · 0 评论 -
Object.create
/* 使用Object.create创建出来的空对象,可以指定原型链等于实参,即__proto__ = 实参*/ /*若 实参为null,则把原型链切断,没有显现的__proto__*/ /*创建Obj1 空对象*/ var obj1 = Object.create(null); console.log(obj1); obj1.num = 1 var obj2 = Object.create(obj1); console.log(obj2); obj = Object.create(Object..原创 2021-07-31 11:12:23 · 45 阅读 · 0 评论 -
js处理精度问题
首先要明白计算机不会进行我们正常生活中的数学运算, 如1/3+1/3+1/3 = 1; 只会把它转为二进制进行运算, 最终变为:0.333...+0.333...+0.333...=0.999...; 而不是等于1, 这时我们就要用,tofix(),方法转位多少位字符串小数, 再用pasreFloat(),转位数字类型; parseFloat((0.2+0.145).toFixed(3)) 或者直接把你想计算多少位的小数直接乘以10的多少次方进行计算; ...原创 2021-07-31 10:40:46 · 281 阅读 · 0 评论 -
JS的一些常用知识点
XXX.className = 'xxx';只有HTML元素上自带的“特性”才能通过 XXX.XX 的形式直接取值或赋值否则其他属性只能get/set取值或赋值XXX.setAttribute('xxx','xx');//第一个属性 第二个属性值XXX.getAttribute('xxx');Math.rander() // 左闭右开 [0,1)Math.floor() // 向下取整de...原创 2018-03-09 16:40:28 · 175 阅读 · 0 评论 -
hasOwnProperty的应用场景
function Car(){ this.a = "a"; this.b = "b"; this.c = "c"; } Car.prototype = { lang:5, width:2.5 } var car = new Car(); for(var key in car){ console.log(key + ":" + car[key]) } // a:a // b:b // c:c // lang:5 // width:2.5 for(var key in car){ if(car....原创 2021-04-10 18:33:44 · 133 阅读 · 0 评论 -
作用域链与原型链关系
案例 1 : function aa(){ console.log(my) }; aa(); Object.prototype.my = 'Objectmy'; aa(); window.__proto__.my = "windowmy"; aa(); Function.prototype.my = "Functionmy"; // 如果是先 ao->原型链 -> go 则打印"Functionmy",反之打印"windowmy",事实上证明是 先 ao-> go -> wi..原创 2021-04-10 18:29:53 · 108 阅读 · 0 评论 -
分享简单好用的js开发调试插件,方便在运行代码过程中频繁打出console.log的小伙伴
vue,react 框架都可以,onClick方法替换下就好啦。 <button style={{position: "fixed", bottom: "3rem", zIndex: 999}} onClick={() => { const prototype = Object.prototype; if (!prototype.uiltFn) { prototype.uiltFn = { cache: "const temp = 'x.原创 2021-04-10 18:43:54 · 242 阅读 · 0 评论 -
梳理js执行过程,作用域与原型链的关系
js代码执行过程: 1.通篇检查语法错误。--》 2. 预编译(提升var 变量 -> [ 形参初始化赋上默认值 ] -> function 声明 -> 执行 ) --》3.执行(整理好的)代码 作用域链:在函数定义的那一刻,已经挂上了作用域链,至少存在一个顶层的GO 作用域链与原型链的唯一关系: function aa(){ function bb(){ console.log(abc) } }, 访问变量abc时,在闭包里面两个AO和一个GO均无声明变量时, 会最终寻找到win原创 2021-04-10 18:23:46 · 91 阅读 · 0 评论 -
渐进式手写自己 promise,小白请进。
promise的使用场景 使用promise能够有效的解决js异步回调地狱问题 能够将业务逻辑与数据处理分隔开使代码更优雅,方便阅读,更有利于代码维护 如何创建自己的MyPromise, 首先要理解你日常开发中是怎么使用原生Promise的, 首先就是创建MyPromise 一: 场景: 使用hello world => Promise var p = new MyPromise((resolve,reject)=>{ if("成功"){ resolv原创 2021-06-26 11:51:42 · 91 阅读 · 0 评论 -
ES6中的面向对象class,对新手学习理解大有帮助。
//ES5的做法://function Car(options){// this.style = options.style;//}////Car.prototype.owner = function(){// return "ivan";//}//////const car = new Car({style:"cool"});////console.log(car.style);//consol...原创 2018-04-07 09:42:30 · 233 阅读 · 0 评论 -
前端小白必须弄懂的包装类现象与原理
现象一: var num = 111; num.len = 3; console.log(num.len) // undefined 转换过程: var num = 111; num.len = 3; // ==> new Number(111).len = 3; //解析:由于是原始值没有属性 ,所以系统自动创建对象并赋值,由于没有保存在具体声明变量中,所以系统自动detele,跟没有一样。 console.log(num.len) // undefined 正确做法: v...原创 2021-04-10 18:09:28 · 168 阅读 · 0 评论 -
number,string,array常用的一些对象方法
number:1·toString() 可以转化为字符串类型,参数为需要转化的进制2·toFixed() 保留几位小数,4舍5入*** String 对象方法:1·charAt() 表示字符串中某个位置的数字charCodeAt() 返回指定位置的字符的 Unicode 编码2·concat() stringObject.concat(stringX,stringX,...,s...原创 2018-04-05 22:41:37 · 379 阅读 · 0 评论