- 博客(27)
- 收藏
- 关注
RSS订阅原创 js排序算法
1.冒泡排序相邻的两个做比较，两个for循环,第一个for循环代表一共需要排几轮，第二个for循环代表每轮需要排几个数（因为每排一次就有一个数被确定）下面是从小到大排序function sort(arr: number[]) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length-1-i; j++) { if (arr[j] > arr[j
2021-04-03 00:43:20
152
原创 函数的防抖与节流
函数防抖（清零）高频事件在n秒内只执行最后一次。事件执行时，计时开始，n秒内再次执行，重新计时。（n秒内无论点击多少次都只执行最后一次）const debounce = (test, n) => { let timer; return (...args) => { clearTimeout(timer) timer = setTimeout(() => test(...args), n) }}const test = (..
2021-03-19 15:18:32
162
原创 对闭包的理解
对闭包的理解闭包：函数和函数内部能访问到的变量的总和就是一个闭包。(可以在一个内层函数中访问到其外层函数的作用域)。嵌套函数只是为了造出一个局部变量。局部变量会常驻内存中。IE 在我们使用完闭包之后，依然回收不了闭包里面引用的变量，所以IE会造成内存泄露function init() { var name = "Mozilla"; // name 是一个被 init 创建的局部变量 function displayName() { // displayName() 是内部函数，一个闭包
2021-03-19 13:58:29
155
原创 对react中虚拟dom和diff算法的理解
虚拟dom的出现直接使用dom进行操作时排版与重绘的效率低，速度慢。例如插入一个dom元素，元素本身或者继承很多属性，还需要注册很多方法，导致一个创建一个简单的dom也要消耗很多时间。虚拟dom是在首次渲染dom时，多了一层虚拟dom的计算，在dom的基础上建立了一个抽象层。当有改动时，会生成一个新的虚拟dom与上一次生成的虚拟dom去diff，得到一个差异化的部分patch，最后将patch打到浏览器的dom上去。虚拟dom实现：diff算法两个树的完全的diff算法是一个时间复杂度为 O(n3)
2021-03-18 15:52:00
185
原创 js，ts手写面试题之递归，去重，冒泡等
1.用递归方法求1~100的和function add(num1,num2){ if(num2+1>100){ return num1+num2; }else{ return add(num1+num2,num2+1); }}let sum=add(1,2) //sum=50502.数组去重let arr = [1, 1, 2, 2, 8, 8,5,4]let newarr=[]arr.forEach(function (item) { if (newarr.in
2021-03-16 09:28:19
641
原创 前端可能问到的面试题（ts,js,css,es6）
1.void,null,undefined，never区别void:无返回值，只能赋值undefined和nullnull:空值，表示不存在undefined：未定义，声明了但没有赋值，对象没有赋值的属性，对象没有返回值never：永不存在的值的类型，是抛出异常或根本没有返回值的函数表达式的返回值类型2.const和readonlyconst:修饰的常量是静态属性。声明时必须赋值，赋值后不能再改变，实际上是变量至指向的内存地址所保存的数据不改动，对于简单类型，值就保存在变量指向的内存地址。对于复
2021-03-15 16:28:34
1792
转载 TypeScript 和 JavaScript概念性学习总结
转载：https://cloud.tencent.com/developer/article/1667799ts概况性的一些问题主要知道 js于ts的相同和不同泛型的概念和使用
2021-03-15 10:48:20
65
原创 css+hooks图片点击旋转90°，再次点击回到正常。添加点击事件，通过transform：rotate属性实现
给图片加点击事件，用hooks写法 记录每次点击的状态const [rotateimg,setRotateimg]=useState<boolean>(true)点击一次就旋转90度，再次点击又回到0度。（三元运算）<img src={img} onCilck={()=>setRotateimg(!rotateimg)}style={{transform:!rotateimg?"rotate(0deg)":"rotate(90deg)"}}/>...
2021-01-06 15:00:56
856
原创 css filter:inver属性灵活使用
首先有一个图标是这样???? （只是一个图标 背景不是白色）要实现这种效果 背景色粉色 图标提亮白色????第一步加背景色 粉色background:pink效果如下????要将图标变为白色 就可以使用inver进行反转1表示反转100%filter:invert(1)效果如下????可以看到图标颜色反转了 但是背景色也一起反转此时要将背景色改为当前反转后的背景色即这个有点绿绿的颜色 用取色器取色后是#003f34background:#003f34就可以得到需要的效
2021-01-06 09:41:26
1188
原创 [‘1‘, ‘2‘, ‘3‘].map(parseInt)输出结果
执行过程相当于['1', '2', '3'].map((item, index) => { return parseInt(item, index)})parseInt(string, radix) 第一个参数string表示要转换的字符串，第二个参数为基数（2~36之间的整数），即要将radix进制的字符串转换为10进制的数(当 radix 为 0 、false、null、undefined，如果 string 不包含 0x，一般默认为十进制。)parseInt(‘1’, 0) //
2020-12-28 17:17:43
165
原创 angular 利用service服务和axios请求数据封装请求方法
angular提供的服务可以实现传递和数据共享，例如两个组件都需要使用的方法和数据可以写在angular的服务中。1.首先在控制台用命令创建服务 ng g service services/httpservice创建后的目录和默认的配置为红框里的内容暴露的名称是HttpserviceService2.在app.module.ts文件中引入和挂载HttpserviceService3.在服务中封装axios请求数据的方法 httpservice.service.ts文件如下import {
2020-11-24 15:45:24
878
原创 Angular获取表单值，设置input框的双向绑定
使用数据双向绑定功能 需要先进行以下配置1.在控制台输入命令 ng g c compents/news 新建组件compents为存放组件的文件夹 news为组件名完成之后 会自动创建四个文件 并且也在根组件中进行了对应的导入 默认不需要做其它操作2.打开news.component.ts文件将app-news挂载到根中即在app.component.html文件中app.module.ts导入表单双向绑定的语句然后在news.component.html写代码<h3>in
2020-11-23 17:16:59
1932
原创 npm报错：npm ERR! A complete log of this run can be found in: npm ERR!
报错截图：上面还有一行报错我忽略了：npm ERR! Unexpected end of JSON input while parsing near ‘…cn"},“maintainers”:[{’这是因为没有用管理员身份运行在网上搜了很多文章 步骤都是将node_ modules 删除执行npm cache clean --force清理缓存再次npm install我试了之后还是报这个错误，弄了很久发现这个方法是可行的，只是我自己的什么配置影响了注意事项：1.一定要以管理员身份运行
2020-11-20 15:01:23
10260
4
原创 Jexcel setMerge合并单元格+setValue再给单元格设置值，合并后要撤回ctrl+z需要撤回两次的解决方案
问题描述：在设置单元格合并后，如果有值就把值设置给合并后的单元格中，就需要用到两个方法，一个是setMerge合并单元格，一个是setValue设置单元格数据。功能实现了，但是我想撤销合并操作，发现需要撤销两次才能够回到之前没合并的状态。 el.setMerge(startCell, cNum, rNum)//合并 el.setValue(startCell, newarr[0], true)//合并后单元格的值原因：在撤销时，第一个撤销的是设置值的操作，第二个撤销的才是合并单元格的操作
2020-11-13 13:23:02
308
原创 jExcel API学习及示例效果， 常用方法总结（ts+hooks）
部分常用的API1. data，columns，minDimensions使用这三个API可以得到一个基本的表格 data: [['Honda', 1]], //数组包裹 columns:[{ type: 'text', title:'Car', width:120 }],//对象包裹 minDimensions: [10, 5], //最小尺寸10列5行2.defaultColWidth，defaultColAligndefaultColWidth 设置
2020-11-12 16:41:03
1347
原创 useState获取不到值undefined，数据一直为初始值不更新，用useRef解决
问题描述：在进行单元格文本样式设置操作时，我使用了Jexcel提供的方法onselection，此方法可以获取到点击的单元格的名称(如：A1)然后我想使用useState保存点击的单元格名称再进行改版字体样式，但是在要加粗字体的点击事件的地方，获取到的state一直undefined，就没办法进行修改字体样式可能的原因是useState修改状态是异步的，当使用usestate对数据进行更新，并不能立刻获取到最新的数据。如果异步未执行完成时修改这个state的值，异步结束后获取的值仍然为原来的值我一开
2020-11-12 14:04:11
9116
原创 Material Design icons图标的使用，npm下载及react+typescript引用方式import
下载：npm install material-design-icons引用：import 'material-design-icons/iconfont/material-icons.css';使用：在官网https://material.io/resources/icons/?style=baseline中找到要使用的图标 例如undo复制到要使用图标的位置 例如 content:‘undo’,toolbar:[{ type:"i",//图标
2020-11-12 09:46:01
1228
原创 Jexcel插件 使用react hooks+ts写法增加新表
采用hooks写法实现官网那个增加新表格的实例官网给div挂载表格的语句是jexcel.tabs(document.getElementById('spreadsheet'), sheets);但是我使用的不是类组件写法 所以这一步应该改为jexcel.createTabs(jexcelDom, sheets)官网完整代码链接请点击采用hooks写法 完整代码如下import React, { useEffect, useState } from "react";import "../.
2020-11-11 16:32:10
275
原创 ts中下载npm install jexcel 导入时jexcel报错报红
使用jexcel 插件时官网npm下载如下即 ： npm install jexcel如果导入时报错，可能是版本问题可以试一下 下载对应ts版本npm install @types/jexcel --save
2020-11-11 14:02:28
170
原创 react hooks+ts 使用Jexcel插件 实现单元格合并的操作及合并后单元格的数据处理
Jexcel学习 合并单元格操作主要用到两个事件选取单元格的事件onselection合并单元格的时间setMergeimport React, { useEffect, useState} from "react";import "../../node_modules/jexcel/dist/jexcel.css";import jexcel from 'jexcel'import { Space } from "antd";let el: jexcel.JExcelElement;//
2020-11-11 13:57:03
460
原创 Jexcel学习笔记（react hooks+ts）
Jexcel学习笔记//设置下标为3(下标从0开始)的标题和高度rows:{ 3: { title:'Model', height:'100px' }}//rowResize为true 可以调整每行每列的高度和宽度rowResize: truedata:[ ['Honda', 1],//1代表Red ['Peugeot', 3], ['Smart', 3], ], columns: [
2020-11-11 13:46:09
378
原创 react hooks+Jexcel+ts 学习之 增加行和销毁表格操作
在看Jexcel官网时，官网实例都是使用react类组件形式写的，而我需要用hooks练习实现，记录一下。npm下载：npm install jexcel如果导入时报错，可能是版本问题下载对应ts版本 npm install @types/jexcel --saveimport React, { useEffect} from "react";import "../../node_modules/jexcel/dist/jexcel.css";import jexcel from 'jexcel
2020-11-11 09:02:53
322
原创 React hooks+typescript+Antd 练习+简易回收站 适合前端小白学习之后练手的小案例
React hooks+typescript+Antd 简易回收站最近学习阶段，自己写了一个小练习巩固基础，代码有少量注释，写的不好勿喷示例 运行结果如下因为是自己做练习，所以文件都写在一个目录里面目录结构如下index.tsx的代码import React from 'react'import { Tabs, Card } from 'antd';import { observer } from 'mobx-react'import './index.css'import First
2020-11-06 10:43:29
570
原创 Antd Table使用列排序sorter或onCell时， columns={columns}报类型错误
Antd Table使用列排序sorter对列中的姓名，大小排序时 我的代码报错如下columns={columns}报红线了。。。官网上示例和对应代码{ title: 'Age', dataIndex: 'age', defaultSortOrder: 'descend', sorter: (a, b) => a.age - b.age, },解决方案，在列名定义的地方加上类型anyAntd官网对应地址...
2020-11-06 10:17:35
1785
原创 react-hooks useRef作用于Dom元素，利用useRef获取文本框的内容，并且按行分割
学习react hooks特性之useRef这里我使用useRef作用于Dom元素的方法实现的功能是，点击ok按钮，获取文本域的内容代码部分const textRef = useRef<any>()<textarea ref={textRef} placeholder="一行代表一条数据，空行数据不被保存"></textarea>由于我使用的是Antd中的Modal组件，所以OK按钮点击后对应的方法是handleOk//点击OK按钮的代码const
2020-11-03 16:16:43
2425
原创 react-sortable-hoc使用onSortEnd排序input框数据不变或不更新
在使用GitHub上 react-sortable-hoc组件时，发现拖拽的地方实现了，但我的拖拽元素是input框，里面的值没有对应更新,也就是onSortEnd排序部分没有正确实现。（没有安装组件首先安装组件cnpm add react-sortable-hoc array- move）//导入的部分import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';onSortEn
2020-11-03 15:36:55
4594
5
原创 ‘react-scripts‘ 不是内部或外部命令，也不是可运行的程序 vscode报错code ELIFECYCLE
‘react-scripts’ 不是内部或外部命令，也不是可运行的程序报错内容报错：在使用npm安装插件等操作后再npm start，经常遇到报错：‘react-scripts’ 不是内部或外部命令，也不是可运行的程序。或批处理文件。之前一直使用npm install react 但有时候也有新报错解决办法：在终端重新安装 npm install react-scripts之后再重新运行 npm start...
2020-11-03 14:21:34
924
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人