Array.from() の 5 つの非常に便利な使い方 (詳細な説明)

どんなプログラミング言語も基本的な使用法を超えた機能を備えており、適切な設計と幅広い問題の解決の試みから恩恵を受けます。

JavaScript にはそのような関数があります: Array.from: JavaScript でコレクション (配列、配列のようなオブジェクト、または文字列、マップ、セットなどの反復可能なオブジェクトなど) を許可します。有用な変換を実行します。

[関連コースの推奨: JavaScript ビデオ チュートリアル ]

この記事では、便利で興味深い 5 つの Array.from() 例について説明します。

1. はじめに

始める前に、Array.from() の役割を思い出してください。構文:

Array.from(arrayLike[, mapFunction[, thisArg]])

• arrayLike: 必須パラメータ、配列に変換する疑似配列オブジェクトまたは反復可能オブジェクト。

• mapFunction: オプションのパラメーター、mapFunction(item,index){...} は、コレクション内の各項目に対して呼び出される関数です。返された値は新しいコレクションに挿入されます。

• thisArg: オプションのパラメータ。コールバック関数mapFunctionを実行するときのこのオブジェクト。このパラメータはほとんど使用されません。

たとえば、クラス配列の各項目を 2 で乗算してみましょう:

const someNumbers = { '0': 10, '1': 15, length: 2 };
Array.from(someNumbers, value => value * 2); // => [20, 30]

2. クラス配列を配列に変換します

Array.from() 最初の使用: 配列のようなオブジェクトを配列に変換します。

通常、遭遇する配列のようなオブジェクトには、関数内の arguments キーワード、または DOM コレクションが含まれます。

次の例では、関数の引数を合計してみます。

function sumArguments() {
    return Array.from(arguments).reduce((sum, num) => sum + num);
}
sumArguments(1, 2, 3); // => 6

Array.from(arguments) 配列のようなオブジェクトを変換する arguments 配列に変換し、配列の reduce メソッドを使用して合計します。

さらに、Array.from() の最初のパラメータには、任意の反復可能なオブジェクトを指定できます。引き続きいくつかの例を見てみましょう:

Array.from('Hey');                   // => ['H', 'e', 'y']
Array.from(new Set(['one', 'two'])); // => ['one', 'two']

const map = new Map();
map.set('one', 1)
map.set('two', 2);
Array.from(map); // => [['one', 1], ['two', 2]]

# #3. 配列のクローンを作成する

JavaScript で配列のクローンを作成するには、さまざまな方法があります。ご想像のとおり、Array.from() を使用すると、配列の浅いコピーを簡単に実行できます。

const numbers = [3, 6, 9];
const numbersCopy = Array.from(numbers);

numbers === numbersCopy; // => false

Array.from(numbers) は、numbers 配列の浅いコピーを作成します。numbers ===numbersCopy の結果は # です。 # #false は、numbers と numbersCopy には同じ項目がありますが、異なる配列オブジェクトであることを意味します。

Array.from()

を使用して、ネストされたすべての配列を含む配列のクローンを作成することは可能ですか?自分自身に挑戦してください！ <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">function recursiveClone(val) { return Array.isArray(val) ? Array.from(val, recursiveClone) : val; } const numbers = [[0, 1, 2], [&amp;#39;one&amp;#39;, &amp;#39;two&amp;#39;, &amp;#39;three&amp;#39;]]; const numbersClone = recursiveClone(numbers); numbersClone; // =&gt; [[0, 1, 2], [&amp;#39;one&amp;#39;, &amp;#39;two&amp;#39;, &amp;#39;three&amp;#39;]] numbers[0] === numbersClone[0] // =&gt; false</pre><div class="contentsignin">ログイン後にコピー</div></div>

recursiveClone()

は、配列の item が配列であるかどうかを判断して、配列のディープ コピーを作成できます。配列の場合は、続行します。 recursiveClone () を呼び出して、配列のディープ コピーを実装します。

Array.from()

を再帰的に使用するよりも短い配列のディープ コピーを作成できますか?可能であれば、下のコメント欄に書いてください。

