自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

原创 仿写Vue八、添加数组的方法

八、添加数组的方法“ 自己动手实践,就会更加深刻的理解**”**这次处理数组的七个方法,使其成为响应式。01、获取数组原型对象重写每一个函数不现实,所以打算先获取数组的原型对象,然后生成一个新的对象来继承此原型对象,这个新的对象就拥有数组的一切属性方法,且不会对原生的数组产生任何影响。/** * 对与响应式数组,我们需要重写其一些方法,例如 push、pop * 保证响应式数组使用这些方法之后依然是响应式的。 */const arrProto = Array.prototype;c

2020-05-16 17:15:36 105

原创 仿写Vue七、响应式

七、响应式“ 自己动手实践,就会更加深刻的理解前面的几篇文章,大致解决了从模板与数据到虚拟节点,再到渲染至页面上这一过程,接下来的几篇,着手解决响应式,即数据发生修改,页面随即更新的功能。01、数据劫持我们都知道在 Vue 2.x 版本中,数据的双向绑定是靠 Object.defineProperty()来实现的。在 3 的版本中使用的 Proxy来代理。毫无疑问,proxy实现起来更简单。本着学习的目的,我们还是使用前者来学习实现吧。至于后者,以后有时间总会尝试的!公共函数:判断是否为

2020-05-16 17:13:19 71

原创 仿写六、缓存虚拟节点

