javascript
文章平均质量分 65
Beijiyang999
这个作者很懒,什么都没留下…
展开
-
做省市区联动时,用node.js将数据调整到合适结构的两种常用方法
起因省市区联动,或者城市名称匹配,是很常用的功能。在实现他们的时候,经常会出现这样的情况:拿到的行政区划数据 和 渲染所需要的结构 不相符。通常我会用JS把它们处理成合适的结构。核心思路遍历其子元素或属性,在遍历的回调函数中,通过临时对象,将数据重新组织成需要的结构,再将其push进一个新构建的数组中。遍历完成后,该数组就是想要的最后结果。两种套路:数组 VS 对象。对于数组和对象,有不同的遍历方式。原创 2017-06-18 19:27:27 · 2958 阅读 · 0 评论 -
JavaScript 函数防抖(debounce)的实现
函数防抖是什么函数防抖是指对于在事件被触发n秒后再执行的回调,如果在这n秒内又重新被触发,则重新开始计时,是常见的优化,适用于 表单组件输入内容验证防止多次点击导致表单多次提交等情况,防止函数过于频繁的不必要的调用。代码实现思路用 setTimeout 实现计时,配合 clearTimeout 实现“重新开始计时”。即只要触发,就会清除上一个计时器,又注册...原创 2018-04-06 12:53:52 · 18747 阅读 · 0 评论 -
JavaScript的计时器的工作原理(setTimeout/setInterval)
原文链接:http://segmentfault.com/a/1190000002633108最近都在看一些JavaScript原理层面的文章,恰巧看到了jQuery的作者的一篇关于JavaScript计时器原理的解析,于是诚惶诚恐地决定把原文翻译成中文,一来是为了和大家分享,二来是为了加深自己对于JavaScript的理解。原文链接:http://ejohn.org/blog/how-javas...转载 2016-05-10 20:11:13 · 1009 阅读 · 0 评论 -
JavaScript 函数节流(throttle)的实现
函数节流是什么对于持续触发的事件,规定一个间隔时间(n秒),每隔一段只能执行一次。上一篇讲的函数防抖(debounce)与本篇说的函数节流(throttle)相似又不同。函数防抖一般是指对于在事件被触发n秒后再执行的回调,如果在这n秒内又重新被触发,则重新开始计时。二者都能防止函数过于频繁的调用。区别在于,当事件持续被触发,如果触发时间间隔短于规定的等待时间(n秒),那么...原创 2018-04-06 20:27:32 · 13008 阅读 · 0 评论 -
用 JavaScript 函数实现时间格式转换('46秒' => '00:00:46')
题目假设传入的参数就是“2时5分”、“3时46秒”这种格式的字符串,省去参数类型检测。 略去检测分秒数大于 60 的情况。思路:先把字符串 split 打散转换为数组forEach() 遍历数组元素找出“时”、“分”等关键词的 index据此切分拼接新格式数组注意点:arguments 和对应参数的绑定 非严格模式下,当传入实参,实参和 arguments ...原创 2018-05-03 02:13:56 · 738 阅读 · 0 评论 -
JavaScript 实现 map() 方法函数
思路map 迭代方法接收两个参数:对每一项执行的函数 该函数接收三个参数: 数组项的值数组项的下标数组对象本身指定 this 的作用域对象map 方法返回每次函数调用结果组成的数组。代码表示:arr.map(function(item, index, arr) {}, this);实现由此,实现 fakeMap 方法如下代码:Array...原创 2018-05-03 13:57:52 · 12268 阅读 · 0 评论 -
JavaScript 实现 filter() 方法函数
思路filter 方法接收两个参数:对每一项执行的函数 该函数接收三个参数: 数组项的值 数组项的下标 数组对象本身指定 this 的作用域对象filter 方法返回 执行结果为true的项组成的数组。代码表示:arr.filter(function(item, index, arr){}, context)实现由此,实现 fakeFilter...原创 2018-05-03 14:26:57 · 8847 阅读 · 0 评论 -
JavaScript 实现 reduce() 方法函数
思路与之前两篇文章( map()的实现 ,filter()的实现 )中的迭代方法不一样,reduce() 是归并方法。reduce 接收两个参数:第一个参数是在每一项上调用的函数 该函数接收 4 个参数: 前一个值 prev 当前值 cur 项的索引 index 数组对象 array第二个可选参数是作为归并基础的初始值reduce 方法返回一个最终的值。代码表示...原创 2018-05-03 20:40:01 · 13775 阅读 · 3 评论 -
几种常见的排序算法总结(JavaScript 描述)
本文讨论:冒泡排序、插入排序、希尔排序、简单搜索排序、快速排序、归并排序、堆排序。冒泡排序介绍冒泡排序比较任何两个相邻的项。如果前一个比后一个大,就交换它们。元素向上移动至正确的位置,看上去就像水中上升的气泡一样。代码function bubbleSort(arr) { let length = arr.length; let flag; ...原创 2018-05-06 00:49:02 · 408 阅读 · 0 评论 -
二分搜索 / 折半查找
查找/搜索算法中,顺序搜索没什么好说的,从二分搜索 / 折半查找开始。步骤选择中间值 (low+high) / 2如果它是目标值,bingo~如果大了,从其左边的一半找如果小了,从其右边的一半找如果找不到,返回 -1 或 null 等注意: 需要数组本身有序递归实现function binaryhSearch(arr, low, high, target) ...原创 2018-05-06 13:14:55 · 298 阅读 · 0 评论 -
JavaScript 实现 对象、数组、类数组通用的遍历方法 each
jQuery 的 each 方法jQuery 有个 each 方法,是对于对象、数组通用的遍历方法。具体的用法参考官方文档:.each()今天我们也来实现这样一个 each 方法。思路参数:参考 jQuery ,each 方法接收两个参数:要遍历的对象;要在其上执行的回调函数。逻辑:自然是要先判断其类型,是数组(类数组)就执行 for 循环(forEac...原创 2018-07-08 22:41:46 · 1045 阅读 · 0 评论 -
JavaScript 用一个一元函数精简地实现 ES6 的 findIndex 与 findLastIndex 方法
普通地实现 findIndex 与 findLastIndexES6 新增了 findIndex 与 findLastIndex 数组方法,可以正序、反序地查询,并返回数组中满足回调函数的第一个元素的索引,否则返回 -1。// 用法arrayObj.findIndex(callbackfn [, thisArg]);// 回调函数用法function callbackfn(value...原创 2018-07-10 00:25:54 · 11017 阅读 · 0 评论 -
用 JavaScript 创建一个栈,并优化时间复杂度 (附 Python 描述)
题目描述:Design a stack that supports push, pop, top, and retrieving theminimum element in constant time.要实现的栈方法push(x) – Push element x onto stack.pop() – Removes the element on top of the stack....原创 2018-11-12 00:37:28 · 271 阅读 · 0 评论 -
ASCII码在算法题中的两个小妙用:转换字母大小写 与 转换整数字符String/Number类型(JavaScript/Python描述)
最少必要知识‘0’ 对应的ASCII码是 48‘A’ 对应的ASCII码是 65'a‘ 对应的ASCII码是 97这也是 JavaScript 中 'a' > 'A' 为 true 的原因。转换字母大小写假设做如下规定参数letter: 为单个英文字母字符;参数 mode :小写换大写为 1;大写换小写为 -1。JavaScript:const toUpperO...原创 2018-11-12 01:17:44 · 729 阅读 · 0 评论 -
JavaScript实现简单的二叉树中序遍历(class / prototype 写法)(附 Python)
一棵简单的二叉树如图。构建二叉树首先,构建如图的二叉树,并添加一个打印该树的方法 printTheTree。ES6 class 语法如下class TreeNode { constructor(value) { this.value = value this.left = null this.right = null } printTheTree()...原创 2018-11-13 22:42:31 · 353 阅读 · 0 评论 -
经典闭包题目ES7新解
题目for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(new Date, i) }, 1000)}console.log(new Date, i)输出:5 (1s)5 5 5 5 5如何变成: 5(1s)0(1s)1(1s)2(1s)3(1s)4经典解法闭包fo...原创 2019-05-02 05:43:31 · 246 阅读 · 0 评论 -
JavaScript 实现继承的方式:原型链、组合式、寄生组合式
原型链继承let Parent = function() { this.name = [‘parent']}Parent.prototype.sayName = function() { console.log(this.name)}let Child = function(){}Child.prototype = new Parent() //原型式继承l...原创 2018-04-14 19:10:44 · 416 阅读 · 0 评论 -
JS 显示原型、隐式原型与原型链 / 构造函数、实例、实例原型之间的关系
什么是原型链原型链是利用原型,让一个引用类型继承另一个 引用类型的属性和方法。为了说明白原型链,需要从构造函数、原型与实例的关系讲起。构造函数、原型与实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针(显式原型),而实例都包含一个指向原型对象的内部指针(隐式原型)。那么,假如让原型对象等于另一个类型的实例,结果会让此事的原型对象包含一个指...原创 2018-03-31 16:06:49 · 1811 阅读 · 0 评论 -
JavaScript new 的实现
new 特性《你不知道的JavaScript》提到:使用 new 调用函数,或者说发生构造函数调用时,会自动执行下面的操作:创建(或者说)构造一个全新的对象;这个新对象会被执行 [[Prototype]] 连接;这个新对象会绑定到函数调用的 this;如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象。new 的实现用法: fakeNe...原创 2018-03-31 14:49:10 · 556 阅读 · 0 评论 -
非数组对象借用数组方法/《设计模式与开发实践》p52例子的扩展笔记
《设计模式与开发实践》p52例子的扩展笔记let obj = { 'length': 12, 'a': 'a', 'b': 'b', 'c': 'c'};// (function() {//// })()Array.prototype.push.call(obj, ['一','二','三’])Array.prototype.push.reply(obj, ['一','二','原创 2017-06-29 13:50:59 · 696 阅读 · 0 评论 -
循环与闭包 之 for循环经典问题解释 / 结合《你不知道的JS》与《高程》案例
案例一for (var i = 1; i <= 5; i++) { setTimeout( function timer() { console.log(i); }, i*1000)}输出结果:当时间是固定的数,如0、1000、6000,执行结果就是0、1、6秒后,一次输出五个6;当时间是 i*1000, 输出是:每隔1秒,输出一个6,共5次。 ...原创 2017-07-03 13:44:34 · 1435 阅读 · 0 评论 -
JS: 重新组织 mongoDB数据库中的 数据格式的方法 / 导入导出 / 附案例代码
1 数据库导出mongoexport -d dbName -c collectionName -o ./data.js得到data.js,现格式如下{"_id":"24Fgub3Z","createdAt":{"$date":"2011-10-14T08:29:18.395Z"},"services":{"password":{"bcrypt":"$2a$10$3s8QZCDR7lcl10e.02H原创 2017-08-27 18:06:38 · 566 阅读 · 0 评论 -
React: 傻瓜/展示性组件的简化 (函数型组件及其传参)
React的组件可以分为“聪明组件&傻瓜组件”或“容器组件&展示组件”。这里展示对后者进行简化的案例。原创 2017-09-07 17:29:34 · 2819 阅读 · 0 评论 -
微信小程序 短信验证 功能的实现(附案例代码/前后端/直接用)
模块效果展示(小程序界面)实现的功能小程序端:请求获取短信验证码两次请求之间间隔至少一分钟填写必填内容后,才能提交表单手机号合法性检验后台:接前台请求后,通过阿里云发送短信生成随机数字验证码(默认6位)收到提交的表单后,对验证码字段进行判断 验证码是否过期验证码是否正确通过验证后,方能进行下一步操作 如保存表单信息至数据库等结果反馈说明项目包含前后端代码,可以直接用,并原创 2017-09-07 18:10:55 · 17967 阅读 · 15 评论 -
对城市名搜索(汉字、拼音)功能的改进 / 小程序城市区县定位模块改进
支持搜索335个城市(及相应级别地区)。截至目前,最新的国家统计局2016年统计年鉴中,地级市291个,地级行政区划334个。城市/区县定位模块里的一个功能的改进。![](http://img.blog.csdn.net/20170914210554592?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQmVpaml5YW5nOTk5/font/5a6L5L2T/fon)原创 2017-09-14 21:21:46 · 1592 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (4) <译自官方文档>
轮流下棋与宣布获胜者。目前,游戏中一个明显的问题是,只有“X”一个人能玩。现在就解决这个问题。我们默认,“X”执先手。在 Board 组件的构造函数中翻译 2017-11-05 13:40:22 · 1942 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (2) <译自官方文档>
介绍什么是 React,如何开始编写,怎么通过 Props 传数据,什么是交互式组件,有什么好用的开发者工具。React 用于构建用户界面,它是一种声明式的,高效灵活的 JavaScript 库。翻译 2017-11-04 20:56:46 · 1368 阅读 · 0 评论 -
React 实现井字棋游戏 (tic-tac-toe) 教程 (3) <译自官方文档>
状态提升至此,我们已经拥有了编写井字棋游戏的基本构件。但现在,状态(state)是被包裹在各个 Square 组件内的。为了完成这个游戏,我们还需要做这两件事:检查是否已经有玩家胜出;以及在小方格中轮流填入“X”和“O”翻译 2017-11-05 09:37:36 · 1123 阅读 · 0 评论 -
React项目:代码分片、按需加载(code splitting)/ 免webpack配置
为什么需要代码分片Facebook 的 create-react-app 是一款非常优秀的开发脚手架。它为我们生成了 React 开发环境,自带 webpack 默认配置。 它会通过 webpack 打包我们的应用,产生一个 bundle.js 文件。随着我们的项目越写越复杂,bundle.js 文件会随之增大。 由于该文件是唯一的,所以不管用户查看哪个页面、使用哪个功能,都必须先下载所有的功能代...原创 2017-11-21 13:12:08 · 5492 阅读 · 1 评论 -
单线程 JavaScript 的异步机制与经典 for 循环面试题
从一个经典的 for 循环问题开始for (var i = 1; i <= 5; i++) { setTimeout( function timer() { console.log(i); }, i*1000)}输出是:每隔1秒,输出一个6,共5次。原理这样的输出,是由 JavaScript 的单线程及异步机制决定的。JavaScript 是单线...原创 2018-03-07 17:38:32 · 1037 阅读 · 2 评论 -
一道 promise 亮灯问题的 思路演进 与 深坑 (JS异步机制) 分析
问题红灯三秒亮一次,绿灯一秒亮一次,黄灯2秒亮一次;如何让三个灯按照这个规律不断交替重复亮灯?(用Promse实现)三个亮灯函数已经存在:function green() { console.log("green");}function yellow() { console.log("yellow");}function red() { console.log(...原创 2018-03-17 23:42:24 · 1332 阅读 · 0 评论 -
JavaScript call() 与 apply() 方法的实现与思路解析
用一个例子开始greet = "Hi, Im global";let foo = { greet: "Hello"};let bar = function(name, character) { console.log(this.greet); return { greet: this.greet, person: `${name} is ${char...原创 2018-03-30 17:15:23 · 355 阅读 · 0 评论 -
JavaScript bind() 方法的实现
bind() 方法的特点bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的 this,可以把除了第一个参数以外的其他参数都传递给下层的函数(这种技术称为“部分应用”,是“柯里化”的一种)注①如果 bind() 返回的函数 作为构造函数使用,bind 时指定的 this 值会失效,但传入的参数有效。 new 调用返回的实例能够继承 绑定...原创 2018-03-31 11:00:02 · 1408 阅读 · 0 评论 -
用 reduce 实现一行代码深拷贝对象/数组
一行实现深拷贝数组const deepCopyArr = arr => arr.reduce((acc, cur) => ( cur instanceof Array ? [...acc, deepCopyArr(cur)] : [...acc, cur]), [])一行实现深拷贝对象const deepCopyObj = obj => Object.entries...原创 2019-05-23 05:47:21 · 1222 阅读 · 0 评论