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

后盾人JS--JS值类型使用

news 文章来源：https://blog.csdn.net/chestnut_orenge/article/details/145080874 2025/2/6 21:53:24

章节介绍与类型判断

看看构造函数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd=[]let hdcms = {}console.log(hd instanceof Array)        //判断是否在原型链上（是否由这个构造函数创建出来console.log(hdcms instanceof Object)</script>
</body>
</html>

都是true

字符串转义与模板字面量使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = 'houdun\'人'console.log(hd)</script>
</body>
</html>

加个\就成了

模板字面量浅谈使用技巧

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let lessons= [{title:"媒体查询响应式布局"},{title:"FLEX弹性盒模型"},{title:"GRID栅格系统"}]function template(){return `<ul>${lessons.map(item=>`<li>${item.title}</li>`).join('')}</ul>`}document.body.innerHTML=template()
</script>
</body>
</html>

神奇的标签模板实例操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let name = '后盾人'let web = "houdunren.com"console.log(tag`在线教程${name}，网址是${web}`)function tag(strings,...vars){console.log(vars)console.log(strings)}</script>
</body>
</html>

打印出来是这样的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let lessons = [{ title: "后盾人媒体查询响应式布局", author: '后盾人向军' },{ title: "FLEX弹性盒模型", author: '后盾人' },{ title: "GRID栅格系统后盾人教程", author: '古老师' }]function template() {return `<ul>${lessons.map(item => links`<li>作者：${item.author},课程：${item.title}</li>`).join('')}</ul>`}function links(strings, ...vars) {return strings.map((str, key) => {      //将字符替换成链接return str + (vars[key] ? vars[key].replace("后盾人",`<a href="https://www.houdunren.com">     后盾人</a>`) : "")  //变量数量多}).join('')}document.body.innerHTML += template()</script>
</body></html>

这是把字符替换成链接了

字符串及基本函数使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><input type="text" name="password"><span></span><script>let ps = document.querySelector("[name='password']")ps.addEventListener('keyup',function(){this.value = this.value.trim()let error = " "let span = document.getElementsByTagName('span')if(this.value.length<5){error="密码不能小于五位"}span[0].innerHTML=error})</script>
</body>
</html>

可以做渐变（可能）效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = 'houdunren'for(let i =0;i<hd.length;i++){let span = document.createElement("span")span.style.fontSize = (i+1)*10+'px'span.innerHTML = hd[i]document.body.append(span)}</script>
</body>
</html>

字符串截取操作

让我们看一下字符串的截取操作

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>let hd = "houdunren.com"console.log(hd.slice(1,3))console.log(hd.substr(1,3))console.log(hd.substring(1,3))console.log(hd.slice(-3,-1))console.log(hd.substr(-3))console.log(hd.substring(-3,2))</script>
</body>
</html>

解锁字符串使用技巧

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>const hd = "houdunren.com"//从哪个位置开始找，找不到就是-1if (hd.indexOf('h') != -1) {console.log('找到了')}console.log(hd.includes("h",8))     //和上面的作用一样console.log(hd.startsWith('H'))     //返回布尔类型，看是否在开始console.log(hd.lastIndexOf('o',9))  //从后向前查</script>
</body></html>

这是数组的some方法

查找字符串方法：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const word = ["php","css"]const string = "我喜欢在后盾人学习php与css芝士"const status = word.some(word=>{console.log(word)return string.includes(word)})if(status){console.log('找到了')}</script>
</body>
</html>

字符串替换标题关键词

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>const hd = "houdunren.com"console.log(hd.replace('houdunren','hdcms'))const word = ["php" , "css"]const string = "我其实不喜欢学php和css"const repaceString = word.reduce((pre,word)=>{return pre.replace(word,`<a href="?w=${word}">${word}</a>`)},string)console.log(repaceString)document.body.innerHTML += repaceString</script>
</body>
</html>

好吧，好难理解

后盾人JS--JS值类型使用

章节介绍与类型判断看看构造函数 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</t…...

编程日记 2025/1/13 11:48:24

1月11日

[WUSTCTF2020]CV Maker 可以看到有个注册页面，尝试注册一个用户登进去看看进来后第一眼就看到文件上传，尝试上传，上传php后返回了文件上传后端检测exif_imagetype()函数他提示不是image，也就是需要我们构造一个文件头为图像类…...

编程日记 2025/1/13 11:36:13

【深度学习】Pytorch：加载自定义数据集

本教程将使用 flower_photos 数据集演示如何在 PyTorch 中加载和导入自定义数据集。该数据集包含不同花种的图像，每种花的图像存储在以花名命名的子文件夹中。我们将深入讲解每个函数和对象的使用方法，使读者能够推广应用到其他数据集任务中。 flower_ph…...

编程日记 2025/1/13 11:35:11

最近在盘gitlab.0.先review了一下docker

# 正文本猿所在产品的代码是保存到了一个本地gitlab实例上，实例是别的同事搭建的。最近又又又想了解一下，而且已经盘了一些了，所以写写记录一下。因为这个事儿没太多的进度压力，索性写到哪儿算哪儿，只要是新了解到的…...

编程日记 2025/1/13 11:34:10

OA项目登录

导入依赖,下面的依赖是在这次OA登录中用到的 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.sprin…...

编程日记 2025/1/13 11:29:05

verilogHDL仿真详解

前言 Verilog HDL中提供了丰富的系统任务和系统函数，用于对仿真环境、文件操作、时间控制等进行操作。（后续会进行补充） 正文一、verilogHDL仿真详解 timescale 1ns/1ps //时间单位为1ns，精度为1ps， //编译…...

编程日记 2025/1/13 11:28:03

基于http协议的天气爬虫

该系统将基于目前比较流行的网络爬虫技术， 对网站上的天气数据进行查询分析， 最终使客户能够通过简单的操作， 快速， 准确的获取目标天气数据。主要包括两部分的功能， 第一部分是天气数据查询， 包括时间段数…...

编程日记 2025/1/13 11:12:42

_STM32关于CPU超频的参考_HAL

MCU: STM32F407VET6 官方最高稳定频率：168MHz 工具：STM32CubeMX 本篇仅仅只是提供超频（默认指的是主频）的简单方法，并未涉及STM32超频极限等问题。原理很简单，通过设置锁相环的倍频系数达到不同的频率&am…...

编程日记 2025/1/13 11:10:40

C#，图论与图算法，任意一对节点之间最短距离的弗洛伊德·沃肖尔（Floyd Warshall）算法与源程序

一、弗洛伊德沃肖尔算法 Floyd-Warshall算法是图的最短路径算法。与Bellman-Ford算法或Dijkstra算法一样，它计算图中的最短路径。然而，Bellman Ford和Dijkstra都是单源最短路径算法。这意味着他们只计算来自单个源的最短路径。另一方面，Floy…...

编程日记 2025/1/13 11:09:38

AWS云计算概览（自用留存，整理中）

目录一、云概念概览 （1）云计算简介 （2）云计算6大优势 （3）web服务 （4）AWS云采用框架（AWS CAF） 二、云经济学 & 账单 （1）定…...

编程日记 2025/1/13 11:08:31

1. npm 常用命令详解

npm 常用命令详解 npm（Node Package Manager）是 Node.js 的包管理工具，用于安装和管理 Node.js 应用中的依赖库。下面是 npm 的一些常用命令及其详细解释和示例代码。镜像源 # 查询当前使用的镜像源 npm get registry# 设置为淘宝镜像源 …...

编程日记 2025/1/13 11:05:24

js：根据后端返回数据的最大值进行计算然后设置这个最大值为百分之百，其他的值除这个最大值

问： 现在tabData.value 接收到了后端返回的数据， [{text:人力,percentage：‘90’}，{text:物品,percentage：‘20’}，{text:物理,percentage：‘50’}，{text:服务,percentage&#xff…...

编程日记 2025/1/13 11:04:21

【Spring】@Size 无法拦截null的原因

问题复现在构建 Web 服务时，我们一般都会对一个 HTTP 请求的 Body 内容进行校验，例如我们来看这样一个案例及对应代码。当开发一个学籍管理系统时，我们会提供了一个 API 接口去添加学生的相关信息，其对象定义参考下面的代码&…...

编程日记 2025/1/13 11:01:18

【Block总结】掩码窗口自注意力 (M-WSA)

摘要论文链接：https://arxiv.org/pdf/2404.07846 论文标题：Transformer-Based Blind-Spot Network for Self-Supervised Image Denoising Masked Window-Based Self-Attention (M-WSA) 是一种新颖的自注意力机制，旨在解决传统自注意力方法在…...

编程日记 2025/1/13 11:00:17

用 HTML5 Canvas 和 JavaScript 实现雪花飘落特效

这篇文章将带您深入解析使用 HTML5 Canvas 和 JavaScript 实现动态雪花特效的代码原理。 1，效果展示该效果模拟了雪花从天而降的动态场景，具有以下特点：雪花数量、大小、透明度和下落速度随机。雪花会在屏幕底部重置到顶部，形成循环效果。随窗口大小动态调整，始终覆盖…...

编程日记 2025/1/13 10:58:14

触发使用： EventTool.emit(“onClick”) 需要监听的地方，onload调用： EventTool.on(“onClick”, this.onClickEvent, this) /**事件派发*/class EventTool {protected static _instance: EventTool null;public static get Instance(): Eve…...

编程日记 2025/1/13 10:57:12

《探索鸿蒙Next上开发人工智能游戏应用的技术难点》

在科技飞速发展的当下，鸿蒙Next系统为应用开发带来了新的机遇与挑战，开发一款运行在鸿蒙Next上的人工智能游戏应用更是备受关注。以下是在开发过程中可能会遇到的一些技术难点： 鸿蒙Next系统适配性多设备协同：鸿蒙Next的一大特色…...

编程日记 2025/1/13 10:55:10

CSS | CSS实现两栏布局（左边定宽右边自适应，左右成比自适应）

目录一、左边定宽右边自适应 1.浮动 2.利用浮动margin 3.定位margin 4.flex布局 5.table 布局二、左右成比自适应 1:1 1flex布局 table布局 1:2 flex布局 <div class"father"><div class"left">左边自适应</div><div class"r…...

编程日记 2025/1/13 10:54:03

acwing_3195_有趣的数

acwing_3195_有趣的数 // // Created by HUAWEI on 2024/11/17. // #include<iostream> #include<cstring> #include<algorithm>#define int long longusing namespace std;const int N 1000 50; const int MOD 1e9 7; int C[N][N]; //组合数signed mai…...

编程日记 2025/1/13 10:53:00

Liunx-搭建安装VSOMEIP环境教程执行运行VSOMEIP示例demo

本文安装环境为Liunx，搭建安装VSOMEIP环境并运行基础例子。 1. 安装基础环境使用apt-get来安装基础环境，受网络影响可以分开多次安装。环境好的也可以一次性执行。 sudo apt-get install gcc g sudo apt-get install cmake sudo apt-get install lib…...

编程日记 2025/1/13 10:50:58

Git | git revert命令详解

关注：CodingTechWork 引言 Git 是一个强大的版本控制工具，广泛应用于现代软件开发中。它为开发人员提供了多种功能来管理代码、协作开发和版本控制。在 Git 中，有时我们需要撤销或回退某些提交，而git revert 是一个非常有用的命令…...

编程日记 2025/1/13 10:48:54

ASP.NET Core 中，Cookie 认证在集群环境下的应用

在 ASP.NET Core 中，Cookie 认证在集群环境下的应用通常会遇到一些挑战。主要的问题是 Cookie 存储在客户端的浏览器中，而认证信息（比如 Session 或身份令牌）通常是保存在 Cookie 中，多个应用实例需要共享这些 Cookie …...

编程日记 2025/1/13 10:47:52

Flyte工作流平台调研（五）——扩展集成

系列文章： Flyte工作流平台调研（一）——整体架构 Flyte工作流平台调研（二）——核心概念说明 Flyte工作流平台调研（三）——核心组件原理 Flyte工作流平台调研（四）——…...

编程日记 2025/1/13 10:46:50

【AUTOSAR 基础软件】软件组件的建立与使用（“代理”SWC）

基础软件往往需要建立一些“代理”SWC来完成一些驱动的抽象工作（Complex_Device_Driver_Sw或者Ecu_Abstraction_Sw等），或建立Application Sw Component来补齐基础软件需要提供的功能实现。当面对具体的项目时，基础软件开发人员还可…...

编程日记 2025/1/13 10:45:49

java通过ocr实现识别pdf中的文字

需求：识别pdf文件中的中文根据github项目mymonstercat 改造,先将pdf文件转为png文件存于临时文件夹，然后通过RapidOcr转为文字,最后删除临时文件夹 1、引入依赖 <dependency><groupId>org.apache.pdfbox</groupId><artifactId&g…...

编程日记 2025/1/13 10:44:48

Git 命令代码管理详解

一、Git 初相识：版本控制的神器在当今的软件开发领域，版本控制如同基石般重要，而 Git 无疑是其中最耀眼的明珠。它由 Linus Torvalds 在 2005 年创造，最初是为了更好地管理 Linux 内核源代码。随着时间的推移，Git 凭借…...

编程日记 2025/1/13 10:40:44

Docker的安装和使用

容器技术容器与虚拟机的区别虚拟机 (VM) VM包含完整的操作系统，并在虚拟化层之上运行多个操作系统实例。 VM需要更多的系统资源（CPU、内存、存储）来管理这些操作系统实例。容器 (Container) 容器共享主机操作系统的内核，具…...

编程日记 2025/1/13 10:35:36

Flink系统知识讲解之：Flink内存管理详解

Flink系统知识讲解之：Flink内存管理详解在现阶段，大部分开源的大数据计算引擎都是用Java或者是基于JVM的编程语言实现的，如Apache Hadoop、Apache Spark、Apache Drill、Apache Flink等。Java语言的好处是不用考虑底层，降低了程…...

编程日记 2025/1/13 10:32:30

使用JMeter模拟多IP发送请求！

你是否曾遇到过这样的场景：使用 JMeter 进行压力测试时，单一 IP 被服务器限流或者屏蔽？这时，如何让 JMeter 模拟多个 IP 发送请求，成功突破测试限制，成为测试工程师必须攻克的难题。今天，我们就…...

编程日记 2025/1/13 10:29:19

【Ubuntu与Linux操作系统：六、软件包管理】

第6章软件包管理 6.1 Linux软件安装基础 Linux的软件包是以二进制或源码形式发布的程序集合，包含程序文件和元数据。软件包管理器是Linux系统的重要工具，用于安装、更新和卸载软件。 1. 常见的软件包管理器： DEB 系统（如Ubunt…...

编程日记 2025/1/13 10:28:17

做网站所用的工具/安庆seo

2019独角兽企业重金招聘Python工程师标准>>> 下载Stimulsoft Reports.Ultimate最新版本 Stimulsoft专题页：全面汇集Stimulsoft视频教程、版本更新、使用教程、应用案例和相关开发资源等。执行以下步骤以创建子报表： 运行设计器连接数据&…...

编程日记 2025/2/6 21:45:26

python网站开发工程师/优化大师人工服务电话

最近无聊，某天无意在vs2013上发现了Python...... Python介绍：可以自己搜索一下. 接下来，准备工具： Win7搭建开发环境。需要准备Python、PTVS2013。 1、http://pytools.codeplex.com/ 下载工具PTVS2013 2、https://www.python.org/…...

编程日记 2025/2/6 20:07:20

建设工程合同属于专属管辖吗/拼多多关键词优化步骤

第一找到你要添加的jar包的路径，并复制这个路径第二 winr,输入cmd然后打开cmd: 第三输入以下格式：mvn install:install-file -DfileC:***\mail.jar -DgroupIdcom.demowar -DartifactIdtest -Dversion1.0.0 -Dpackagingjar 上面的C:***\mail.jar是自己…...

编程日记 2025/2/6 18:29:24

wordpress产品页名称/百度指数使用指南

// 默认情况下new eventbase struct event_base * event_base_new(void) {struct event_base *base NULL;//初始化系统配置struct event_config *cfg event_config_new(); // 使用默认的配置方法if (cfg) {//再利用事件的系统配置去初始化base eventbase event_base_new_wit…...

编程日记 2025/2/6 16:20:53