ホームページ >ウェブフロントエンド >jsチュートリアル >es6でオブジェクトを配列に変換する方法

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

青灯夜游
青灯夜游オリジナル
2022-03-08 19:08:558312ブラウズ

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

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

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

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

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

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

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

let arrayLike = {
    0: 'tom',  
    1: '65',
    2: '男',
    3: ['jane','john','Mary'],
    'length': 4
}
let arr = Array.from(arrayLike)
console.log(arr) // ['tom','65','男',['jane','john','Mary']]

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

コードは再び変更され、長さ属性が含まれていますが、オブジェクトの属性名は数値型ではなく、他の文字列型になっています。コードは次のとおりです:

let arrayLike = {
    'name': 'tom',  
    'age': '65',
    'sex': '男',
    'friends': ['jane','john','Mary'],
    length: 4
}
let arr = Array.from(arrayLike)
console.log(arr)  // [ undefined, undefined, undefined, undefined ]

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

配列のようなオブジェクトを実際の配列に変換するとわかります。

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

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

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 番目のパラメーターも受け入れることができます。これは、各要素を処理し、処理された値を返された配列に入れるために使用されます。次のように: <pre class="brush:javascript;gutter:true;">let arr = [12,45,97,9797,564,134,45642] let set = new Set(arr) console.log(Array.from(set, item =&gt; item + 1)) // [ 13, 46, 98, 9798, 565, 135, 45643 ]</pre>3. 文字列を配列に変換します:

let  str = &#39;hello world!&#39;;
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 は同一の新しい配列を返します

[関連する推奨事項:

JavaScript ビデオ チュートリアル

Web フロントエンド ]

以上がes6でオブジェクトを配列に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。