- 博客(27)
- 收藏
- 关注
RSS订阅原创 前端练习51 旋转数组
已同步到个人博客，欢迎访问。题目题目来自LeetCode给定一个数组，将数组中的元素向右移动k个位置，其中k是非负数。示例 1:输入: [1,2,3,4,5,6,7] 和 k = 3输出: [5,6,7,1,2,3,4]解释:向右旋转 1 步: [7,1,2,3,4,5,6]向右旋转 2 步: [6,7,1,2,3,4,5]向右旋转 3 步: [5,6,7,1,2,3,4...
2019-01-28 15:28:28
139
原创 React提高07 Context
已同步到个人博客，欢迎访问。简介React Context API提供了一种通过组件树传递数据的方法，而不必在每个级别通过props属性一层一层传递。Context提供了一个在组件树内可被视为“全局”的数据，当一些数据需要在不同的嵌套级别上被许多组件访问时，可以考虑使用Context。请谨慎使用Context，它使组件重用更加困难。旧的API之前的使用方法是：在上层组件（提供者）...
2019-01-25 16:02:27
136
原创 React提高06 Render Props
已同步到个人博客，欢迎访问。与HOC的关系HOC的出现是为了实现代码的复用，是一种React中的编程范式，基本的形式是：function HOCFactory(WrappedComponent, ...args) { return class HOC extends React.Component { render(){ return <WrappedCom...
2019-01-25 16:02:02
225
原创 React提高05 高阶组件
已同步到个人博客，欢迎访问。什么是高阶组件高阶组件（简称HOC）的目的就是实现代码的复用，它不是React的API，而是根据React的特性形成的一种开发范式。它接受一个组件作为参数并返回一个新的组件function HOCFactory(WrappedComponent, ...args) { return class HOC extends React.Component { ...
2019-01-25 16:01:36
218
原创 React提高04 对虚拟DOM和加载过程的理解
已同步到个人博客，欢迎访问。React虚拟DOM的理解虚拟DOM是用JS的对象结构模拟出html中DOM的结构，批量的增删改查，由于直接操作的是JS对象，所以速度要比操作真实DOM要快，最后更新到真正的额DOM中虚拟DOM构建的对象，除了dom相关属性，还包括了React自身需要的属性，比如ref，key等，大概如下结构：{ type: 'div', props: { ...
2019-01-25 16:00:00
434
原创 React提高02 React性能优化
已同步到个人博客，欢迎访问。PureRenderMixin因为react的diff是在某一个根节点发生变化的时候，调用所有节点进行render，再对生成的虚拟DOM进行对比，如果不变则不对真实DOM进行更新。这就导致了性能的浪费。所以优化针对两方面：拆分组件，有利于组件复用和优化避免不必要的render避免不要的render，主要基于componentShouldUpdate(...
2019-01-25 15:58:55
240
原创 前端练习50 买卖股票的最佳时机 II
题目题目来自LeetCode已同步到个人博客，欢迎访问。给定一个数组，它的第i个元素是一支给定股票第i天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。示例 1:输入: [7,1,5,3,6,4]输出: 7解释: 在第 2 天（股票价格 = 1）的时候买入，在...
2019-01-24 16:13:03
164
原创 React基础13 遇到的坑
总结整理了一下一年前使用React开发测评平台时的经验。总共使用React开发了一个项目，用了1个多月，学到的东西比这一年都多，值得好好总结。已同步到个人博客，欢迎访问定时任务中的setState如果定时任务触发时，组件已经被销毁，会给出警告setState(...): Can only update a mounted or mounting component.虽然只是一个w...
2019-01-22 18:03:47
858
原创 JS56 Generator 函数的异步应用
已同步到个人博客，欢迎访问传统方法所谓异步，简单说就是一个任务不是连续完成的，被分成了两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。在JavaScript中，ES6之前，实现的异步编程的方法有四种：回调函数事件监听发布/订阅Promise回调函数所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到回过头重新执行这个任务的时候，就直接调用...
2019-01-22 10:33:27
373
原创 JS55 Generator函数
已同步到个人博客，欢迎访问简介Generator函数有两个特征：function关键字后面有一个*函数体内部使用yield表达式function* helloWorldGenerator() { yield 'hello'; yield 'word'; return 'ending'}const hw = helloWorldGenerator()调用函数后，函数...
2019-01-18 14:28:04
169
原创 极客时间01 左耳听风
极客时间的专栏《左耳听风》的学习笔记，持续更新中。已同步到个人博客，欢迎访问01 + 02 | 程序员如何用技术变现程序员用手艺、技术养活自己，不依靠公司；提高工作效率，去研究那些难的，公司内外的核心技术；注重输出，输出技术、价值观，帮助更多的人，提高影响力。如何做？积少成多，形成正向循环关注有价值的东西，关注市场市场需求和技术趋势在学习技术的过程一定要多问自己两个问...
2019-01-18 10:38:47
1263
原创 2019.01.18 一点感想
这一段时间的经历，让我对自己的现状和不足有了一个更清醒的认知，那就是：学习能力不错，但是由于客观情况导致的前端乃至计算机基础薄弱；前端知识点的深度有所加深，但还是没有能连成片；过于依赖的强推动去提高自己，发现问题、发现痛点的主观能动性差针对这些，我2019年的努力方向就是：继续自我驱动，不断学习继续之前定下的“基础扫盲三部曲”的第三步，体系化的学习算法和数据结构有意识的去记录身...
2019-01-18 10:28:47
246
翻译 JS54 无法使用Map遍历Array创建的数组的原因
无法使用Map遍历Array创建的数组的原因原文：Here’s Why Mapping a Constructed Array in JavaScript Doesn’t Work作者：shawn.webdev示例为了便于说明，假设现在需要你生成一个数组，数组由数字 0~99 组成。你会怎么做？下面是一种方案：const arr = [];for (let i = 0; i &amp;l...
2019-01-15 19:15:39
1576
原创 前端练习49 判断美元符号格式
已经同步到个人博客，欢迎访问知识点正则表达式题目完成一个函数isUSDFormat返回true/false来判断一个字符串是否符合美元格式：以$开头如果是小数，保留两位小数；如果不是小数则不显示小数部分整数部分从小数点上一位开始每隔三位用,分割开来如果整数部分从数字0开始，则只会显示一位0例如：isUSDFormat('$1') // => trueisUSDFor...
2019-01-15 17:26:59
1004
原创 前端练习48 字体高亮函数
已经同步到个人博客，欢迎访问知识点标签模板题目完成highLight函数，可以把模板字符串中的插入内容替换掉，并且插入文档后显示红色，例如：const yourName = 'ScriptOJ'const myName = 'Jerry'document.body.innerHTML = highlight`Hello, ${yourName}. I am ${myName}.`...
2019-01-14 11:36:31
404
3
原创 前端练习47 自动绑定实例方法
已经同步到个人博客，欢迎访问知识点class内部默认是严格模式class定义的原型方法的可枚举行. Proxy题目首先看这样一个引子：const name = 'window';let obj = { name: 'jay', say() { console.log(this.name) }};obj.say(); let say = obj.sa...
2019-01-13 13:05:28
160
原创 前端练习45 单例模式
知识点Proxy单例模式题目单例模式（Singleton）是一种常用的软件设计模式，它保证我们系统中的某一个类在任何情况实例化的时候都获得同一个实例。例如：const root1 = new Root()const root2 = new Root()const root3 = new Root()root1 === root2 // trueroot2 === root3...
2019-01-09 10:17:07
202
原创 前端练习44 数组中的数据划分
知识点数组排序题目完成一个函数partition，它接受一个数组作为参数。它会搬动数组中的元素，使得所有小于第一个项的元素都搬动到它的左边，所有大于第一个项的元素都搬动到右边。例如：const arr = [3, 1, 6, 2, 4, 5]partition(arr)console.log(arr) // => [2, 1, 3, 6, 4, 5]输入的数组的第一个项是3，...
2019-01-08 15:17:42
186
原创 JavaScript语言精粹02 第二遍
第二遍看，收获不大，大部分内容都接触过了，书里介绍的并不深入，有些东西也略陈旧。（2018.12.28 - 2019.01.08）第1章 精华JavaScript的糟糕的想法：依赖于全局作用域。ES6里面对于局部作用域的补充已经大大缓解了这个问题。第2章 语法注释要注意，多行注释/* */遇到正则表达式有可能失效：const reg = /.*/g数字JavaScrip...
2019-01-08 11:17:45
149
原创 前端练习43 最高产的猪
知识点childElementCount广度优先搜索题目用一个HTML结构表示一头猪的子子孙孙：<div class="pig"> <div class="pig"> <div class="pig"> <div class="pig"></div>
2019-01-08 10:25:21
320
原创 前端练习42 数组中数据归并
知识点归并排序算法题目有一个数组，这个数组从两个地方开始升序，一个是开始，一个是中间。例如：[10, 21, 32, 11, 16, 40] // 从 0 和 3 开始升序[1, 5, 10, 11, 3, 4, 8, 12, 30] // 0 和 4 开始升序请你完成merge函数，可以把类似上面的数组变成一个完全升序的数组（直接修改原来的数组）。你不能用sort方法，并且只能使用...
2019-01-07 15:08:22
195
原创 前端练习41 数组的空位填充
知识点数组空位的辨别直接声明一个有长度的数组，数组的成员都是空位各种方法对空位的不同处理题目JavaScript数组有空位的概念，也就数组的一个位置上没有任何的值。例如：[ , , 'Hello'] // => 0, 1 都是空位, 3 不是空位空位并不等于undefined或者null。一个位置上如果是undefined那么它依然有值，例如[, , undefined]...
2019-01-04 17:19:21
839
原创 前端练习40 不重复数字
知识点程序健壮性各种思路题目编写一个JavaScript函数uniqueNums，该函数有一个参数n（一个不大31的整数），其返回值是一个数组，该数组内是n个随机且不重复的整数，且整数取值范围是[2, 32]。实现首先对传入的参数要进行一定的约束和判断。const uniqueNums = (n) => { // 非数字退出 if (typeof n !== 'nu...
2019-01-04 11:06:29
320
原创 前端练习39 Math.clz32的Polyfill
知识点Math.clz32方法求负数的二进制编码的方法求小数的二进制编码的方法填充字符串的方法padStart题目ES6新增了Math.clz32方法，可以让我们获取到一个整数的无符号32位的二进制形式有多少位前置的 0。例如：Math.clz32('2') // => 30如果不能转换成数字的，返回32：Math.clz32('good') // => 32...
2019-01-03 19:55:10
224
原创 JS49 判断整数类型和直接取整的方法
判断类型利用parseIntconst isInteger(target) =&gt; parseInt(target) === target注意，parseInt只会返回两个类型的结果，数值或者NaN利用取余运算const isInteger(target) =&gt; typeof target === 'number' &amp;&amp; target % 1 === 0...
2019-01-03 17:25:45
390
原创 JS48 JS中的二进制运算和按位操作符
JavaScript中的二进制运算整数JavaScript中，将十进制数字转换为二进制的方法是使用toString(2)方法，对于正整数的返回值是从不为零的首位开始返回：(8).toString(2); // 1000对于负数，不会返回其真正的二进制编码（即其相反数的补码），而是直接利用符号-来表示：(-8).toString(2); // -1000所以，想要求出负数的二进制编码...
2019-01-03 17:00:56
3368
原创 前端练习38 字符串居中填充
知识点padStart，padEnd及其polyfill字符串处理题目完成函数centerPad可以让一个字符串被包裹在指定的可重复的字符串中间，例如：centerPad('Hello', 13, 'abc') // => 'abcaHelloabca'centerPad('Gook Luck!', 30, '*~') // => '*~*~*~*~*~Gook Luc...
2019-01-02 16:30:49
372
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人