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 访问。 主要属性&#…...
Jetson Orin Nano Super之 onnxruntime 编译安装
Jetson Orin Nano Super之 onnxruntime 编译安装 1. 源由2. 步骤步骤一:安装3.26 cmake步骤二:下载代码步骤三:编译代码步骤四:找到安装包步骤五:安装whl包 3. 注意4. 参考资料 1. 源由 Build onnxruntime 1.19.2 fai…...
开发环境搭建-3:配置 nodejs 开发环境 (fnm+ node + pnpm)
在 WSL 环境中配置:WSL2 (2.3.26.0) Oracle Linux 8.7 官方镜像 node 官网:https://nodejs.org/zh-cn/download 点击【下载】,选择想要的 node 版本、操作系统、node 版本管理器、npm包管理器 根据下面代码提示依次执行对应代码即可 基本概…...
[SWPUCTF 2022 新生赛]js_sign
题目 查看页面源代码 <!DOCTYPE html> <html> <head><meta charset"utf-8"><style>body {background-color: rgb(255, 255, 255);}</style> </head> <body><input id"flag" /><button>Check…...
农业信息化的基本框架
农业信息化的主要研究内容 基于作物模型的相关研究 作物生长模拟模型以及模型评价、模型的应用作物模型应用,包括:作物生态系统过程、生产管理措施、区域作物产量评估与气候变化对产量影响预测、基于作物模型的决策支持系统 数据挖掘、知识工程及应用、管…...
OpenAI的真正对手?DeepSeek-R1如何用强化学习重构LLM能力边界——DeepSeek-R1论文精读
2025年1月20日,DeepSeek-R1 发布,并同步开源模型权重。截至目前,DeepSeek 发布的 iOS 应用甚至超越了 ChatGPT 的官方应用,直接登顶 AppStore。 DeepSeek-R1 一经发布,各种资讯已经铺天盖地,那就让我们一起…...
Vue 3 中的父子组件传值:详细示例与解析
在 Vue 3 中,父子组件之间的数据传递是一个常见的需求。父组件可以通过 props 将数据传递给子组件,而子组件可以通过 defineProps 接收这些数据。本文将详细介绍父子组件传值的使用方法,并通过优化后的代码示例演示如何实现。 1. 父子组件传值…...
回顾2024,展望2025
项目 LMD performance phase2 今年修修补补,设计和做了很多item,有时候自己都数不清做了什么大大小小的item,但是for LMD performance phase2的go-live确实是最大也是最难的了,无论什么系统,只要用的人多了ÿ…...
【Python实现机器遗忘算法】复现2021年顶会 AAAI算法Amnesiac Unlearning
【Python实现机器遗忘算法】复现2021年顶会 AAAI算法Amnesiac Unlearning 1 算法原理 论文:Graves, L., Nagisetty, V., & Ganesh, V. (2021). Amnesiac machine learning. In Proceedings of the AAAI Conference on Artificial Intelligence, volume 35, 115…...
Vue 3 30天精进之旅:Day 03 - Vue实例
引言 在前两天的学习中,我们成功搭建了Vue.js的开发环境,并创建了我们的第一个Vue项目。今天,我们将深入了解Vue的核心概念之一——Vue实例。通过学习Vue实例,你将理解Vue的基础架构,掌握数据绑定、模板语法和指令的使…...
【ArcGIS微课1000例】0141:提取多波段影像中的单个波段
文章目录 一、波段提取函数二、加载单波段导出问题描述:如下图所示,img格式的时序NDVI数据有24个波段。现在需要提取某一个波段,该怎样操作? 一、波段提取函数 首先加载多波段数据。点击【窗口】→【影像分析】。 选择需要处理的多波段影像,点击下方的【添加函数】。 在多…...
【第九天】零基础入门刷题Python-算法篇-数据结构与算法的介绍-六种常见的图论算法(持续更新)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、Python数据结构与算法的详细介绍1.Python中的常用的图论算法2. 图论算法3.详细的图论算法1)深度优先搜索(DFS)2…...
落地 轮廓匹配
个人理解为将一幅不规则的图形,通过最轮廓发现,最大轮廓匹配来确定图像的位置,再通过pt将不规则的图像放在规定的矩形里面,在通过透视变换将不规则的图形放进规则的图像中。 1. findHomography 函数 • Mat h findHomography(s…...
【漫话机器学习系列】064.梯度下降小口诀(Gradient Descent rule of thume)
梯度下降小口诀 为了帮助记忆梯度下降的核心原理和关键注意事项,可以用以下简单口诀来总结: 1. 基本原理 损失递减,梯度为引:目标是让损失函数减少,依靠梯度指引方向。负梯度,反向最短:沿着负…...
JAVA(SpringBoot)集成Kafka实现消息发送和接收。
SpringBoot集成Kafka实现消息发送和接收。 一、Kafka 简介二、Kafka 功能三、POM依赖四、配置文件五、生产者六、消费者 君子之学贵一,一则明,明则有功。 一、Kafka 简介 Kafka 是由 Apache 软件基金会开发的一个开源流处理平台,最初由 Link…...
AI刷题-蛋糕工厂产能规划、优质章节的连续选择
挑两个简单的写写 目录 一、蛋糕工厂产能规划 问题描述 输入格式 输出格式 解题思路: 问题理解 数据结构选择 算法步骤 关键点 最终代码: 运行结果:编辑 二、优质章节的连续选择 问题描述 输入格式 输出格式 解题思路&a…...
在线可编辑Excel
1. Handsontable 特点: 提供了类似 Excel 的表格编辑体验,包括单元格样式、公式计算、数据验证等功能。 支持多种插件,如筛选、排序、合并单元格等。 轻量级且易于集成到现有项目中。 具备强大的自定义能力,可以调整外观和行为…...
什么是词嵌入?Word2Vec、GloVe 与 FastText 的区别
自然语言处理(NLP)领域的核心问题之一,是如何将人类的语言转换成计算机可以理解的数值形式,而词嵌入(Word Embedding)正是为了解决这个问题的重要技术。本文将详细讲解词嵌入的概念及其经典模型(Word2Vec、GloVe 和 FastText)的原理与区别。 1. 什么是词嵌入(Word Em…...
WPS数据分析000010
基于数据透视表的内容 一、排序 手动调动 二、筛选 三、值显示方式 四、值汇总依据 五、布局和选项 不显示分类汇总 合并居中带标签的单元格 空单元格显示 六、显示报表筛选页...
Qt中QVariant的使用
1.使用QVariant实现不同类型数据的相加 方法:通过type函数返回数值的类型,然后通过setValue来构造一个QVariant类型的返回值。 函数: QVariant mainPage::dataPlus(QVariant a, QVariant b) {QVariant ret;if ((a.type() QVariant::Int) &a…...
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源: http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
反射获取方法和属性
Java反射获取方法 在Java中,反射(Reflection)是一种强大的机制,允许程序在运行时访问和操作类的内部属性和方法。通过反射,可以动态地创建对象、调用方法、改变属性值,这在很多Java框架中如Spring和Hiberna…...
AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
C++:多态机制详解
目录 一. 多态的概念 1.静态多态(编译时多态) 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1).协变 2).析构函数的重写 5.override 和 final关键字 1&#…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...
鸿蒙(HarmonyOS5)实现跳一跳小游戏
下面我将介绍如何使用鸿蒙的ArkUI框架,实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...
