拯救世界的光太郎

可以看到，每个查询都有单独的语句，每个查询语句都相当于都是一个黑盒，无需关注黑盒内部是如何实现的，拿着语句加上必要的字段即可实现目的。对遍历行为进行封装。这是一个高度频繁使用的功能，封装过后即可不再关注这一功能细节，而是将注意力放在如何实现做乘法或者加法。有了遍历的黑盒，可以实现单独针对遍历的功能进行优化，提升遍历效率的同时，而外界又无任何感知。关注对不同行为解耦（黑盒模型，即将功能进行封装，达到使用时无需注功能内部实现的目的）一条语句拆分成了三段，其实就是对不同功能的语句进行拆分，提升复用效率。

问题发生的场景：页面加载时，会加载一个n行的列表，列表每一行对应一组数据，一组数据由一个请求获得。我们需要将请求获取到的数据按照一定顺序显示到页面上下面先看一下数据大致的请求与存储方式：dataSource = [obj1, obj2, ...];getData = async (dataSource) => { let selectArr = []; let { title } = this.props; _.map(dataSource, (item, index)

let arr = [1, 2, 3];不考虑地址问题：arr = [];地址不改变：// 方法一：arr.length = 0;// 方法二：for(let i in arr)( arr.pop();)// 方法三：arr.splice(0, arr.length);

二叉树的广度优先遍历：从根节点开始，一层一层遍历二叉树，自左向右地打印每一个节点思路：先创建一个数组，用数组模拟队列。压入根节点，然后开始遍历：从数组头弹出一个元素，然后看数组let arr = [];function getRes(node){ if(node){ console.log( node.val ); arr.push(node); } while(arr.length > 0){ let.

inner = 'window';function say() { console.log(inner); console.log(this.inner);}var obj1 = (function() { var inner = '1-1'; return { inner: '1-2', say: function() { console.log(inner); console.log(.

代码出处：【前端性能】高性能滚动 scroll 及页面渲染优化// 防抖动函数function debounce(func, wait, immediate) { var timeout; // ① return function() { // ② var context = this, args = arguments; // ③ var later = function() { /

let car = { type: 'truck', size: 'big', description: function(){ console.log( "The Car is ", car.type , ". And the size is ", car.size, "." ); }}这里面多次出现了car.***，语句上显得十分冗余，我们可以借助this来简化代码：let car = { type: 'truck', size: 'bi.

1. HTTP 在一次请求完成后就会断开连接？这句话很明显是错误的。HTTP先后有多个版本，只有在HTTP/1.0及之前的版本中，无法建立保持连接状态。HTTP各版本特点总结_拯救世界的光太郎-CSDN博客HTTP 0.9特点：只有一个请求行；服务器仅返回数据，没有响应头。瓶颈：仅支持HTML，无法传输其他类型文件；文件编码格式过少，仅局限于ASCII。HTTP 1.0特点：引入请求头和响应头（数据类型、语言版本、编码类型、用户代理）；数据压缩；引入状态码；提供了Cache缓存机制（head里的缓存

题目描述：给你二叉树的根节点root 和一个表示目标和的整数targetSum ，判断该树中是否存在 根节点到叶子节点 的路径，这条路径上所有节点值相加等于目标和targetSum 。叶子节点 是指没有子节点的节点。示例 1：输入：root = [5,4,8,11,null,13,4,7,2,null,null,null,1], targetSum = 22输出：truefunction hasPathSum(root: TreeNode | null, targetSum:...

题目描述：给定一个二叉树，找出其最小深度。最小深度是从根节点到最近叶子节点的最短路径上的节点数量。说明：叶子节点是指没有子节点的节点。示例 1：输入：root = [3,9,20,null,null,15,7]输出：2示例 2：输入：root = [2,null,3,null,4,null,5,null,6]输出：5对递归的理解还是不够透彻，下文还是个人的思路分析【完全不建议参考，递归的学习过程心路历程会发生很多质的变化，想要学习递归，更应该看一个可以将其使用非常熟

一、call在开始手写 call 之前，我们先来回忆一下 call 的用法。举个简单的例子：function person(){ console.log(this.name);}let hero= { name: '迪迦'}person.call(hreo); // 迪迦可以看到，其作用就是将传入的对象绑定到 this 身上，然后就可以在函数中操作对象的属性了。简单来说，call 就是修改 this 指向的。我们换一种思考方式，call 的作用就好像在对象中加了

初次接触，或者很久没有回看正则表达式的小伙伴，多数都会觉得它稀奇古怪，难于记忆。经过多番尝试，发现以“实例+总结”的方式，来分析每个正则表达式的语义，可以实现最大限度、最快速度地理解其含义。觉得不错的小伙伴可以收藏一下，作为平时回看的一篇手记，方便下次阅读，谢谢您的支持。

better-scroll以移动端为主，PC 端也可以使用。 2.x 比 1.x 更小，原因：做了渐进式的处理，将整个事件拆解成为核心事件、插件事件。 使用格式： 整个滑动容器最外层的 class name 为 wrapper，这一层的高度或者宽度（根据滑动的方向变化）不会变化； 下一层是 class name 为 content 的 ul，或者是别的标签，这一层会随着里面一层不同数目的标签而变长，只不过超过 wrapper 的部分被隐藏了。只要类名保持不变即可。 使用方式：<

prototype：原型每一个函数都有一个prototype属性，它默认指向一个空对象。举个例子，我们来查看一下Date函数的原型：console.log(Date.prototype) // Object这就表示，Date函数的原型，是一个Object对象，这个对象身上有很多的方法，这些方法均是Object()原型给它的实例对象使用的。我们再来看一个自定义函数的原型：function fun() {}console.log( fun.prototype )...

1. 原生JS获取Dom对象的几种方法：通过id获取：getElementById("div1")。 参数是id，不能加“ #”返回一个Dom对象。 通过class获取：getElementsByClassName("box")。 参数是类名，不能加“ . ”。返回一个集合。不能直接给集合绑定事件，需要获取到集合中的某一个元素，然后再为元素绑定事件。 通过标签名获取：getElementsByTagName("p")。 参数是标签名。返回的也是一个集合。 通过name属性获取：get...

查了很多文章，都没有把这两个概念做一个系统的区分。这两个概念究竟有什么联系，也都没有一篇文章能够解释请求，其实标题为“DOM 分级”的文章网上一扒一大堆，可内容却都讲“DOM 事件模型”，不知道这些人自己有没有搞明白这两个概念。首先，DOM分级有四级：DOM0级、DOM1级、DOM2级、DOM3级DOM事件模型有三个：DOM0级提出的DOM0级模型、DOM2级提出的DOM2级模型、IE事件模型DOM0级提出了原始的事件模型；但DOM1级没有定义事件相关的内容，仅仅是定义了HTML和XML

XML（可扩展标记语言）Ajax最开始向服务器请求数据，数据格式就是XML，客户端接收到数据，提取后处理数据。但是现在使用的数据格式一般都是JSON，相较于XML来说，数据更加简洁，并且数据的转换也更加的容易，可以借助JSON的API快速将JSON数据转化成js对象，灵活度远胜于HTML。同样是标记语言，XML一般是用来保存、存储、传输数据，HTML则是用来向网页中呈现数据HTML内都是一些预定义标签，XML中没有预定义标签Ajax优点：在网页不刷新的情况下，向服务器发送ht

拨云见日、柳暗花明。看完了这篇文章，整个人唯一的感觉就是茅塞顿开。通篇的描述都可以说是深入浅出、面面俱到。强力推荐这篇文章！

解决方案、解决方案。

让我们更详细的了解一下，在ECMAScript中this到底是什么？定义this是执行上下文中的一个属性：activeExecutionContext = { VO: {...}, this: thisValue};这里VO是我们前一章讨论的变量对象。this与上下文中可执行代码的类型有直接关系，this值在进入上下文时确定，并且在上下文运行期间永久不变。下面让我们更详细研究这些案例：全局代码中的this在这里一切都简单。在全局代码中，this始终是全局对象本身，

主要介绍一些 调用 数组自带的一些方法 来实现的方式。思想一：和前一个元素比较是否重复1. 借助 forEach() 思想：先排序，和前一个元素比较，不重复就压入新数组。var arr = [3, 2, 5, 4, 6, 9, 4, 3];var sortArr = arr.sort();console.log( sortArr ); // [2, 3, 3, 4, 4, 5, 6, 9]va...

什么是 Set 集合：Set 集合类似于一个数组，但是它要求里面是元素不可以有重复。const set = new Set(['welcome', 'you', '!', 'you']);console.log(set); // Set { 'welcome', 'you', '!' }可以看到，Set 的实例是一个对象，这个对象的内部结构很像一个数组，传递给 Set 构造函数的数组，其内部重复的元素最终只会保留一个。将 Set 集合转化.

一句话记住 JS 运算符优先级

我们在 JavaScript 中有3种声明方式：var,let,const。其中var和let声明的是变量，而const声明的叫做常量。那我们想一个问题，我们声明一个变量后，我们不去管它，不去修改它，那它不就也是所谓意义上的常量了吗，为什么还要存在 const 呢？解答：首先，const 它有一个独特的存放值的空间，而 var 和 let 就没有。我们用 const 声明的常量都会放到它独有的空间里面。当我们跑代码的时候，如果我们用的是 var 或 let 声明的变量，我们的电脑找一个变量的时候

数组常用方法：1. join()join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)　　　　书写格式：join(" ")，括号里面写字符串("要加引号")，var arr = [1,2,3]; console.log(arr.join()); 　　　　// 1,2,3 console.log(arr.join("-")); 　　 // 1-2-3 console.log(arr); 　　　　　　　　// [1, 2, 3]（原数组不变）...

我们用一个数组来测试sort()函数的排序方法，这里以升序为例。打印参数 m、n 可以知道这个函数中究竟传入了什么值，借此就可以判断出来用的什么方法进行比较的：var a = [3,1,5,4,8,9,32,19,6,21,77,64,15];a.sort(function (m,n){ console.log( "m="+m+","+"n="+n ) return m-n;})console.log( a )来看一下打印结果，整个查找元素的过程，用到的方法其实就是.

进来看一看总结的一些JS代码，都是一些笔试喜欢考察的要点，相信总有一些能颠覆你的看法。

一、页面的渲染的大致过程当我们在浏览器里输入一个 URL 后，最终会呈现一个完整的网页。会经历以下几个步骤：1. HTML 的加载页面上输入 URL 后，会先拿到 HTML 文件。HTML是一个页面的基础，所以会在最开始的时候下载它，下载完毕后就开始对它进行解析。2. 其他静态资源的下载HTML 在解析的过程中，如果发现 HTML 文本里面有一些外部的资源链接，比如CSS、JS 和图片等，会立即启用别的线程下载这些静态资源。在 head 中遇到 JS 文件时，HTML 的解析会停 下来.

前段性能优化的作用于目的：从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。前端优化的途径有很多，按粒度大致可以分为两类。第一类是页面级别的优化。例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 。第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。一、页面级优化1..

声明：本文并非本人原创。本人水平有限，但是又想看一些难度不会过高，但是又有一定广度的文章。在浏览一些博客后，整理了一个可以满足和我有同样需求的文章，供广大同学参考。如有侵权，请联系本人，定立即删除。文章末尾附有摘取文章的链接，想深入了解的同学可以再深入学习一下。一、什么是XSS注入？Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Co..

首先说一下iframe有什么作用：iframe元素会创建包含另一个文档的内联框架。提示:可以将提示文字放在<iframe></liframe>之间，来提示某些不支持iframe的浏览器优点:iframe能够原封不动的把嵌入的网页展现出来。 如果有多个网页引用iframe，那么你只需要修改frame的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的复用性。..

目录Normalize.csshtml5shiv.jsrespond.jspicturefill.jsIE 条件注释IE 属性过滤器（较为常用的hack方法）浏览器 CSS 兼容前缀a 标签的几种 CSS 状态的顺序完美解决 Placeholder清除浮动 最佳实践BFC 解决边距重叠问题IE6 双倍边距的问题解决 IE9 以下浏览器不能使用 opacity解决 IE6 不支持 fixed 绝对定位以及IE6下被绝对定位的元素在滚动的时候会闪动的问题

先看这样一个示例：var obj = { name: 'john', color: 'yellow'};var newObj = obj;newObj.name = 'susan';console.log(obj.name); // susanconsole.log(newObj.name); // susan结果是我的obj的name对象被覆盖。如何解决呢？借助Object.assign()方法 关于assign()方法，MDN上...

为了便于操作“基本类型值”，JS 提供了三个特殊的引用类型：Boolean、Number、String。这些类型和其他引用类型相似，但同时也具备与各自基本类型相应的特殊行为。 实际上：每当读取一个基本类型值的时候， “后台就会创建一个 对应的基本包装类型的对象”，能够调用一些方法来操作这些数据。String对象String对象是基本类型，但是也是特殊的引用类型（基本包装类型：内部创建对象，可以调用它自己内部的特殊行为）String是基本包装类型：var box ='Mr...

js命名规范ECMAScript 规范中标识符采用驼峰大小写格式，驼峰命名法由小(大)写字母开始，后续每个单词首字母都大写。根据首字母是否大写，分为两种方式：Pascal Case 大驼峰式命名法：首字母大写。eg：StudentInfo、UserInfo、ProductInfo Camel Case 小驼峰式命名法：首字母小写。eg：studentInfo、userInfo、productInfo标识符，则包括变量、函数名、类名、属性名和函数或类的参数，每个命名方法又略有不同，下面详细解释一下