JavaScript 배열 변환 및 변환

배열은 프로그래밍에서 기본적이고 강력한 데이터 구조입니다. 이들의 힘은 여러 개체나 값을 저장하는 능력에서만 나오는 것이 아닙니다. 또한 포함된 데이터를 쉽게 조작하고 사용할 수 있는 다양한 도구를 제공합니다.

특정 요구 사항을 충족하기 위해 어레이를 변경해야 하는 경우가 많습니다. 예를 들어, 특정 속성 값에 따라 정렬되도록 배열의 개체를 재구성해야 하거나 여러 배열을 단일 배열로 병합해야 할 수도 있습니다. 대부분의 경우 객체 배열을 완전히 다른 객체의 또 다른 배열로 완전히 변환해야 할 수도 있습니다.

이 튜토리얼에서는 배열 병합, 복사, 변환 및 필터링을 위해 JavaScript가 제공하는 도구에 대해 알아봅니다. 그러나 시작하기 전에 "병합", "변환", "변환" 및 "필터"라는 용어를 사용하더라도 이러한 프로세스는 기존 배열을 거의 변경하지 않는다는 점을 지적해야 합니다. 대신 병합, 변환, 변형 및 필터링된 데이터를 포함하는 새 배열을 생성하고 원래 배열은 원래 형식으로 변경되지 않은 채로 둡니다.

이 섹션으로 이동:

• 배열 병합
• 배열 복사
• 배열을 문자열로 변환
• 배열 변환
• 필터 배열

배열 병합

다양한 소스의 데이터를 처리 중이거나 여러 배열이 있고 이를 더 쉽게 처리할 수 있도록 단일 배열로 결합하고 싶을 수도 있습니다. 이유가 무엇이든 때로는 여러 어레이를 단일 어레이로 결합해야 할 때가 있습니다. JavaScript는 배열을 결합하는 두 가지 방법을 제공합니다. concat() 方法或展开运算符 (...)를 사용할 수 있습니다.

concat() 메서드는 두 개 이상의 배열을 병합하고 병합된 배열의 요소가 포함된 새 배열을 반환하는 데 사용됩니다. 새 배열은 먼저 메서드를 호출한 배열 개체의 요소로 채워집니다. 그런 다음 메서드에 전달한 배열 개체의 요소로 채워집니다. 예:

이 코드에는 array1과 array2라는 두 개의 배열이 있습니다. array1 和 array2。我们使用 concat() 方法将这些数组合并到一个名为 mergedArray 的新数组中，您可以看到生成的数组包含元素 [1, 2, 3, 4, 5, 6]。下面的示例更改代码，以便在 array2 上调用 concat() 메서드를 사용하여 이러한 배열을 mergedArray라는 새 배열로 병합하면 결과 배열에 [1, 2, 3, 4, 5, 6] 요소가 포함되어 있음을 확인할 수 있습니다. 코드>. 다음 예에서는 <code>array2에서

으아아아 [4, 5, 6, 1, 2, 3]。因此，如果元素顺序对您很重要，请务必按照您想要的顺序使用 concat()이 코드에서는 결과 배열의 요소 순서가 [4, 5, 6, 1, 2, 3]로 다릅니다. 따라서 요소의 순서가 중요하다면 원하는 순서대로

으아아아 array1 和 array2，但我们使用扩展运算符将它们合并到一个名为 mergedArray 的新数组中。最终结果与第一个 concat() 示例相同，但使用这种方法可以让您（以及那些阅读代码的人）更清楚地了解 mergedArray여기에도 array1과 array2라는 두 개의 배열이 있지만 스프레드 연산자를 사용하여 새 배열에서 mergedArray라는 배열로 병합합니다. 정렬. 최종 결과는 첫 번째

배열을 복사하려는 데에는 여러 가지 이유가 있습니다. 배열의 원래 데이터(단순 값인 경우)를 보존하거나 배열 개체 자체를 사용하거나 조작할 때 발생하는 의도하지 않은 부작용을 방지할 수 있습니다. 어떤 이유에서든 JavaScript를 사용하면 배열 복사본을 매우 쉽게 만들 수 있습니다.

slice()배열의 복사본을 만들려면 메서드를 사용할 수 있습니다. 이 메서드는 호출한 배열의 얕은 복사본을 반환합니다(나중에 자세히 설명). 예:

으아아아 이 코드는 originalArray的数组，我们使用slice()方法创建它的副本，而不传递任何参数。 copiedArrayoriginalArray라는

slice() 메서드를 사용하여 배열의 복사본을 만듭니다. copiedArray 개체는 원래 값과 동일한 값을 포함하지만 완전히 다른 배열 개체입니다.

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不受影响。< /p>

将数组转换为字符串

数组是一种编程构造，很多时候我们需要将数组转换为字符串。也许我们需要向用户呈现数组的内容。也许我们需要将数组的内容序列化为 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 배열 변환 및 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!