“我正在参加「掘金·启航计划」”

实现功能

获取url问号"?"后面的参数转化为对象。

URLSearchParams()

URLSearchParams() 返回一个URLSearchParams 对象。 开头的’?’ 字符会被忽略。

兼容性：

示例：

// 传入一个字符串字面值
const searchParams = new URLSearchParams('?query=vue&period=1');
console.log(searchParams.toString()); // query=vue&period=1

// 与 URL 一起使用
const url = new URL('https://juejin.cn/search?query=vue&period=2');
const params = new URLSearchParams(url.search);

params.set('query', 'react');
params.has('query') === true;
params.toString() === 'query=vue&period=2';

其他方法

• URLSearchParams.append(name, value) 插入一个指定的键/值对作为新的搜索参数。
• URLSearchParams.delete(name) 从搜索参数列表里删除指定的搜索参数及其对应的值。
• URLSearchParams.entries() : Iterator 返回一个iterator可以遍历所有键/值对的对象。
• URLSearchParams.get(name) : String 获取指定搜索参数的第一个值（即使 append 的时候添加的是数字，这里获取到的也是string）
• URLSearchParams.getAll(name) : Array 获取指定搜索参数的所有值，返回是一个数组。
• URLSearchParams.has(name) : boolean 返回 Boolean 判断是否存在此搜索参数。
• URLSearchParams.keys() : Iterator 返回iterator 此对象包含了键/值对的所有键名。
• URLSearchParams.set(name, value) 设置一个搜索参数的新值，假如原来有多个值将删除其他所有的值。
• URLSearchParams.sort() 按键名排序（直接改变对象）
• URLSearchParams.toString() : String 返回搜索参数组成的字符串，可直接使用在URL上。
• URLSearchParams.values() : Iterator 返回iterator 此对象包含了键/值对的所有值。

MDN: developer.mozilla.org/zh-CN/docs/…

Object.fromEntries()

Object.fromEntries()方法把键值对列表转换为一个对象。

兼容性

示例：

// map转换为object
const entries = new Map([  ['name', 'iKun'],
  ['age', 3]
]);
const obj = Object.fromEntries(entries);
console.log(obj); //  { name: 'iKun', age: 3 }


// array转换为object
const arr = [ ['Monday', '星期一'], ['1', '星期二'], ['2', '星期三'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { Monday: '星期一', Tuesday: '星期二', Wednesday: '星期三' }

封装方法：

// 将url中的查询条件转为对象
export function getUrlSearchToObject(urlSearch = window.location.search) {
  return Object.fromEntries(new URLSearchParams(urlSearch))
}

对象转url字符串

Object.keys(param).map(key => `${key}=${param[key]}`).join('&')

const queryString = Object.entries(params).reduce((acc, [key, value]) => {
  return `${acc}${key}=${value}&`;
}, "?").slice(0, -1);