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

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

在本教程中，您將了解 JavaScript 提供的用於合併、複製、轉(zhuǎn)換和過濾陣列的工具。然而，在開始之前，我必須指出，雖然我使用術(shù)語“合併”、“轉(zhuǎn)換”、“轉(zhuǎn)換”和“過濾”，但這些過程很少更改現(xiàn)有陣列。相反，他們創(chuàng)建一個新數(shù)組，其中包含合併、轉(zhuǎn)換、轉(zhuǎn)換和過濾的數(shù)據(jù)，使原始數(shù)組保持不變的原始格式。

跳到本節(jié)內(nèi)容：

• 合併陣列
• #複製陣列
• #將陣列轉(zhuǎn)換為字串
• 轉(zhuǎn)換陣列
• #過濾陣列

合併陣列

#也許您正在處理來自不同來源的數(shù)據(jù)，或者您可能有多個數(shù)組並希望將它們組合成一個數(shù)組，以便更輕鬆地處理它們。無論出於何種原因，有時您都需要將多個數(shù)字組合併為一個陣列。 JavaScript 為我們提供了兩種組合陣列的方法。您可以使用 concat() 方法或展開運算子 (...)。

concat() 方法用於合併兩個或多個數(shù)組，並傳回一個包含合併數(shù)組元素的新數(shù)組。新數(shù)組將首先由您呼叫該方法的數(shù)組物件中的元素填入。然後，它將由您傳遞給該方法的陣列物件的元素填充。例如：

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]

在這段程式碼中，我們有兩個數(shù)組，array1 和 array2。我們使用concat() 方法將這些數(shù)組合併到一個名為mergedArray 的新數(shù)組中，您可以看到生成的數(shù)組包含元素[1, 2, 3 , 4, 5, 6]。下面的範(fàn)例更改程式碼，以便在 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]

請注意，在此程式碼中，結(jié)果陣列中的元素的順序不同：[4, 5, 6, 1, 2, 3]。因此，如果元素順序?qū)δ苤匾?，請?wù)必按照您想要的順序使用 concat() 。

另一方面，擴充運算子允許您擴展數(shù)組的元素，並且可以在新的數(shù)組文字中使用它來合併數(shù)組。例如：

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

在這裡，我們再次有兩個數(shù)組，array1 和array2，但我們使用擴充運算子將它們合併到一個名為mergedArray 的新數(shù)組中。最終結(jié)果與第一個concat() 範(fàn)例相同，但使用這種方法可以讓您（以及那些閱讀程式碼的人）更清楚地了解mergedArray 是如何建構(gòu)和填充的。

複製數(shù)組

您可能想要複製陣列的原因有很多。您可能想要保留數(shù)組的原始資料（如果它們是簡單值），或者您可能希望避免使用或操作數(shù)組物件本身帶來的任何意外副作用。不管出於什麼原因，JavaScript 讓創(chuàng)建數(shù)組的副本變得非常容易。

要建立陣列的副本，可以使用 slice() 方法。此方法會傳回您呼叫它的陣列的淺表副本（稍後將詳細(xì)介紹）。例如：

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

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

這段程式碼定義了一個名為originalArray的數(shù)組，我們使用slice()方法來建立它的副本，而不傳遞任何參數(shù)。 copiedArray 物件包含與原始值相同的值，但它是一個完全不同的陣列物件。

您也可以使用 slice() 方法透過指定開始和結(jié)束索引來提取陣列的一部分。

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

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

在此範(fàn)例中，我們建立一個切片數(shù)組，其中包含原始數(shù)組從索引 1 到索引 3 的元素（不包括傳遞給 slice() 方法的結(jié)束索引）。

什么是淺拷貝？

淺拷貝是指創(chuàng)建一個新的對象或數(shù)組，它是原始對象或集合的副本，但僅限于第一級。換句話說，淺拷貝復(fù)制原始對象的結(jié)構(gòu)，但不復(fù)制其中包含的對象或元素。

當(dāng)您創(chuàng)建數(shù)組的淺表副本時，新數(shù)組將擁有自己的一組引用，對與原始數(shù)組相同的對象或元素進(jìn)行引用。這意味著如果原始數(shù)組包含簡單值（例如數(shù)字、字符串或布爾值），則淺拷貝將有效地創(chuàng)建具有相同值的新數(shù)組。但是，如果原始數(shù)組包含對象或其他引用類型（例如其他數(shù)組或?qū)ο螅瑒t淺復(fù)制將僅復(fù)制對這些對象的引用，而不是對象本身。因此，對原始數(shù)組中的對象所做的任何更改也將反映在淺拷貝中，反之亦然，因為它們?nèi)匀灰脙?nèi)存中的相同對象。

相比之下，深層復(fù)制創(chuàng)建一個新的對象或集合，它是原始對象或集合的完整、獨立的副本，包括所有嵌套的對象或元素。這意味著對原始數(shù)組中的對象所做的更改不會影響深層復(fù)制，反之亦然，因為它們在內(nèi)存中擁有自己的對象集。

下面是一個例子來說明差異：

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反映對原始數(shù)組所做的更改，而deepCopy不受影響。< /p>

將數(shù)組轉(zhuǎn)換為字符串

數(shù)組是一種編程構(gòu)造，很多時候我們需要將數(shù)組轉(zhuǎn)換為字符串。也許我們需要向用戶呈現(xiàn)數(shù)組的內(nèi)容。也許我們需要將數(shù)組的內(nèi)容序列化為 JSON 以外的格式。

