ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

es6でオブジェクトを配列に変換する方法

著者：Eve Cole 更新時間：2022-08-02 09:31:19

es6 では、Array オブジェクトの from() メソッドを使用してオブジェクトを配列に変換できます。このメソッドは、配列のようなオブジェクトまたは走査可能なオブジェクトを実際の配列に変換できます。構文は「Array.from(object;」です。 ）」。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

es6 では、Array オブジェクトの from() メソッドを使用して、オブジェクトを配列に変換できます。

Array.from() メソッドは、配列のようなオブジェクトまたは走査可能なオブジェクトを実際の配列に変換します。

では、配列のようなオブジェクトとは何でしょうか?いわゆる配列のようなオブジェクトの最も基本的な要件は、length 属性を持つオブジェクトです。

1. 配列のようなオブジェクトを実際の配列に変換します。

let arrayLike = {
    0: 「トム」、  
    1:「65」、
    2:「男性」、
    3: ['ジェーン'、'ジョン'、'メアリー']、
    「長さ」: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','M',['jane','john','Mary']]

それでは、上記のコードの長さ属性が削除されたらどうなるでしょうか?実際にやってみると、答えは長さ 0 の空の配列になることが証明されています。

コードを再度変更して
み

ましょう。つまり、長さ属性がありますが、オブジェクトの属性名は数値タイプではなく、他の文字列タイプになります。コードは次のとおりです。

    '名前': 'トム',  
    '年齢': '65',
    '性別': '男性',
    '友達': ['ジェーン','ジョン','メアリー'],
    長さ: 4
}
let arr = Array.from(arrayLike)
console.log(arr) // [ undependent, undefined, undefined, unknown ] は

、結果が長さ 4 の配列であり、すべての要素が未定義であることがわかります。

配列のようなオブジェクトを に変換することがわかります。実数配列の場合は、次の条件が必要です。

  • このタイプの配列オブジェクトには、配列の長さを指定するために使用される長さ属性が必要です。長さ属性がない場合、変換された配列は空の配列になります。

  • このタイプの配列オブジェクトの属性名は数値または文字列番号である必要があります

。 ps: このタイプの配列オブジェクトの属性名は引用符で囲むことも、引用符で囲むこともできません。

2. Set 構造体のデータを実数の配列に変換します。

let arr = [12,45,97,9797,564,134,45642]
let set = new Set(arr)
console.log(Array.from(set)) // [ 12, 45, 97, 9797, 564, 134, 45642 ]

Array.from 、配列のmapメソッドのように動作して使用される 2 番目のパラメーターも受け入れることができます。 to map 各要素が処理され、処理された値が返された配列に配置されます。次のように:

arr = [12,45,97,9797,564,134,45642] とします。
let set = new Set(arr)
console.log(Array.from(set, item => item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]

3. 文字列を配列に変換します:

let str = 'hello world !';
console.log(Array.from(str)) // ["h", "e", "l", "l", "o", " ", "w", "o", "r", " l", "d", "!"]

4. Array.from パラメータは実際の配列です:

console.log(Array.from([12,45,47,56,213,4654,154]))

のように , Array .from は同一の新しい配列を返します
関連記事