当前位置: 首页 > news >正文

前端知识点复盘

组件和jsx

<body><div id="root"></div><script type="text/babel">const root = ReactDOM.createRoot(document.getElementById("root"))class App extends React.Component {render() {return (<div> <h1>sherry</h1><input type="search" /></div>)}}root.render(<App />)</script>
</body>

箭头函数

普通函数: function(){}
箭头函数()=>{}
只有一个参数的时候我们不需要为参数添加上括号,只有一个表达式的时候可以不添加大括号,箭头函数会自动返回箭头后面的处理结果
1.箭头函数不能用new来创建构造函数的实例,普通函数可以(因为箭头函数创建的时候程序不会为它创建construct方法,也就是没有构造能力,用完就丢掉了,不像普通函数重复利用,因此也不需要构造函数原型,也就是不会自动生成prototype属性)
2.程序不会给箭头函数创建arguments对象
3.普通函数中的this是动态的,而箭头函数中的this指向的是紧紧包裹箭头函数的那个对象(定义时决定的)
4.箭头函数不能通过bind、call、apply来改变this的值,但依然可以调用这几个方法(只是this的值不受这几个方法控制)
在这里插入图片描述

插值与状态

map

map
直接写state也行,用constructor写state也行

class 类

class和new

class App{}
class首字母小写,类名首字母大写
创建实例var xx = new name();

类 constructor 构造函数

创建类–类名后面不要加小括号,生成实例–类名后面加小括号,构造函数不需要加 function 关键字

自定义方法

不需要加function关键字,不需要this

extends和super
static

静态方法
类里面的this指向:
constructor 里面的 this指向实例对象
方法里面的this指向这个方法的调用者
静态方法里的this指向类本身,用类来调用静态方法,而不是用实例去调用静态方法。一个静态方法可以调用另一个静态方法
凡是被static修饰的属性和方法都是静态方法和属性,只能被类名调用,不能被实例化对象调用.同时也不能被子类继承,换句话说它属于当前这个类的.
static

挂载和状态设置

先呈现轮廓,再把外面获取回来的数据呈现到页面上
component DidMount组件挂载完毕后再执行这个方法里面的内容

Fetch

fetch请求地址之后会返回一个promise,我们可以用promise的方法操作服务器响应的内容
get请求

fetch(url).then(response =>reponse.json())
.then(data=>console.log(data));                                                                                                                                                                                                                                                                                                                                                                          

post请求

