关于前端:JavaScript使用小技巧之数组操作与获取URL参数

35次阅读

共计 2027 个字符,预计需要花费 6 分钟才能阅读完成。

javaScript 获取对象数组中某几项

应用 JavaScript 中的 map()forEach()办法进行遍历

要获取对象数组中的某几项,你能够应用 JavaScript 中的 map()forEach()办法进行遍历,并通过对象的键来获取相应的值。以下是一个示例代码:

// 示例对象数组
const objArray = [{ id: 1, name: 'John', age: 25},
  {id: 2, name: 'Jane', age: 30},
  {id: 3, name: 'Tom', age: 35},
  {id: 4, name: 'Alice', age: 40}
];

// 要获取的属性键
const desiredKeys = ['name', 'age'];

// 应用 map()办法获取对应的属性值
const result = objArray.map(obj => {const newObj = {};
  desiredKeys.forEach(key => {newObj[key] = obj[key];
  });
  return newObj;
});

console.log(result);

上述代码中,咱们首先定义了一个对象数组 objArray,其中蕴含了每个对象的 idnameage 属性。而后,咱们定义了一个数组 desiredKeys,用于指定咱们想要获取的属性键。

接下来,咱们应用 map() 办法遍历 objArray 数组,并应用 forEach() 办法遍历 desiredKeys 数组,将每个键对应的属性值存储到新的对象 newObj 中。最初,将 newObj 增加到 result 数组中。

最初,咱们通过 console.log() 打印出 result 数组,其中蕴含了咱们所需的属性键值对应的对象数组。

更简便办法 — 间接应用 map 便当 — 举荐此中办法

要获取对象数组中的某几项,能够应用 map() 办法来遍历数组,并通过解构赋值来抉择所需的属性。以下是一个示例代码:

// 示例对象数组
const objArray = [{ id: 1, name: 'John', age: 25},
  {id: 2, name: 'Jane', age: 30},
  {id: 3, name: 'Tom', age: 35},
  {id: 4, name: 'Alice', age: 40}
];

// 获取所需的属性
const desiredProps = objArray.map(({name, age}) => ({name, age}));

console.log(desiredProps);

上述代码中,咱们首先定义了一个对象数组 objArray,其中蕴含了每个对象的 idnameage 属性。

而后,咱们应用 map() 办法遍历 objArray 数组,并通过解构赋值来抉择所需的 nameage 属性。在这个例子中,咱们将解构赋值用于回调函数的参数局部,这样咱们就能间接抉择所需的属性。最初,咱们通过返回一个新的对象来创立蕴含所需属性的对象数组。

最初,咱们通过 console.log() 打印出 desiredProps 数组,其中蕴含了咱们所需的属性对应的对象数组。

更多精彩内容,请 微信搜寻“前端爱好者 戳我 查看

javaScript 获取 url 参数值

在 JavaScript 中,你能够应用以下办法获取 URL 参数的值:

应用 URLSearchParams 对象:

// 假如 URL 为 http://example.com/?name=John&age=30

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const age = urlParams.get('age');

console.log(name); // 输入 "John"
console.log(age); // 输入 "30"

应用正则表达式和 match() 办法:

// 假如 URL 为 http://example.com/?name=John&age=30

const url = window.location.href;
const regex = /[?&]([^=#]+)=([^&#]*)/g;
let match;
const params = {};

while ((match = regex.exec(url))) {const key = decodeURIComponent(match[1]);
  const value = decodeURIComponent(match[2]);
  params[key] = value;
}

console.log(params.name); // 输入 "John"
console.log(params.age); // 输入 "30"

这些办法都能够帮忙你获取 URL 中的参数值。

第一种办法应用了 URLSearchParams 对象,它是一个内置对象,提供了不便的操作 URL 查问参数的办法。

第二种办法则应用正则表达式来解析 URL 字符串,并将参数存储在一个对象中。你能够依据本人的须要抉择其中一种办法。

正文完
 0