将URL参数作为对象

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用正则表达式和数组方法提取URL参数并将其映射到JavaScript对象中。我们将学习如何使用 String.prototype.match() 来获取所有键值对,以及如何使用 Array.prototype.reduce() 将它们转换为单个对象。在本实验结束时,你将更好地理解如何处理URL并从中提取有用信息。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/AdvancedConceptsGroup(["`Advanced Concepts`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("`Higher-Order Functions`") subgraph Lab Skills javascript/variables -.-> lab-28364{{"`将URL参数作为对象`"}} javascript/data_types -.-> lab-28364{{"`将URL参数作为对象`"}} javascript/arith_ops -.-> lab-28364{{"`将URL参数作为对象`"}} javascript/comp_ops -.-> lab-28364{{"`将URL参数作为对象`"}} javascript/higher_funcs -.-> lab-28364{{"`将URL参数作为对象`"}} end

包含URL参数的对象

要创建一个包含当前URL参数的对象,请执行以下步骤:

  1. 打开终端/SSH并输入 node 以开始练习编码。
  2. String.prototype.match() 与适当的正则表达式一起使用,以提取所有键值对。
  3. 使用 Array.prototype.reduce() 将它们映射并组合成一个对象。
  4. location.search 作为参数传递,以应用于当前URL。

以下是代码:

const getURLParameters = (url) =>
  (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[v.slice(0, v.indexOf("="))] = v.slice(v.indexOf("=") + 1)), a
    ),
    {}
  );

你可以将此函数与任何URL一起使用,以获取包含其参数的对象。以下是一些示例:

getURLParameters("google.com"); // {}
getURLParameters("http://url.com/page?name=Adam&surname=Smith");
// {name: 'Adam', surname: 'Smith'}

总结

恭喜你!你已经完成了“将URL参数作为对象”的实验。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程