4. 配列に値を入力します 配列を同じ値で初期化する必要がある場合は、

Array .from()

が良い選択でしょう。 同じデフォルト値で満たされた配列を作成する関数を定義しましょう。

const length = 3;
const init   = 0;
const result = Array.from({ length }, () => init);

result; // => [0, 0, 0]

result

は長さ 3 の新しい配列であり、各要素は配列 すべての項目は 0 です。 Array.from() メソッドを呼び出し、配列のようなオブジェクト { length } と初期化された値を返す mapFunction 関数を渡します。 ただし、同じ機能を実現する代替メソッド

array.fill()

があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">const length = 3; const init = 0; const result = Array(length).fill(init); fillArray2(0, 3); // =&gt; [0, 0, 0]</pre><div class="contentsignin">ログイン後にコピー</div></div>

fill()

配列に初期値を正しく埋めます。

4.1 配列をオブジェクトで埋める

配列の各項目を初期化するときは、新しいオブジェクト、

Array.from()

の方が良い解決策です: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">const length = 3; const resultA = Array.from({ length }, () =&gt; ({})); const resultB = Array(length).fill({}); resultA; // =&gt; [{}, {}, {}] resultB; // =&gt; [{}, {}, {}] resultA[0] === resultA[1]; // =&gt; false resultB[0] === resultB[1]; // =&gt; true</pre><div class="contentsignin">ログイン後にコピー</div></div>

Array.from

によって返される resultA は、別の空のオブジェクト インスタンスで初期化されます。これは、mapFunction (ここでは () => ({})) が呼び出されるたびに新しいオブジェクトを返すために発生します。 次に、

fill()

メソッドによって作成された resultB が、同じ空のオブジェクト インスタンスで初期化されます。空の項目はスキップされません。

4.2

array.map を使用してみてはいかがでしょうか? これを実現するには、

array.map()

メソッドを使用できますか?試してみましょう: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">const length = 3; const init = 0; const result = Array(length).map(() =&gt; init); result; // =&gt; [undefined, undefined, undefined]</pre><div class="contentsignin">ログイン後にコピー</div></div>

map()

メソッドが異常のようです。作成された配列は予期された [0, 0, 0] ではなく、 3 つの空の項目を含む配列。 これは、

Array(length)

が 3 つの空の項目を含む配列 (スパース配列とも呼ばれます) を作成しますが、map() メソッドは空の項目をジャンプするためです。合格した。

5. 番号範囲の生成

你可以使用 Array.from() 生成值范围。例如，下面的 range 函数生成一个数组，从0开始到 end - 1。

function range(end) {
    return Array.from({ length: end }, (_, index) => index);
}
range(4); // => [0, 1, 2, 3]

在 range() 函数中，Array.from() 提供了类似数组的 {length：end} ，以及一个简单地返回当前索引的 map 函数 。这样你就可以生成值范围。

6.数组去重

由于 Array.from() 的入参是可迭代对象，因而我们可以利用其与 Set 结合来实现快速从数组中删除重复项。

function unique(array) {
  return Array.from(new Set(array));
}
unique([1, 1, 2, 3, 3]); // => [1, 2, 3]

首先，new Set(array) 创建了一个包含数组的集合，Set 集合会删除重复项。

因为 Set 集合是可迭代的，所以可以使用 Array.from() 将其转换为一个新的数组。

这样，我们就实现了数组去重。

7.结论

Array.from() 方法接受类数组对象以及可迭代对象，它可以接受一个 map 函数，并且，这个 map 函数不会跳过值为 undefined 的数值项。这些特性给 Array.from() 提供了很多可能。

如上所述，你可以轻松的将类数组对象转换为数组，克隆一个数组，使用初始化填充数组，生成一个范围，实现数组去重。

实际上，Array.from() 是非常好的设计，灵活的配置，允许很多集合转换。

英文原文地址：https://dmitripavlutin.com/javascript-array-from-applications/

本文来自 js教程 栏目，欢迎学习！

以上がArray.from() の 5 つの非常に便利な使い方 (詳細な説明)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。