正文

用原生JS获取数组，从各种数据源提取元素到数组的技巧大揭秘

/0 浏览量
0922

在JavaScript中，数组是一个强大的数据结构，可以用来存储和操作一系列的值。有时候，你可能需要从不同的数据源中提取元素并构建一个数组。下面，我将详细介绍一些从各种数据源提取元素到数组的技巧。

一、从字符串中提取数组

假设你有一个包含逗号分隔的字符串，你想将其转换为一个数组。下面是一个简单的例子：

const str = "apple,banana,orange,grape";
const arr = str.split(",");
console.log(arr); // ["apple", "banana", "orange", "grape"]

在这个例子中，split(",") 方法将字符串按逗号分隔成数组。

二、从JSON字符串中提取数组

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。以下是一个从JSON字符串提取数组元素的例子：

const jsonString = '[{"name": "Alice", "age": 25}, {"name": "Bob", "age": 30}]';
const jsonData = JSON.parse(jsonString);
console.log(jsonData); // [{name: "Alice", age: 25}, {name: "Bob", age: 30}]

在这个例子中，JSON.parse() 方法将JSON字符串转换为JavaScript对象，然后你可以从这个对象中提取数组。

三、从DOM元素中提取数组

DOM（Document Object Model）是HTML和XML文档的编程接口，它允许JavaScript操作网页内容。以下是一个从DOM元素中提取数组元素的例子：

const items = document.querySelectorAll('.item');
const arr = Array.from(items);
console.log(arr); // NodeList转换为数组

在这个例子中，querySelectorAll('.item') 方法选择所有具有 .item 类的元素，然后使用 Array.from() 方法将 NodeList 对象转换为数组。

四、从函数返回值中提取数组

有时候，你可能需要从函数的返回值中提取数组。以下是一个例子：

function getItems() {
  return ["apple", "banana", "orange"];
}

const arr = getItems();
console.log(arr); // ["apple", "banana", "orange"]

在这个例子中，getItems() 函数返回一个数组，然后你可以直接使用这个数组。

五、从Promise中提取数组

在异步编程中，Promise 是一个非常重要的概念。以下是一个从Promise中提取数组元素的例子：

function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(["apple", "banana", "orange"]);
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data); // ["apple", "banana", "orange"]
});

在这个例子中，fetchData() 函数返回一个Promise，它将在1秒后解析为一个数组。

总结

通过以上几种方法，你可以从各种数据源中提取元素并构建一个数组。这些技巧可以帮助你更灵活地处理数据，提高你的JavaScript编程能力。希望这篇文章对你有所帮助！

-- 展开阅读全文 --