JavaScript ES6 での Array.from の使用法

黄舟
リリース: 2017-08-23 13:27:40
オリジナル
2026 人が閲覧しました

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート