JohnZhongJob的博客

memoizer函数取得的一个初始的memo数组和formula函数。它返回一个管理memo储存和在需要时调用用formula函数的recur函数。我们把这个recur函数和它的参数传递给formula函数：var memoizer = function (memo, formula) { var recur = function (n) { var result = memo[n]; if(typeof result !== "number") { ...

新建：var arr = new Array();var arr = new Array(20);var arr = [];var arr = [1, 2, 3];var arr = [1,2,3,,,,]arr[14] = 15;使用arr.length获取长度检测数组：if(value instanceof Array) { // instanceof 操作符的问题在于，他假定只有一个全局执行环境。如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行...

很多不太懂正则的朋友，在遇到需要用正则校验数据时，往往是在网上去找很久，结果找来的还是不很符合要求。所以我最近把开发中常用的一些正则表达式整理了一下，在这里分享一下。给自己留个底，也给朋友们做个参考。一、校验数字的表达式 数字：^[0-9]*$ n位的数字：^d{n}$ 至少n位的数字：^d{n,}$ m-n位的数字：^d{m,n}$ 零和非零开头...

将如下扁平对象，转为树形对象。parent字段为空字符串的节点为根节点：var input = { h3: { parent: 'h2', name: '副总经理(市场)' }, h1: { parent: 'h0', name: '公司机构' }, h7: { parent: 'h6', name: '副总经理(总务)'...

npm 安装依赖包npm install [package]npm install [package] -g // 全局安装查看安装信息npm list -gnpm list [package] // 查看摸个模块的版本号卸载模块npm uninstall [package]更新模块npm update [package]使用淘宝镜像npm ins...

目录1. 怎样实现JS继承, ES5和ES6中实现继承有什么区别？2. 强制缓存与协商缓存，举例写几个缓存相关的Header；3. 编写函数实现如何快速让字符串变成以千为精度的数字？4. 前端项目大多都有编译构建环节，请例举说明Web应用“编译时”与“运行时”的区别？5. 不使用JSX如何编写React?比如：编写一个内容为“hello”的p标签；6. 闭包的原理和优...

JS有其中数据类型，六种原始（基本）类型和Object。 六种基本数据类型String,Number,Boolean,Null,Undefind,Symbol。这六种类型的赋值，就是值传递。特殊类型对象的赋值是将对象地址的引用赋值。这时候修改对象中的属性或者值，会导致所有引用这个对象的值改变。如果想要真的复制一个新的对象，而不是复制对象的引用，就要用到对象的深拷贝。 浅拷贝...

slice()定义和用法slice()方法可从已有的数组中返回选定的元素。string.slice(start, end)提取一个字符串string.substring(start, end)提取一个字符串,end不支持负数string.substr(start, len)提取一个长度为len的字符串1、slice和substring接收的是起始位置和结束位置(不包括结束位置...

function sayHi() { alert('Hi!')}var sayHello = function() { alert('Hello!')}关于函数声明，它的重要的特征就是函数声明提升，意思在执行代码之前会先读取函数声明。这就意为这可以把函数声明放在调用它的语句后面。第二种创建函数的方式是使用函数表达式。这中情况下创建的函数叫做匿名函数，也叫拉姆达函数...

一个常见的递归函数：function factorial(num) { if(num <= 1) { return 1; } else { return num * factorial(num - 1); }}这个函数表面看起来不会有什么问题，但是下面的代码却可能会导致它出错：var anotherFactorial ...

闭包定义：指有权访问另一个函数作用域中的变量的函数； 我们知道，当某个函数被调用时，会创建一个执行环境及相应的作用域链。然后，使用arguments和其他命名参数的值来初始化函数的活动对象。但是在在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三为，……直到作为作用域终点的全局执行环境。 在函数执行过程中，为读取和写入变量的值，就需要在作用域链...

作用域链的这种配置机制引出了一个值得注意的副作用，即闭包只能取得包含函数中的任何变量的最后一个值。别忘了闭包所保存的时整个变量对象，而不是某个特殊的变量。下面这个例子可以清晰地说明这个问题：function createFunction () { ar result = new Array(); for (var i = 0; i < 10; i++) { // 虽然...

在闭包中使用this对象会导致一些问题。我们知道，this对象是在运行时基于函数的执行环境绑定的：在全局环境中，this等于window，而当函数被作为对象的方法调用时，this等于那个对象。不过，匿名函数的执行环境具有全局性，因此其this对象通常指向window。但有时候由于编写闭包的方式不同，这一点可能不会那么明显。可以看看下面这个例子：var name = "This Win...

首先我们需要了解，HTTP是一个无状态协议。也就是说，这一次请求和上一次请求时没有任何关联的。这种无状态的好处是快速，缺点是我们想要不两次请求联系起来必须另外的手段或者工具了。cookie和session由于http的无状态性，为了使某个域名下的所有网页能够共享某些数据，session和cookie出现了。客户端访问服务器的流程如下：首先，客户端会发送一个http请求到服务器端...

前端开发的时候，在网页刷新的时候，所有数据都会被清空，这时候就要使用本地储存技术，前端本地储存的方式又三种，分别是cookie、localstorage和sessionstorage。这里就三者的存放、获取和清楚做一些介绍。顺便说说他们的区别和应用场景。cookie:保存cookie值： var dataCookie='110'; document.cookie...

1. 首先，什么是浏览器缓存？浏览器缓存（Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省宽带，提高访问速度，降低服务器压力。http缓存机制主要在http响应头部中设定，响应头中相应字段为Expires、Cache-Control、Last-Modified、Etag。缓存的数据，必须在第一次请求获取到资源后，然后根据返回的信息来告诉如...

1. websocket由于http请求只能由客户端发起，所有当服务器资源有变化时，客户端只能通过轮询的方式。非常浪费资源。websocket的特点：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的 一种建立在 TCP 协议之上，服务器端的实现比较容易可以发送文本，也可以发送二进制数据没有同源限制，客户端可以与任意服务器通信协...

初始化一个新项目yarn init添加依赖包yarn add [package]yarn add [package]@[[version]yarn add [package]@[tag]yarn global add [package] // 全局安装将依赖包添加到不同依赖项类别中分别添加到devDependencies、peerDependencies和op...

npm作为node开发过程中的必备工具，长期使用之后，您可能会想：这些全局安装的node包都放在硬盘里面的哪个地方？配置文件.npmrc文件在哪里？node包的缓存位置在哪里？本文讲述npm相关的这些位置信息。如果您需要深入理解node相关的代码逻辑，本篇内容就是你需要的基础知识教程。如何快捷修改.npmrc配置文件？.npmrc文件，就是npm的配置文件所在位置。当然，寻找这个文...

    在JavaScript中，arguments属于当前对象的一个内置属性，arguments是一个类Array对象，但不是Array。比如：Array.prototype.testArg = "test";function funcArg() { console.log(funcArg.arguments.testArg); console.log(funcArg....

    最近在GitHub上checkout下来的项目中有两个项目在install依赖之后启动，但是按照控制台提示的地址无法再浏览器访问到项目；    第一个是bleeding-edge-sample-app，在启动项目之后，控制台显示：App started goto - http://0.0.0.0:8080，浏览器中访问http://0.0.0.0:8080失败，但是把地址改为locao...

数组在比较是否相等时若直接比较会出现：console.log([]==[]); // falseconsole.log([]===[]); // false可以使用如下方法比较：a1.toString() === a2.toString()；但是这种方法会遇到一些不可知的错误，比如数组中的数值和字符串无法正确的区分；建议使用以下方法： 1 // Warn ...

    前端项目在通过webpack中配置代理向后台发送请求时，端口号后面的路径需要加上‘/’，这样才会直接是用端口匹配我们设定的路径；不然会加上前端项目中自己的路由路径导致路径错误而代理失效；同理，proxy在代理的时候不是‘^’之前的都会被代理，而只代理了一个上面拦截的字段；proxy: { '/server': { target: 'http://localhost:808...

    mixin模式就是一些提供能够被一个或者一组子类简单继承功能的类,意在重用其功能。在面向对象的语言中，我们会通过接口继承的方式来实现功能的复用。但是在javascript中，我们没办法通过接口继承的方式，但是我们可以通过javascript特有的原型链属性，将功能引用复制到原型链上，达到功能的注入。    在React官网中有一个定时器的例子：&lt;!DOCTYPE html&...

1.event.stopPropagation();    事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（比如依然会执行超链接的跳转）2.return false;   事件处理过程中，阻止了事件冒泡，也阻止了默认行为3.event.preventDefault();    事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行alert弹框等，不会执行超链接跳转）...

鼠标右击事件中一般要禁止掉系统本身的右键菜单，在为元素添加新的菜单；在添加右击事件中onclick是不生效的，一般用mousedown或者mouseup事件；鼠标左键为0，中间件为1，右键为2；&lt;script&gt; document.oncontextmenu = function(){return false}; document.getElementByI...

    蚂蚁金服的ant design是一个很好的前端框架封装，但是在使用的过程中往往会遇到一些配置问题，比如使用ant design pro 3.0以上版本时，它采用了新的umi作为底层架构，在这里做一些它的配置简单的记录。pluginsType: Array Default: []export default { plugins: [ 'umi-plugin-reac...

    serialize（）和new FormDate（）都是javascript序列化表单的方法，序列化表单就是讲form表单中所有name属性序列化成KEY-VALUE的形式，提交到后台，后台以对象相应的字段接收。    但是这两种方式有什么区别呢？    以下为我的一些总结，作为参考：1. new FormDate（）支持表单中文件二进制流形式提交，也就是支持上传文件，seri...

在逛购物网站时，经常会有我们移动到图片上时，图片旁边出现局部放大的图像。那么怎么实现这种放大镜的效果呢？这里给出两种方式，一种时原生js实现的，一种使用react来实现。原生JavaScript实现代码：point.png: &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UT...

建立一个最简单的vue应用：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue&lt;/title&gt; &lt;script src="https://cdn.jsde

    在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查系统不会给与提示，但是有了类型检查以后，再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。   首先，在React V15.5以前propT...

    它们几乎完全相同，但是PureComponent通过prop和state的浅比较来实现shouldComponentUpdate，某些情况下可以用PureComponent提升性能所谓浅比较(shallowEqual)，即react源码中的一个函数，然后根据下面的方法进行是不是PureComponent的判断，帮我们做了本来应该我们在shouldComponentUpdate中做的事情...

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;highLight&lt;/title&gt;&lt;/head&gt;&lt;/head&gt;&lt;body&am

获取当前时间，有参数精确到天，不传参精确到秒： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;current&lt;/title&gt;&lt;/head&gt;&lt;b

圣诞彩蛋导致的2个问题（按钮上面显示积雪样式，hover按钮出现“Ho Ho Ho!”title）如果你暂时不想升级Antd版本，把下面这段JavaScript代码粘贴到你的html文件中即可(function() { var now = new Date(); var isChristmas = now.getMonth() === 11 &amp;&amp; now....

首先，使用onunload或onbeforeunload可以监听浏览器关闭事件，但是无法区分关闭与刷新。以下js代码可以部分监听关闭浏览器的事件！可以在标签中添加方法：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;beforeunload&lt;/titl..

1.将json对象转化为json字符串，再判断该字符串是否为"{}"var data = {};var b = (JSON.stringify(data) == "{}");alert(b);//true2.for in 循环判断var obj = {};var b = function() {for(var key in obj) {return false;}re...

JavaScript中检测对象的方法 1.typeof操作符 这种方法对于一些常用的类型来说那算是毫无压力，比如Function、String、Number、Undefined等，但是要是检测Array的对象就不起作用了。 利用typeof除了array和null判断为object外，其他的都可以正常判断alert(typeof null); // "object"alert(ty...

目录实例化存在期销毁&amp;清理期实例化getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount存在期componentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDid...

    在使用React编写代码时，难免会遇到需要获取到真实DOM节点的时候，那么在React中我们怎么去获取呢？以下总结了几种方法：1. 通过在标签中添加ref属性（react官方已弃用）class Index extends Component {  onClick(event){      const inputDom = this.refs.submit; con...