js 判断数据类型方法 1. typeof()  参考：https://www.jianshu.com/p/8107d25f54ac   js 是一门弱语言，它在声明变量时无需确定变量的类型，js 在运行时会自动判断。那么如何判断一个变量的类型呢，js 提供了 typeof 运算符，用来检测一个变量的类型。 1.1 typeof 语法 typeof是一个运算符，有2种使用方式：typeof(表达式)和typeof 变量名，第一种是对表达式做运算，第二种是对变量做运算。 1.2 typeof 返回值  typeof运算符的返回类型为字符串，值包括如下几种： ​ ① 'undefined' --未...

Set和Map的区别 参考：https://zhuanlan.zhihu.com/p/81234278 1. 简述  Set 和 Map 主要的应用场景在于 数据重组 和 数据储存。 Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构。  2. 区别  共同点：集合、字典 可以储存不重复的值 不同点：集合 是以 [value, value] 的形式储存元素，字典 是以 [key, value] 的形式储存  3. Set（集合） ES6 新增的一种新的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值。 Set 本身是一种构造函数，用来生成 Set 数据结构。 Set 对...

js 数组常用方法 参考：https://blog.csdn.net/mo123456opuiop/article/details/90698072 1. 常见方法 1.1 push()  语法: array.push(item1, item2, …, itemX) push( )方法：可以将一个或者更多的参数添加在数组的尾部；返回添加后的数组的长度，原数组发生改变。 代码示例如下：  var arr = [1,2,3,4]; var a = arr.push(9,8,7); console.log(a,arr);//1,2,3,4,9,8,7； 1.2 unshift()  语法: arra...

CSS 两栏布局 左栏宽度固定，右栏自适应 1. float + margin-left  左侧使用 float ，右侧 margin-left  原理：因为 float 就脱离文档流了，右侧会挤到左侧的位置上，所以需要 margin-left。margin-left要等于 float 的宽度。 <style> * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } div { height: 200px; } .left { width: 300px; float: left; backgroun...

Flex布局语法  参考：https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  1. Flex布局是什么 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; } Webkit 内核的浏览器，必须加上-webkit前缀。 .box{ display: -webkit-flex; /* ...

url组成部分 参考：https://blog.csdn.net/u013344815/article/details/55194558 就以下面这个URL为例，介绍下普通URL的各部分组成 http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name 从上面的URL可以看出，一个完整的URL包括以下几部分： 1.协议部分 该URL的协议部分为 “http：”，这代表网页使用的是 HTTP 协议。在 Internet 中可以使用多种协议，如HTTP，FTP等等本例中使用的是 HTTP 协议。...

meta 标签 参考：https://blog.csdn.net/yc123h/article/details/51356143 1. 什么是meta标签  元数据（metadata）是关于数据的信息。 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。 典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。 标签始终位于 head 元素中。 元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。  其实对上面的概念简单总结下就是：<meta> 标签提供关于 HTML...

前端性能优化 参考：https://mp.weixin.qq.com/s/3o96MEIw_sPTPfsNO8PqUA 渲染优化 js css加载顺序 渲染树的构成必须要 DOM 树和 CSSOM 树的，所以尽快的构建 CSSOM 树是一个重要的优化手段，如果 css 文件放在尾部，那么整个过程就是一个串行的过程先解析了 dom，再去解析 css。所以 css 我们一般都是放在头部，这样 DOM 树和 CSSOM 树的构建是同步进行的。 再来看 js，因为 js 的运行会阻止 DOM 树的渲染的，所以一旦我们的 js 放在了头部，而且也没有异步加载这些操作的话，js 一旦一直在运行，DOM 树...

雪碧图 1. 什么是雪碧图？  雪碧图也叫CSS精灵， 是一CSS图像合成技术；  上面解释说它是一项技术，但我们开发人员往往将小图标 合并在一起之后的图片称作雪碧图；术语定义其实不用纠结， 我们知道它主要用在小图标显示上就行了。 CSS雪碧图应用原理 只有一张大的合并图， 每个小图标节点如何显示单独的小图标呢？ 其实就是 截取 大图一部分显示，而这部分就是一个小图标，如下图：  如显示上面 QQ 小图标， 则在合并图中X轴向右60像素， Y轴0像素， 截取宽高均为48像素；则 这个小图标就出来了：  关键样式： background-image: url("sprite.png&q...

Git入门教程 参考： https://mp.weixin.qq.com/s/Q_O0ey4C9tryPZaZeJocbA Git简介 Git 是一种分布式版本控制系统，它可以不受网络连接的限制，加上其它众多优点，目前已经成为程序开发人员做项目版本管理时的首选，非开发人员也可以用 Git 来做自己的文档版本管理工具。 Git基本命令 一、准备阶段 进入 Git官网 下载合适你的安装包，安装好 Git 二、常用操作 常用的 Git 命令列表：  git clone git config git branch git checkout git status git add git commit g...

搜索旋转排序数组 search(nums, target){ let left = 0; let right = nums.length - 1; while(left < right){ let mid = Math.floor((left + right) / 2); if((nums[0] > target) ^ (nums[0] > nums[mid]) ^ (target > nums[mid])) left = mid + 1; else right = mid; } return left === right && nums[left] =...

实现strStr() strStr(haystack, needle){ if(!needle) return 0; let count = 0; for(let i=0; i<haystack.length; i++){ if(haystack.charAt(i) === needle.charAt(count)){ if(haystack.substring(i, i+needle.length) === needle){ return i; } continue; } } return -1; },

移除元素 removeElement(nums, val){ let index = nums.indexOf(val); while(index >= 0){ nums.splice(index, 1); index = nums.indexOf(val); } return nums.length; },

删除排序数组中的重复项 removeDuplicates(nums){ if(nums.length === 0){ return 0; } let i = 0; for(let j=1; j < nums.length; j++){ if(nums[j] !== nums[i]){ i++; nums[i] = nums[j]; } } return i+1; },