JavaScript 陣列轉換與轉換

陣列是程式設計中一種基本且強大的資料結構。它們的力量不僅來自於儲存多個物件或值的能力。它們還公開了各種工具，使操作和使用它們所包含的資料變得容易。

我們經常需要更改陣列以滿足特定需求。例如，您可能需要重新組織數組中的對象，以便它按特定屬性的值排序，或者您可能需要將多個數字組合併為單一數組。在許多情況下，您可能需要將一個物件陣列完全轉換為另一個完全不同物件的陣列。

在本教程中，您將了解 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 的新数组，其中包含原始数字的平方值。 p>

但是让我们看一个从对象数组构建 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中文網其他相關文章！