Penukaran dan transformasi tatasusunan JavaScript-WordTekan-php.cn

JavaScript 数组转换和转换

Array ialah struktur data asas dan berkuasa dalam pengaturcaraan. Kuasa mereka datang bukan hanya dari keupayaan untuk menyimpan berbilang objek atau nilai. Mereka juga mendedahkan pelbagai alat yang memudahkan untuk memanipulasi dan menggunakan data yang terkandung di dalamnya.

Kita sering perlu menukar tatasusunan untuk memenuhi keperluan tertentu. Sebagai contoh, anda mungkin perlu menyusun semula objek dalam tatasusunan supaya ia disusun mengikut nilai harta tertentu, atau anda mungkin perlu menggabungkan berbilang tatasusunan ke dalam tatasusunan tunggal. Dalam banyak kes, anda mungkin perlu menukar sepenuhnya tatasusunan objek kepada tatasusunan lain objek yang sama sekali berbeza.

Dalam tutorial ini, anda akan mempelajari tentang alatan yang disediakan oleh JavaScript untuk menggabungkan, menyalin, mengubah dan menapis tatasusunan. Walau bagaimanapun, sebelum saya memulakan, saya mesti menegaskan bahawa walaupun saya menggunakan istilah "gabung", "tukar", "tukar" dan "penapis", proses ini jarang mengubah tatasusunan sedia ada. Sebaliknya, mereka mencipta tatasusunan baharu yang mengandungi data yang digabungkan, diubah, diubah dan ditapis, menjadikan tatasusunan asal tidak berubah dalam format asalnya.

Lompat ke kandungan bahagian ini:

Gabungkan tatasusunan
Copy Array
Tukar tatasusunan kepada rentetan
Tukar tatasusunan
Penapis tatasusunan

Gabungkan tatasusunan

Mungkin anda sedang memproses data daripada sumber yang berbeza, atau mungkin anda mempunyai berbilang tatasusunan dan ingin menggabungkannya menjadi satu tatasusunan untuk memudahkan pemprosesannya. Walau apa pun alasannya, kadangkala anda perlu menggabungkan berbilang tatasusunan menjadi satu tatasusunan. JavaScript memberikan kita dua cara untuk menggabungkan tatasusunan. Anda boleh menggunakan kaedah concat() atau operator spread (...). 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]

Salin selepas log masuk

在这段代码中，我们有两个数组，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]

Salin selepas log masuk

请注意，在此代码中，结果数组中的元素的顺序不同：[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]

Salin selepas log masuk

在这里，我们再次有两个数组，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]

Salin selepas log masuk

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

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

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

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

Salin selepas log masuk

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

Kaedah concat() digunakan untuk menggabungkan dua atau lebih tatasusunan dan mengembalikan tatasusunan baharu yang mengandungi unsur tatasusunan yang digabungkan. Tatasusunan baharu akan diisi terlebih dahulu dengan elemen daripada objek tatasusunan yang anda panggil kaedah tersebut. Ia kemudiannya akan diisi dengan unsur-unsur objek tatasusunan yang anda hantar ke kaedah tersebut. Contohnya: #🎜🎜#

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 }]

Salin selepas log masuk

#🎜🎜#Dalam kod ini, kami mempunyai dua tatasusunan, array1 dan array2. Kami menggabungkan tatasusunan ini menjadi tatasusunan baharu yang dipanggil mergedArray menggunakan kaedah concat(), anda boleh melihat tatasusunan yang terhasil mengandungi elemen [1, 2 , 3 , 4, 5, 6. Contoh berikut menukar kod untuk memanggil kaedah concat() pada array2: #🎜🎜#

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

console.log(fruitString); // output: &amp;quot;apple, banana, cherry&amp;quot;

Salin selepas log masuk

#🎜🎜#Sila ambil perhatian bahawa dalam kod ini, susunan elemen dalam tatasusunan yang terhasil adalah berbeza: [4, 5, 6, 1, 2, 3]. Jadi jika susunan elemen penting kepada anda, pastikan anda menggunakan concat() dalam susunan yang anda mahu. #🎜🎜# #🎜🎜#Pengendali hamparan, sebaliknya, membenarkan anda memanjangkan elemen tatasusunan dan anda boleh menggunakannya dalam tatasusunan baharu secara literal untuk menggabungkan tatasusunan. Contohnya: #🎜🎜#

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

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

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

Salin selepas log masuk

#🎜🎜#Di sini, kami sekali lagi mempunyai dua tatasusunan, array1 dan array2, tetapi kami menggunakan operator spread untuk menggabungkannya menjadi satu yang dipanggil

mergedArray&amp;lt; /code&amp;gt; dalam tatasusunan baharu. Hasil akhirnya adalah sama seperti contoh &amp;lt;code&amp;gt;concat()

yang pertama, tetapi menggunakan pendekatan ini memberi anda (dan mereka yang membaca kod) pemahaman yang lebih jelas tentang cara mergedArray dibina dan diisi. #🎜🎜#

Menyalin tatasusunan#🎜🎜# #🎜🎜##🎜🎜#Terdapat beberapa sebab mengapa anda mungkin mahu menyalin tatasusunan. Anda mungkin mahu mengekalkan data asal tatasusunan (jika ia adalah nilai mudah), atau anda mungkin mahu mengelakkan sebarang kesan sampingan yang tidak diingini daripada menggunakan atau memanipulasi objek tatasusunan itu sendiri. Atas sebab apa pun, JavaScript menjadikannya sangat mudah untuk membuat salinan tatasusunan. #🎜🎜##🎜🎜# #🎜🎜##🎜🎜#Untuk membuat salinan tatasusunan, anda boleh menggunakan kaedah slice(). Kaedah ini mengembalikan salinan cetek tatasusunan yang anda panggil (lebih lanjut mengenai ini kemudian). Contohnya: #🎜🎜##🎜🎜#

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

Salin selepas log masuk

#🎜🎜#Kod ini mentakrifkan tatasusunan #🎜🎜# bernama #🎜🎜#Array asal#🎜🎜#, kami menggunakan #🎜🎜#slice()#🎜🎜 # kaedah mencipta salinannya tanpa menghantar sebarang parameter. Objek copyedArray mengandungi nilai yang sama seperti nilai asal, tetapi ia adalah objek tatasusunan yang berbeza sama sekali. #🎜🎜##🎜🎜# #🎜🎜##🎜🎜#Anda juga boleh menggunakan kaedah slice() untuk mengekstrak sebahagian daripada tatasusunan dengan menyatakan indeks mula dan akhir. #🎜🎜##🎜🎜#

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]

Salin selepas log masuk

#🎜🎜#Dalam contoh ini, kami mencipta tatasusunan hirisan yang mengandungi elemen daripada indeks 1 hingga indeks 3 tatasusunan asal (tidak termasuk indeks penamat yang dihantar kepada kaedah 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 }]

Salin selepas log masuk

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

将数组转换为字符串

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

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

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

console.log(fruitString); // output: &amp;quot;apple, banana, cherry&amp;quot;

Salin selepas log masuk

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

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

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

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

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

Salin selepas log masuk

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

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

转换数组

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

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

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

Salin selepas log masuk

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

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]

Salin selepas log masuk

在此代码中，我们有一个名为 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('&amp;amp;');

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

Salin selepas log masuk

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

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

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

过滤数组

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

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

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

Salin selepas log masuk

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]

Salin selepas log masuk

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

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

结论

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

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

Atas ialah kandungan terperinci Penukaran dan transformasi tatasusunan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!