fetch(url,
{method:‘POST’,
body:JSON.stringify({name:input.value}),
headers:{
'Content-Type':'application/json'
},
).then(response =>reponse.json())
.then(data=>console.log(data));                                                                                                                                                                                                                                                                                                                                                                          

ajax

通过js操控浏览器内建的XMLhttprequest构造函数与服务器取得联系
构造函数,所以可以创建新的实例对象,有自己的属性方法

promise

// 创建一个新的p对象promise
const p = new Promise((resolve, reject) => { // 执行器函数// 执行异步操作任务setTimeout(() => {const time = Date.now() // 如果当前时间是偶数代表成功,否则失败if (time % 2 == 0) {// 如果成功,调用resolve(value)resolve('成功的数据,time=' + time)} else {// 如果失败,调用reject(reason)reject('失败的数据,time=' + time)}}, 1000);
})p.then(value => { // 接收得到成功的value数据 onResolvedconsole.log('成功的回调', value)  // 成功的回调 成功的数据,time=1615015043258},reason => { // 接收得到失败的reason数据 onRejectedconsole.log('失败的回调', reason)    // 失败的回调 失败的数据,time=1615014995315}
)

抽象表达:Promise是JS中进行异步编程的新的解决方案(旧方案是单纯使用回调函数)

---- 异步编程 ①fs 文件操作 ②数据库操作 ③Ajax ④定时器

具体表达:
①从语法上看:Promise是一个构造函数 (自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法)
②从功能上看:promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

阮一峰的解释:
所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果
从语法上说,Promise 是一个对象,从它可以获取异步操作的消息
Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理

HTTP

客户端和服务端
状态码: 2** 成功
3** 重定向
4** 客户端错误
5** 服务端错误
响应首部:content-type 内容类型

闭包

闭包(closure)指有权访问另一个函数作用域中变量的函数。一个里层函数加上一个变量一起构成的

简单理解就是,一个作用域可以访问另一个函数内部的局部变量。
闭包不一定有return
不一定有内存泄漏
实现数据的私有

生命周期

代码的执行顺序:
constructor,componentDidMount和render方法的执行顺序为:
构造函数,渲染,组件挂载

相关文章:

前端知识点复盘

组件和jsx <body><div id"root"></div><script type"text/babel">const root ReactDOM.createRoot(document.getElementById("root"))class App extends React.Component {render() {return (<div> <h1>s…...

前端JavaScript获取图片文件的真实格式

常见方式判断图片格式 当我们进行前端开发&#xff0c;需要处理图片上传功能&#xff0c;针对图片格式做判断时&#xff0c;常规的方法都是使用文件后缀名来判断&#xff0c;如下代码所示&#xff1a; input.addEventListener(change, (e) > {const file e.target.files[…...

今天面了一个来华为要求月薪25K,明显感觉他背了很多面试题...

最近有朋友去华为面试&#xff0c;面试前后进行了20天左右&#xff0c;包含4轮电话面试、1轮笔试、1轮主管视频面试、1轮hr视频面试。 据他所说&#xff0c;80%的人都会栽在第一轮面试&#xff0c;要不是他面试前做足准备&#xff0c;估计都坚持不完后面几轮面试。 其实&…...

11 Advanced CNN

文章目录GoogLeNetInception Module1x1 Conv计算效果代码实现总结ResNet (残差网络)问题引入梯度消失与传统神经网络的比较代码实现课程来源&#xff1a; 链接对于前篇中所提到问题&#xff0c;设计出的是一种类似于LeNet5的线性结构&#xff0c;而对于大多数问题&#xff0c;简…...

亿级高并发电商项目---万达商城项目搭建(二)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是小童&#xff0c;Java开发工程师&#xff0c;CSDN博客博主&#xff0c;Java领域新星创作者 &#x1f4d5;系列专栏&#xff1a;前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶 &#x1f4…...

UML术语标准和分类

一、UML术语标准 1&#xff0e;中文UML术语标准 中国软件行业协会&#xff08;CSIA&#xff09;与日本UML建模推进协会&#xff08;UMTP&#xff09;共同在中国推动的UML专家认证&#xff0c;两个协会共同颁发认证证书、两国互认&#xff0c;CSIA与UMTP共同推出了UML中文术语…...

LeetCode 刷题系列 -- 151. 反转字符串中的单词

给你一个字符串 s &#xff0c;请你反转字符串中 单词 的顺序。单词 是由非空格字符组成的字符串。s 中使用至少一个空格将字符串中的 单词 分隔开。返回 单词 顺序颠倒且 单词 之间用单个空格连接的结果字符串。注意&#xff1a;输入字符串 s中可能会存在前导空格、尾随空格或…...

二十二、Gtk4-ListView

GTK 4添加了新的列表对象GtkListView、GtkGridView和GtkColumnView。这个新特性在Gtk API参考—列表小构件概述中有描述。 GTK 4还有其他实现列表的方法。它们是GtkListBox和GtkTreeView&#xff0c;它们是从GTK 3接管的。在Gtk开发博客中有一篇关于Matthias Clasen所写的列表…...

ASP.NET Core3.1实战教程---基于Jquery单文件上传

这个必须记录一下费劲啊&#xff01;废了我2天的时间&#xff0c;昔日的net快速已经没落....就文件上传都这么费劲。 先说下要求&#xff08;在线apk文件上传实现手机端整包更新&#xff09;&#xff1a; 1、为了简化需求文件上传和数据提交分开执行 2、选完文件后按钮变成上…...

10 卷积神经网络CNN(基础篇)

文章目录全连接CNN过程卷积过程下采样过程全连接层卷积原理单通道卷积多通道卷积改进多通道总结以及课程代码卷积改进PaddingStride下采样过程大池化层&#xff08;Max Pooling&#xff09;简单卷积神经网络的实现课程代码本篇课程来源&#xff1a; 链接部分文本来源参考&#…...

Windows下LuaBridge2.8的环境配置及简单应用

Windows下LuaBridge2.8的环境配置及简单应用 LuaBridge2.8下载链接&#xff1a; https://github.com/vinniefalco/LuaBridge/tags 关于Lua的环境配置可参考以下链接&#xff08;这里不做简述&#xff09;&#xff1a; https://ufgnix0802.blog.csdn.net/article/details/125341…...

每天10个前端小知识 【Day 10】

前端面试基础知识题 1. es5 中的类和es6中的class有什么区别&#xff1f; 在es5中主要是通过构造函数方式和原型方式来定义一个类&#xff0c;在es6中我们可以通过class来定义类。 class类必须new调用&#xff0c;不能直接执行。 class类执行的话会报错&#xff0c;而es5中…...

【LeetCode】1223. 掷骰子模拟

1223. 掷骰子模拟 题目描述 有一个骰子模拟器会每次投掷的时候生成一个 1 到 6 的随机数。 不过我们在使用它时有个约束&#xff0c;就是使得投掷骰子时&#xff0c;连续 掷出数字 i 的次数不能超过 rollMax[i]&#xff08;i 从 1 开始编号&#xff09;。 现在&#xff0c;…...

SPSS数据分析软件的安装与介绍(附网盘链接)

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

2022年38女神节大促美妆、珠宝、母婴、保健电商数据回顾

近期&#xff0c;我们陆续接收到了品牌商家朋友们对于2022年女神节大促期间部分品类的数据需求&#xff0c;希望能对今年的大促活动有一个更宏观的认知、更精准的预测&#xff0c;从而拿到更好的数据效果。 为此&#xff0c;在距离大促开启一个月的备货阶段&#xff0c;鲸参谋决…...

Java笔记-线程同步

目录线程的同步---以三个窗口售票100张为例方式一&#xff1a;同步代码块方式二&#xff1a;同步方法使用同步机制的作用&#xff1a;线程的同步—以三个窗口售票100张为例 &#xff08;1&#xff09;问题&#xff1a;卖票的过程出现重票和错票 &#xff08;2&#xff09;原因…...

通过python 调用OpenAI api_key提交问题解答

通过python 调用OpenAI api_key提交问题解答✨可以通过网页版的jupyter notebook调用&#xff0c;也可以通过spyder窗口等IDE窗口. &#x1f33c;通过python 调用OpenAI api_key接口&#xff0c;可以避免国内网页不能访问的问题。前提是需要自己已经注册了OpenAI帐号&#xff…...

图表控件LightningChart .NET再破世界纪录,支持实时可视化 1 万亿个数据点

LightningChart.NET SDK 是一款高性能数据可视化插件工具&#xff0c;由数据可视化软件组件和工具类组成&#xff0c;可支持基于 Windows 的用户界面框架&#xff08;Windows Presentation Foundation&#xff09;、Windows 通用应用平台&#xff08;Universal Windows Platfor…...

什么是响应性?

响应性&#xff1a; 这个术语在今天的各种编程讨论中经常出现&#xff0c;但人们说它的时候究竟是想表达什么意思呢&#xff1f;本质上&#xff0c;响应性是一种可以使我们声明式地处理变化的编程范式。一个经常被拿来当作典型例子的用例即是 Excel 表格&#xff1a; 这里单元…...

黑马】后台管理176-183

一、新建订单管理的分支二、创建一个订单管理的vue文件进行组件页面的路由配置import Order from ../components/order/Order.vue{path:/orders,component:Order},注意上面的components不要忘记少加一个s&#xff01;三&#xff0c;获取后台数据面包屑导航粘贴过来文本输入框&a…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

基于stm32F10x 系列微控制器的智能电子琴(附完整项目源码、详细接线及讲解视频)

注&#xff1a;文章末尾网盘链接中自取成品使用演示视频、项目源码、项目文档 所用硬件&#xff1a;STM32F103C8T6、无源蜂鸣器、44矩阵键盘、flash存储模块、OLED显示屏、RGB三色灯、面包板、杜邦线、usb转ttl串口 stm32f103c8t6 面包板 …...

SQL进阶之旅 Day 22:批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...