- 博客(204)
- 收藏
- 关注
RSS订阅原创 react中memo使用
Lazy其实就是个懒加载组件，需要配合Suspense使用。import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';import React, { Suspense, lazy } from 'react';const Home = lazy(() => import('./Home'));const Nav = lazy(() => import('./Nav'));const
2020-09-23 13:05:02
1330
原创 react中contextType用法
contextType取代了context中的Consumer。import React, { Component, createContext } from 'react';const Context = createContext();const {Provider} = Context;//声明一个子组件class Child extends Component { render() { return <GrandChild /> }}//声明一个孙组件
2020-09-23 11:43:48
775
原创 原生js实现文件下载
如url为：’/file/getFile?fileid=38a8ea3bff262fe48754f4fdcef58098&filename=承诺书.docx&t=2‘，name为“文件”，则以下代码可以实现文件下载。
2020-08-26 16:31:34
1220
原创 前端面试题：将数组扁平化去并除其中重复部分数据，最终得到一个升序且不重复的数组
const sortArray = [1, 3, 2, [9, 8, 7], [[5, 4]]];const res = Array.from(new Set(sortArray.join().split(',').sort((a, b) => a - b)));console.log(res)
2020-07-28 20:56:22
681
原创 判断数组的方法
1.Array.isArray2.instanceof方法注意[] instanceof Object也是为true。3.Object.prototype.toString.call([]).slice(8,-1) === 'Array'4.arr.constructor === Array
2020-07-28 16:24:49
147
原创 js之beforeunload事件
有时候点击刷新按钮时，想要弹出重新加载此网站的提示：如google浏览器：可以使用js的beforeunload事件componentDidMount(): void { window.onbeforeunload = () => { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { ...
2020-04-13 16:29:47
2234
原创 删除全局变量和函数
1.删除全局变量window.test = '123';delete window.test;2.删除全局函数window.isDrawShow = () => { console.log('eeee');});delete window.isDrawShow如果全局函数是通过addEventListener触发的,那么可以通过removeEventListener删除全...
2020-04-13 16:15:27
1211
原创 safari浏览器中末尾出现省略号会出现tooltip的解决方法
单行要想末尾出现省略号，可以加上csswhite-space: nowrap;text-overflow: ellipsis;overflow: hidden;max-width: 200px;(自己设定一个宽）<div class="single">确保春节期间运行安全 甘肃开展电梯锅炉等特种设备节前“体检”确保春节期间运行安全 甘肃开展电梯锅炉等特种设备节前“体检”<...
2020-02-04 16:12:32
1536
原创 leetcode682:js实现棒球比赛
题目：你现在是棒球比赛记录员。给定一个字符串列表，每个字符串可以是以下四种类型之一：1.整数（一轮的得分）：直接表示您在本轮中获得的积分数。2. “+”（一轮的得分）：表示本轮获得的得分是前两轮有效 回合得分的总和。3. “D”（一轮的得分）：表示本轮获得的得分是前一轮有效 回合得分的两倍。4. “C”（一个操作，这不是一个回合的分数）：表示您获得的最后一个有效 回合的分数是无效的，应该...
2020-01-28 20:36:36
325
原创 leetcode30:js实现串联所有单词的子串
给定一个字符串 s 和一些长度相同的单词 words。找出 s 中恰好可以由 words 中所有单词串联形成的子串的起始位置。注意子串要与 words 中的单词完全匹配，中间不能有其他字符，但不需要考虑 words 中单词串联的顺序。示例 1：输入：s = “barfoothefoobarman”,words = [“foo”,“bar”]输出：[0,9]解释：从索引 0 和 9 ...
2020-01-27 14:25:21
778
原创 leetcode93:js实现复原IP地址
题目：给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式。示例:输入: “25525511135”输出: [“255.255.11.135”, “255.255.111.35”]// 复原ip地址const str = "25525511135";// const current = [];let res = [];const restoreIpAddress = ...
2020-01-22 19:56:36
472
原创 js实现快速排序
const rapidSort = (array) => { if (array.length <= 1) { return array; } const left = []; const right = []; const reference = array.splice(Math.floor(array.length / 2),...
2020-01-22 13:50:32
135
原创 leetcode41:js实现缺失的第一个正数
题目：给定一个未排序的整数数组，找出其中没有出现的最小的正整数。示例 1:输入: [1,2,0]输出: 3示例 2:输入: [3,4,-1,1]输出: 2示例 3:输入: [7,8,9,11,12]输出: 1const arr = [0, 1, 2];const fun = (arr) => { arr.forEach((item, index) => {...
2020-01-22 10:28:52
340
原创 leetcode215:js实现数组中的第K个最大元素
题目：在未排序的数组中找到第 k 个最大的元素。请注意，你需要找的是数组排序后的第 k 个最大的元素，而不是第 k 个不同的元素。示例 1:输入: [3,2,1,5,6,4] 和 k = 2输出: 5示例 2:输入: [3,2,3,1,2,4,5,5,6] 和 k = 4输出: 4const array = [3, 2, 1, 5, 6, 4];const K = 2;// 第...
2020-01-22 09:29:25
1061
原创 leetcode164:js实现最大间距
题目：给定一个无序的数组，找出数组在排序之后，相邻元素之间最大的差值。如果数组元素个数小于 2，则返回 0。示例 1:输入: [3,6,9,1]输出: 3解释: 排序后的数组是 [1,3,6,9], 其中相邻元素 (3,6) 和 (6,9) 之间都存在最大差值 3。示例 2:输入: [10]输出: 0解释: 数组元素个数小于 2，因此返回 0。解题思路：第一步：数组排序第二步...
2020-01-21 20:37:10
223
原创 leetcode922:js实现按奇偶排序数组
题目：给定一个非负整数数组 A， A 中一半整数是奇数，一半整数是偶数。对数组进行排序，以便当 A[i] 为奇数时，i 也是奇数；当 A[i] 为偶数时， i 也是偶数。你可以返回任何满足上述条件的数组作为答案。const arr = [4, 2, 5, 7];const sort = (arr) => { let result = []; for (let k = ...
2020-01-21 20:07:28
212
原创 实现盒子居中的另外一种方法：display:table-cell配合vertical-align:middle
实现一个盒子中的内容居中有很多方式，这里介绍一个我不经常用的方法，即display:table-cell配合vertical-align:middle的方式。.box { width: 150px; height: 150px; border: 1px solid #ededed; display: table-cell; vertical-align: ...
2020-01-21 18:28:22
366
原创 innerText,innerHTML与textContent的使用
innerText,innerHTML与textContent它们的区别我在这里就不赘述了，它们的兼容性是：innerText对IE兼容性较好（IE6+），textContent则兼容IE9+。innerHTML在IE6-9中无效(IE10正常)在做项目用innerHTML获取dom元素里面的内容时发现空格被渲染成了 ,改成textContent就可以了。...
2020-01-21 18:12:41
283
原创 react-sound音频的暂停与播放
要实现的效果，点击一个音频，图像变成播放状态，其他的所有音频都是停放状态，点击同一个音频，音频播放暂停来回切换。我是用的是github上的react-sound这个库。example:render() { return ( <Sound url="cool_sound.mp3" playStatus={Sound.status.PLAYING} ...
2020-01-21 17:29:34
1665
1
原创 react动态渲染ref与Element implicitly has an 'any' type because expression of type 'string'
前面写过一篇文章：react使用ref获取dom的两种方法：方法一：<div styleName="date" ref={this.dateRef} > </div>// 获取dom节点dateRef = (ref: null) => { console.log(891, ref) this.date = ref;}...
2020-01-21 16:19:48
10377
5
原创 单行省略号和多行省略号的实现
<style> /* 单行省略号 */ .single { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 200px; } /* 多行省略号：有兼容性问题 */ .multiple { ...
2020-01-21 14:00:53
234
原创 :active:before的使用
当时要实现的一个效果是：一个盒子里有图片，文字，active这个盒子时，盒子的背景色变成某个颜色，要实现的效果是：最开始的代码是：<div class="list-item"> <div class="item-wrapper"> <img src="./images/taohua.jpeg"> <div>...
2020-01-21 09:54:12
1294
原创 js实现选择排序
const arr1 = [4, 1, 6, 14, 10, 5, 7, 2]; const choseSort = (arr) => { for (let i = 0; i < arr.length; i++) { let min = arr[i]; for (let j = i + 1; j < arr.length; ...
2020-01-20 22:35:18
538
原创 js实现冒泡排序
const arr1 = [0, 1, 6, 14, 10, 5, 7, 2]; const bubbleSort = (arr) => { let max = arr[0]; for (let i = 0; i < arr.length - 1; i++) { for (let j = ...
2020-01-20 21:51:51
126
原创 瀑布流效果实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
2020-01-20 19:44:37
253
原创 leetcode10:js正则表达式匹配
题目：给你一个字符串 s 和一个字符规律 p，请你来实现一个支持 ‘.’ 和 ‘’ 的正则表达式匹配。‘.’ 匹配任意单个字符'’ 匹配零个或多个前面的那一个元素所谓匹配，是要涵盖 整个 字符串 s的，而不是部分字符串。说明:s 可能为空，且只包含从 a-z 的小写字母。p 可能为空，且只包含从 a-z 的小写字母，以及字符 . 和 。示例 1:输入:s = “aa”p = “...
2020-01-12 22:57:49
542
原创 leetcode459:js重复的子字符串
题目：给定一个非空的字符串，判断它是否可以由它的一个子串重复多次构成。给定的字符串只含有小写英文字母，并且长度不超过10000。示例 1:输入: “abab”输出: True解释: 可由子字符串 “ab” 重复两次构成。示例 2:输入: “aba”输出: False示例 3:输入: “abcabcabcabc”输出: True解释: 可由子字符串 “abc” 重复四次构成。 ...
2020-01-12 16:10:15
299
原创 leetcode89:js格雷编码
题目：格雷编码是一个二进制数字系统，在该系统中，两个连续的数值仅有一个位数的差异。给定一个代表编码总位数的非负整数 n，打印其格雷编码序列。格雷编码序列必须以 0 开头。示例 1:输入: 2输出: [0,1,3,2]解释:00 - 001 - 111 - 310 - 2对于给定的 n，其格雷编码序列并不唯一。例如，[0,2,3,1] 也是一个有效的格雷编码序列。00 - 0...
2020-01-12 15:44:32
112
原创 leetcode605:js种花问题
题目：假设你有一个很长的花坛，一部分地块种植了花，另一部分却没有。可是，花卉不能种植在相邻的地块上，它们会争夺水源，两者都会死去。给定一个花坛（表示为一个数组包含0和1，其中0表示没种植花，1表示种植了花），和一个数 n 。能否在不打破种植规则的情况下种入 n 朵花？能则返回True，不能则返回False。示例 1:输入: flowerbed = [1,0,0,0,1], n = 1输出:...
2020-01-07 23:18:09
361
原创 leetcode914:js卡牌分组
题目：给定一副牌，每张牌上都写着一个整数。此时，你需要选定一个数字 X，使我们可以将整副牌按下述规则分成 1 组或更多组：每组都有 X 张牌。组内所有的牌上都写着相同的整数。仅当你可选的 X >= 2 时返回 true。解题思路：将[1,2,3,4,4,4,4,3,2,1]转化为{‘1’: 2,‘2’: 2,‘3’: 2,‘4’: 4}，也就是将数组的值当做键，值为这个数...
2020-01-05 23:28:36
194
原创 leetcode17:js实现电话号码的字母组合
题目：给定一个仅包含数字 2-9 的字符串，返回所有它能表示的字母组合。给出数字到字母的映射如下（与电话按键相同）。注意 1 不对应任何字母。示例:输入：“23”输出：[“ad”, “ae”, “af”, “bd”, “be”, “bf”, “cd”, “ce”, “cf”].// 数字对应的字母const numberToAlpha = ['', '', 'abc', 'def',...
2020-01-05 12:55:40
386
原创 leetcode696:js实现计数二进制子串
题目：给定一个字符串 s，计算具有相同数量0和1的非空(连续)子字符串的数量，并且这些子字符串中的所有0和所有1都是组合在一起的。示例一输入: “00110011”输出: 6解释: 有6个子串具有相同数量的连续1和0：“0011”，“01”，“1100”，“10”，“0011” 和 “01”。示例二输入: “10101”输出: 4解释: 有4个子串：“10”，“01”，“10”，“...
2020-01-04 21:52:19
158
原创 反转字符串单词
// 反转字符串中的单词// 输入: "Hello this's Lily"// 输出: "olleH s'siht yliL"const revertStr = (str) => { return str.split(' ').map(item => { return item.split('').reverse().join(''); }).j...
2020-01-04 11:39:20
128
原创 mac升级node和npm
一.查看本机当前Node.js和npm版本node -vnpm -v二.清除node.js的cachesudo npm cache clean -f三.安装"n"模块，管理node.jssudo npm install -g n四.更新node.js版本升级到稳定版本：sudo n stable升级到最高版本：sudo n latest升级到指定版本：sudo n v10.16...
2020-01-03 19:33:30
103
原创 react触发render的三种方法
一、通过setState二、this.forceUpdate()三、通过状态管理，如mobx，redux等项目中我改变了一个对象的值，并没有setState，导致没有重新render，加上this.setState({});或者this.forceUpdate();问题就解决了。...
2019-12-25 11:08:18
6099
原创 react hooks简单介绍
react hooks需要在react和react-dom 16.7以上，相比于组件的state结构过于臃肿，react hooks可以独立处理每个state,其写法让人一目了然，非常容易看见设置的state中的变量，和操作该变量的方法。下面是一个简单的demoimport React, { useState, useEffect } from ‘react’;export default ...
2019-12-17 10:03:46
144
原创 react中lazy and suspence用法
React.lazy只有在渲染的时候才加载代码。下面是一个demoindex.js:import React, { Suspense, lazy } from 'react';const SecondComponent = lazy(() => import('./secondComponent.js'))let content = '';let promise = '';con...
2019-12-15 22:24:07
197
原创 fetchMetadata: sill install loadAllDepsIntoIdealTree提示的一个解决方案
npm install时提示：fetchMetadata: sill install loadAllDepsIntoIdealTree解决方案：npm install -g cnpm --registry=https://registry.npm.taobao.org然后cnpm install
2019-12-15 20:55:30
14841
原创 componentDidUpdate vs componentWillReceiveProps
componentDidUpdate有两个参数prevProps和prevState，不管是父组件props的修改还是state状态的更改都会触发该方法，而componentWillReceiveProps只有在父组件重新render props改变的时候才会触发。下面的代码是只有上一次的changeForm不包含1且本次props.changeForm包含1才会执行componnetDidUpd...
2019-12-15 20:32:55
914
原创 记录react中接口一直调用的原因
项目中遇到一个问题，render里调用了showAccountsService方法，导致getDeligentCustomerAbility里面的接口和getStatus定义的接口一直执行，导致卡死。class Feature extends React.PureComponent { getDeligentCustomerStatus = async () => { const...
2019-12-14 17:26:34
2122
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人