JS提升
关注
分享
扫一扫
文章平均质量分 61
JS碎片知识
小管打天下
这个作者很懒，什么都没留下…
展开
-
【JS提升】数组扁平化、去重与排序题目
目录1. 编写一个程序将数组扁平化并将扁平化后的数组去重，最终得到一个升序且不重复的一维数组（美团考题）2. 数组扁平化2.1. 扁平化的第一种方式：for循环2.2. 扁平化的第二种方式：forEach2.3. 扁平化的第三种方式：reduce（原型）2.4. 扁平化的第四种方式：reduce（es6）写法一（简写）写法二2.5. 扁平化的第五种方式：flat（es6）1. 编写一个程序将数组扁平化并将扁平化后的数组去重，最终得到一个升序且不重复的一维数组（美团考题）分析题目扁平化 -> 将原创 2022-05-22 22:41:58 · 330 阅读 · 0 评论 -
【JS提升】数组去重若干方法
目录1. for循环去重方法一方法二2. filter去重3. forEach去重4. sort去重方法一方法二5. includes去重（ES6）indexOf 和 includes 有什么区别6. sort + reduce7. Map去重Map的好处方法一（Map）方法二（Object）8. Set去重Set的好处1. for循环去重方法一思路两次循环：外层循环整个要去重的数组内层拿到外层元素，与容器元素进行对比，如果容器里没有则追加，如果有则breakvar arr = [1, 1,原创 2022-05-22 19:34:03 · 244 阅读 · 0 评论 -
【JS提升】ES6/ES7数组方法
目录1. JavaScript内置对象方法：1.1. Array.prototype.copyWithin（ES2015 ES6）概念写法描述拷贝对象/数组位移重写1.2. generator与iterator（ES2015 ES6）铺垫概念写法迭代器实现1.3. Array.prototype.entries（ES2015 ES6）概念写法迭代对象实现next运行实现二维数组排序1.4. Array.prototype.fill（ES2015 ES6）概念写法描述创建类数组方法重写1.5. Array.p原创 2022-05-22 09:17:02 · 575 阅读 · 0 评论 -
【JS提升】六边形的两种画法
一、六边形的两种画法（1）画法一.hexagon-1 { position: relative; width: 100px; height: 173.2px; margin: 0 auto; background-color: red;}.hexagon-1::before,.hexagon-1::after { content: ""; display: block; position: absolute; top: 0;原创 2021-07-31 18:42:23 · 1249 阅读 · 0 评论 -
【JS提升】各种三角形、梯形画法
一、各种三角形的画法（1）画法一.triangle1 { width: 0; height: 0; /* 去掉空白区域 */ /* border-top: 50px solid transparent; */ border-bottom: 50px solid green; border-left: 50px solid transparent; border-right: 50px solid transparent;}（2）画法二.tr原创 2021-07-31 18:39:42 · 991 阅读 · 0 评论 -
【JS提升】link与@import引入CSS样式表的区别
一、link与@import引入CSS样式表的区别（1）link与@import的用法link与@import都常用来引入css样式表（2）link与@import的区别：1、从属关系不同：link-html标签, 可以定义RSS, rel关联属性设置@import-CSS关键字, 只能引入样式表文件2、加载顺序不同link 引入CSS是同时加载的，异步加载 不阻塞@import 页面加载完毕后被加载3、兼容性：link 不存在兼容问题@import css2.1 IE5以上才能原创 2021-07-31 18:35:51 · 472 阅读 · 0 评论 -
【JS提升】移动端页面常用的meta标签
一、移动端页面常用的meta标签<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 渲染引擎兼容性设置 --> <!-- render --> <!-- 渲染引擎的渲染模式 --> <meta name="rend原创 2021-07-31 18:10:26 · 808 阅读 · 0 评论 -
【JS提升】IE常见的BUG解决方案
一、IE常见的BUG解决方案（1）IE6常见BUG盒子浮动的margin会变成2倍，解决方案 => display: inline / block元素浮动会有3个像素间隙，解决方案 => 都加float外部一个盒子相对定位，内部一个盒子绝对定位，如果right/left/top/bottom = 0，会有1px间隙，解决方案 => 设置偶数宽高img 下方有白色间隙，解决方案 => block、vertical-align、font-size: 0(不建议)一个空元素，原创 2021-07-31 18:05:22 · 138 阅读 · 0 评论 -
【JS提升】重新探究this指向问题
一、重新探究this指向问题（1）示例1<button id="btn">点击</button><script> var oBtn = document.getElementById('btn'); oBtn.onclick = function () { console.log(this); // 谁绑定事件处理函数，函数内部的this就指向谁 this.innerHTML = '加载中...';原创 2021-07-31 17:47:26 · 92 阅读 · 0 评论 -
【JS提升】选项卡的两种实现方式
一、选项卡的两种实现方式（1）方法一<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-07-31 17:35:10 · 263 阅读 · 0 评论 -
【JS提升】实现两栏与三栏布局的方法
一、两栏布局（1）两栏布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">原创 2021-07-28 16:31:08 · 664 阅读 · 0 评论 -
【JS提升】浅谈从DOM操作到虚拟DOM
一、虚拟DOM（1）概念虚拟DOM（Virtual DOM）-> Vue React核心通过JS去模拟DOM结构比如把表单里的abc改成dbc，用JQuery的话就会先去除abc，再改成dbc，这样就比较消耗性能如果用虚拟DOM的话，就只需要修改更改的内容就可以了，这样性能相对的提升了（2）snabbdomsnabbdom是一个虚拟DOM库h函数： 帮助生成一个虚拟的dom节点// 第一个参数是类名、第二个参数是属性，第三个参数是子节点var vnode = h("ul#list"原创 2021-07-28 13:58:34 · 361 阅读 · 0 评论 -
【JS提升】从头探究this关键字
一、从头探究this关键字（1）bind修改this指向; (function () { function Test(a, b) { this.oBtn = document.getElementsByTagName('button')[0]; this.a = a; this.b = b; } Test.prototype = { init: function () { this.bindE原创 2021-07-27 16:43:10 · 156 阅读 · 0 评论 -
【JS提升】图片的预加载与懒加载
一、懒加载（1）懒加载<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l原创 2021-07-26 22:39:14 · 304 阅读 · 0 评论 -
【JS提升】封装byClassName、断点测试、bug调试
一、封装byClassName（1）封装byClassName<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content=原创 2021-07-26 13:01:34 · 300 阅读 · 0 评论 -
【JS提升】标签的属性与特性、Math方法
一、标签的属性与特性（1）属性与特性的区别<input type="text" id="username" value="张三" data="zhangsan">标签本身就有的属性就叫做特性、属性，比如input -> type id value标签本身没有硬加的属性就是非特性、属性var oInput = document.getElementById('username');console.log(oInput.type); // textconsole.log(oIn原创 2021-07-25 16:33:53 · 96 阅读 · 0 评论 -
【JS提升】探究bind与call/apply的区别、重写bind方法
一、探究bind与call/apply的区别二、重写bind方法原创 2021-07-25 11:11:15 · 246 阅读 · 1 评论 -
【JS提升】异步加载案例、放大模式、宽放大模式
一、异步加载案例（1）简易计算机async.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=原创 2021-07-24 16:46:03 · 313 阅读 · 1 评论 -
【JS提升】同步与异步加载的三种方法、企业级异步加载
一、同步与异步加载的三种方法（1）工具函数命名空间： 一个对象赋值给一个变量，这个变量就是这个对象的命名空间var utils = { test: function(){ console.log('test'); }, demo: function(){ console.log('demo'); }}utils.test();Element.prototype = { elemChildren: function(){ }}xxx.elemChildren();原创 2021-07-23 14:33:03 · 689 阅读 · 1 评论 -
【JS提升】剖析JavaScript的执行机制
一、JS运行原理（1）进程进程：是计算机中的程序关于某数据集合上的一次运行活动（正在运行中的程序），是系统进行资源分配和调度的基本单元；多进程：启动多个进程（程序），多个进程可以一块来执行多个任务；单线程：进程内一个相对独立的，课调度的执行单元，在同属的一个进程共享者进程中的资源；（线程是进程当中的基本单位。同一时间，只能作一件事情）多线程：启动一个进程，在一个进程内部启动多个线程，这样，多个线程也可以一块执行多个任务；（也是通过调度来做的，如同多进程能做多任务一样，多线程也能做多任务）举例原创 2021-07-22 11:35:05 · 160 阅读 · 2 评论 -
【JS提升】渲染引擎、声明HTML、渲染模式
一、渲染引擎（1）浏览器组成部分用户界面：用户看到的浏览器的样子浏览器引擎：让浏览器运行的程序接口集合，主要是查询和操作渲染引擎渲染引擎：解析HTML/CSS，将解析的结果渲染到页面的程序网路：进行网络请求的程序UI后端：绘制组合选择框及对话框等基本组件的程序JS解释器：解释执行JS代码的程序数据存储：浏览器存储相关的程序 cookie/storage（2）浏览器的组成部分（3）渲染的概念渲染用一个特定的软件将模型(一个程序)转化为用户能看到的图像的过程渲染引擎内部具备一套原创 2021-07-21 15:30:44 · 353 阅读 · 0 评论 -
【JS提升】时间线、解析与渲染、封装文档解析完毕函数
一、时间线（1）document.write问1：为什么document.write会追加在文档流后面而不是覆盖？<body> <div></div> <script> document.write('<h1>我是一个孤独的h1</h1>') </script></body>因为document.write写在script标签里面，script标签属于文档节点原创 2021-07-20 20:22:38 · 446 阅读 · 1 评论 -
【JS提升】DOM/CSS/渲染树、解析与加载、回流与重绘
一、DOM/CSS/渲染树二、解析与加载三、回流与重绘原创 2021-07-14 11:35:26 · 1060 阅读 · 0 评论