- 博客(37)
- 收藏
- 关注
原创 8 个 Promise 高级用法
promise 的 then 的第二个回调函数和 catch 在请求出错时都会被触发,咋一看没什么区别啊,但其实,前者不能捕获当前 then 第一个回调函数中抛出的错误,但 catch 可以。,当后面跟的是非 promise 对象的值时,它会将这个值使用 promise 对象包装,因此 await 后的代码一定是异步执行的。,这么神奇的输出顺序是如何做到的呢,某人不才,使用了 20 行左右的代码简单实现了一番,如有与 koa 雷同,纯属巧合。三种状态,但例如下面的示例中,promise 最终是什么状态?
2023-08-09 17:29:09 198
原创 React类组件
类组件 最基础的形态就是声明一个类 并且继承 React.Compoent 类 在类组件内部 声明render函数 返回的值就是模板渲染内容 by dixon 对于组件的理解 一个组件就是一大段html及它相关逻辑的替代 什么是状态? 状态是state 单词的翻译 它是一种响应式的数据! 什么是响应式? 一旦状态发生变化那么使用到 状态的地方会自动更新视图 这是mvvm 框架 视图层面上最核心的概念class Cp1 exte...
2022-05-09 20:00:47 2277
原创 Jsx 入门
使用 ReactDOM.render 在指定的节点渲染 模板内容 这里说的模板 指的是一个jsx 内容 因为直接使用字符串会有一系列的不方便 比如说拼接 还有一些逻辑的使用等等 jsx 的本质 就是一个表达式!!! 表达式!!! 表达式!!! 使用jsx的第一目的就是 让我们能更像写html一样写模板 jsx的语法特征 1.jsx 只能有一个根节点 error: Adjacent JSX el...
2022-05-09 11:12:23 265
原创 JavaScript(http、本地存储)
Http:hyper Text transport protocol - 超文本传输协议协议:约定双方的利益和责任协议约束:客户端 服务器1.建立连接 - 3次握手2.进行通信①客户端给服务器发送消息 - 消息的格式必须是请求报文(1)请求行:请求方式 请求路径 协议/版本(2)请求头:包含请求信息的一些键值对(3)请求空行:空格换行,目的是为了区分前面的信息和后面的数据(4)请求主体:请求携带的参数,最终要给服务器传递的数据②服务器会给客户端被动响应消息 - 消..
2022-04-10 18:22:02 1025
原创 JavaScript(Ajax)
Ajax:async javascript and xml - 前端和后端进行交互的一种技术ajax:异步的js技术,作用是前端跟后端进行传递数据异步的js和xml - 在很久以前,数据都是以xml形式表现的 - 异步的js操作数据现在的数据,大多以字符串形式表现,因为所有语言中的字符串都是一样的前端攻城狮的工作:根据数据渲染页面1.获取数据 - 服务器中2.根据数据渲染Ajax - 语法 四步骤1.创建对象 - 创建电话var xhr = new XMLH...
2022-04-07 19:36:15 2189
原创 JavaScript(原型)
对象原型原型:任何对象天生都自带一个属性:__proto__ - 对应的值,也是一个对象 - 原型 / 原型对象var obj = { name: '张三'}// console.log(obj);// console.log( 111, obj.__proto__ );obj.__proto__.name = '李四'console.log(obj.name); // 自己的nameconsole.log(obj);原型的作用:对象就天生就能使用自带的原型...
2022-03-31 21:04:26 1054
原创 JavaScript(面向对象)
面向:终极目标:为了分工合作面向过程:重视一件事情的整个过程面向对象:重视一件事的参与对象定义对象var obj = {} // 字面量方式var pbj = new Object() // 构造函数方式两者一样工厂函数使用函数方式解决同类型对象的重复定义function fn(name, age) { // 工厂函数:批量生产对象的 var obj = { name: name, age: age } .
2022-03-31 20:10:44 617
原创 JavaScript(正则)
正则学习目标:1.会做简单的用户名密码的规则 - 表单验证2.手机号的规则 - 表单验证3.邮箱的规则 - 表单验证4.学会如何从地址栏中提取一段想要的数据 - 提取数据用于处理字符串的规则js语法中,表现为一个对象正则表达式的定义var reg = /具体的规则/var reg = new RegExp(具体的规则)使用正则的5个方法1.验证字符串: 正则.test(字符串) 字符串.search(正则)2.提取...
2022-03-30 16:40:01 1404
原创 JavaScript(ES6)
let和const是es6新增的定义变量的两个关键字,使用语法跟var是一样的,跟var的区别:1.没有预解析2.全局变量不在window中3.不能重复定义4.会创建一个块级作用域,碰到大括号会重合作用域const的值不能改变 - 常量定义语法 letlet是es6中新增的定义变量的关键字,使用方式跟var是一样的var a = 10let b = 20console.log(a, b);var和let的区别1.let定义的变量没有预解析con..
2022-03-25 21:06:09 1243
原创 JavaScript(数组塌陷)
数组塌陷演示var arr = [1,2,3,4,5,6]for(var i=0; i<arr.length; i++){ arr.splice(i.1)}console.log(arr) //[2,4,6}解决方法1.倒着删除var arr = [1,2,3,4,5,6]for(var i=arr.length-1; i>=0; i--) { arr.splice(i, 1)}2.每次删除 i--var arr = [1,2,3,..
2022-03-25 19:16:39 802
原创 JavaScript(事件二)
事件对象事件对象的获取方式: 1.通过一个形参来接收 2.通过window.event来接收 === event var e = e || window.event // console.log(event); // console.log(event === e); // true // console.log(event === window.event); // true事件对象 - 系统在调用事件函数传入了一个实参对象,这个对象就...
2022-03-24 21:51:08 810
原创 JavaScript(DOM)
DOM:document object model - 文档对象模型利用对象模型操作html文档的顶层对象 - documenthtml 基本结构标签html - console.log(document.documentElement)body -console.log( document.body );head - console.log( document.head)文本 - title - console.log...
2022-03-24 19:26:53 828
原创 JavaScript(事件)
事件定义用户在网页中的行为叫做事件学习事件的目的:希望能自定义的让用户在网页中进行某种行为之后,去执行写好一段代码语法:事件源:on事件类型 = 函数行内绑定:<标签 on 事件类型 = " 一行js代码或函数调用 "> </标签>事件源:用户在触发事件的时候使用哪个标签 - 标签 - 获取标签事件类型 - 用户在进行哪种行为;1.鼠标类事件 描述 click 单击 dblclick 双击 m...
2022-03-23 20:43:40 341
原创 JavaScript(BOM)
BOM - browser object model - 浏览器对象模型顶层对象:window我们最终是使用对象的模型(对象嵌套对象形成的结构)来操作浏览器对象模型中最顶层的结构,最大的对象:window - 系统内置:代表浏览器窗口console.log(window); // object对于浏览器的多种操作,window会内置很多小对象分别负责某一种操作location - 用于操作浏览器的地址栏3个属性 href - 完整地址跳转页面sethref...
2022-03-22 21:59:14 573
原创 JavaScript(进制换行与时间日期)
10进制转其他进制的方法:toString语法:10进制数字.toString(目标进制) - 返回转成目标进制后的数组,且以字符串形式显示var num = 5// 转成2进制var res = num.toString(2)console.log(res);var num = 12// 将num转成8进制var res = num.toString(8)console.log(res);var num = 12// 转成16进制var res = num.toStri
2022-03-20 23:32:58 263
原创 JavaScript(获取时间戳)
10进制转其他进制的方法:toString语法:10进制数字.toString(目标进制) - 返回转成目标进制后的数组,且以字符串形式显示var num = 5// 转成2进制var res = num.toString(2)console.log(res);var num = 12// 将num转成8进制var res = num.toString(8)console.log(res);var num = 12// 转成16进制var res = num.toStri
2022-03-20 23:19:40 577
原创 JavaScript(Math)
Math是js内置的一个对象console.log(Math);我们要学习的就是Math中的属性和方法 - 这些属性和方法都是有关于数学类的操作 Math.PI - 圆周率 Math.random() - 随机数 - 重点:获取某个范围内的随机数 Math.ceil() - 向上取整 Math.floor() - 向下取整 Math.round() - 四舍五入 Math.pow() - 求次方 Math.sqrt() - 求开...
2022-03-20 22:57:18 574
原创 JavaScript(字符串)
字符串1.字符串可以取下标,通过下标可以获取到对应的字符2.字符串是只读数据,不能修改原字符串3.字符串的长度:字符串.length字符串的比较字符串比较:比较规则:逐字符比较,字符大小由阿斯克码决定的排在后面的字母更大,小写字母比大写字母更大,字母比数字更大需要记忆的阿斯克码:数字:0~9 48~57大写字母:A~Z 65~90小写字母:a~z 97~122阿斯克码:ASCII - 美国信息交换标准代码计算机最早产生的时候,计算只能...
2022-03-20 15:54:11 718
原创 JavaScript(ES5特性)
ES:ECMAScript简称ES - ECMA公司制定的规范ES5:ECMA语法规范第5个版本ES5研究两个特性:1.ES5新增的语法 - 严格模式2.ES5新增了一些数组的方法1.严格模式总结:严格模式的开启:1.在全局的最上面,添加字符串: 'use strict'2.在局部的最上面,添加字符串: 'use strict'严格模式的特性:1.不允许省略var定义变量2.不允许函数形参同名3.不允许普通函数中的this代表window - un
2022-03-20 15:40:31 868
原创 JavaScript(数组二冒泡、选择排序,去重)
sort方法可以进行排序,要学习的这两个排序方式,是实现sort内部排序的原理如果有一天sort方法不能用了,我们也可以手动将数组进行排序这两种排序方式是一些算法的基础,最简单的算法冒泡排序:每相邻的两个元素进行大小比较,排除合适的顺序var arr = [4,3,2,1];需求:将arr进行升序排列/*冒泡原理:3 和 2 进行比较,不符合我们规则,就交换这两个值的顺序 - 2 3 13 和 1 进行比较,不符合我们规则,就交换这两个值的顺序 - 2 1 32
2022-03-20 15:29:47 361
原创 JavaScript(数组方法)
数组方法一的增删操作: 开头添加:unshift 开头删除:shift 结尾添加:push 结尾删除:pop 在任意位置增、删、改:splicevar arr = ['a', 'b', 'c', 'd', 'e', 'f']给数组的开头添加一个或多个元素:数组.unshift(一个值或多个值) - 返回添加以后的新数组的长度对象的方法:对象中的键值对是一个函数 调用方式:对象.方法名()给数组的开头删除一个元素:数组.shift() ...
2022-03-20 15:13:57 149
原创 JavaScript(基础类型与引用类型)
基础类型和引用类型数据类型:number/string/boolean/undefined/object/function数据类型:number/string/boolean/undefined/null/{}/[]/function在js中没有null类型,没有数组类型,数据类型:object类型根据每种数据类型存储方式和赋值方式的不同,将所有数据类型分成2大类:1.基础类型:number/string/boolean/undefined/null2.引用类型:{}/[]/.
2022-03-20 14:01:44 132
原创 JavaScript(数组一)
object - 对象类型这种类型的数据,有3种表现形式:null - 空{} - 俗称对象[] - 俗称数组,也是使用一个大的内存空间来存放多个小的内存空间,大空间中的小空间之间是有顺序的数组的定义 - 数组:Array语法:var arr = []var arr = new Array() - 系统提供了各种构造函数用来创建各种数据// 数组的细节:1.数组中存放的数据,类型是没有限制的,可以存放任意类型的数据2.数组中小空间的编号,永远都是从0开.
2022-03-20 13:50:17 422
原创 JavaScript(作用域链)
作用域可以相互嵌套的,作用域嵌套形成的链式结果 - 作用域链作用域链规则1.我们在任何一个地方使用(当做值去赋值、运算、输出的时候)一个变量的时候,会先在当前使用的作用域中找变量的定义,如果找到了,就使用成功;如果没有找到,就去上一级作用域找,找到了,就使用上一级作用域的变量,如果没有找到,继续去上一级作用域找直到全局,如果全局找到了,就使用全局变量,如果全局没有找到,报错2.当我们在任何一个地方给一个变量赋值时,会先在当前作用域中找变量的定义,如果找到了,就给他赋值,如果没有找..
2022-03-12 10:54:58 1367
原创 JavaScript ( 预解析 )
<script>// 预解析:教如何看懂代码的执行过程// js的执行过程:/*1.解析 - 预解析2.执行 - 然后,代码按照预解析的结果顺序执行*/// 预解析具体在做什么?/*就在所有代码中找变量的定义和函数的定义(非赋值式函数)。找到之后,将变量的定义和函数的定义提升到所有代码的最前面*/// function fn() {// }// demovar a = 4; console.log(a); a = 6;...
2022-03-10 21:02:07 861
原创 JS (if条件中的细节)
<script>// if(条件) {// 当条件为true的时候执行的代码段// }// if(!isNaN(123)) {// console.log('这是个数字');// }// if(false) {// console.log('假的');// } else {// console.log('真的');// }// 任何内容都可以放在小括号中,会有一个隐形的类型转化,最终都转化为布尔值了if(0) {console.
2022-03-08 19:34:41 163
原创 JavaScript (比较关系:相等与全等)
<script>var a = 1var b = '1'// // 相等 == // // 直接比较值是否相等,不比较类型var c = a == bconsole.log(c);// // 全等 ===// // 先比较类型是否相等,然后如果类型不相等的话,直接就得到false结果了,如果类型相等了,再比较值是否相等var d = a === bconsole.log(d);</script>...
2022-03-08 10:55:16 377
原创 让 div 水平并垂直居中(方法 1~6)下
方法五 给父标签tent-alian:center;line-height:父标签的高;给子标签display:inline-block;vertical-align:middle;给予标签旁边添加空span方法六<style> .small { width: 100px; height: 100px; background-color: #f00; grid-area: a; }...
2022-03-02 20:56:42 77
原创 让 div 水平并垂直居中 定位
<style>.方法四box4{ width: 300px; height: 300px; border: 2px solid green; /* background-color: pink; */ /* margin: 100px auto; */ /* 相对定位 */ position:...
2022-03-02 20:54:35 110
原创 HTML(让 div 水平并垂直居中)
<style> body { margin: 0; height: 5000px; }方法一 .box1 { width: 300px; height: 300px; background: orange; /* position: absolute; */ ...
2022-03-02 20:52:30 98
原创 CSS清除浮动方法二
方法二在浮动元素的清标签的伪元素选择器:after中清除浮动 - 类似于空div<style> .box1 {width: 100px;height: 100px;background-color: #f00;float: left;} .box2 {width: 200px;height: 200px; background-color: #0f0;} .box:after { ...
2022-03-02 14:52:23 70
原创 CSS 清除浮动(方法一)
方法一:给收到浮动影响的元素添加overflow:hidden 因为overflow属性会触发BFC( BFC : block formatting centent 块级格式上下文 - 让元素强制的规则机子那个排列)<style> .box { overflow: hidden; } .small { width: 100px; height: 100px; float: le...
2022-03-02 14:45:12 63
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人