- 博客(42)
- 收藏
- 关注
RSS订阅原创 webpack+react新建项目—— 使用react-router-dom和antd
安装react-router-domnpm install react-router-dom修改app.tsx组件import React, { useState } from "react";import { BrowserRouter, Route, Link, Routes} from "react-router-dom"interface IProps { title: string}const About = () => { return <
2022-02-24 22:13:23
547
原创 webpack+react新建项目—— 使用typescript
文章目录1，安装typescript相关依赖文件2，创建tsconfig.json文件1，安装typescript相关依赖文件npm install --save-dev typescript ts-loader @types/react @types/react-dom2，创建tsconfig.json文件在项目根目录下创建 tsconfig.json文件{ "compilerOptions": { "outDir": "./dist/", "sourceMap": tru
2022-02-16 22:51:14
524
原创 webpack+react新建项目（2）--增加模板和自动更新
1，安装html-webpack-plugin和webpack-dev-servernpm install html-webpack-plugin webpack-dev-server --save-dev2，创建模板文件在根目录下新建public文件夹，然后在文件夹下新建index.html文件<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <meta
2022-02-10 22:19:51
456
原创 webpack+react新建项目（1）
文章目录1，初始化npm2，安装webpack和webpack-cli3，安装react和react-dom4，安装babel相关依赖和创建.babelrc文件5，创建项目目录并编写代码6，修改package.json文件package.json依赖1，初始化npm新建文件夹react-admin，在该文件夹下打开cmd执行命令npm init -y2，安装webpack和webpack-clinpm install --save-dev webpack webpack-cli3，安装rea
2022-02-09 23:19:02
459
原创 promise基本使用
文章目录创建Promise.prototype.then()Promise.prototype.catch()Promise.prototype.finally()Promise.all()Promise.race()Promise.resolve()创建Promise 对象是由关键字 new 及其构造好函数创建的。该构造函数会接受一个函数（“处理器函数”）作为参数。这个处理器函数接受两个函数–resolve和reject作为其参数。当异步任务顺利完成且返回结果值时，会调用resolve函数；当异步任务
2022-01-22 21:43:54
364
原创 git命令学习
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2021-12-02 21:35:34
110
原创 react hook之useState
HooK是react16.8的新增特性，它可以让你在不编写class的情况下使用state以及其他的react的特性使用useState()进行状态管理// 引用useState的钩子import React, { useState } from 'react';function App() { // 声明一个叫 checked 的state变量，并初始化为false const [checked, setChecked] = useState(false) return ( &
2021-10-20 13:37:49
477
原创 react条件渲染
在React 中，你可以创建不同的组件来封装各种你需要的行为。然后，依据应用的不同状态，只渲染对应状态下的部分内容。React中的条件渲染和javascript中的一样，使用javascript运算符if或者条件运算符去创建元素来表现当前的状态，然后让React根据他们来更新UI。使用if…else…语句class App extends React.Component { state = { isLogin: true } logout = () => { this
2021-08-29 23:01:27
218
原创 ES6中class的学习笔记
类的由来javascript语言中，生成实例对象的传统方法是通过构造函数。ES6提供了更接近传统语言的写法，引入了Class(类)的概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6的class可以看做只是一个语法糖，它的绝大部分功能，ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更加像面向对象编程的语法而已。使用class声明类class Person { constructor(name, age) { this.name = name; thi
2021-08-22 19:05:03
92
原创 react学习笔记之创建组件
函数组件react中创建组件最简单的方式就是编写一个javascript函数function MyComponent(props) { return ( <div>hello {props.name}</div> )}React.class组件
2021-08-16 11:32:00
97
原创 react入门学习笔记
1，新建一个HTML文件并引入react相关的js<!DOCTYPE html><html> <head> <meta charset="utf-8"> <!-- 引入react核心库 --> <script src="./react.development.js"></script> <!-- 引入react-dom 用于react操作dom --> <scr
2021-08-01 00:58:32
111
原创 JavaScript学习笔记数组的from
Array.from()方法从一个类似数组或者可迭代的对象创建一个新的，浅拷贝的数组实例。语法：Array.from(arrayLike[, mapFn[, thisArg]])arrayLike：想要转换成数组的类数组对象或可迭代对象。mapFn：（可选）如果指定了该回调函数，则新数组中的每个元素都会执行该函数。thisArg：（可选）执行回调函数时，指定的this的值。返回值：一个新的数组实例。描述：Array.from() 可以通过以下方式创建新的数组1.伪数组对象：拥有一个le
2021-07-01 22:58:21
232
1
原创 javascript学习笔记数组reduceRight
reduceRight方法接受一个回调函数和一个初始值(可选)，将数组中的元素(从右向左)汇总为一个返回值。语法array.reduceRight(callback(accumnlator, currentValue[, index[, array]]) {…}[, initValue])array：调用reduceRight方法的数组callback：用户操作数组中每个元素的回调函数，可以接受四个参数 accumnlator：累加器，上一次调用回调
2021-06-10 22:18:25
154
原创 JavaScript数组reduce
reduce方法对数组中的每个元素执行一次reduce函数，将其结果汇总为单个返回值。语法arr.reduce(callback(accumulator, currentValue[, index[, array]])[,initValue])// 参数callback：执行数组中每个值（如果没有提供initValue，则第一个值除外）的函数，包含四个参数。 accumnlator：累计器累计回调的返回值，它是上一次调用回调时累计的返回值，或initValue。 currentValue：正
2021-05-27 21:10:44
141
1
原创 JavaScript 扩展运算符（...）
数组的用法1，数组拷贝const arr = [1, 2, 3, 4];const arr2 = [...arr];arr2.push(5)console.log(arr); // [1, 2, 3, 4]console.log(arr2); // [1, 2, 3, 4, 5]2，连接多个数组在这里插入代码片
2021-05-18 22:01:47
121
原创 vue 计算属性VS方法和侦听器
vue的计算属性就是当其依赖的属性值发生改变的时候，这个属性值也会自动发生更新，和它相关的DOM部分也会同步发生更新。<div id="app"> <div>姓: <input type="text" v-model="firstname"></div> <div>名: <input type="text" v-model="lastname"></div> <div>姓名: {{fullname}
2021-05-15 22:29:50
99
原创 JavaScript 数组之includes
文章目录includes 方法用来判断数组中是否包含一个指定的值。根据情况，如果包含返回true否则返回false语法：arr.includes(value[，index])value：需要查找的元素index：（可选）从index索引处开始查找value的值，默认为0。如果为负值，则相当于从arr.length+index的索引处开始查找。返回值：如果在数组中找到了指定的值就返回true否则返回falseconst arr = ['red', 'green', 'blue', 'gray'
2021-05-09 21:44:06
1290
原创 JavaScript 数组之flat和flatMap
文章目录flatflatMapflatflat 方法会按照一个指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回语法：arr.flat([depth])depth：（可选）指定要提取嵌套数组的结构深度，默认值为1返回值：一个包含将数组与子数组中所有元素的新数组const arr = [1, 2, [3, 4]]arr.flat() // [1, 2, 3, 4]const arr1 = [1, 2, [3, 4, [5, 6]]]arr1.flat()
2021-04-21 22:13:45
570
原创 JavaScript 数组之map
文章目录mapmapmap 方法创建一个数组，其结果是该数组中每个元素调用一次回调函数的返回值语法：arr.map(function callback(currentValue[, index[, array]]) {}[, thisArg])callback：遍历数组中每个元素的回调函数，可以传入三个参数 currentValue：回调函数正在处理的数组中的当前元素 index：（可选）数组中正在处理的元素的索引 
2021-04-20 22:04:49
282
原创 JavaScript 数组之find和findIndex
文章目录findfindIndexfindJavaScript 数组之find方法对数组中的元素进行查找，findIndex
2021-04-06 20:40:48
301
原创 JavaScript 数组之some
文章目录some 方法对数组中的每一个元素进行一次回调函数，如果有一个元素通过测试，就返回true否则返回false语法：
2021-03-22 11:53:57
190
原创 JavaScript 节流和防抖
文章目录防抖节流防抖let timeout = null;/** * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数 * * @param {Function} func 要执行的回调函数 * @param {Number} wait 延时的时间 * @param {Boolean} immediate 是否立即执行 * @return null */function debounce(func, wait = 500, immediate = false
2021-03-16 16:52:22
39
原创 JavaScript 数组之forEach
文章目录forEach 方法对数组中的每个元素执行一次给定的函数语法：arr.forEach(callback(currentEle[, index[, array]])[, thisArg])callback：为数组中每个元素执行的回调函数，该函数接收一到三个参数 currentEle：数组正在处理的当前元素 index：（可选）数组正在处理的当前元素的下标 array：（可选）方法正在操作的数组本身thisArg：（
2021-03-12 19:59:08
100
原创 JavaScript export和import学习笔记
文章目录export 和 import 是es6模块的一个功能，下面主要记录一下几种常见的用法１，导出 / 导入单个模块a.js 导出：export const username = ‘huluwa’b.js 导入：import { username } from ‘a.js’２，导出列表a.js 导出：export const username = ‘huluwa’ export const userage = 20b.js 导入：import { username, us
2021-03-05 21:39:18
195
原创 javascript var、let和const的学习笔记
文章目录var作用域javascript中除了var可以声明一个变量外，es6又增加了let和const也可以声明变量。下面简单记录一下这三种方法的区别。var作用域因为javascript在es6之前只有全局作用域和函数作用域，所以var声明的变量只是这两种作用域1，全局作用域：在函数外声明的变量的作用域就是全局的，全局变量在javascript运行的任何地方都可以访问var name = 'huluwa' // 全局变量function myName() { console.log(n
2021-02-27 19:30:18
125
转载 CSS display：flex弹性布局学习笔记
文章目录容器的属性flex-directionflex-wrapflex-growflex-shrinkFlex是Flexible Box的缩写，意思是弹性布局，通常被称为flexbox。它给flexbox的子元素提供了强大的空间分布和对齐能力。采用flex布局的元素称为flex容器，简称容器。此元素下的所有子元素自动成为容器成员，称为flex项目，简称项目。容器默认存在两个轴：水平的主轴和垂直的交叉轴。项目默认沿着主轴排列。容器的属性flex-directionflex-wrapfle
2021-02-26 18:33:54
237
1
原创 JavaScript 数组之concat
concat方法用于对两个或两个以上的数组/值进行合并，返回一个新的数组，不会改变原数组。语法：array.concat(value1[，…，valueN])返回值：一个新的数组value：一个数组或值，如果省略所有的value参数则会返回调用该方法的数组的一个浅拷贝...
2021-02-16 20:59:22
272
原创 JavaScript 数组的常用方法之push、pop、shift、unshift
文章目录一、push二、使用步骤1.引入库2.读入数据总结一、pushpush方法是在数组的末尾添加元素，返回添加元素后数组的长度。该方法会改变原数组。语法：arr.push( element，…，elementN )返回值：添加元素后的数组的长度const array = [1,2,3]const result = array.push(4)// array [1,2,3,4]// result 4二、使用步骤1.引入库代码如下（示例）：import numpy as n
2021-02-13 21:30:25
630
1
原创 JavaScript string的split使用方法
JavaScript的split方法主要是通过以指定的分隔符为边界把一个字符串分割成一个数组。通过传入第二个参数可以限制返回的数组的长度。语法：str.split( str|reg, length)str|reg：字符串或者正则表达式，从该参数处分割字符串length：该参数可指定返回的数组的长度返回值：一个数组。该数组是通过分隔符为边界把字符串分割而创建的，返回的数组中的不包括该分隔符。const str = 'hello word'str.split() // ['hello wo
2021-02-09 21:08:16
685
原创 JavaScript string的replace和replaceAll的基本使用方法
文章目录一、replace二、replaceAll1.引入库2.读入数据总结一、replacereplace方法可以根据传入的第一个参数对原字符串进行匹配，然后使用第二个参数对匹配到的字符进行替换，返回一个新字符串。语法：str.replace( str | reg ，str | func )第一个参数可以是字符串或正则，第二个参数可以是字符串或函数返回值：一个部分替换或者全部替换的新字符串。根据参数的类型不同，返回的结果也会有变化//第一个参数是字符串，第二个参数也是字符串。这个时候
2021-02-04 19:51:37
572
原创 JavaScript string中repeat的使用方法
文章目录一、repeat二、使用步骤1.引入库2.读入数据总结一、repeat示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seaborn as snsimport warningswarnings.filterwarnings('ignore')impo
2021-01-31 17:28:02
902
原创 JavaScript string的trim，trimStart和trimEnd的基本使用方法
文章目录一、trim二、trimStart1.引入库2.读入数据总结一、trimtrim方法可以对字符串的前后两端删除空白字符。语法：str.trim()返回值：返回一个删除原字符串头尾空格的新字符串，不会改变原字符串const str = ' hello word '二、trimStart1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport sea
2021-01-30 18:44:28
1950
2
原创 JavaScript string的match和matchAll基本使用方法
文章目录一、match二、matchAll总结一、matchmatch() 方法返回一个字符串匹配正则表达式的结果str.match(reg)reg：一个正则表达式对象，如果传入的不是正则表达式，则会隐式的调用new RegExp(obj) 将其转为正则表达式。如果不传则会返回一个包含空字符串的数组[""]返回值：1，如果reg使用g(全局搜索)标志，则返回字符串与正则表达式匹配的所有结果组成的数组，如果没有匹配的字符串则返回null2，如果reg没有使用g(全局搜索)标志，则返回第
2021-01-27 21:31:45
14615
1
原创 JavaScript string的padStart和padEnd的使用
文章目录一、padStart二、padEnd一、padStartpadStart() 方法是在当前字符串的头部填充字符串到指定目标长度语法：str.padStart（length[，padStr]）length：填充的目标长度，如果小于当前字符串的长度则会忽略padStr：填充的字符串，默认为空字符串("")返回值：在当前字符串头部填充字符串到指定目标长度的新字符串const str = 'abcde'str.padStart(10) // ' abcde' 不传
2021-01-22 18:34:53
470
原创 JavaScript string中includes、startsWith和endsWith的使用
文章目录前言一、includes二、startsWith1.引入库2.读入数据总结前言JavaScript string的这三个方法都是根据参数的字符串返回true或false一、includesincludes() 方法判断一个字符串中是否包含传入的参数字符串，如果有返回true，否则返回false语法：includes（valueStr, [fromIndex] ）valueStr：搜索的字符串fromIndex：从当前字符串的哪个索引位置开始搜索，默认值为0返回值：
2021-01-21 21:34:17
661
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人