- 博客(245)
- 资源 (3)
- 收藏
- 关注
RSS订阅原创 仿写Vue八、添加数组的方法
八、添加数组的方法“ 自己动手实践，就会更加深刻的理解**”**这次处理数组的七个方法，使其成为响应式。01、获取数组原型对象重写每一个函数不现实，所以打算先获取数组的原型对象，然后生成一个新的对象来继承此原型对象，这个新的对象就拥有数组的一切属性方法，且不会对原生的数组产生任何影响。/** * 对与响应式数组，我们需要重写其一些方法，例如 push、pop * 保证响应式数组使用这些方法之后依然是响应式的。 */const arrProto = Array.prototype;c
2020-05-16 17:15:36
421
原创 仿写Vue七、响应式
七、响应式“ 自己动手实践，就会更加深刻的理解前面的几篇文章，大致解决了从模板与数据到虚拟节点，再到渲染至页面上这一过程，接下来的几篇，着手解决响应式，即数据发生修改，页面随即更新的功能。01、数据劫持我们都知道在 Vue 2.x 版本中，数据的双向绑定是靠 Object.defineProperty（）来实现的。在 3 的版本中使用的 Proxy来代理。毫无疑问，proxy实现起来更简单。本着学习的目的，我们还是使用前者来学习实现吧。至于后者，以后有时间总会尝试的！公共函数：判断是否为
2020-05-16 17:13:19
311
原创 仿写六、缓存虚拟节点
六、缓存虚拟节点“ 自己动手实践，就会更加深刻的理解**”**上一篇中，我们使用了闭包来缓存某些数据，将多次的遍历转换为一次遍历。今天这篇，我们使用闭包来缓存 vnode，当数据发生改变时，无需重新生成 vnode，而是直接对 vnode 中的 {{data}} 进行替换。01、combine我们需要一个函数，来将带有模板 {{data}} 的 vnode与data结合，生成不带有模板的 vnode，此函数为 combine/** * 带{{}}的vnode + data -> vno
2020-05-12 17:26:40
335
原创 仿写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
454
原创 仿写Vue（四）、虚拟节点
四、虚拟节点自己动手实践，就会更加深刻的理解在前面，已经解决了属性的深层次渲染，接下来需要解决虚拟节点的问题——即将DOM转换为vnode。01、虚拟节点简单起见，简单起见，对于一个虚拟节点，有这么些属性：tag：表示节点的标签名data：表示节点的属性text：表示文本节点的文本（不为文本节点时，为undefined）type：节点的类型children：子节点/** * 虚拟节点 */class MyVNode { /** * 构造函数
2020-05-09 22:29:03
418
原创 仿写Vue（三）、深层遍历节点属性
三、深层遍历节点属性“ 自己动手实践，就会更加深刻的理解**”**前言中，在将Vue以及其一些方法整合之后，再来看看第二个问题：渲染深层次的对象属性，例如 name.firstName01、编译函数在上一节中，我们的编译函数如下： function compiler(template, data) { const childNodes = template.childNodes; for (const childNode of childNodes) {
2020-05-09 22:03:25
491
原创 仿写Vue（二）：构造函数MyVue
二、构造函数MyVue自己动手实践，就会更加深刻的理解这次的主题：实现构造函数 MyVue。在上一篇文章中，遗留了以下一些问题：还没有整合成构造函数无法替换形如 name.firstName 的层级属性没有使用虚拟DOM今天，主要解决一件事，实现构造函数 MyVue，并在其原型上添加 **render, compiler, update **这三个方法。01、实现构造函数 ...
2020-05-06 21:16:07
218
原创 一步一步的实现Vue（一）
“ 这次想要自己学着实现简单版的vue，从而对vue有更加深入的理解。” 推荐一个好用的vscode插件，可以本地快速启动服务器，并运行html文件，且拥有热加载功能：“live server”。01、看看真正的Vue首先，我们都知道，当使用 new Vue 的时候，就可以将 html 中的模板{{}}用 data 里面的数据替换，如下：<!DOCTYPE html&g...
2020-05-06 13:01:58
384
原创 一步一步的实现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
177
原创 笔试题：用reduce实现map——JavaScript
首先，先看看map和reduce的完整用法：arr.reduce((previousValue, currentValue, currentIndex, array) => {}, initialValue？)reduce 接收两个参数，第一个参数为函数，指定了每次迭代调用的函数，函数的返回值为下一次迭代的 previousValue；第二个参数为初始值，是可选的。若不指定初...
2020-03-23 13:58:50
2253
原创 LeetCode-1382-将二叉搜索树变平衡-JavaScript
题目给你一棵二叉搜索树，请你返回一棵 平衡后 的二叉搜索树，新生成的树应该与原来的树有着相同的节点值。如果一棵二叉搜索树中，每个节点的两棵子树高度差不超过 1 ，我们就称这棵二叉搜索树是 平衡的 。如果有多种构造方法，请你返回任意一种。来源：力扣（LeetCode）链接：https://leetcode-cn.com/problems/balance-a-binary-search-tr...
2020-03-23 11:43:18
312
原创 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
238
原创 Leetcode-1380-矩阵中的幸运数字-JavaScript
题目给你一个 m * n 的矩阵，矩阵中的数字 各不相同 。请你按 任意 顺序返回矩阵中的所有幸运数。幸运数是指矩阵中满足同时下列两个条件的元素：在同一行的所有元素中最小在同一列的所有元素中最大示例示例 1：输入：matrix = [[3,7,8],[9,11,13],[15,16,17]]输出：[15]解释：15 是唯一的幸运数，因为它是其所在行中的最小值，也是所在列中的最大...
2020-03-19 11:32:50
345
原创 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
217
原创 LeetCode-1160-拼写单词-JavaScript
题目出处题目给你一份『词汇表』（字符串数组） words 和一张『字母表』（字符串） chars。假如你可以用 chars 中的『字母』（字符）拼写出 words 中的某个『单词』（字符串），那么我们就认为你掌握了这个单词。注意：每次拼写时，chars 中的每个字母都只能用一次。返回词汇表 words 中你掌握的所有单词的 长度之和。示例 1：输入：words = ["cat","b...
2020-03-18 12:22:11
150
原创 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
501
原创 实现call、apply、bind
一、实现myCall首先，call函数是将this绑定到传入的第一个参数上，其余参数作为调用函数的参数。func.call(thisArg, arg1, arg2, ...);那么，分为三步：将 this 赋值给 thisArg ，作为它的某个函数属性 调用这个函数属性 删除这个属性方法一：采用数组扩展符Function.prototype.myCall = f...
2020-03-04 23:32:32
158
原创 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
226
原创 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
502
原创 昨晚的牛客笔试题：兔子繁殖
题目一对兔子，在第五个月开始繁殖每个月生成一对小兔子，小兔子出生后也是第五个月开始繁殖，第n个月共有多少对兔子？输入：n输出：兔子数量示例输入：5输出：2解释：第五个月，最开始的兔子开始繁殖出第一对小兔子。输入：9输出：7解释：五月繁殖第一对，六月繁殖第二对，七月繁殖第三队，八月繁殖第四对，九月除了祖先兔子繁殖第五对，另外第五个月出生的小兔子也开始繁殖处一对，加起来总共7对。...
2020-02-29 14:04:16
560
原创 笔试题——硬币与金币（概率）
题目( 2020/2/28 晚刚做的笔试。当时就差一点了，有点遗憾，还是做出来吧。）1000枚硬币中有10枚金币，现在随机取n枚硬币，取到金币的概率是多少？（保留六位小数）思路首先：1000枚硬币分为10枚金币与990非金币。若n大于990，则必定取到金币。取到金币的概率 = 1 - 没有取到金币的概率。所以，我们只需要计算没有取到金币的概率即可。现在我们需要用到排列组合了。...
2020-02-29 13:39:04
3011
10
原创 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
6367
原创 前端 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
5360
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
19081
10
原创 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
309
原创 图片如何等比例缩小
现在有图片 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
4499
原创 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
7407
2
原创 LeetCode——958.二叉树的完全性检验（JavaScript）
给定一个二叉树，确定它是否是一个完全二叉树。若设二叉树的深度为 h，除第 h 层外，其它各层 (1～h-1) 的结点数都达到最大个数，第 h 层所有的结点都连续集中在最左边，这就是完全二叉树。（注：第 h 层可能包含 1~ 2h 个节点。）树中将会有 1 到 100 个结点。思路先使用层序遍历将所有节点以及他们的左右子节点（即使为空）都加入到一个数组 nodes 中，形如 [1,2,...
2018-12-17 11:21:47
795
原创 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
381
原创 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 <...
2018-12-12 15:06:12
216
原创 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
198
原创 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
637
原创 LeetCode——953.验证外星语词典（JavaScript）
某种外星语也使用英文小写字母，但可能顺序 order 不同。字母表的顺序（order）是一些小写字母的排列。给定一组用外星语书写的单词 words，以及其字母表的顺序 order，只有当给定的单词在这种外星语中按字典序排列时，返回 true；否则，返回 false。示例 1：输入：words = ["hello","leetcode"], order = "hlabcdefgijkmnopq...
2018-12-11 11:25:02
905
原创 LeetCode——950.按递增顺序显示卡牌
牌组中的每张卡牌都对应有一个唯一的整数。你可以按你想要的顺序对这套卡片进行排序。最初，这些卡牌在牌组里是正面朝下的（即，未显示状态）。现在，重复执行以下步骤，直到显示所有卡牌为止：从牌组顶部抽一张牌，显示它，然后将其从牌组中移出。如果牌组中仍有牌，则将下一张处于牌组顶部的牌放在牌组的底部。如果仍有未显示的牌，那么返回步骤 1。否则，停止行动。返回能以递增顺序显示卡牌的牌组顺序。答案中...
2018-12-06 17:38:28
245
原创 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
594
原创 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
140
原创 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
328
原创 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
476
原创 JavaScript中for循环：forEach、for..of、for..in
现有数组 arr = [2,3,4,7]forEach:forEach接受三个参数，这些参数均为可选项。应用场景：当需要同时获取元素索引和元素值的情况下使用forEach。arr.forEach((val, index, arr) =&gt; { console.log(`val:${val}`) console.log(`index:${index}`) console.log(`...
2018-11-27 10:49:44
258
原创 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
683
统计学习方法
2017-10-16
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人