ホームページ > 記事 > ウェブフロントエンド > ES6 Set、WeakSet、Map、WeakMap を理解します。

ES6 Set、WeakSet、Map、WeakMap を理解します。

hzc転載: 2020-06-20 09:43:342383ブラウズ

以前 ES6 を学習していたときに、Set と Map を目にしました。それらのアプリケーションシナリオが何であるかは知りませんでした。ただ、配列の重複排除でよく使用されるものだと思っていました。その後、Set はセットと呼ばれるデータ構造であり、Map は辞書と呼ばれるデータ構造であることに徐々に気づきました。

この記事は gitthub に含まれています: github.com/Michael-lzg…

Set

Set 自体は ## を生成するために使用されるコンストラクターです#Set データ構造。 Set この関数は、配列 (または反復可能なインターフェイスを備えた他のデータ構造) を初期化用のパラメーターとして受け入れることができます。 Set オブジェクトを使用すると、プリミティブ値であってもオブジェクト参照であっても、あらゆるタイプの値を格納できます。配列に似ていますが、メンバーの値は一意であり、重複する値はありません。

const s = new Set()
[2, 3, 5, 4, 5, 2, 2].forEach((x) => s.add(x))
for (let i of s) {
  console.log(i)
}
// 2 3 5 4

Set の特別な値

Set オブジェクトに格納される値は常に一意であるため、2 つの値が一致するかどうかを判断する必要があります。は同じ。特別な処理が必要な特別な値がいくつかあります。

未定義 unknown と同一であるため、繰り返されません。
NaN は NaN と同一ではありませんが、 Set は NaN を NaN と等しいとみなし、重複せずに存在できるのは 1 つだけです。

セットの属性:

size: セットに含まれる要素の数を返します

const items = new Set([1, 2, 3, 4, 5, 5, 5, 5])
items.size // 5

Setインスタンスオブジェクトメソッド

: 特定の値を追加し、Set 構造自体を返します (チェーンで呼び出すことができます)。
: 特定の値を削除します。削除が成功した場合は true が返され、そうでない場合は false が返されます。。
: 値が Set のメンバーであるかどうかを示すブール値を返します。

: すべてのメンバーをクリアします。戻り値はありません。

s.add(1).add(2).add(2)
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2)
s.has(2) // false

: キー名のトラバーサーを返します。
: キー値のトラバーサを返します。
: キーと値のペアのトラバーサーを返します。
: コールバック関数を使用して各メンバーを走査します。

Set

構造体にはキー名がなく、キー値のみ (またはキー名とキー値が同じ値) があるため、keys メソッドvalues メソッドとまったく同じように動作します。 <pre class="brush:php;toolbar:false">let set = new Set(['red', 'green', 'blue']) for (let item of set.keys()) { console.log(item) } // red // green // blue for (let item of set.values()) { console.log(item) } // red // green // blue for (let item of set.entries()) { console.log(item) } // ["red", "red"] // ["green", "green"] // ["blue", "blue"]</pre>Array と Set の比較

の indexOf メソッドは Set のメソッドよりも優れていますhas このメソッドは非効率です
には重複した値が含まれていません (この機能を使用して配列の重複排除を実現できます)
Passdelete メソッドは値を削除しますが、Array は splice を介してのみ渡すことができます。
には、多くの新しいメソッド map、filter、 があります。 some、every などは Set では使用できません (ただし、相互に変換して使用できます)

#1,

Array.from

メソッドは、

Set 構造体を配列に変換できます。

const items = new Set([1, 2, 3, 4, 5])
const array = Array.from(items)

2. 配列の重複排除

// 去除数组的重复成员
;[...new Set(array)]

Array.from(new Set(array))

3. 配列の

map

メソッドと

filter メソッドは、Set に対して間接的に使用することもできます。

let set = new Set([1, 2, 3])
set = new Set([...set].map((x) => x * 2))
// 返回Set结构：{2, 4, 6}

let set = new Set([1, 2, 3, 4, 5])
set = new Set([...set].filter((x) => x % 2 == 0))
// 返回Set结构：{2, 4}

4. Union(Union)、intersect

(Intersect)、差分セット

let a = new Set([1, 2, 3])
let b = new Set([4, 3, 2])

// 并集
let union = new Set([...a, ...b])
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter((x) => b.has(x)))
// set {2, 3}

// 差集
let difference = new Set([...a].filter((x) => !b.has(x)))
// Set {1}

weakSet##を実装します。 #WeakSet

は

Set

と同様の構造を持ち、これも一意の値のコレクションです。 メンバーはすべて配列および配列のようなオブジェクトです。配列および配列のようなオブジェクトではないパラメーターを指定して add()

メソッドを呼び出すと、エラーが発生します。投げられた。

```
const b = [1, 2, [1, 2]]
new WeakSet(b) // Uncaught TypeError: Invalid value used in weak set
```
メンバーは弱参照であり、ガベージコレクションメカニズムによってリサイクルできます。DOM ノードの保存に使用でき、メモリリークが発生しにくいです。

は反復可能ではないため、
などのループでは使用できません。 WeakSet には
プロパティがありません。 Map

Map

は、キーと値のペアを

key-value

の形式で保存します。ここで、key value は任意のタイプにすることができます。つまり、オブジェクトは key としても使用できます。 Map の登場により、さまざまなタイプの値をキーとして使用できるようになります。 Map は、「値と値」の対応を提供します。 <h4>Map 和 Object 的区别</h4> <ol> <li> <code>Object 对象有原型，也就是说他有默认的 key 值在对象上面，除非我们使用 Object.create(null)创建一个没有原型的对象；

