JavaScript - 如何将URLSearchParams转换为对象

现代 JavaScript 提供了专门的URLSearchParams类来与 URL 查询参数互动。这个类从一个给定的字符串中解析查询参数，并提供与参数交互的方法。例如，你可以使用append,delete,get,sort, 或者使用forEach,keys, 或values 方法遍历所有项目。

但是URLSearchParams 类并没有提供一个toObject() 方法。本教程告诉你如何将 URL 搜索参数实例转换为一个普通的 JavaScript 对象。

将 URLSearchParams 转换为一个 JavaScript 对象

使用Object.fromEntries 方法并传递URLSearchParams 实例作为参数。这将从解析的查询参数中创建一个 JavaScript 对象：

const params = Object.fromEntries(  
  new URLSearchParams(window.location.search)
)

// URL: example.com/path?foo=bar&name=futurestudio&num=1
// { foo: 'bar', name: 'futurestudio', num: '1' }

它是这样工作的：URLSearchParams 类实现了 JavaScript 的迭代器接口。该迭代器接口包含Iterator#entries 方法。这个entries 方法返回一个迭代器，提供一个[key, value] 对的数组。

const params = new URLSearchParams('?foo=bar&name=futurestudio&num=1')

const iterator = params.entries()

iterator.next()  
// { done: false, value: ['foo', 'bar'] } 

iterator.next()  
// { done: false, value: ['name', 'futurestudio'] } 

iterator.next()  
// { done: false, value: ['num', '1] } 

iterator.next()  
// { done: true, value: undefined } 

然后，Object.fromEntries 方法遍历所有键值对，并创建对象，直到迭代器完成。

真棒!