### [JavaScript 数组转换和转换](https://www.prosaas.cn/article/7127)

**Published:** 2023-08-28T15:41:10

**Author:** 5201314

**Excerpt:** 数组是编程中一种基本且强大的数据结构。它们的力量不仅仅来自于存储多个对象或值的能力。它们还公开了各种工具，使操…

![](//zhiqipro.oss-cn-beijing.aliyuncs.com/2023/12/20231212125740455.jpg)

数组是编程中一种基本且强大的数据结构。它们的力量不仅仅来自于存储多个对象或值的能力。它们还公开了各种工具，使操作和使用它们所包含的数据变得容易。

我们经常需要更改数组以满足特定需求。例如，您可能需要重新组织数组中的对象，以便它按特定属性的值排序，或者您可能需要将多个数组合并为单个数组。在许多情况下，您可能需要将一个对象数组完全转换为另一个完全不同对象的数组。

在本教程中，您将了解 JavaScript 提供的用于合并、复制、转换和过滤数组的工具。然而，在开始之前，我必须指出，虽然我使用术语“合并”、“转换”、“转换”和“过滤”，但这些过程很少更改现有数组。相反，他们创建一个新数组，其中包含合并、转换、转换和过滤的数据，使原始数组保持不变的原始格式。

跳转到本节内容：

-   合并数组
-   复制数组
-   将数组转换为字符串
-   转换数组
-   过滤数组

## 合并数组

也许您正在处理来自不同来源的数据，或者您可能有多个数组并希望将它们组合成一个数组，以便更轻松地处理它们。无论出于何种原因，有时您都需要将多个数组合并为一个数组。 JavaScript 为我们提供了两种组合数组的方法。您可以使用 `concat()` 方法或展开运算符 (`...`)。

`concat()` 方法用于合并两个或多个数组，并返回一个包含合并数组元素的新数组。新数组将首先由您调用该方法的数组对象中的元素填充。然后，它将由您传递给该方法的数组对象的元素填充。例如：

const array1 = \[1, 2, 3\];
const array2 = \[4, 5, 6\];
const mergedArray = array1.concat(array2);
console.log(mergedArray); // output: \[1, 2, 3, 4, 5, 6\]

在这段代码中，我们有两个数组，`array1` 和 `array2`。我们使用 `concat()` 方法将这些数组合并到一个名为 `mergedArray` 的新数组中，您可以看到生成的数组包含元素 `[1, 2, 3, 4, 5, 6]`。下面的示例更改代码，以便在 `array2` 上调用 `concat()` 方法：

const array1 = \[1, 2, 3\];
const array2 = \[4, 5, 6\];
const mergedArray2 = array2.concat(array1);
console.log(mergedArray2); // output: \[4, 5, 6, 1, 2, 3\]

请注意，在此代码中，结果数组中的元素的顺序不同：`[4, 5, 6, 1, 2, 3]`。因此，如果元素顺序对您很重要，请务必按照您想要的顺序使用 `concat()` 。

另一方面，扩展运算符允许您扩展数组的元素，并且可以在新的数组文字中使用它来合并数组。例如：

const array1 = \[1, 2, 3\];
const array2 = \[4, 5, 6\];
const mergedArray = \[...array1, ...array2\];
console.log(mergedArray); // output: \[1, 2, 3, 4, 5, 6\]

在这里，我们再次有两个数组，`array1` 和 `array2`，但我们使用扩展运算符将它们合并到一个名为 `mergedArray` 的新数组中。最终结果与第一个 `concat()` 示例相同，但使用这种方法可以让您（以及那些阅读代码的人）更清楚地了解 `mergedArray` 是如何构建和填充的。

## 复制数组

您可能想要复制数组的原因有多种。您可能希望保留数组的原始数据（如果它们是简单值），或者您可能希望避免使用或操作数组对象本身带来的任何意外副作用。不管出于什么原因，JavaScript 使得创建数组的副本变得非常容易。

要创建数组的副本，可以使用 `slice()` 方法。此方法返回您调用它的数组的浅表副本（稍后详细介绍）。例如：

const originalArray = \[1, 2, 3, 4, 5\];
const copiedArray = originalArray.slice();

console.log(copiedArray); // output: \[1, 2, 3, 4, 5\]

这段代码定义了一个名为`originalArray`的数组，我们使用`slice()`方法创建它的副本，而不传递任何参数。 `copiedArray` 对象包含与原始值相同的值，但它是一个完全不同的数组对象。

您还可以使用 `slice()` 方法通过指定开始和结束索引来提取数组的一部分。

const originalArray = \[1, 2, 3, 4, 5\];
const slicedArray = originalArray.slice(1, 4);

console.log(slicedArray); // output: \[2, 3, 4\]

在此示例中，我们创建一个切片数组，其中包含原始数组从索引 1 到索引 3 的元素（不包括传递给 `slice()` 方法的结束索引）。

### 什么是浅拷贝？

浅拷贝是指创建一个新的对象或数组，它是原始对象或集合的副本，但仅限于第一级。换句话说，浅拷贝复制原始对象的结构，但不复制其中包含的对象或元素。

当您创建数组的浅表副本时，新数组将拥有自己的一组引用，对与原始数组相同的对象或元素进行引用。这意味着如果原始数组包含简单值（例如数字、字符串或布尔值），则浅拷贝将有效地创建具有相同值的新数组。但是，如果原始数组包含对象或其他引用类型（例如其他数组或对象），则浅复制将仅复制对这些对象的引用，而不是对象本身。因此，对原始数组中的对象所做的任何更改也将反映在浅拷贝中，反之亦然，因为它们仍然引用内存中的相同对象。

相比之下，深层复制创建一个新的对象或集合，它是原始对象或集合的完整、独立的副本，包括所有嵌套的对象或元素。这意味着对原始数组中的对象所做的更改不会影响深层复制，反之亦然，因为它们在内存中拥有自己的对象集。

下面是一个例子来说明差异：

const originalArray = \[1, 2, { a: 3 }\];
const shallowCopy = originalArray.slice();
const deepCopy = JSON.parse(JSON.stringify(originalArray));

originalArray\[2\].a = 4;

console.log(shallowCopy); // output: \[1, 2, { a: 4 }\]
console.log(deepCopy); // output: \[1, 2, { a: 3 }\]

在此示例中，`shallowCopy`反映对原始数组所做的更改，而`deepCopy`不受影响。

## 将数组转换为字符串

数组是一种编程构造，很多时候我们需要将数组转换为字符串。也许我们需要向用户呈现数组的内容。也许我们需要将数组的内容序列化为 JSON 以外的格式。

通过使用 `join()` 方法，您可以将数组转换为字符串。默认情况下，元素以逗号分隔，但您可以通过将字符串作为参数传递给 `join()` 方法来指定自定义分隔符。例如：

const fruitArray = \['apple', 'banana', 'cherry'\];
const fruitString = fruitArray.join(', ');

console.log(fruitString); // output: "apple, banana, cherry"

在此示例中，我们有一个名为 `fruitArray` 的数组，我们使用 `join()` 方法将其转换为字符串自定义分隔符 - 逗号后跟空格。

使用 `join()` 的一个更有用的示例是从包含 URL 查询字符串参数的数组中输出 URL 查询字符串，如下所示：

const queryParamsArray = \[
  'search=JavaScript',
  'page=1',
  'sort=relevance',
\];

const queryString = queryParamsArray.join('&');

const url = 'https://example.com/api?' + queryString;
console.log(url); // output: "https://example.com/api?search=JavaScript&page=1&sort=relevance"

在此代码中，我们有一个名为 `queryParamsArray` 的数组，其中包含一组查询字符串参数。然后，我们使用 `join()` 方法将数组的元素与 `&` 分隔符连接起来，形成一个查询字符串。最后，我们通过将查询字符串附加到基本 URL 来构建完整的 URL。

生成 URL 查询参数字符串是使用 `join()` 的常见用例。但是，您将使用一组复杂的对象，而不是像本示例中所示的简单的预定义字符串，然后必须将其转换为可以连接在一起的字符串数组。

## 转换数组

转换数组的能力是 JavaScript 中最有用、最强大的功能之一。正如我在本教程前面提到的，您并不是真正转换数组，而是创建一个包含转换后的对象或值的新数组。原始数组未修改。

要转换数组，请使用 `map()` 方法。它接受回调函数作为参数，并为数组中的每个元素执行该函数。

map(function (currentElement\[, index, array\]));

回调函数可以接受以下三个参数：

-   **`currentElement`**：当前要转换的元素（必填）
-   **`index`**：当前元素的索引（可选）
-   **`array`**：调用 `map()` 方法的数组（可选）

然后，回调函数的返回值将作为元素存储在新数组中。例如：

const numbers = \[1, 2, 3, 4, 5\];

function square(number) {
  return number \* number;
}

const squaredNumbers = numbers.map(square);

console.log(squaredNumbers); // output: \[1, 4, 9, 16, 25\]

在此代码中，我们有一个名为 `numbers` 的数组，并声明一个名为 `square` 的函数，该函数将数字作为输入并返回该数字的平方。我们将 `square` 函数传递给 `numbers.map()` 以创建一个名为 `squaredNumbers` 的新数组，其中包含原始数字的平方值。

但是让我们看一个从对象数组构建 URL 查询字符串的示例。原始数组将包含具有 `param` （对于参数名称）和 `value` （对于参数值）属性的对象。

const queryParams = \[
  { param: 'search', value: 'JavaScript' },
  { param: 'page', value: 1 },
  { param: 'sort', value: 'relevance' },
\];

function createParams(obj) {
  return obj.param + '=' + obj.value;
}

const queryStringArray = queryParams.map(createParams);

const queryString = queryStringArray.join('&');

const url = 'https://example.com/api?' + queryString;
console.log(url); // output: "https://example.com/api?search=JavaScript&page=1&sort=relevance"

在此示例中，我们有一个名为 `queryParams` 的数组，其中包含我们要转换为查询字符串的对象。我们声明一个名为 `createParams` 的函数，它接受一个对象作为输入并返回格式为“`param=value`”的字符串。然后，我们使用 `map()` 方法将 `createParams` 函数应用于原始数组中的每个对象，从而创建一个名为 `queryStringArray` 的新数组。

接下来，我们 `join()` `queryStringArray` 创建最终的查询字符串，使用 `&` 分隔符分隔每个 param=value 对，然后我们通过将查询字符串附加到来构造完整的 URL基本 URL。

使用 `map()` 方法是处理数组的重要部分，但有时我们只需要处理数组中的几个元素。

## 过滤数组

`filter()` 方法允许您创建一个仅包含满足给定条件的元素的新数组。这是通过将回调函数传递给 `filter()` 方法来实现的，该方法测试原始数组中的每个元素。如果回调函数返回`true`，则该元素包含在新数组中；如果返回 `false`，则排除该元素。

回调函数使用与 `map()` 方法的回调函数相同的签名：

filter(function(currentElement\[, index, array\]));

`currentElement` 参数是必需的，但 `index` 和 `array` 是可选的。例如：

const numbers = \[1, 2, 3, 4, 5, 6, 7, 8, 9, 10\];

function isEven(number) {
  return number % 2 === 0;
}

const evenNumbers = numbers.filter(isEven);

console.log(evenNumbers); // output: \[2, 4, 6, 8, 10\]

在此示例中，我们有一个名为 `numbers` 的数组。我们声明一个名为 `isEven` 的函数，它接受一个数字作为输入，如果数字是偶数（即能被 2 整除），则返回 `true` ，否则返回 `false` 。我们通过使用 `isEven` 函数作为 `filter()` 方法的回调函数来过滤原始数组，从而创建一个名为 `evenNumbers` 的新数组。生成的 `evenNumbers` 数组仅包含原始数组中的偶数。

`filter()` 方法是处理数组的强大工具，允许您轻松提取相关数据或根据特定条件创建数组的子集。

## 结论

数组是 JavaScript 中最通用、最有用的对象之一，因为我们有工具可以轻松地合并、复制、转换、转换和过滤它们。这些技术中的每一种都有特定的用途，您可以通过各种方式将它们组合起来，以在 JavaScript 应用程序中有效地操作和处理数组。通过理解和应用这些方法，您将能够更好地应对涉及数组的各种编程挑战。

当您继续发展 JavaScript 技能时，请记住练习使用这些数组方法并探索该语言中可用的其他内置数组函数。这将帮助您更加精通 JavaScript，并使您能够编写更高效、干净且可维护的代码。快乐编码！

以上就是JavaScript 数组转换和转换的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** Array, Filter, JavaScript, json, map, 切片, 回调函数, 字符串, 对象, 引用类型

**Categories:** WordPress

---