JavaScript 配列の変換と変換

配列は、プログラミングにおける基本的で強力なデータ構造です。その能力は、複数のオブジェクトや値を保存する能力だけから来るものではありません。また、含まれるデータの操作と使用を容易にするさまざまなツールも公開されています。

特定のニーズを満たすために配列を変更する必要があることがよくあります。たとえば、特定のプロパティの値によって順序付けされるように配列内のオブジェクトを再編成する必要がある場合や、複数の配列を 1 つの配列にマージする必要がある場合があります。多くの場合、オブジェクトの配列を完全に異なるオブジェクトの別の配列に完全に変換する必要がある場合があります。

このチュートリアルでは、配列の結合、コピー、変換、フィルター処理のために JavaScript によって提供されるツールについて学習します。ただし、始める前に、「マージ」、「変換」、「変換」、「フィルター」という用語を使用していますが、これらのプロセスが既存の配列を変更することはほとんどないことを指摘しなければなりません。代わりに、マージ、変換、変換、およびフィルター処理されたデータを含む新しい配列を作成し、元の配列は元の形式のまま残します。

このセクションの内容にジャンプします:

• 配列を結合
• 配列のコピー
• 配列を文字列に変換する
• 配列の変換
• フィルター配列

配列を結合

おそらく、さまざまなソースからのデータを処理しているか、複数の配列があり、それらを単一の配列に結合して処理しやすくしたいと考えているかもしれません。理由が何であれ、場合によっては、複数の配列を 1 つの配列に結合する必要があります。 JavaScript では、配列を結合する 2 つの方法が提供されます。 concat() メソッドまたはスプレッド演算子 (...) を使用できます。

concat() このメソッドは、2 つ以上の配列をマージし、マージされた配列の要素を含む新しい配列を返すために使用されます。新しい配列には、まず、メソッドを呼び出した配列オブジェクトの要素が格納されます。その後、メソッドに渡した配列オブジェクトの要素が格納されます。例えば：＃＃＃ リーリー

このコードには、

array1 と array2 という 2 つの配列があります。 concat() メソッドを使用して、これらの配列を mergedArray という新しい配列にマージします。結果の配列には、要素 [1, 2, 3 , 4] が含まれていることがわかります。 、5、6]。次の例では、array2 の concat() メソッドを呼び出すようにコードを変更します。 リーリー このコードでは、結果の配列内の要素の順序が

[4, 5, 6, 1, 2, 3]

と異なることに注意してください。したがって、要素の順序が重要な場合は、必ず希望する順序で concat() を使用してください。 一方、スプレッド演算子を使用すると、配列の要素を拡張でき、新しい配列リテラルでそれを使用して配列を結合できます。例えば：＃＃＃ リーリー

ここでも、

array1

と

array2 という 2 つの配列がありますが、スプレッド演算子を使用して、それらを新しい配列の mergedArray という 1 つにマージします。最終結果は最初の concat() の例と同じになりますが、このアプローチを使用すると、mergedArray がどのように構築され、設定されるのかを (およびコードを読む人が) より明確に理解できるようになります。の。 配列のコピー

配列をコピーする理由はいくつかあります。配列の元のデータ (単純な値の場合) を保持したい場合や、配列オブジェクト自体の使用または操作による意図しない副作用を回避したい場合があります。何らかの理由で、JavaScript を使用すると、配列のコピーを非常に簡単に作成できます。

配列のコピーを作成するには、

slice()

メソッドを使用できます。このメソッドは、呼び出した配列の浅いコピーを返します (これについては後で詳しく説明します)。例えば：＃＃＃＃＃＃ リーリー このコードは、originalArray

という名前の

配列を定義します。slice() メソッドを使用して、コピーを作成せずにコピーを作成します。パラメータを渡します。 copiedArray オブジェクトには元のオブジェクトと同じ値が含まれていますが、まったく異なる配列オブジェクトです。 slice() メソッドを使用して、開始インデックスと終了インデックスを指定して配列の一部を抽出することもできます。

リーリー この例では、元の配列のインデックス 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不受影响。< /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 中国語 Web サイトの他の関連記事を参照してください。