通過使用 join() 方法，您可以將數(shù)組轉(zhuǎn)換為字符串。默認(rèn)情況下，元素以逗號分隔，但您可以通過將字符串作為參數(shù)傳遞給 join() 方法來指定自定義分隔符。例如：

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

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

在此示例中，我們有一個名為 fruitArray 的數(shù)組，我們使用 join() 方法將其轉(zhuǎn)換為字符串自定義分隔符 - 逗號后跟空格。

使用 join() 的一個更有用的示例是從包含 URL 查詢字符串參數(shù)的數(shù)組中輸出 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 的數(shù)組，其中包含一組查詢字符串參數(shù)。然后，我們使用 join() 方法將數(shù)組的元素與 & 分隔符連接起來，形成一個查詢字符串。最后，我們通過將查詢字符串附加到基本 URL 來構(gòu)建完整的 URL。

生成 URL 查詢參數(shù)字符串是使用 join() 的常見用例。但是，您將使用一組復(fù)雜的對象，而不是像本示例中所示的簡單的預(yù)定義字符串，然后必須將其轉(zhuǎn)換為可以連接在一起的字符串?dāng)?shù)組。

轉(zhuǎn)換數(shù)組

轉(zhuǎn)換數(shù)組的能力是 JavaScript 中最有用、最強大的功能之一。正如我在本教程前面提到的，您并不是真正轉(zhuǎn)換數(shù)組，而是創(chuàng)建一個包含轉(zhuǎn)換后的對象或值的新數(shù)組。原始數(shù)組未修改。

要轉(zhuǎn)換數(shù)組，請使用 map() 方法。它接受回調(diào)函數(shù)作為參數(shù)，并為數(shù)組中的每個元素執(zhí)行該函數(shù)。

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

回調(diào)函數(shù)可以接受以下三個參數(shù)：

• currentElement：當(dāng)前要轉(zhuǎn)換的元素（必填）
• index：當(dāng)前元素的索引（可選）
• array：調(diào)用 map() 方法的數(shù)組（可選）

然后，回調(diào)函數(shù)的返回值將作為元素存儲在新數(shù)組中。例如：

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 的數(shù)組，并聲明一個名為 square 的函數(shù)，該函數(shù)將數(shù)字作為輸入并返回該數(shù)字的平方。我們將 square 函數(shù)傳遞給 numbers.map() 以創(chuàng)建一個名為 squaredNumbers 的新數(shù)組，其中包含原始數(shù)字的平方值。

但是讓我們看一個從對象數(shù)組構(gòu)建 URL 查詢字符串的示例。原始數(shù)組將包含具有 param （對于參數(shù)名稱）和 value （對于參數(shù)值）屬性的對象。

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 的數(shù)組，其中包含我們要轉(zhuǎn)換為查詢字符串的對象。我們聲明一個名為 createParams 的函數(shù)，它接受一個對象作為輸入并返回格式為“param=value”的字符串。然后，我們使用 map() 方法將 createParams?函數(shù)應(yīng)用于原始數(shù)組中的每個對象，從而創(chuàng)建一個名為 queryStringArray 的新數(shù)組。

接下來，我們 join() queryStringArray 創(chuàng)建最終的查詢字符串，使用 & 分隔符分隔每個 param=value 對，然后我們通過將查詢字符串附加到來構(gòu)造完整的 URL基本 URL。

使用 map() 方法是處理數(shù)組的重要部分，但有時我們只需要處理數(shù)組中的幾個元素。

過濾數(shù)組

filter() 方法允許您創(chuàng)建一個僅包含滿足給定條件的元素的新數(shù)組。這是通過將回調(diào)函數(shù)傳遞給 filter() 方法來實現(xiàn)的，該方法測試原始數(shù)組中的每個元素。如果回調(diào)函數(shù)返回true，則該元素包含在新數(shù)組中；如果返回 false，則排除該元素。

回調(diào)函數(shù)使用與 map() 方法的回調(diào)函數(shù)相同的簽名：

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

currentElement 參數(shù)是必需的，但 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 的數(shù)組。我們聲明一個名為 isEven 的函數(shù)，它接受一個數(shù)字作為輸入，如果數(shù)字是偶數(shù)（即能被 2 整除），則返回 true ，否則返回 false 。我們通過使用 isEven 函數(shù)作為 filter() 方法的回調(diào)函數(shù)來過濾原始數(shù)組，從而創(chuàng)建一個名為 evenNumbers 的新數(shù)組。生成的 evenNumbers 數(shù)組僅包含原始數(shù)組中的偶數(shù)。

filter() 方法是處理數(shù)組的強大工具，允許您輕松提取相關(guān)數(shù)據(jù)或根據(jù)特定條件創(chuàng)建數(shù)組的子集。

結(jié)論

數(shù)組是 JavaScript 中最通用、最有用的對象之一，因為我們有工具可以輕松地合并、復(fù)制、轉(zhuǎn)換、轉(zhuǎn)換和過濾它們。這些技術(shù)中的每一種都有特定的用途，您可以通過各種方式將它們組合起來，以在 JavaScript 應(yīng)用程序中有效地操作和處理數(shù)組。通過理解和應(yīng)用這些方法，您將能夠更好地應(yīng)對涉及數(shù)組的各種編程挑戰(zhàn)。

當(dāng)您繼續(xù)發(fā)展 JavaScript 技能時，請記住練習(xí)使用這些數(shù)組方法并探索該語言中可用的其他內(nèi)置數(shù)組函數(shù)。這將幫助您更加精通 JavaScript，并使您能夠編寫更高效、干凈且可維護(hù)的代碼?？鞓肪幋a！

以上是JavaScript 陣列轉(zhuǎn)換與轉(zhuǎn)換的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！