BOM对象location与数组操作结合——查询串提取案例
BOM对象location
与数组操作结合——查询串提取案例
前置知识
1. Location 对象
Location
对象是 JavaScript 提供的内置对象之一,它表示当前窗口或框架的 URL,并允许你通过它操作或获取 URL 的信息。可以通过 window.location
访问。
主要属性:
href
:完整的 URL 地址。protocol
:协议部分(如http:
或https:
)。host
:域名和端口号(如example.com:8080
)。hostname
:域名(不包括端口)。port
:端口号。pathname
:URL 的路径部分。search
:查询字符串(以?
开头)。hash
:URL 的片段标识符(以#
开头)。
常用方法:
assign(url)
:加载新页面到当前窗口。replace(url)
:加载新页面但不保留历史记录。reload()
:重新加载当前页面。
示例:
console.log(window.location.href); // 当前页面的完整 URL
window.location.assign('https://example.com'); // 跳转到新的 URL
2. 数组的可迭代方法
数组的可迭代方法基于 JavaScript 的内置迭代器接口,使你可以对数组的每个元素进行操作。这些方法在日常开发中非常重要。重点掌握前三个方法即可。
常用可迭代方法:
-
forEach()
遍历数组中的每个元素,不返回结果。[1, 2, 3].forEach(num => console.log(num)); // 输出 1, 2, 3
-
map()
返回一个新数组,新数组中的每个元素是对原数组元素进行处理后的结果。let doubled = [1, 2, 3].map(num => num * 2); console.log(doubled); // 输出 [2, 4, 6]
-
filter()
返回一个新数组,包含所有通过筛选条件的元素。let evens = [1, 2, 3, 4].filter(num => num % 2 === 0); console.log(evens); // 输出 [2, 4]
-
reduce()
对数组中的所有元素进行累计计算,并返回一个最终结果。let sum = [1, 2, 3].reduce((acc, num) => acc + num, 0); console.log(sum); // 输出 6
-
some()
和every()
some()
:检查数组中是否至少有一个元素满足条件。every()
:检查数组中是否所有元素都满足条件。
console.log([1, 2, 3].some(num => num > 2)); // 输出 true console.log([1, 2, 3].every(num => num > 2)); // 输出 false
-
find()
和findIndex()
find()
:返回第一个满足条件的元素。findIndex()
:返回第一个满足条件的元素的索引。
let nums = [5, 10, 15]; console.log(nums.find(num => num > 8)); // 输出 10 console.log(nums.findIndex(num => num > 8)); // 输出 1
-
entries()
、keys()
和values()
entries()
:返回键值对的迭代器。keys()
:返回索引的迭代器。values()
:返回值的迭代器。
let arr = ['a', 'b', 'c']; for (let [index, value] of arr.entries()) {console.log(index, value); // 输出 0 'a', 1 'b', 2 'c' }
-
flat()
和flatMap()
flat()
:将多维数组拉平成一维。flatMap()
:对数组每个元素执行映射后再扁平化。
let nested = [1, [2, [3]]]; console.log(nested.flat(2)); // 输出 [1, 2, 3]let words = ['hello world', 'foo bar']; console.log(words.flatMap(str => str.split(' '))); // 输出 ['hello', 'world', 'foo', 'bar']
查询串提取案例
location
获取:浏览器搜索任意词条即可
> location.search
> '?pglt=297&q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C&cvid=c83a5c858e364a06bbd131895d6bd7a4&gs_lcrp=EgRlZGdlKgYIABBFGDkyBggAEEUYOTIGCAEQABhAMgYIAhAAGEAyBggDEAAYQDIGCAQQABhAMgYIBRAAGEAyBggGEAAYQDIGCAcQABhAMgYICBAAGEDSAQg1NjQ0ajBqMagCALACAA&FORM=ANNTA1&PC=U531'
> searchStr = location.search.substring(1)
> 'pglt=297&q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C&cvid=c83a5c858e364a06bbd131895d6bd7a4&gs_lcrp=EgRlZGdlKgYIABBFGDkyBggAEEUYOTIGCAEQABhAMgYIAhAAGEAyBggDEAAYQDIGCAQQABhAMgYIBRAAGEAyBggGEAAYQDIGCAcQABhAMgYICBAAGEDSAQg1NjQ0ajBqMagCALACAA&FORM=ANNTA1&PC=U531'
> searchArr = searchStr.split('&')
> (6) ['pglt=297', 'q=%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C', 'cvid=c83a5c858e364a06bbd131895d6bd7a4', 'gs_lcrp=EgRlZGdlKgYIABBFGDkyBggAEEUYOTIGCAEQABhAMg…AAYQDIGCAcQABhAMgYICBAAGEDSAQg1NjQ0ajBqMagCALACAA', 'FORM=ANNTA1', 'PC=U531']
> const mapArr = (sep,index,arr) => {return arr.map((item) => {return item.split(sep)[index]})
}
> undefined
> searchArr = searchArr.map(item => {return decodeURIComponent(item)
})
> (6) ['pglt=297', 'q=你好世界', 'cvid=c83a5c858e364a06bbd131895d6bd7a4', 'gs_lcrp=EgRlZGdlKgYIABBFGDkyBggAEEUYOTIGCAEQABhAMg…AAYQDIGCAcQABhAMgYICBAAGEDSAQg1NjQ0ajBqMagCALACAA', 'FORM=ANNTA1', 'PC=U531']
> keyArr = mapArr('=',0,searchArr)
> (6) ['pglt', 'q', 'cvid', 'gs_lcrp', 'FORM', 'PC']
> valueArr = mapArr('=',1,searchArr)
> (6) ['297', '你好世界', 'c83a5c858e364a06bbd131895d6bd7a4', 'EgRlZGdlKgYIABBFGDkyBggAEEUYOTIGCAEQABhAMgYIAhAAGE…AAYQDIGCAcQABhAMgYICBAAGEDSAQg1NjQ0ajBqMagCALACAA', 'ANNTA1', 'U531']
> searchDict = {}
> {}
> keyArr.map((item,index) => {searchDict[item] = valueArr[index]
})
> (6) [undefined, undefined, undefined, undefined, undefined, undefined]
> searchDict
> {pglt: '297', q: '你好世界', cvid: 'c83a5c858e364a06bbd131895d6bd7a4', gs_lcrp: 'EgRlZGdlKgYIABBFGDkyBggAEEUYOTIGCAEQABhAMgYIAhAAGE…AAYQDIGCAcQABhAMgYICBAAGEDSAQg1NjQ0ajBqMagCALACAA', FORM: 'ANNTA1', …}
需要注意
- 关于数组的迭代方法基本都是传入一个
function
,参数列表为item,index,array
,分别表示迭代对象的子元素、子元素索引以及迭代对象,三者按需引入,一般仅使用item
- 注意
es6
语法,比如使用(args) => {return;}
可简单表示一个匿名函数,当参数列表长度为1,即只有一个参数时可省略箭头前的括号
思考
- 倘若搜索的词条中包含了咱们用于拆分搜索字符串的特殊字符会怎样呢?例如搜索词条“你好=世界&”
相关文章:
BOM对象location与数组操作结合——查询串提取案例
BOM对象location与数组操作结合——查询串提取案例 前置知识 1. Location 对象 Location 对象是 JavaScript 提供的内置对象之一,它表示当前窗口或框架的 URL,并允许你通过它操作或获取 URL 的信息。可以通过 window.location 访问。 主要属性&#…...
读书笔记--分布式服务架构对比及优势
本篇是在上一篇的基础上,主要对共享服务平台建设所依赖的分布式服务架构进行学习,主要记录和思考如下,供大家学习参考。随着企业各业务数字化转型工作的推进,之前在传统的单一系统(或单体应用)模式中&#…...
GOGOGO 枚举
含义:一种类似于类的一种结构 作用:是Java提供的一个数据类型,可以设置值是固定的 【当某一个数据类型受自身限制的时候,使用枚举】 语法格式: public enum 枚举名{…… }有哪些成员? A、对象 public …...
【Linux】Linux基础开发工具
1 Linux 软件包管理器 yum 1.1软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上,通过包管理器可以很方便的…...
嵌入式C语言:结构体的多态性之结构体中的void*万能指针
目录 一、void*指针在结构体中的应用 二、实现方式 2.1. 定义通用结构体 2.2. 定义具体结构体 2.3. 初始化和使用 三、应用场景 3.1. 内存管理函数 3.2. 泛型数据结构(链表) 3.3. 回调函数和函数指针 3.4. 跨语言调用或API接口(模拟…...
重构进行时:一秒告别 !=null 判空
重构进行时:一秒告别 !null 判空 空指针异常(NullPointerException)是Java开发中常见的错误之一。 许多开发者在遇到空指针问题时,往往会习惯性地使用! null来进行判断。 然而,当代码中频繁出现这种判断时ÿ…...
React 中hooks之useSyncExternalStore使用总结
1. 基本概念 useSyncExternalStore 是 React 18 引入的一个 Hook,用于订阅外部数据源,确保在并发渲染下数据的一致性。它主要用于: 订阅浏览器 API(如 window.width)订阅第三方状态管理库订阅任何外部数据源 1.1 基…...
Semaphore 与 线程池 Executor 有什么区别?
前言:笔者在看Semaphone时 突然脑子宕机,啥啥分不清 Semaphore 和 Executor 的作用,故再次记录。 一、什么是Semaphore? Semaphore 是 Java 并发编程(JUC)中一个重要的同步工具,它的作用是 控…...
Rust:高性能与安全并行的编程语言
引言 在现代编程世界里,开发者面临的最大挑战之一就是如何平衡性能与安全性。在许多情况下,C/C这样的系统级编程语言虽然性能强大,但其内存管理的复杂性导致了各种安全漏洞。为了解决这些问题,Rust 作为一种新的系统级编程语言进入…...
论文笔记(六十三)Understanding Diffusion Models: A Unified Perspective(六)(完结)
Understanding Diffusion Models: A Unified Perspective(六)(完结) 文章概括指导(Guidance)分类器指导无分类器引导(Classifier-Free Guidance) 总结 文章概括 引用: …...
Redis --- 分布式锁的使用
我们在上篇博客高并发处理 --- 超卖问题一人一单解决方案讲述了两种锁解决业务的使用方法,但是这样不能让锁跨JVM也就是跨进程去使用,只能适用在单体项目中如下图: 为了解决这种场景,我们就需要用一个锁监视器对全部集群进行监视…...
电脑怎么格式化?格式化详细步骤
格式化是我们在日常使用电脑时可能会用到的一种操作,无论是清理磁盘空间、安装新系统,还是解决磁盘读写错误,都可能需要格式化。不过,对于一些不熟悉电脑操作的用户来说,格式化听起来可能有些复杂。其实,只…...
TikTok广告投放优化策略:提升ROI的核心技巧
在短许多品牌和商家纷纷投入广告营销,争夺这片潜力巨大的市场。然而,在激烈的竞争环境中,如何精准有效地投放广告,优化广告效果,实现更高的投资回报率(ROI)成为了广告主关注的核心。 一. 精准受…...
视觉语言模型 (VLMs):跨模态智能的探索
文章目录 一. VLMs 的重要性与挑战:连接视觉与语言的桥梁 🌉二. VLMs 的核心训练范式:四种主流策略 🗺️1. 对比训练 (Contrastive Training):拉近正例,推远负例 ⚖️2. 掩码方法 (Masking):重构…...
第05章 08 绘制脑部体绘制图的阈值等值面
绘制脑部体绘制图的阈值等值面,例如肌肉和头骨骼,需要对医学图像数据进行阈值处理,并使用体绘制技术来可视化这些结构。以下是一个基于VTK/C的示例代码,展示如何读取DICOM图像数据,应用阈值过滤器来提取特定组织&#…...
类和对象(4)——多态:方法重写与动态绑定、向上转型和向下转型、多态的实现条件
目录 1. 向上转型和向下转型 1.1 向上转型 1.2 向下转型 1.3 instanceof关键字 2. 重写(overidde) 2.1 方法重写的规则 2.1.1 基础规则 2.1.2 深层规则 2.2 三种不能重写的方法 final修饰 private修饰 static修饰 3. 动态绑定 3.1 动态绑…...
动态规划<九>两个数组的dp
目录 引例 LeetCode经典OJ题 1.第一题 2.第二题 3.第三题 4.第四题 5.第五题 6.第六题 7.第七题 引例 OJ传送门LeetCode<1143>最长公共子序列 画图分析: 使用动态规划解决 1.状态表示 ------经验题目要求 经验为选取第一个字符串的[0,i]区间以及第二个字…...
Go:基于Go实现一个压测工具
文章目录 写在前面整体架构通用数据处理模块Http请求响应数据处理Curl参数解析处理 客户端模块Http客户端处理Grpc客户端处理Websocket客户端处理 连接处理模块GrpcHttp 统计数据模块统计原理实现过程 写在前面 本篇主要是基于Go来实现一个压测的工具,关于压测的内…...
2025年数学建模美赛 A题分析(2)楼梯使用频率数学模型
2025年数学建模美赛 A题分析(1)Testing Time: The Constant Wear On Stairs 2025年数学建模美赛 A题分析(2)楼梯磨损分析模型 2025年数学建模美赛 A题分析(3)楼梯使用方向偏好模型 2025年数学建模美赛 A题分…...
在Ubuntu上用Llama Factory命令行微调Qwen2.5的简单过程
半年多之前写过一个教程:在Windows上用Llama Factory微调Llama 3的基本操作_llama-factory windows-CSDN博客 如果用命令行做的话,前面的步骤可以参考上面这个博客。安装好环境后, 用自我认知数据集微调Lora模块:data/identity.j…...
虹科分享 | 汽车NVH小课堂之听音辨故障
随着车主开始关注汽车抖动异响问题,如何根据故障现象快速诊断异响来源,成了汽修人的必修课。 一个比较常用的方法就是靠“听”——“听音辨故障”。那今天,虹科Pico也整理了几个不同类型的异响声音,一起来听听看你能答对几个吧 汽…...
RoboVLM——通用机器人策略的VLA设计哲学:如何选择骨干网络、如何构建VLA架构、何时添加跨本体数据
前言 本博客内解读不少VLA模型了,包括π0等,且如此文的开头所说 前两天又重点看了下openvla,和cogact,发现 目前cogACT把openvla的动作预测换成了dit,在模型架构层面上,逼近了π0那为了进一步逼近&#…...
【SpringBoot教程】Spring Boot + MySQL + HikariCP 连接池整合教程
🙋大家好!我是毛毛张! 🌈个人首页: 神马都会亿点点的毛毛张 在前面一篇文章中毛毛张介绍了SpringBoot中数据源与数据库连接池相关概念,今天毛毛张要分享的是关于SpringBoot整合HicariCP连接池相关知识点以及底层源码…...
0.91英寸OLED显示屏一种具有小尺寸、高分辨率、低功耗特性的显示器件
0.91英寸OLED显示屏是一种具有小尺寸、高分辨率、低功耗特性的显示器件。以下是对0.91英寸OLED显示屏的详细介绍: 一、基本参数 尺寸:0.91英寸分辨率:通常为128x32像素,意味着显示屏上有128列和32行的像素点,总共409…...
【insert函数】
在 C 中,std::string::insert 是一个功能强大的成员函数,用于在字符串的指定位置插入内容。它有多个重载版本,支持插入 字符、字符串、子字符串 等。以下是 insert 所有相关函数的详细介绍: 1. 插入字符串 函数签名: …...
Python 如何进行文本匹配:difflib| python 小知识
Python 如何进行文本匹配:difflib| python 小知识 difflib是Python标准库中的一个工具,用于比较和处理文本差异。它提供了一组用于比较和处理文本差异的功能,可以用于比较字符串、文件等。本文将详细介绍difflib模块的用法和实现细节&#x…...
MySQL误删数据怎么办?
文章目录 1. 从备份恢复数据2. 通过二进制日志恢复数据3. 使用数据恢复工具4. 利用事务回滚恢复数据5. 预防误删数据的策略总结 在使用MySQL进行数据管理时,误删数据是一个常见且具有高风险的操作。无论是因为操作失误、系统故障,还是不小心执行了删除命…...
可以称之为“yyds”的物联网开源框架有哪几个?
有了物联网的发展,我们的生活似乎也变得更加“鲜活”、有趣、便捷,包具有科技感的。在物联网(IoT)领域中,也有许多优秀的开源框架支持设备连接、数据处理、云服务等,成为被用户们广泛认可的存在。以下给大家…...
为AI聊天工具添加一个知识系统 之74 详细设计之15 正则表达式 之2
本文要点 要点 本项目(为AI聊天工具添加一个知识系统)中的正则表达式。 正则表达式的三“比”。正则表达式被 一、排比为三种符号(元符号-圈号,特殊符号-引号,普通符号-括号) 引号<<a线性回归bo…...
Java 注解与元数据
Java学习资料 Java学习资料 Java学习资料 一、引言 在 Java 编程中,注解(Annotation)和元数据(Metadata)是两个重要的概念。注解为程序提供了一种在代码中嵌入额外信息的方式,这些额外信息就是元数据。元…...
【橘子Kibana】Kibana的分析能力Analytics简易分析
一、kibana是啥,能干嘛 我们经常会用es来实现一些关于检索,关于分析的业务。但是es本身并没有UI,我们只能通过调用api来完成一些能力。而kibana就是他的一个外置UI,你完全可以这么理解。 当我们进入kibana的主页的时候你可以看到这样的布局。…...
度小满前端面试题及参考答案
<form>标签使用过哪些 tag? <form>标签中常使用的标签有很多。 <input>:这是最常用的标签之一,用于创建各种类型的输入字段,如文本框、密码框、单选按钮、复选框、文件上传框等。通过设置type属性来指定输入类型,例如type="text"创建文本输入…...
Padas进行MongoDB数据库CRUD
在数据处理的领域,MongoDB作为一款NoSQL数据库,以其灵活的文档存储结构和高扩展性广泛应用于大规模数据处理场景。Pandas作为Python的核心数据处理库,能够高效处理结构化数据。在MongoDB中,数据以JSON格式存储,这与Pandas的DataFrame结构可以很方便地互相转换。通过这篇教…...
LQ1052 Fibonacci斐波那契数列
题目描述 Fibonacci斐波那契数列也称为兔子数列,它的递推公式为:FnFn-1Fn-2,其中F1F21。 当n比较大时,Fn也非常大,现在小蓝想知道,Fn除以10007的余数是多少,请你编程告诉她。 输入 输入包含一…...
华硕笔记本装win10哪个版本好用分析_华硕笔记本装win10专业版图文教程
华硕笔记本装win10哪个版本好用?华硕笔记本还是建议安装win10专业版。Win分为多个版本,其中家庭版(Home)和专业版(Pro)是用户选择最多的两个版本。win10专业版在功能以及安全性方面有着明显的优势ÿ…...
编译器gcc/g++ --【Linux基础开发工具】
文章目录 一、背景知识二、gcc编译选项1、预处理(进行宏替换)2、编译(生成汇编)3、汇编(生成机器可识别代码)4、链接(生成可执行文件或库文件) 三、动态链接和静态链接四、静态库和动态库1、动静态库2、编译…...
八股文 (一)
文章目录 项目地址一、前端1.1 大文件上传,预览1.2 首页性能优化1.2 流量染色,灰度发布1.3 Websock心跳机制,大数据实时数据优化1.4 Gpu 加速 fps优化1.5 echarts包大小优化和组件封装1.6 前端监控系统1.7 超大虚拟列表卡顿1. 实现2. 相关问题(1) 什么是虚拟化列表,为什么要…...
c语言无符号的变量不能和有符号的直接比较,或者使用移项解决符号问题
使用移项解决问题,简单来说就是无符号运行不要有减号,使用移项后的加号代替 if(uEventDirLimitSize > uEventAndNormalDirSize) {if((uEventDirLimitSize - uEventAndNormalDirSize) > pStConfig->stParam.stUserParam.uEventRemain){return O…...
安卓日常问题杂谈(一)
背景 关于安卓开发中,有很多奇奇怪怪的问题,有时候这个控件闪一下,有时候这个页面移动一下,这些对于快速开发中,去查询,都是很耗费时间的,因此,本系列文章,旨在记录安卓…...
电力晶体管(GTR)全控性器件
电力晶体管(Giant Transistor,GTR)是一种全控性器件,以下是关于它的详细介绍:(模电普通晶体管三极管进行对比学习) 基本概念 GTR是一种耐高电压、大电流的双极结型晶体管(BJT&am…...
【美】Day 1 CPT申请步骤及信息获取指南(Day1 CPT)
参考文章:【美】境外申请Day 1 CPT完整流程(境外Day 1 CPT) 文章目录 **一、申请前准备:了解Day 1 CPT基本要求****二、选择Day 1 CPT学校****1. 搜索学校****2. 筛选标准** **三、申请流程****1. 提交学校申请****2. 转SEVIS记录…...
梯度下降优化算法-动量法
1. 动量法的数学原理 1.1 标准梯度下降回顾 在标准梯度下降中,参数的更新公式为: θ t 1 θ t − η ⋅ ∇ θ J ( θ t ) \theta_{t1} \theta_t - \eta \cdot \nabla_\theta J(\theta_t) θt1θt−η⋅∇θJ(θt) 其中: θ t …...
游戏引擎介绍:Game Engine
简介 定义:软件框架,一系列为开发游戏的工具的集合 可协作创意生产工具,复杂性艺术,注重realtime实时 目的 为艺术家,设计师,程序员设计工具链 游戏引擎开发参考书 推荐:Game Engine Archite…...
zookeeper-3.8.3-基于ACL的访问控制
ZooKeeper基于ACL的访问控制 ZooKeeper 用ACL控制对znode的访问,类似UNIX文件权限,但无znode所有者概念,ACL指定ID及对应权限,且仅作用于特定znode,不递归。 ZooKeeper支持可插拔认证方案,ID格式为scheme…...
ResNeSt: Split-Attention Networks 参考论文
参考文献 [1] Tensorflow Efficientnet. https://github.com/tensorflow/tpu/tree/master/models/official/efficientnet. Accessed: 2020-03-04. 中文翻译:[1] TensorFlow EfficientNet. https://github.com/tensorflow/tpu/tree/master/models/official/efficien…...
正反转电路梯形图
1、正转联锁控制。按下正转按钮SB1→梯形图程序中的正转触点X000闭合→线圈Y000得电→Y000自锁触点闭合,Y000联锁触点断开,Y0端子与COM端子间的内部硬触点闭合→Y000自锁触点闭合,使线圈Y000在X000触点断开后仍可得电。 Y000联锁触点断开&…...
【数据结构】空间复杂度
目录 一、引入空间复杂度的原因 二、空间复杂度的分析 ❥ 2.1 程序运行时内存大小 ~ 程序本身大小 ❥ 2.2 程序运行时内存大小 ~ 算法运行时内存大小 ❥ 2.3 算法运行时内存大小 ❥ 2.4 不考虑算法全部运行空间的原因 三、空间复杂度 ❥ 3.1空间复杂度的定义 ❥ 3.2 空…...
系统学英语 — 句法 — 复合句
目录 文章目录 目录复合句型主语从句宾语从句表语从句定语从句状语从句同位语从句 复合句型 复合句型,即:从句。在英语中,除了谓语之外的所有句子成分都可以使用从句来充当。 主语从句 充当主语的句子,通常位于谓语之前&#x…...
SQL server 数据库使用整理
标题:SQL server 数据库使用整理 1.字符串表名多次查询 2.读取SQL中Json字段中的值:JSON_VALUE(最新版本支持,属性名大小写敏感) 1.字符串表名多次查询 SELECT ROW_NUMBER() OVER (ORDER BY value ASC) rowid,value…...
*胡闹厨房*
前期准备 详细教程 一、创建项目 1、选择Universal 3D,创建项目 2、删除预制文件Readme:点击Remove Readme Assets,弹出框上点击Proceed 3、Edit-Project Setting-Quality,只保留High Fidelity 4、打开 Assets-Settings ,保留URP-HighFidelity-Renderer 和 URP-High…...