六、缓存虚拟节点“ 自己动手实践,就会更加深刻的理解**”**上一篇中,我们使用了闭包来缓存某些数据,将多次的遍历转换为一次遍历。今天这篇,我们使用闭包来缓存 vnode,当数据发生改变时,无需重新生成 vnode,而是直接对 vnode 中的 {{data}} 进行替换。01、combine我们需要一个函数,来将带有模板 {{data}} 的 vnode与data结合,生成不带有模板的 vnode,此函数为 combine/** * 带{{}}的vnode + data -> vno

2020-05-12 17:26:40 50

原创 仿写Vue(五)、柯里化函数的应用

五、柯里化函数的应用“ 自己动手实践,就会更加深刻的理解**”**今天的内容主要是柯里化函数的应用。01、内置标签在Vue中,存在两种标签:html内置标签(例如 div, span, p 等)与自定义组件标签(例如 my-div, base-table )。const htmlTag = 'div,p,span,header,section,h1,h2';const htmlTagArr = htmlTag.split(',') 我们每次拿到一个节点时,需要去判断这个节点的标签

2020-05-12 15:36:13 71

原创 仿写Vue(四)、虚拟节点

四、虚拟节点自己动手实践,就会更加深刻的理解在前面,已经解决了属性的深层次渲染,接下来需要解决虚拟节点的问题——即将DOM转换为vnode。01、虚拟节点简单起见,简单起见,对于一个虚拟节点,有这么些属性:tag:表示节点的标签名data:表示节点的属性text:表示文本节点的文本(不为文本节点时,为undefined)type:节点的类型children:子节点/** * 虚拟节点 */class MyVNode { /** * 构造函数

2020-05-09 22:29:03 69

原创 仿写Vue(三)、深层遍历节点属性

三、深层遍历节点属性“ 自己动手实践,就会更加深刻的理解**”**前言中,在将Vue以及其一些方法整合之后,再来看看第二个问题:渲染深层次的对象属性,例如 name.firstName01、编译函数在上一节中,我们的编译函数如下: function compiler(template, data) { const childNodes = template.childNodes; for (const childNode of childNodes) {

2020-05-09 22:03:25 42

原创 仿写Vue(二):构造函数MyVue

二、构造函数MyVue自己动手实践,就会更加深刻的理解这次的主题:实现构造函数 MyVue。在上一篇文章中,遗留了以下一些问题:还没有整合成构造函数无法替换形如 name.firstName 的层级属性没有使用虚拟DOM今天,主要解决一件事,实现构造函数 MyVue,并在其原型上添加 **render, compiler, update **这三个方法。01、实现构造函数 ...

2020-05-06 21:16:07 42

原创 一步一步的实现Vue(一)

“ 这次想要自己学着实现简单版的vue,从而对vue有更加深入的理解。” 推荐一个好用的vscode插件,可以本地快速启动服务器,并运行html文件,且拥有热加载功能:“live server”。01、看看真正的Vue首先,我们都知道,当使用 new Vue 的时候,就可以将 html 中的模板{{}}用 data 里面的数据替换,如下:<!DOCTYPE html&g...

2020-05-06 13:01:58 54

原创 一步一步的实现Vue(环境准备)

1、vscodevscode界面简洁、生态环境丰富,不失为最好用的编辑器之一。2、目录首先使用 npm init 初始化 package.json ,然后 npm install vue 来安装添加vue的依赖,这样我们就可以在 node_modules 里看到vue的源码了。3、vscode插件我没有使用打包工具,因为每次尝试都是独立的html,推荐使用 Live Server ,在...

2020-05-06 12:28:30 50

原创 笔试题:用reduce实现map——JavaScript

首先,先看看map和reduce的完整用法:arr.reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue?)reduce 接收两个参数,第一个参数为函数,指定了每次迭代调用的函数,函数的返回值为下一次迭代的 previousValue;第二个参数为初始值,是可选的。若不指定初...

2020-03-23 13:58:50 281

原创 LeetCode-1382-将二叉搜索树变平衡-JavaScript

题目给你一棵二叉搜索树,请你返回一棵 平衡后 的二叉搜索树,新生成的树应该与原来的树有着相同的节点值。如果一棵二叉搜索树中,每个节点的两棵子树高度差不超过 1 ,我们就称这棵二叉搜索树是 平衡的 。如果有多种构造方法,请你返回任意一种。来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/balance-a-binary-search-tr...

2020-03-23 11:43:18 121

原创 leetcode-1381-设计一个支持增量操作的栈-javascript

leetcode题目出处题目请你设计一个支持下述操作的栈。实现自定义栈类 CustomStack :CustomStack(int maxSize):用 maxSize 初始化对象,maxSize 是栈中最多能容纳的元素数量,栈在增长到 maxSize 之后则不支持 push 操作。void push(int x):如果栈还未增长到 maxSize ,就将 x 添加到栈顶。int po...

2020-03-19 12:56:49 95

原创 Leetcode-1380-矩阵中的幸运数字-JavaScript

题目给你一个 m * n 的矩阵,矩阵中的数字 各不相同 。请你按 任意 顺序返回矩阵中的所有幸运数。幸运数是指矩阵中满足同时下列两个条件的元素:在同一行的所有元素中最小在同一列的所有元素中最大示例示例 1:输入:matrix = [[3,7,8],[9,11,13],[15,16,17]]输出:[15]解释:15 是唯一的幸运数,因为它是其所在行中的最小值,也是所在列中的最大...

2020-03-19 11:32:50 130

原创 LeetCode-836-矩形重叠-JavaScript

题目836. 矩形重叠矩形以列表 [x1, y1, x2, y2] 的形式表示,其中 (x1, y1) 为左下角的坐标,(x2, y2) 是右上角的坐标。如果相交的面积为正,则称两矩形重叠。需要明确的是,只在角或边接触的两个矩形不构成重叠。给出两个矩形,判断它们是否重叠并返回结果。示例 1:输入:rec1 = [0,0,2,2], rec2 = [1,1,3,3]输出:true...

2020-03-18 14:42:00 51

原创 LeetCode-1160-拼写单词-JavaScript

题目出处题目给你一份『词汇表』(字符串数组) words 和一张『字母表』(字符串) chars。假如你可以用 chars 中的『字母』(字符)拼写出 words 中的某个『单词』(字符串),那么我们就认为你掌握了这个单词。注意:每次拼写时,chars 中的每个字母都只能用一次。返回词汇表 words 中你掌握的所有单词的 长度之和。示例 1:输入:words = ["cat","b...

2020-03-18 12:22:11 40

原创 2020/3/8 校招笔试题

题一某一工人生产手机,假设第一天量产1台,接下来2天(即第二天、第三天)每天量产2台,接下来3天每天量产3台……以此类推,请编程计算处第n天总共可以量产的手机数量。思路用数组保存 1 到 n 天每天量产的数量,即 [1, 2, 2, 3, 3, 3, ...]取前n项求和即可。function solution(n) { const arr = []; let i = 1; ...

2020-03-08 21:34:00 120

原创 实现call、apply、bind

一、实现myCall首先,call函数是将this绑定到传入的第一个参数上,其余参数作为调用函数的参数。func.call(thisArg, arg1, arg2, ...);那么,分为三步:将 this 赋值给 thisArg ,作为它的某个函数属性 调用这个函数属性 删除这个属性方法一:采用数组扩展符Function.prototype.myCall = f...

2020-03-04 23:32:32 37

原创 leetcode-面试试题10.01.合并排序的数组

题目给定两个排序后的数组 A 和 B,其中 A 的末端有足够的缓冲空间容纳 B。 编写一个方法,将 B 合并入 A 并排序。初始化 A 和 B 的元素数量分别为 m 和 n。示例:输入:A = [1,2,3,0,0,0], m = 3B = [2,5,6], n = 3输出: [1,2,2,3,5,6]来源:力扣(LeetCode)链接:https://leetcod...

2020-03-04 00:01:31 75

原创 2020/3/3 晚上笔试题(前端)

晚上的笔试题只有 Node 版本的 JavaScript。。。。好在是写函数,而不是要读取用户输入~一实现一个函数 versionCompare(a, b) ,比较两个版本号字符串的大小。如果a版本大于b,返回-1a版本等于b,返回0a版本小于b,返回1用例:输入: a = ‘3.0.14’, b = ‘2.0.11’输出: -1输入: a = ‘3’ , b = ‘3.0....

2020-03-03 20:21:11 285

原创 昨晚的牛客笔试题:兔子繁殖

题目一对兔子,在第五个月开始繁殖每个月生成一对小兔子,小兔子出生后也是第五个月开始繁殖,第n个月共有多少对兔子?输入:n输出:兔子数量示例输入:5输出:2解释:第五个月,最开始的兔子开始繁殖出第一对小兔子。输入:9输出:7解释:五月繁殖第一对,六月繁殖第二对,七月繁殖第三队,八月繁殖第四对,九月除了祖先兔子繁殖第五对,另外第五个月出生的小兔子也开始繁殖处一对,加起来总共7对。...

2020-02-29 14:04:16 236

原创 笔试题——硬币与金币(概率)

题目( 2020/2/28 晚刚做的笔试。当时就差一点了,有点遗憾,还是做出来吧。)1000枚硬币中有10枚金币,现在随机取n枚硬币,取到金币的概率是多少?(保留六位小数)思路首先:1000枚硬币分为10枚金币与990非金币。若n大于990,则必定取到金币。取到金币的概率 = 1 - 没有取到金币的概率。所以,我们只需要计算没有取到金币的概率即可。现在我们需要用到排列组合了。...

2020-02-29 13:39:04 1822 8

原创 vue项目中导入excel文件(使用element-ui)

需要使用的包有 XLSXnpm安装:npm install --save xlsx在element-ui 中有一个组件叫 upload,可以直接拿来用<el-upload action="" :auto-upload="false" // 因为只是读取数据到表格,并不需要上传到服务器 :show-file-list="false" // 因为是直接读到表格,不用展示文件列...

2019-03-28 16:05:38 3180

原创 前端 vue 项目中导出 table 为 excel 表格

背景介绍:使用 vue 框架以及vue的其他生态系统,组件库使用的是 element-ui。首先要安装两个包:XLSX,file-savernpm install --save xlsx file-saver现在有一个按钮,和一个表格,点击按钮发生导出表格的事件。// template<el-botton @click="export">export</el-but...

2019-03-26 15:10:16 2668 3

原创 Ant Design Vue 中的table与pagination联合使用

表格table使用链接:ant design vue : Table分页pagination使用链接:ant design vue: Pagination表格单独使用时,自带简单分页,只包含 上一页, 页面码, 下一页,例如:但如果想要更加复杂的分页,例如显示总数,改变每页个数等等功能,则需要传入pagination参数来自定义,看代码:<a-table :datasource="...

2019-03-21 11:35:26 7572 3

原创 665. 非递减数列(JavaScript)

给定一个长度为 n 的整数数组,你的任务是判断在最多改变 1 个元素的情况下,该数组能否变成一个非递减数列。我们是这样定义一个非递减数列的: 对于数组中所有的 i (1 <= i < n),满足 array[i] <= array[i + 1]。示例 1:输入: [4,2,3]输出: True解释: 你可以通过把第一个4变成1来使得它成为一个非递减数列。示例 2:...

2018-12-25 10:41:52 157

原创 图片如何等比例缩小

现在有图片 123.png,大小为 2000 * 1500,宽高比例为 2000:1500,即 4:3,因此想要等比例缩小,包裹图片的div元素的宽高比也要为 4:3才能等比例缩小。缩小时,需设置图片的最大宽高为 100%,保证图片不会超出包裹的 div。放大会导致失真,所以一般图片都只会偏大。第一种:使用div包裹img<div class="img-container">...

2018-12-25 09:42:49 1620

原创 vue 项目中发送 get 请求参数是数组的情况

在 vue 项目中一般是使用 axios 来发送请求的,例如let myThings = ['1', '2', '3']axios.get('/user', { params: { ID: 12345, things: myThings , } })// 上面的请求是 '.../user?ID=12345&things[]=1&th...

2018-12-19 14:36:08 5077 2

原创 LeetCode——958.二叉树的完全性检验(JavaScript)

给定一个二叉树,确定它是否是一个完全二叉树。若设二叉树的深度为 h,除第 h 层外,其它各层 (1~h-1) 的结点数都达到最大个数,第 h 层所有的结点都连续集中在最左边,这就是完全二叉树。(注:第 h 层可能包含 1~ 2h 个节点。)树中将会有 1 到 100 个结点。思路先使用层序遍历将所有节点以及他们的左右子节点(即使为空)都加入到一个数组 nodes 中,形如 [1,2,...

2018-12-17 11:21:47 400

原创 LeetCode——83. 删除排序链表中的重复元素(JavaScript)

给定一个排序链表,删除所有重复的元素,使得每个元素只出现一次。示例 1:输入: 1->1->2输出: 1->2示例 2:输入: 1->1->2->3->3输出: 1->2->3思路设置两个指着,p 和 q,q 始终在 p 下一位,当 q 不为空时循环,若 q、p所指的值相等,说明重复元素,删除 q 这个节点,若不相等,p ...

2018-12-12 15:22:07 227

原创 LeetCode——922.按奇偶排序数组Ⅱ(JavaScript)

给定一个非负整数数组 A, A 中一半整数是奇数,一半整数是偶数。对数组进行排序,以便当 A[i] 为奇数时,i 也是奇数;当 A[i] 为偶数时, i 也是偶数。你可以返回任何满足上述条件的数组作为答案。示例:输入:[4,2,5,7]输出:[4,5,2,7]解释:[4,7,2,5],[2,5,4,7],[2,7,4,5] 也会被接受提示:2 <= A.length &lt...

2018-12-12 15:06:12 91

原创 javascrpt 解构赋值

数组解构扁平数组:let [a,b,c] = [1,2,3]console.log(a,b,c) // 1 2 3复杂数组:let [a, [b,c]] = [1, [2,3]]console.log(a,b,c) // 1 2 3将多个元素赋给一个变量let [a, , ...rest] = [1,2,3,4,5] // 中间空一个元素不赋值console.log(a, ...

2018-12-12 10:06:55 67

原创 LeetCode——954.二倍数对数组

给定一个长度为偶数的整数数组 A,只有对 A 进行重组后可以满足 “对于每个 0 <= i < len(A) / 2,都有 A[2 * i + 1] = 2 * A[2 * i]” 时,返回 true;否则,返回 false。示例 1:输入:[3,1,3,6]输出:false示例 2:输入:[2,1,2,6]输出:false示例 3:输入:[4,-2,2,-4]输...

2018-12-11 16:34:40 380

原创 LeetCode——953.验证外星语词典(JavaScript)

某种外星语也使用英文小写字母,但可能顺序 order 不同。字母表的顺序(order)是一些小写字母的排列。给定一组用外星语书写的单词 words,以及其字母表的顺序 order,只有当给定的单词在这种外星语中按字典序排列时,返回 true;否则,返回 false。示例 1:输入:words = ["hello","leetcode"], order = "hlabcdefgijkmnopq...

2018-12-11 11:25:02 641

原创 LeetCode——950.按递增顺序显示卡牌

牌组中的每张卡牌都对应有一个唯一的整数。你可以按你想要的顺序对这套卡片进行排序。最初,这些卡牌在牌组里是正面朝下的(即,未显示状态)。现在,重复执行以下步骤,直到显示所有卡牌为止:从牌组顶部抽一张牌,显示它,然后将其从牌组中移出。如果牌组中仍有牌,则将下一张处于牌组顶部的牌放在牌组的底部。如果仍有未显示的牌,那么返回步骤 1。否则,停止行动。返回能以递增顺序显示卡牌的牌组顺序。答案中...

2018-12-06 17:38:28 151

原创 vue项目中关于锚点的(带变量)使用方法(全局使用)

问题在普通html中,锚点的使用方法是:<a href="#123">点击就定位到123的锚点</a>...<div id="123">这里是锚点的位置</div>但在vue项目中,各个页面被划分成了很多组件,经常是在 A 组件中循环渲染多个 a标签,点击跳转到 B 组件的锚点位置解决在 A 组件中,<a v-for=&quo

2018-12-06 14:09:43 219

原创 JavaScript中的call、apply、bind用法

这三种都是用来明确指定 this 关键字所指对象到底是谁。Function.prototype.call()call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。语法 fun.call(thisArg, arg1, arg2, ...)thisArg:在fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的th...

2018-11-29 17:15:42 81

原创 LeetCode——89. 格雷编码(JavaScript)

格雷编码是一个二进制数字系统,在该系统中,两个连续的数值仅有一个位数的差异。给定一个代表编码总位数的非负整数 n,打印其格雷编码序列。格雷编码序列必须以 0 开头。示例 1:输入: 2输出: [0,1,3,2]解释:00 - 001 - 111 - 310 - 2对于给定的 n,其格雷编码序列并不唯一。例如,[0,2,3,1] 也是一个有效的格雷编码序列。00 - 0...

2018-11-28 16:23:49 198

原创 LeetCode——946. 验证栈序列(JavaScript)

给定 pushed 和 popped 两个序列,只有当它们可能是在最初空栈上进行的推入 push 和弹出 pop 操作序列的结果时,返回 true;否则,返回 false 。示例 1:输入:pushed = [1,2,3,4,5], popped = [4,5,3,2,1]输出:true解释:我们可以按以下顺序执行:push(1), push(2), push(3), push(4), ...

2018-11-27 21:13:21 271

原创 JavaScript中for循环:forEach、for..of、for..in

现有数组 arr = [2,3,4,7]forEach:forEach接受三个参数,这些参数均为可选项。应用场景:当需要同时获取元素索引和元素值的情况下使用forEach。arr.forEach((val, index, arr) => { console.log(`val:${val}`) console.log(`index:${index}`) console.log(`...

2018-11-27 10:49:44 140

原创 LeetCode——945.使数组唯一的最小增量(JavaScript)

给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1。返回使 A 中的每个值都是唯一的最少操作次数。示例 1:输入:[1,2,2]输出:1解释:经过一次 move 操作,数组将变为 [1, 2, 3]。示例 2:输入:[3,2,1,2,1,7]输出:6解释:经过 6 次 move 操作,数组将变为 [3, 4, 1, 2, 5, 7]。可以看出 5 次...

2018-11-27 10:16:44 495

提示
确定要删除当前文章?
取消 删除