在 Object 对象中，只能把 String 和 Symbol 作为 key 值，但是在 Map 中，key 值可以是任何基本类型(String, Number, Boolean, undefined, NaN….)，或者对象(Map, Set, Object, Function , Symbol , null….);

通过 Map 中的 size 属性，可以很方便地获取到 Map 长度，要获取 Object 的长度，你只能手动计算

Map 的属性

size: 返回集合所包含元素的数量

const map = new Map()
map.set('foo', ture)
map.set('bar', false)
map.size // 2

Map 对象的方法

set(key, val): 向 Map 中添加新元素
get(key): 通过键值查找特定的数值并返回
has(key): 判断 Map 对象中是否有 Key 所对应的值，有返回 true，否则返回 false
delete(key): 通过键值从 Map 中移除对应的数据
clear(): 将这个 Map 中的所有元素删除

const m = new Map()
const o = { p: 'Hello World' }

m.set(o, 'content')
m.get(o) // "content"

m.has(o) // true
m.delete(o) // true
m.has(o) // false

遍历方法

keys()：返回键名的遍历器
values()：返回键值的遍历器
entries()：返回键值对的遍历器
forEach()：使用回调函数遍历每个成员

const map = new Map([
  ['a', 1],
  ['b', 2],
])

for (let key of map.keys()) {
  console.log(key)
}
// "a"
// "b"

for (let value of map.values()) {
  console.log(value)
}
// 1
// 2

for (let item of map.entries()) {
  console.log(item)
}
// ["a", 1]
// ["b", 2]

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value)
}
// "a" 1
// "b" 2

// for...of...遍历map等同于使用map.entries()

for (let [key, value] of map) {
  console.log(key, value)
}
// "a" 1
// "b" 2

数据类型转化

Map 转为数组

let map = new Map()
let arr = [...map]

数组转为 Map

Map: map = new Map(arr)

Map 转为对象

let obj = {}
for (let [k, v] of map) {
  obj[k] = v
}

对象转为 Map

for( let k of Object.keys(obj)）{
  map.set(k,obj[k])
}

Map的应用

在一些 Admin 项目中我们通常都对个人信息进行展示，比如将如下信息展示到页面上。传统方法如下。

<p class="info-item">
  <span>姓名</span>
  <span>{{info.name}}</span>
</p>
<p class="info-item">
  <span>年龄</span>
  <span>{{info.age}}</span>
</p>
<p class="info-item">
  <span>性别</span>
  <span>{{info.sex}}</span>
</p>
<p class="info-item">
  <span>手机号</span>
  <span>{{info.phone}}</span>
</p>
<p class="info-item">
  <span>家庭住址</span>
  <span>{{info.address}}</span>
</p>
<p class="info-item">
  <span>家庭住址</span>
  <span>{{info.duty}}</span>
</p>

js 代码

mounted() {
  this.info = {
    name: 'jack',
    sex: '男',
    age: '28',
    phone: '13888888888',
    address: '广东省广州市',
    duty: '总经理'
  }
}

我们通过 Map 来改造，将我们需要显示的 label 和 value 存到我们的 Map 后渲染到页面，这样减少了大量的html代码

<template>
  <p id="app">
    <p class="info-item" v-for="[label, value] in infoMap" :key="value">
      <span>{{label}}</span>
      <span>{{value}}</span>
    </p>
  </p>
</template>

js 代码

data: () => ({
  info: {},
  infoMap: {}
}),
mounted () {
  this.info = {
    name: 'jack',
    sex: '男',
    age: '28',
    phone: '13888888888',
    address: '广东省广州市',
    duty: '总经理'
  }
  const mapKeys = ['姓名', '性别', '年龄', '电话', '家庭地址', '身份']
  const result = new Map()
  let i = 0
  for (const key in this.info) {
    result.set(mapKeys[i], this.info[key])
    i++
  }
  this.infoMap = result
}

WeakMap

WeakMap 结构与 Map 结构类似，也是用于生成键值对的集合。

只接受对象作为键名（null 除外），不接受其他类型的值作为键名
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不能遍历，方法有 get、set、has、delete

总结

Set

是一种叫做集合的数据结构(ES6新增的)
成员唯一、无序且不重复
[value, value]，键值与键名是一致的（或者说只有键值，没有键名）
允许储存任何类型的唯一值，无论是原始值或者是对象引用
可以遍历，方法有：add、delete、has、clear

WeakSet

成员都是对象
成员都是弱引用，可以被垃圾回收机制回收，可以用来保存 DOM 节点，不容易造成内存泄漏
不能遍历，方法有 add、delete、has

Map

是一种类似于字典的数据结构，本质上是键值对的集合
可以遍历，可以跟各种数据格式转换
操作方法有:set、get、has、delete、clear

WeakMap

只接受对象作为键名（null 除外），不接受其他类型的值作为键名
键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，此时键名是无效的
不能遍历，方法有 get、set、has、delete

推荐教程：《JS教程》

以上がES6 Set、WeakSet、Map、WeakMap を理解します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html es6 数据类型 String Boolean Array Object NULL for foreach 构造函数 Filter 回调函数 union 循环数据结构接口 map delete JS number undefined symbol function 对象 dom github

声明：

この記事はsegmentfault.comで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

前の記事：Canvas は動的パーティクル接続エフェクトを実装します (コード付き)次の記事：Canvas は動的パーティクル接続エフェクトを実装します (コード付き)

続きを見る