JavaScript（ES6）学习笔记-Set和Map数据结构（一）

时间：2022-05-06 20:50:37

一、Set

1、ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。

Set 本身是一个构造函数，用来生成 Set 数据结构。

var s = new Set([, , , , '']);

s; // Set {1, 2, 3, "3"}

//重复元素在Set中自动被过滤：

2、Set 函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。

//要创建一个Set，需要提供一个Array作为输入，或者直接创建一个空Set

var s1 = new Set(); // 空Set

var s2 = new Set([1, 2, 3]); // 含1, 2, 3

3、Set.size：返回Set实例的成员总数

 var s2 = new Set([1, 2, 3,'56666']);

   console.log(s2.size)  //

4、四个操作方法。

  • add(value)：添加某个值，返回Set结构本身。 
        //通过add(key)方法可以添加元素到Set中，可以重复添加，但不会有效果：
    
    var s = new Set([1, 2, 3]); // 含1, 2, 3
    
    s.add(4);
    
    s; // Set {1, 2, 3, 4}
    
    s.add(4);
    
    s; // 仍然是 Set {1, 2, 3, 4}
  • delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 
    //通过delete(key)方法可以删除元素：

var s = new Set([1, 2, 3]);
    
s; // Set {1, 2, 3}
    
s.delete(3);
    
s; // Set {1, 2}
  • has(value)：返回一个布尔值，表示该值是否为Set的成员。 
    var s = new Set([1, 2, 3]);
    
s; // Set {1, 2, 3}
    
s.has(3) //true
  • clear()：清除所有成员，没有返回值。 
    var s = new Set([1, 2, 3]);
    
s; // Set {1, 2, 3}
    
s.clear(); //undefined
    
s;//Set{}

5、Set结构的实例有四个遍历方法，可以用于遍历成员。

 var s2 = new Set([1, 2, 3,'55555']); // 含1, 2, 3
  • keys()：返回键名的遍历器
  • values()：返回键值的遍历器
  • entries()：返回键值对的遍历器

    JavaScript（ES6）学习笔记-Set和Map数据结构（一）

    由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致。

    entries方法返回的遍历器，同时包括键名和键值，所以每次输出一个数组，它的两个成员完全相等。

  • forEach()：使用回调函数遍历每个成员
 var s2 = new Set([1, 2, 3,'55555']); // 含1, 2, 3

    s2.forEach(function (element, sameElement, set) {

    console.log(element);

});

//1,2,3,55555

//Set与Array类似，但Set没有索引，因此回调函数的前两个参数都是元素本身
  • for...of 循环遍历Set
  var s2 = new Set([1, 2, 3,'55555']); // 含1, 2, 3

  for (var x of s2) {

    console.log(x); // 1、2、3、55555

}

6、扩展运算符（...）内部使用for...of循环，所以也可以用于Set结构

let set = new Set(['red', 'green', 'blue']);

let arr = [...set];

// ['red', 'green', 'blue']

7、使用Set可以很容易地实现并集（Union）、交集（Intersect）和差集（Difference）

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}

二、Map      Map是一组键值对的结构，具有极快的查找速度

ES6提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的Hash结构实现。如果你需要“键值对”的数据结构，Map比Object更合适。

1、初始化Map需要一个二维数组，或者直接初始化一个空Map

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);

var m1 = new Map(); // 空Map

2、Map 的方法

set（）、has（）、get（）、delete（）

var m = new Map(); // 空Map

m.set('Adam', 67); // 添加新的key-value

m.has('Adam'); // 是否存在key 'Adam': true

m.get('Adam'); //

m.delete('Adam'); // 删除key 'Adam'

m.get('Adam'); // undefined

3、结合数组的map方法、filter方法，可以实现Map的遍历和过滤（Map本身没有map和filter方法）。

let map0 = new Map()

  .set(1, 'a')

  .set(2, 'b')

  .set(3, 'c');

let map1 = new Map(

  [...map0].filter(([k, v]) => k < 3)

);

// 产生Map结构 {1 => 'a', 2 => 'b'}

let map2 = new Map(

  [...map0].map(([k, v]) => [k * 2, '_' + v])

    );

// 产生Map结构 {2 => '_a', 4 => '_b', 6 => '_c'}

相关文章