Вы действительно понимаете Set, WeakSet, Map и WeakMap ES6?

Когда я раньше изучал ES6, я увиделSetа такжеMap, я не знаю, каковы его сценарии применения, я просто думаю, что он будет использоваться в дедупликации массива и хранении данных, и я постепенно понял это позже.Setпредставляет собой структуру данных, называемую коллекцией,Mapпредставляет собой структуру данных, называемую словарем.

Эта статья была включена в github:GitHub.com/Майкл-Ли Чжиган…

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Значение, хранимое объектом, всегда уникально, поэтому необходимо определить, идентичны ли два значения. Есть несколько особых значений, требующих особого обращения:

+0 и -0 идентичны при сохранении уникальности суждения, поэтому они не повторяются
undefinedа такжеundefinedидентичен, поэтому не повторяется
NaNа такжеNaNне идентичны, но вSetдумать вNaNа такжеNaNРавно, все может существовать только одно, не повторяющееся.

Свойства набора:

size: возвращает количество элементов, содержащихся в коллекции

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

Методы объектов экземпляра Set

add(value): добавить значение, вернутьсяSetСама структура (которую можно связать).
delete(value): удалить значение, успешно удалить и вернутьсяtrue, иначе возвратfalse.
has(value): возвращает логическое значение, указывающее, является ли значениеSetчлен.
clear(): очистить все члены, без возвращаемого значения.

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

метод обхода

keys(): возвращает итератор имен ключей.
values(): возвращает итератор ключевых значений.
entries(): возвращает итератор пар ключ-значение.
forEach(): Используйте функцию обратного вызова для перебора каждого члена.

из-заSetСтруктура не имеет имени ключа, только значение ключа (или имя ключа и значение ключа являются одним и тем же значением), поэтомуkeysМетоды иvaluesПоведение метода точно такое же.

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"]

Массив против набора

ArrayизindexOfкоэффициент методаSetизhasметод неэффективен
SetНе содержит повторяющихся значений (вы можете использовать эту функцию для дедупликации массива)
Setпройти черезdeleteметод удаляет значение, аArrayтолько черезsplice. Простота использования двух лучше первого
Arrayмножество новых методов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), перекресток(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не является итерируемым и, следовательно, не может использоваться вfor-ofцикл ожидания.
WeakSetнетsizeАтрибуты.

Map

Mapхранится вkey-valueпары ключ-значение формыkeyа такжеvalueМожет быть любого типа, т.е. объекты также могут использоваться какkey.MapПоявление , позволяет использовать различные типы значений в качестве ключей.MapТо, что обеспечено, является соответствием «значение-значение».

Разница между картой и объектом

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Длину можно только рассчитать вручную

Свойства карты

размер: возвращает количество элементов, содержащихся в коллекции

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

Методы объекта Карта

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

преобразование типа данных

Сопоставить с массивом

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

Массив для карты

Map: map = new Map(arr)

Сопоставить с объектом

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

Объект на карте

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

Приложение карты

В некоторых проектах администратора мы обычно отображаем личную информацию, например, отображаем следующую информацию на странице. Традиционный метод заключается в следующем.

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

js-код

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

Мы преобразовываем его через карту, сохраняем метку и значение, которое нам нужно отобразить на нашей карте, и отображаем его на странице, что сокращает объем html-кода.

<template>
  <div id="app">
    <div class="info-item" v-for="[label, value] in infoMap" :key="value">
      <span>{{label}}</span>
      <span>{{value}}</span>
    </div>
  </div>
</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

Set

Специальные значения в Set

Свойства набора:

Методы объектов экземпляра Set

метод обхода

Массив против набора

Применение набора

weakSet

Map

Разница между картой и объектом

Свойства карты

Методы объекта Карта

метод обхода

преобразование типа данных

Приложение карты

WeakMap

Суммировать

рекомендуемая статья