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

BOM对象location与数组操作结合——查询串提取案例

news 2025/6/24 4:38:53

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', …}

console p1
console p2

需要注意

关于数组的迭代方法基本都是传入一个function，参数列表为item,index,array，分别表示迭代对象的子元素、子元素索引以及迭代对象，三者按需引入，一般仅使用item
注意es6语法，比如使用(args) => {return;}可简单表示一个匿名函数，当参数列表长度为1，即只有一个参数时可省略箭头前的括号