![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 54
邵天宇Soy
这个作者很懒,什么都没留下…
展开
-
前端面试官:请使用二分法搜索旋转数组
???? 本文首发于:https://www.shaotianyu.com/,目标是把自己知道的东西讲明白1 基本的二分法是什么样子的二分法的使用场景,其实比较受限,最明显的特点是:绝大情况,查找目标具有单调性质(单调递增、单调递减)有上下边界,并且最好能够通过index下标访问元素1.1 从头开始,基本的二分法使用我们从一个最简单的单调递增数组开始说起,问题如下:在 [1, 2, 3, 4, 5, 6, 7, 8, 9] 中找到 4,若存在则返回下标,不存在返回-1,要求算法复杂度O(原创 2020-05-27 01:36:09 · 563 阅读 · 0 评论 -
lodash源码浅析之如何实现深拷贝_.cloneDeep
????本文首发于: lodash-source-learning/一、概要工具库 lodash 在开发过程中为我们封装了丰富便捷的js函数,实现一些常用的功能,在使用过程中就会对lodash的内部实现原理感到好奇。本次文章的主要内容分析阅读了lodash中深拷贝 _.cloneDeep()的实现。二、深拷贝和浅拷贝之间的区别浅拷贝:对于引用类型的数据来说,赋值运算只是更改了引用的指针...原创 2020-03-21 20:05:07 · 5384 阅读 · 2 评论 -
typescript中namespace的tsc编译记录
初始文件目录|-src |-space |-index.ts |-name.ts |-age.tssrc/space/index.ts:/// <Reference path="./name.ts" />/// <Reference path="./age.ts" />console.log(InfoSp...原创 2019-10-28 16:17:57 · 444 阅读 · 0 评论 -
使用DocumentFragment动态创建一个List
DocumentFragment是一种轻量级的文档,在文档中没有任何标记,可以包含和控制文本,但不会占用额外的资源。一般操作一个ul,并且给ul动态添加li节点,会使用下面的方式:<ul id="list"></ul>var ul = document.getElementById('list');var li = null;for(var i = 0; ...原创 2018-06-12 22:50:47 · 342 阅读 · 0 评论 -
一句话区分currentTarget和target
currentTarget:事件处理程序注册的元素, target:事件的实际目标元素下面是2个不同的场景例子:场景1:事件处理程序注册的元素 === 事件的实际目标元素<div id="div"> <button id='ele'>按钮</button></div>var ele = document.getElemen...原创 2018-07-12 21:48:32 · 3705 阅读 · 1 评论 -
原生JS实现表单序列化serialize()
&amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &am原创 2018-07-27 21:24:46 · 15731 阅读 · 2 评论 -
JS中的函数绑定以及实现函数柯里化
假设页面有个按钮btn,实现点击打印message信息和事件类型(暂只介绍ES5,ES6中函数绑定运算符::以后会补充)。第一步:var handler = { message:'hello world', handleClick:function(e){ console.log(this.message) console.log(e.typ...原创 2018-08-09 23:38:23 · 971 阅读 · 0 评论 -
JSON.stringify()、JSON.parse()、toJSON()中过滤器的用法(一)
JSON.stringify()语法:JSON.stringify(value[, replacer [, space]])除了要序列化的javascript对象外,还可以接收另外的2个可选参数。其中,replacer是个过滤器,可以是一个数组或者对象; space控制结果中的缩进和空白符,可以是一个数值或者字符串。我们先定义一个的JSON格式数据,下面会用到:var obj...原创 2018-08-06 21:26:25 · 5559 阅读 · 0 评论 -
JSON.stringify()、JSON.parse()、toJSON()中过滤器的用法(二)
JSON.parse()语法:JSON.parse(text[, reviver])其中,reviver为可选参数,被称为还原函数,规定了原始值如何被解析改造,在被返回之前。var obj = { "username":"hello world", "age":20, "height":"185cm", "address":"Shang原创 2018-08-06 23:17:41 · 486 阅读 · 0 评论 -
JS中的FormData基本使用
FormData为序列化表单以及创建与表单格式相同的数据提供了方法。1,、常用的append键值对:其中,append方法接受一个键值对。var data = new FormData();data.append(&amp;quot;key&amp;quot;,&amp;quot;value&amp;quot;)然后可以把data作为传给服务器的数据。2、序列化表单数据(非GET提交)GET提原创 2018-08-07 21:01:11 · 7537 阅读 · 0 评论 -
Web Sockets要点小结
下面是最基本的用法示例:var socket = new WebSocket("ws://www.xxx.com/1.php");//WebSocket对象不支持DOM2级事件侦听,所以只能使用DOM0级定义事件处理//在成功建立连接时触发socket.onopen = function(){ console.log('open')}//在发生错误时触发socket....原创 2018-08-08 21:07:26 · 209 阅读 · 0 评论 -
Javascript鼠标滚轮事件兼容写法
1.mousewheel事件(兼容opera,chrome,safari,IE)mousewheel事件对应的event对象包含一个wheelDelta属性。用户滚动鼠标滚轮时,wheelDelta的值是正负120的倍数。 值得注意的是,在opera9.5之前的版本,wheelDelta的正负号是颠倒的,这里不做考虑一般情况下,监听wheelDelta的正负值,就可以确定鼠标滚轮...原创 2018-07-17 21:08:51 · 2029 阅读 · 2 评论 -
DOM结构深度优先遍历(二):TreeWalker
这里是接着上一篇写的DOM结构深度优先遍历(一):NodeIteratorTreeWalker是NodeIterator的一个更高级的版本。TreeWalker的创建document.createTreeWalker(root, whatToShow, filter, EntityReferenceExpansion)其中接收的参数与 document.createNodeIter...原创 2018-07-05 00:05:31 · 2086 阅读 · 0 评论 -
使用getElementsByTagName()和namedItem()获取特定元素
getElementsByTagName接受一个参数,即要取得元素的标签名,返回值是包含零个或多个元素的NodeLIst。 注意:getElementsByTagName接受的标签名不区分大小写,除XML,XHTML之外1.基本使用假设HTML如下:&amp;lt;img src=&quot;a.png&quot; name=&quot;img&quot;/&amp;gt;&原创 2018-06-06 22:43:47 · 5528 阅读 · 0 评论 -
Element类型的tagName和nodeName
要访问元素的标签名,可以使用tagName或nodeName属性;这两个属性返回的值相同假设HTML如下:&amp;lt;div id=&quot;a&quot;&amp;gt;&amp;lt;/div&amp;gt;获取标签名:var ele = document.getElementById('a');console.log(a.tagName) //DIVconsole.原创 2018-06-07 22:14:59 · 2310 阅读 · 0 评论 -
DOM元素遍历的几种方式(javascript)
对于元素之间的空格,IE9以及之前的版本不会返回文本节点,,其他的浏览器会返回文本节点,所以我们在使用firstChild,lastChild时会导致行为不一致。DOM中为元素新增了下面几个属性:childElementCount:返回子元素(不包括文本节点和注释)的数量;firstElementChild:firstChild的元素版;lastElementChild:lastC...原创 2018-06-14 21:11:44 · 11207 阅读 · 4 评论 -
使用dispatchEvent派发自定义事件
这里暂不介绍对低版本IE的兼容。。。标准浏览器中使用dispatchEvent派发自定义事件:element.dispatchEvent(),除此之外,还有创建和初始化事件:一般的流程是:创建 &gt;&gt; 初始化 &gt;&gt; 派发。对应的事件流程:document.createEvent() &gt;&gt; event.initEvent() &gt;&g原创 2018-06-25 22:06:14 · 8736 阅读 · 1 评论 -
insertAdjacentHTML( ),insertAdjacentElement( ) , insertAdjacentText( ) 方法
insertAdjacentHTML()是一个插入标记的方法,这个方法最早在IE中出现,现在绝大多数浏览器都支持这个方法。insertAdjacentHTML()接受2个参数:要插入的位置和要插入的HTML文本,第一个参数必须是下面4个值之一,第二个参数是一个HTML字符串:beforebegin,在当前元素之前插入一个紧邻的同辈元素;afterbegin,在当前元素之下插入一个新的子...原创 2018-06-19 23:12:58 · 1150 阅读 · 0 评论 -
利用innerText和textContent去除HTML标签
支持innerText的浏览器包括IE4+,Safari3+,Opera8+,ChromeFirefox不支持innerText,不过支持作用类似的textContent方法简单提一下,innerText、textContent的基本运用:1.获取文本内容<div id="o"> <ul> <li>1</li>...原创 2018-06-26 22:47:50 · 1268 阅读 · 0 评论 -
isSameNode( )和isEqualNode( )比较节点的区别
DOM3级引入了两个辅助比较节点的方法:isSameNode( )和isEqualNode( )。分别判断传入的节点与引用的节点是否相同和相等所谓相同,指的是两个节点引用的是同一个对象;所谓相等,指的是两个节点是否是同一类型,具有相等的属性(nodeName,nodeValue。。。等等),还有相等的attributes,childNodes(相同的位置包含相同的值)语法:no...原创 2018-06-28 21:30:20 · 1582 阅读 · 0 评论 -
DOM结构深度优先遍历(一):NodeIterator
NodeIterator和TreeWalker能够基于给定的起点对DOM结构进行深度优先(depth-first)的遍历操作。IE不支持DOM遍历。可以使用下面代码检测浏览器DOM2级遍历能力的支持:var supportTraversala = document.implementation.hasFeature("Traversal","2.0");var supportNode...原创 2018-07-04 23:20:54 · 1689 阅读 · 0 评论 -
ES6参数默认值的单独作用域
1.单独的作用域var val = 1const fun = (val, y=()=&gt;val=2 ) =&gt; { var val = 3 y() console.log(val) //预期是2,结果是3}fun();console.log(val) //1上面代码中,首先看内部val的打印结果:3。原因是一旦设置了参...原创 2018-08-30 21:59:20 · 420 阅读 · 0 评论 -
字符串的扩展includes(), startsWith(), endsWith()
以下内容全部来源于自阮老师的《ECMAScript 6 入门》,http://es6.ruanyifeng.com/#docs/string#includes-startsWith-endsWith。仅供个人记录学习。传统上,JavaScript 只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。includes():返回布尔值,表示是否找...转载 2018-08-27 23:16:17 · 872 阅读 · 0 评论 -
undefined == null的正确解释
console.log( undefined == null ) //true有文章对此进行了解释,大致是下面的意思:undefined的布尔值是false,null的布尔值也是false,所以它们在比较时都转化为了false,所以 undefined == null 。好吧,上面的解释是错误的。可以从Javascript规范中找到答案:规范中提到, 要比较相等性之前,不能将...原创 2018-08-31 09:38:37 · 35116 阅读 · 3 评论 -
从零搭建一个基于React+Nextjs的SSR网站(三):在Next项目中使用markdown
github很多开源markdown工具,比如react-markdown,marked等等。可以选择一个自己喜欢的,我这里用的marked。代码中使用也比较方便:import marked from 'marked';import hljs from 'highlight.js'; //代码高亮...hljs.configure({ tabReplace: ' ', cl...原创 2019-01-07 21:09:46 · 2362 阅读 · 0 评论 -
从零搭建一个基于React+Nextjs的SSR网站(二):在Nextjs项目中增加react+redux
具体搭建流程可以参考这篇文章,写得很好也非常详细:用Next.js快速上手React服务器渲染,我就不转载过来了。看完后你会搭建一个自己的本地的静态站点,这个时候我们就可以向这个项目上面添加React和Redux了。与往常的react+redux项目不同的是,以往的react的组件是用Provider容器包裹起来的,可以让容器组件拿到state,比如下面这样...import { Pro...原创 2019-01-07 20:36:32 · 3397 阅读 · 0 评论 -
mongodb密码特殊字符的解决方法
一般是这么连接的:mongoose.connect("mongodb://username:password@127.X.X.X:27017/db");但是,如果你的密码里面设置了特殊字符,比如‘@’,‘%’,可能使得 mongodb 连接不能被正常解析,字符转义也没什么效果,从而导致连接失败。有2个方法可以规避这个问题:1.更换连接格式mongoose.connect( "mongo...原创 2019-01-06 16:18:05 · 12511 阅读 · 1 评论 -
react中Component和PureComponent比较
import React, { PureComponent } from 'react';class App extends PureComponent {}import React, { Component } from 'react';class App extends Component {}PureCompoent是一个更具性能的Component的版本除了为你提供了一个具有...原创 2018-12-31 14:12:55 · 1654 阅读 · 0 评论 -
next.js中的window is not defined
1.问题描述使用了next+express做SSR,引入了富文本编辑器braft-editor(我也不知道自己为什么要用SSR渲染后台界面),代码如下import React from 'react'import BraftEditor from 'braft-editor'import 'braft-editor/dist/index.css'export default class...原创 2018-12-11 23:40:25 · 25011 阅读 · 4 评论 -
mongoose的findByIdAndUpdate返回更新后数据
A.findByIdAndUpdate(id, update, options, callback) // executesA.findByIdAndUpdate(id, update, options) // returns QueryA.findByIdAndUpdate(id, update, callback) // executesA.findByIdAndUpdate(id, ...原创 2018-12-27 23:29:42 · 12308 阅读 · 0 评论 -
express使用 multer 做文件上传
Multer是Express官方推出的,用于Node.jsmultipart/form-data请求数据处理的中间件。它基于busboy构建,可以高效的处理文件上传,但并不处理multipart/form-data之外的用户请求前端upload代码:async uploadMethod(param) { let formdata = new FormData(); formdata.a...原创 2018-12-14 00:00:08 · 3241 阅读 · 0 评论 -
js判断2个值是否相等的规则
假设需要判断的是 x==y?1. 如果 x 不是正常值(比如抛出一个错误),中断执行。2. 如果 y 不是正常值,中断执行。3. 如果 Type(x) 与 Type(y) 相同,执行严格相等运算 x === y 。4. 如果 x 是 null , y 是 undefined ,返回 true 。5. 如果 x 是 undefined , y 是 null ,返回 true 。6. 如果...原创 2018-11-27 14:10:22 · 2988 阅读 · 0 评论 -
require和import区别
区别1:模块加载的时间require:运行时加载import:编译时加载(效率更高)区别2:模块的本质require:模块就是对象,输入时必须查找对象属性import:ES6 模块不是对象,而是通过 export 命令显式指定输出的代码,再通过 import 命令输入(这也导致了没法引用 ES6 模块本身,因为它不是对象)// CommonJS模块let { exists, read...原创 2018-11-16 19:28:13 · 31398 阅读 · 2 评论 -
ES6中Class的一些个人记录
1.Class的内部所有定义的方法,都是不可枚举的。const funName = 'fun';//类Demo class Demo{ constructor(arg) { } say(){ } speak(){ } [funName](){ }}console.log( Object.keys(Demo.prototype) ) //[...原创 2018-10-25 22:17:24 · 238 阅读 · 1 评论 -
Promise的事件循环
1.Promise 新建后立即执行let promise = new Promise(function(resolve, reject) { console.log('Promise'); resolve();});promise.then(function() { console.log('resolved');});console.log('我是同步任务');打印结果依...原创 2018-09-26 19:52:43 · 1893 阅读 · 0 评论 -
Proxy 实现观察者模式
以下参考阮老师的《ECMAScript 6 入门》需求:给定一个对象,当对象的属性发生赋值时,打印最新的值。思路: observable 函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。//初始化观察者队列const uniqueObserveList = new Set();//将监听回调加入队列const observe = fn =&gt;...原创 2018-09-20 21:29:31 · 790 阅读 · 0 评论 -
js中的super
1.this和super的区别:this关键词指向函数所在的当前对象super指向的是当前对象的原型对象2.super的简单应用const person = { name:'jack'}const man = { sayName(){ return super.name; }}Object.setPrototypeOf( m...原创 2018-09-12 22:27:30 · 17565 阅读 · 2 评论 -
JS类数组转数组方法汇总
一.什么是类数组拥有length属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)不具有数组所具有的方法经常遇到的类数组:DOM 操作返回的 NodeList 集合、函数内部的 arguments 对象。。。二.类数组转数组假设类数组对象为arrayLikeObject。1.for遍历声明一个空数组,通过遍历伪数组...原创 2018-09-06 17:41:36 · 1063 阅读 · 1 评论 -
一元操作符“++”,“- -” 之强制转换数值
递增和递减分别有前置型和后置型,这里不作区分。下面的代码全部是后置型递增:var str = "z";console.log(str++) //NaNconsole.log(typeof str) //numbervar str = "123abc";console.log(str++) //NaNconsole.log(typeof str) ...原创 2018-09-03 23:08:20 · 389 阅读 · 0 评论 -
Object.assign()扩展-实现原型链拷贝
Object.assign()的基本语法:将源对象(source)的所有可枚举属性的实例属性复制到目标对象(target)。Object.assign( target, source1, source2, ... )所以,Object.assign()复制的属性是有限制的:只复制源对象的自身实例属性,不复制原型属性(继承属性);只复制可枚举属性(enumerable:true)...原创 2018-09-12 00:03:09 · 1293 阅读 · 0 评论