ホームページ > ウェブフロントエンド > jsチュートリアル > Mapの一般的なメソッドのまとめ

Mapの一般的なメソッドのまとめ

巴扎黑
リリース: 2017-08-13 14:47:44
オリジナル
1855 人が閲覧しました

Map は ES6 で追加された新しいデータ構造です。実際、機能は似ています。以下の記事では、ES6 の一般的な学習方法を中心にまとめて紹介していますので、必要な方は参考にしてみてください。

はじめに

ES6 には、JS をより強力で表現力豊かにする多くの新しい言語機能が含まれています。この記事では、ES6 の Map の一般的なメソッドについて詳しく説明します。早速、詳細を見てみましょう:

1. Map 構造を配列構造に変換します

より高速な方法は、スプレッド演算子 (...) を使用します


1

2

3

4

5

6

7

8

9

10

11

12

13

let map = new Map([

 [1, 'one'],

 [2, 'two'],

 [3, 'three'],

]);

[...map.keys()]

// [1, 2, 3]

[...map.values()]

// ['one', 'two', 'three']

[...map.entries()]

// [[1,'one'], [2, 'two'], [3, 'three']]

[...map]

// [[1,'one'], [2, 'two'], [3, 'three']]

ログイン後にコピー

2.Map ループ トラバーサル

Map はネイティブに 3 つのトラバーサーを提供します:

  • keys(): を返すトラバーサーキーの名前。

  • values(): キー値のトラバーサーを返します。

  • entries(): すべてのメンバーのトラバーサーを返します。

以下は使用例です。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

let map = new Map([

 ['F', 'no'],

 ['T', 'yes'],

]);

 

for (let key of map.keys()) {

 console.log(key);

}

// "F"

// "T"

 

for (let value of map.values()) {

 console.log(value);

}

// "no"

// "yes"

 

for (let item of map.entries()) {

 console.log(item[0], item[1]);

}

// "F" "no"

// "T" "yes"

 

// 或者

for (let [key, value] of map.entries()) {

 console.log(key, value);

}

 

// 等同于使用map.entries()

for (let [key, value] of map) {

 console.log(key, value);

}

ログイン後にコピー

上記のコードの最後の例は、Map 構造体のデフォルトのイテレータ インターフェイス (Symbol.iterator プロパティ)、つまりエントリ メソッドを表しています。


1

map[Symbol.iterator] === map.entries // true

ログイン後にコピー

3.Map 長さを取得


1

map.size;

ログイン後にコピー

4.Map 最初の要素を取得


1

2

3

4

5

const m = new Map();

m.set('key1', {})

m.set('keyN', {})

 

console.log(m.entries().next().value); // [ 'key1', {} ]

ログイン後にコピー

最初の鍵を入手


最初の値を取得します


1

console.log(m.keys().next().value); // key1

ログイン後にコピー

以上がMapの一般的なメソッドのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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