JavaScript ES6 での Array.from の使用法

ES6 は、他のオブジェクトを配列に変換するために、Array に from 関数を追加します。

もちろん、他のオブジェクトにも要件があり、すべてを配列に変換できるわけではありません。

1. Set、Map、Array などの Iterator インターフェイスを使用してオブジェクトをデプロイします。

2. 配列のようなオブジェクトとは何ですか? それは、オブジェクトには長さの属性がなければ、結果は空の配列になることを意味します。

マップの変換

Map オブジェクトのキーと値のペアを 1 次元配列に変換します。

実際、変換された配列要素のシーケンスは key1、value1、key2、value2、key3、value3....

const map1 = new Map();
map1.set('k1', 1);
map1.set('k2', 2);
map1.set('k3', 3);
console.log('%s', Array.from(map1))

結果:

k1,1,k2,2,k3,3

Convert set

Set オブジェクトの要素を変換します配列に入れます。

const set1 = new Set();
set1.add(1).add(2).add(3)
console.log('%s', Array.from(set1))

結果

1,2,3

文字列の変換

ASCII 文字列をデータに逆アセンブルしたり、Unicode 文字列を配列に正確に逆アセンブルすることもできます。

console.log('%s', Array.from('hello world'))
console.log('%s', Array.from('\u767d\u8272\u7684\u6d77'))

結果:

h,e,l,l,o, ,w,o,r,l,d
白,色,的,海

配列様オブジェクト

配列様オブジェクトは長さを持ち、その要素属性名は数値または数値に変換できる文字でなければなりません。

注: 属性名は配列のインデックス番号を表します。そのようなインデックス番号がない場合、転送される配列内の対応する要素は空になります。

console.log('%s', Array.from({  0: '0',  1: '1',  3: '3',
  length:4}))

結果:

0,1,,3

オブジェクトに長さ属性がない場合、空の配列に変換されます。

console.log('%s', Array.from({  0: 0,  1: 1}))

結果は空の配列です。

オブジェクトの属性名をインデックス番号に変換できない場合。

console.log('%s', Array.from({
  a: '1',
  b: '2',
  length:2}))

結果も空の配列です

Array.fromは3つのパラメータを受け入れることができます

定義を見てみましょう:

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

arrayLike: 変換されたオブジェクト。

mapFn: マップ関数。

thisArg: Map 関数で this が指すオブジェクト。

2 番目のパラメーターであるマップ関数

は、変換中に各要素を処理するために使用され、処理された結果は結果配列の要素値として使用されます。

console.log('%s', Array.from([1, 2, 3, 4, 5], (n) => n + 1))

結果:

上記のマップ関数は、実際には配列内の各値に 1 を加算します。

2,3,4,5,6

3 番目のパラメータ、map 関数で this が指すオブジェクト

このパラメータは、処理されたデータと処理オブジェクトを分離し、データ処理のさまざまなメソッドを異なるオブジェクトにカプセル化することができます。 、処理メソッドでは同じ名前が使用されます。

Array.from を呼び出してデータ オブジェクトを変換する場合、実際の状況に応じて異なる処理オブジェクトを挿入して、異なる結果を取得することができ、分離に適しています。

このアプローチはテンプレート設計パターンの適用であり、依存関係の注入に似ています。

let diObj = n + 2'%s'1, 2, 3, 4, 5

結果:

3,4,5,6,7

以上がJavaScript ES6 での Array.from の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。