遍历JavaScript URL对象的属性

时间:2019-02-22 12:35:29

标签: javascript w3c

我正在尝试将JavaScript URL class的实例映射到普通对象,并且无法理解为什么它不起作用。

我猜这是因为这些属性不可枚举,但我不清楚为什么会这样。

let input = 'https://www.google.com/index.html?bar=baz#foo'

let url = new URL(input)

console.log(url.origin)
console.log(url.protocol)
console.log(url.host)
console.log(url.pathname)
console.log(url.hash)
console.log(url.search)

let urlMap = Object.entries(url).reduce((map, [key, value]) => {
  map[key] = value
  return map
}, {})


console.log(urlMap)  // returns {}

这是我能做的吗?我的目标是像这样编写url属性:

return { ...url, pathname: alteredPathname }

1 个答案:

答案 0 :(得分:3)

如果您查看url实例的_proto,您将看到,这些字段是getter和setter。因此,Object.entries /键在这里不起作用

enter image description here

下面的Howeve循环应该起作用

const input = 'https://www.google.com/index.html?bar=baz#foo'

const url = new URL(input)
const map = {};
for (let key in url) {
  map[key] = url[key]
}

console.log(map);

这是输出 Here is the output