Konvertierungen und Transformationen von JavaScript-Arrays

Array ist eine grundlegende und leistungsstarke Datenstruktur in der Programmierung. Ihre Leistungsfähigkeit beruht nicht nur auf der Fähigkeit, mehrere Objekte oder Werte zu speichern. Sie stellen außerdem eine Vielzahl von Tools zur Verfügung, die die Manipulation und Nutzung der darin enthaltenen Daten erleichtern.

Wir müssen Arrays oft ändern, um bestimmte Anforderungen zu erfüllen. Beispielsweise müssen Sie möglicherweise die Objekte in einem Array neu organisieren, sodass sie nach dem Wert einer bestimmten Eigenschaft sortiert werden, oder Sie müssen möglicherweise mehrere Arrays zu einem einzigen Array zusammenführen. In vielen Fällen müssen Sie möglicherweise ein Array von Objekten vollständig in ein anderes Array völlig unterschiedlicher Objekte konvertieren.

In diesem Tutorial erfahren Sie mehr über die Tools, die JavaScript zum Zusammenführen, Kopieren, Transformieren und Filtern von Arrays bereitstellt. Bevor ich anfange, muss ich jedoch darauf hinweisen, dass ich zwar die Begriffe „zusammenführen“, „konvertieren“, „konvertieren“ und „filtern“ verwende, diese Prozesse jedoch selten vorhandene Arrays verändern. Stattdessen erstellen sie ein neues Array, das die zusammengeführten, transformierten, transformierten und gefilterten Daten enthält, wobei das ursprüngliche Array in seinem ursprünglichen Format unverändert bleibt.

Zu diesem Abschnitt springen:

• Arrays zusammenführen
• Array kopieren
• Array in String konvertieren
• Array konvertieren
• Filterarray

Arrays zusammenführen

Vielleicht verarbeiten Sie Daten aus verschiedenen Quellen oder Sie haben mehrere Arrays und möchten diese in einem einzigen Array kombinieren, um die Verarbeitung zu erleichtern. Was auch immer der Grund sein mag, manchmal müssen Sie mehrere Arrays zu einem einzigen Array kombinieren. JavaScript bietet uns zwei Möglichkeiten, Arrays zu kombinieren. Sie können concat() 方法或展开运算符 (... verwenden.

Die Methode

concat() wird verwendet, um zwei oder mehr Arrays zusammenzuführen und ein neues Array zurückzugeben, das die Elemente der zusammengeführten Arrays enthält. Das neue Array wird zunächst mit Elementen aus dem Array-Objekt gefüllt, für das Sie die Methode aufgerufen haben. Es wird dann mit den Elementen des Array-Objekts gefüllt, das Sie an die Methode übergeben haben. Zum Beispiel:

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]

In diesem Code haben wir zwei Arrays, array1 und array2. Wir führen diese Arrays mithilfe der array1 和 array2。我们使用 concat() 方法将这些数组合并到一个名为 mergedArray 的新数组中，您可以看到生成的数组包含元素 [1, 2, 3, 4, 5, 6]。下面的示例更改代码，以便在 array2 上调用 concat()-Methode zu einem neuen Array namens mergedArray zusammen. Sie können sehen, dass das resultierende Array die Elemente [1, 2, 3, 4, 5, 6] </ enthält. Code>. Das folgende Beispiel ändert den Code, um die </p>-Methode für <code>array2 aufzurufen:

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()Bitte beachten Sie, dass in diesem Code die Reihenfolge der Elemente im resultierenden Array unterschiedlich ist: [4, 5, 6, 1, 2, 3]. Wenn Ihnen also die Reihenfolge der Elemente wichtig ist, verwenden Sie

unbedingt in der gewünschten Reihenfolge.

Mit dem Spread-Operator hingegen können Sie die Elemente eines Arrays erweitern und ihn in einem neuen Array-Literal verwenden, um Arrays zusammenzuführen. Zum Beispiel:

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() 示例相同，但使用这种方法可以让您（以及那些阅读代码的人）更清楚地了解 mergedArrayHier haben wir wieder zwei Arrays, array1 und array2, aber wir verwenden den Spread-Operator, um sie im neuen Array zu einem Array namens mergedArray zusammenzuführen . Das Endergebnis ist das gleiche wie im ersten

Beispiel, aber wenn Sie diesen Ansatz verwenden, erhalten Sie (und diejenigen, die den Code lesen) eine klarere Vorstellung davon, wie das mergedArray aufgebaut und gefüllt wird.

Array kopieren

Es gibt mehrere Gründe, warum Sie ein Array kopieren möchten. Möglicherweise möchten Sie die ursprünglichen Daten des Arrays beibehalten (sofern es sich um einfache Werte handelt) oder Sie möchten möglicherweise unbeabsichtigte Nebenwirkungen durch die Verwendung oder Manipulation des Array-Objekts selbst vermeiden. Aus welchem ​​Grund auch immer, mit JavaScript ist es sehr einfach, Kopien von Arrays zu erstellen.

slice()Um eine Kopie eines Arrays zu erstellen, können Sie die -Methode verwenden. Diese Methode gibt eine flache Kopie des Arrays zurück, auf dem Sie sie aufgerufen haben (mehr dazu später). Zum Beispiel:

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

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

Dieser Code definiert ein originalArray的数组，我们使用slice()方法创建它的副本，而不传递任何参数。 copiedArray Array mit dem Namen originalArray

, und wir erstellen eine Kopie davon mit der

slice()-Methode, ohne Parameter zu übergeben. Das copiedArray-Objekt enthält dieselben Werte wie die Originalwerte, ist jedoch ein völlig anderes Array-Objekt.

slice()Sie können die Methode

auch verwenden, um einen Teil eines Arrays zu extrahieren, indem Sie den Start- und Endindex angeben. 🎜🎜

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

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

🎜In diesem Beispiel erstellen wir ein segmentiertes Array, das Elemente von Index 1 bis Index 3 des ursprünglichen Arrays enthält (mit Ausnahme des an die 🎜-Methode übergebenen Endindex). 🎜

什么是浅拷贝？

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

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

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

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

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，并使您能够编写更高效、干净且可维护的代码。快乐编码！

Das obige ist der detaillierte Inhalt vonKonvertierungen und Transformationen von JavaScript-Arrays. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!