前端练习
文章平均质量分 60
「已注销」
这个作者很懒,什么都没留下…
展开
-
前端练习56 表格行数据合并
用Vue实现表格行数据的多级合并原创 2019-07-31 10:23:08 · 666 阅读 · 0 评论 -
前端练习41 数组的空位填充
知识点数组空位的辨别直接声明一个有长度的数组,数组的成员都是空位各种方法对空位的不同处理题目JavaScript数组有空位的概念,也就数组的一个位置上没有任何的值。例如:[ , , 'Hello'] // => 0, 1 都是空位, 3 不是空位空位并不等于undefined或者null。一个位置上如果是undefined那么它依然有值,例如[, , undefined]...原创 2019-01-04 17:19:21 · 871 阅读 · 0 评论 -
前端练习32 中间件模式
知识点中间件的实现Reduce用于函数题目中间件模式(middleware)是一种很常见、也很强大的模式,被广泛应用在 Express、Koa、Redux 等类库和框架当中。简单来说,中间件就是在调用目标函数之前,你可以随意插入其他函数预先对数据进行处理、过滤,在这个过程里面你可以打印数据、或者停止往下执行中间件等。数据就像水流一样经过中间件的层层的处理、过滤,最终到达目标函数。请你...原创 2018-12-25 11:12:56 · 576 阅读 · 0 评论 -
前端练习40 不重复数字
知识点程序健壮性各种思路题目编写一个JavaScript函数uniqueNums,该函数有一个参数n(一个不大31的整数),其返回值是一个数组,该数组内是n个随机且不重复的整数,且整数取值范围是[2, 32]。实现首先对传入的参数要进行一定的约束和判断。const uniqueNums = (n) => { // 非数字退出 if (typeof n !== 'nu...原创 2019-01-04 11:06:29 · 332 阅读 · 0 评论 -
前端练习24 queryString分析器
知识点URL中的查询参数和hash值多种情况的考虑题目完成一个parseQueryString函数。它接受一个url字符串作为参数,返回一个对象,这个对象包含query string上的键值对。例如:parseQueryString('https://scriptoj.com/problems?offset=100&limit=10')返回:{ offset: '100...原创 2018-12-19 10:22:31 · 297 阅读 · 0 评论 -
前端练习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 · 241 阅读 · 0 评论 -
前端练习37 迷你MVVM
知识点如何获取所有文本节点defineProperty和defineProperties将字符串替换为参数变量如何标记依赖的元素题目做一个小型的MVVM库,可以做到数据和视图之间的自动同步。你需要做的就是完成一个函数bindViewToData,它接受一个DOM节点和一个对象data作为参数。bindViewToData会分析这个DOM节点下的所有文本节点,并且分析其中被{{和}...原创 2018-12-29 15:31:37 · 197 阅读 · 0 评论 -
前端练习31 谁在召唤我?
知识点函数中的callee、caller属性Error.prototype.stack属性题目我们要实现一个函数where,它会返回它被调用时的所在函数的名字,例如:function main () { where() }function a () { function b () { where() // => 'b' } b()}main(...原创 2018-12-24 10:52:52 · 190 阅读 · 0 评论 -
前端练习22 数组展平
知识点concat方法可以接受数组作为参数,也可以接受非数组成员作为对象递归reduce方法判断数组类型题目编写一个JavaScript函数,接受一个仅包含数字的多维数组,返回拍平以后的结果。例如传入:[1, [[2], 3, 4], 5],返回[1, 2, 3, 4, 5]。实现明显要通过递归实现,可以使用reduce方法,它可以保存当前只执行过的结果在total中,如果当前...原创 2018-12-18 10:09:24 · 417 阅读 · 0 评论 -
前端练习21 后端数据处理
知识点分析数据结构数组的reduce方法题目从某数据库接口得到如下值:{ rows: [ ["Lisa", 16, "Female", "2000-12-01"], ["Bob", 22, "Male", "1996-01-21"] ], metaDat原创 2018-12-18 09:30:36 · 835 阅读 · 0 评论 -
前端练习36 翻箱倒柜
知识点Iterator接口Generatorr函数题目完成一个类Box,实例化的时候给它传入一个数组。Box的实例支持for...of操作,可以把初始化的时候传给Box的数组内容遍历出来:const box = new Box(['book', 'money', 'toy'])for (let stuff of box) { console.log(stuff) // =&gt...原创 2018-12-28 15:26:24 · 301 阅读 · 0 评论 -
前端练习38 字符串居中填充
知识点padStart,padEnd及其polyfill字符串处理题目完成函数centerPad可以让一个字符串被包裹在指定的可重复的字符串中间,例如:centerPad('Hello', 13, 'abc') // => 'abcaHelloabca'centerPad('Gook Luck!', 30, '*~') // => '*~*~*~*~*~Gook Luc...原创 2019-01-02 16:30:49 · 395 阅读 · 0 评论 -
前端练习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 · 208 阅读 · 0 评论 -
前端练习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 · 167 阅读 · 0 评论 -
前端练习55 图片对比效果
题目今天在整理收藏夹时,发现有一个很不错的网站picdiet,可以用来压缩图片,效果很不错。不过今天的练习不是关于图片压缩,而是它的官方的一个用来对比压缩前后图片的效果的组件,效果如下:试着在Vue中实现这个效果分析分几个模块来实现。在搭起架子后,首先实现中间的分割线,样式不难,两边的小三角也可以用border模拟实现.separator { position: absolute...原创 2019-07-11 21:26:12 · 1265 阅读 · 1 评论 -
前端练习23 操作Cookie
知识点读取CookieCookie形式设置Cookie删除Cookie题目完成cookieJar单例,它有三个方法:set(name, value, days):设置cookie的值,days为多少天以后过期。get(name):获取cookie的值。remove(name):删除cookie的值。实现首先,设置cookie时是直接给Cookie赋值:documen...原创 2018-12-18 15:07:46 · 215 阅读 · 0 评论 -
前端练习52 字符串中的第一个唯一字符
已同步到个人博客,欢迎访问。题目题目来自LeetCode给定一个字符串,找到它的第一个不重复的字符,并返回它的索引。如果不存在,则返回-1。s = "leetcode"// 返回 0.s = "loveleetcode",// 返回 2.注意事项:您可以假定该字符串只包含小写字母。实现1首先想到的是用空间来换取时间,第一个循环用一个临时的数组来将所有的字符串都寸到对...原创 2019-02-20 10:52:07 · 200 阅读 · 0 评论 -
前端练习54 实现strStr()
已同步到个人博客,欢迎访问。题目题目来自LeetCode实现strStr()函数。给定一个haystack字符串和一个needle字符串,在haystack字符串中找出needle字符串出现的第一个位置(从0开始)。如果不存在,则返回-1。例1:输入: haystack = "hello", needle = "ll"输出: 2示例 2:输入: haystack = "...原创 2019-02-22 10:22:45 · 125 阅读 · 0 评论 -
前端练习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 · 149 阅读 · 0 评论 -
前端练习49 判断美元符号格式
已经同步到个人博客,欢迎访问知识点正则表达式题目完成一个函数isUSDFormat返回true/false来判断一个字符串是否符合美元格式:以$开头如果是小数,保留两位小数;如果不是小数则不显示小数部分整数部分从小数点上一位开始每隔三位用,分割开来如果整数部分从数字0开始,则只会显示一位0例如:isUSDFormat('$1') // => trueisUSDFor...原创 2019-01-15 17:26:59 · 1026 阅读 · 0 评论 -
前端练习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 · 213 阅读 · 0 评论 -
前端练习50 买卖股票的最佳时机 II
题目题目来自LeetCode已同步到个人博客,欢迎访问。给定一个数组,它的第i个元素是一支给定股票第i天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易(多次买卖一支股票)。注意:你不能同时参与多笔交易(你必须在再次购买前出售掉之前的股票)。示例 1:输入: [7,1,5,3,6,4]输出: 7解释: 在第 2 天(股票价格 = 1)的时候买入,在...原创 2019-01-24 16:13:03 · 174 阅读 · 0 评论 -
前端练习48 字体高亮函数
已经同步到个人博客,欢迎访问知识点标签模板题目完成highLight函数,可以把模板字符串中的插入内容替换掉,并且插入文档后显示红色,例如:const yourName = 'ScriptOJ'const myName = 'Jerry'document.body.innerHTML = highlight`Hello, ${yourName}. I am ${myName}.`...原创 2019-01-14 11:36:31 · 423 阅读 · 3 评论 -
前端练习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 · 196 阅读 · 0 评论 -
前端练习43 最高产的猪
知识点childElementCount广度优先搜索题目用一个HTML结构表示一头猪的子子孙孙:<div class="pig"> <div class="pig"> <div class="pig"> <div class="pig"></div>原创 2019-01-08 10:25:21 · 331 阅读 · 0 评论 -
前端练习35 Symbol转换
知识点对象的遍历方法Symbol与其他类型的转换题目请你完成convertSymbolToNormalStr函数,它会把一个键全是Symbol的对象转换成键全是String的对象,而同时值保持不变。例如:convertSymbolToNormalStr({ [Symbol('name')]: 'Jerry' }) // => { name: 'Jerry' }实现首先要把...原创 2018-12-28 14:57:15 · 657 阅读 · 0 评论 -
前端练习20 DOM标签统计
知识点使用document.documentElement获取页面的<HTML>标签DOM节点的children属性是一个类数组对象,转换为数组的方法数组去重递归题目完成getPageTags函数,判断你的代码所执行的页面用到了哪些标签。例如,如果页面中:<html> <head></head> <body>&...原创 2018-12-17 19:25:23 · 426 阅读 · 0 评论 -
前端练习12 求DOM树的最大深度
题目求DOM树的节点的最大深度实现可以用递归实现,关键就是找出递归的公式:1 + (兄弟节点中深度最大值)然后找出递归的结束条件,即当不存在子节点时结束递归,返回1其次还要注意,DOM节点的children属性是一个类数组对象,类似函数的arguments属性,不能直接使用数组方法,需要先转换为数组const getDepth = node =&gt; { if (!node....原创 2018-12-08 11:37:51 · 1053 阅读 · 1 评论 -
前端练习11 手写实现parsenInt方法
题目手写parseInt的实现:要求简单一些,把字符串型的数字转化为真正的数字即可,但不能使用JS原生的字符串转数字的API,比如Number()实现这道题考察的知识点有下面几个方面:1 parseInt的使用parseInt接受两个参数,第一个参数s是要转换的数字或者字符串,第二个参数radix是指定的转换的基数,介于2和36之间因此需要对两个参数都进行校验,按照题目要求,需要对如果...原创 2018-12-05 11:21:51 · 1102 阅读 · 0 评论 -
前端练习10 连续子串最大和
求连续子串最大和的练习。原创 2018-12-04 21:55:13 · 1019 阅读 · 0 评论 -
前端练习09 同字母异序
题目同字母异序指的是两个字符串字母种类和字母的数量相同,但是顺序可能不同。完成isAnagram,接受两个字符串作为参数,返回true或者false表示这两个字符串是否同字母异序。例如:isAnagram(&quot;anagram&quot;, &quot;nagaram&quot;) // =&amp;gt; return true.isAnagram(&quot;rat&quot;,原创 2018-12-04 21:46:57 · 417 阅读 · 0 评论 -
前端练习08 找出字符串中出现次数最多的字符
题目找出一个字符串中出现次数最多的字符const str = 'asdfaaaa'最后的返回值是字符串'a'实现嗯,我略加思考(半个小时左右),给出了一个复杂的方案,一个屎一般的方案屎一般的方案我的方案是利用redcue,计算出了每个字符串出现的频次,存到了一个对象中:const obj = {a: 5, s: 1, d: 1, f: 1}然后就是取出其中最大的那一项了,需要...原创 2018-11-26 17:48:05 · 2603 阅读 · 3 评论 -
前端练习07 按下标插入
失望题目(2018-11-26)现在有一个数组存放字符串数据:const items = ['item1', 'item2', 'item3', 'item4', 'item5']有另外一个数组存放一组对象:const sections = [ { content: 'section1', index: 0 }, { content: 'section2', index: 2 ...原创 2018-11-26 16:31:39 · 351 阅读 · 0 评论 -
前端练习05 判断两个矩形是否重叠
题目(2018-11-20)用一个对象的数据来表示一个矩形的位置和大小:{ x: 100, y: 100, width: 150, height: 250}它表示一个宽为150高为250的矩形在页面上的(100, 100)的位置。请你完成一个函数isOverlap可以接受两个矩形作为参数,判断这两个矩形在页面上是否重叠。例如:const rect1 = { x: 10...原创 2018-11-20 11:21:37 · 3494 阅读 · 0 评论 -
前端练习03 把数字转换成中文
题目(2018-11-18)完成将toChineseNum,可以将数字转换成中文大写的表示,处理到万级别,例如toChineseNum(12345),返回一万二千三百四十五。实现将数字按照四位分成一组,存放在输入中,每一项的处理逻辑其实是相同的,无非是根据最后不同的位置,添加不同的单位即可分组的过程涉及到了上一个联系的内容,将数组每四位分成一组在对四位数字组成的一项进行处理时,有一些特殊...原创 2018-11-18 14:04:40 · 1448 阅读 · 0 评论 -
前端练习02 实现数字千分位分割
题目(2018-11-18)输入一个数字,将数字按照用逗号分隔,例如输入1234.56,结果是1,234.56实现关键点是,这种分隔方法是从右至左的分隔,用普通的slice方法是从左至右的分隔,例如:12345正确的结果是12, 345,而用普通的slice方法结果是123, 45如果图简单,可以直接使用内置的方法:// 内置的方法Number.toLocalString();c...原创 2018-11-18 14:03:36 · 1342 阅读 · 0 评论 -
前端练习04 取对象的深层属性
题目(2018-11-19)有时候我们需要访问一个对象较深的层次,但是如果这个对象某个属性不存在的话就会报错,例如:var data = { a: { b: { c: 'ScriptOJ' } } }data.a.b.c // =&gt; scriptojdata.a.b.c.d // =&gt; 报错,代码停止执行console.log('ScriptOJ') // =&gt; 不会被...原创 2018-11-19 11:50:31 · 751 阅读 · 2 评论 -
前端练习01 记忆化斐波那契函数
题目(2018-11-15)斐波那契数列指的是类似于下面的数列:1, 1, 2, 3, 5, 8, 13, ……也就是,第n个数是由前面两个数相加而来完成fibonacci函数,接受n作为参数,可以获取数列中第n个数,例如:fibonacci(1) // =&amp;gt; 1fibonacci(2) // =&amp;gt; 1fibonacci(3) // =&amp;gt; 2...实现想到...原创 2018-11-15 10:02:12 · 335 阅读 · 0 评论 -
前端练习25 实现一个EventEmitter
知识点观察者模式的概念和实现class的使用题目完成EventEmitter模块,它是一个类,它的实例具有以下几个方法:on、emit、off:on(eventName, func):监听eventName事件,事件触发的时候调用func函数。emit(eventName, arg1, arg2, arg3...):触发eventName事件,并且把参数arg1, arg2, a...原创 2018-12-19 14:39:52 · 1231 阅读 · 0 评论 -
前端练习15 求二维数组的排列组合
题目求出一个二维数组[[A, B], [a, b], [1, 2]]所有排列组合输入[[A, B], [a, b], [1, 2]]输出[Aa1, Aa2, Ab1, Ab2, Ba1, Ba2, Bb1, Bb2]实现编程,首先要分析规律,有了规律之后要做的就是用代码将这种规律实现就好了!!!!!分析一下,将计算过程拆解为两两相乘的过程首先计算[A, B] * [a, b],得到...原创 2018-12-13 20:27:06 · 990 阅读 · 2 评论