ES6之Set对象详解

Set是什么

• 是ES6提供的一种新的数据结构，类似于数组，但是成员的值都是唯一的，没有重复的值。
• Set 本身是一个构造函数，用来生成 Set 数据结构。
• Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
• Set 中的元素只会出现一次，即 Set 中的元素是唯一的。
• 另外，NaN 和 undefined 都可以被存储在 Set 中，NaN 之间被视为相同的值（尽管 NaN !== NaN）。
• Set 函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

const set1 = new Set();
var object1 = new Object();

set1.add(42);
set1.add('forty two');
set1.add('forty two'); // 不存储相同的值，会被忽略
set1.add(object1);
console.log(set1); // Set(3) {42, "forty two", {…}}
console.log(set1.size); // 3

向 Set 加入值时认为NaN等于自身，而精确相等运算符认为NaN不等于自身。

let set = new Set();
let a = NaN;
let b = NaN;
set.add(a);
set.add(b);
set // Set {NaN}

 

add() 方法用来向一个 Set 对象的末尾添加一个指定的值。注意：不能添加重复的值

var mySet = new Set();

mySet.add(1);
mySet.add(5).add("some text"); // 可以链式调用

console.log(mySet);
// Set [1, 5, "some text"]

mySet.add(5).add(1); // 重复的值不会被添加进去
console.log(mySet); // {1, 5, "some text"}

clear() 方法用来清空一个 Set 对象中的所有元素。返回值：undefined

mySet.clear();

delete() 方法可以从一个 Set 对象中删除指定的元素。成功删除返回 true，否则返回 false。

var mySet = new Set();
mySet.add("foo");

mySet.delete("bar"); // 返回 false，不包含 "bar" 这个元素
mySet.delete("foo"); // 返回 true，删除成功

mySet.has("foo");    // 返回 false，"foo" 已经成功删除

forEach（callback, thisArg） 方法会根据集合中元素的插入顺序，依次执行提供的回调函数。
callback:回调函数有三个参数:

• 元素的值
• 元素的索引
• 正在遍历的集合对象

thisArg:回调函数执行过程中的 this 值。可选

function logSetElements(value1, value2, set) {
    console.log("s[" + value1 + "] = " + value2, set);
}

new Set(["foo", "bar", undefined]).forEach(logSetElements);

// logs:
// "s[foo] = foo" Set(3) {"foo", "bar", undefined}
// "s[bar] = bar" Set(3) {"foo", "bar", undefined}
// "s[undefined] = undefined" Set(3) {"foo", "bar", undefined}

但是由于集合对象中没有索引(keys)，所以前两个参数都是Set中元素的值(values)，之所以这样设计回调函数是为了和Map 以及Array的 forEach 函数用法保持一致。如果提供了一个 thisArg 参数给 forEach 函数，则参数将会作为回调函数中的 this值。否则 this 值为 undefined。

has() 方法返回一个布尔值来指示对应的值value是否存在Set对象中。

var mySet = new Set();
mySet.add('foo');

mySet.has('foo');  // 返回 true
mySet.has('bar');  // 返回 false

var set1 = new Set();
var obj1 = {'key1': 1};
set1.add(obj1);

set1.has(obj1);        // 返回 true
set1.has({'key1': 1}); // 会返回 false，因为其是另一个对象的引用
set1.add({'key1': 1}); // 现在 set1 中有2条（不同引用的）对象了

entries() 方法返回一个新的迭代器对象 ，这个对象的元素是类似 [value, value] 形式的数组，value 是集合对象中的每个元素，迭代器对象元素的顺序即集合对象中元素插入的顺序。由于集合对象不像 Map 对象那样拥有 key，然而，为了与 Map 对象的 API 形式保持一致，故使得每一个 entry 的 key 和 value 都拥有相同的值，因而最终返回一个 [value, value] 形式的数组。
返回值：一个新的包含 [value, value] 形式的数组迭代器对象，value 是给定集合中的每个元素，迭代器 对象元素的顺序即集合对象中元素插入的顺序。

var mySet = new Set();
mySet.add("foobar");
mySet.add(1);
mySet.add("baz");

var setIter = mySet.entries(); // SetIterator {"foobar" => "foobar", 1 => 1, "baz" => "baz"}

console.log(setIter.next().value); // ["foobar", "foobar"]
console.log(setIter.next().value); // [1, 1]
console.log(setIter.next().value); // ["baz", "baz"]

values() 方法返回一个 Iterator  对象，该对象按照原Set 对象元素的插入顺序返回其所有元素。
 keys() 方法是这个方法的别名 (与 Map 对象相似); 它的行为与 value 方法完全一致，返回 Set 对象的元素。
返回值：将返回一个新生成的可迭代对象，以插入 Set 对象的顺序返回其包含的每个元素的值。

var mySet = new Set();
mySet.add("foo");
mySet.add("bar");
mySet.add("baz");

var setIter = mySet.values();

console.log(setIter.next().value); // "foo"
console.log(setIter.next().value); // "bar"
console.log(setIter.next().value); // "baz"

应用实例:

数组去重

[...new Set([1, 3, 3, 34, 555, 2, 2])] // [1, 3, 34, 555, 2]

function dedupe(array) {
  return Array.from(new Set(array));
}

dedupe([1, 1, 2, 3]) // [1, 2, 3]

arrRemove([1, 3, 3, 34, 555, 2, 2]) // [1, 3, 34, 555, 2]
function arrRemove (arr) {
    let tempArr = arr
    arr = []
    let set = new Set(tempArr)
    for (let i of set) {
        arr.push(i)
    }
    return arr
}

去除字符串里面的重复字符。

[...new Set('ababbc')].join('')
// "abc"

set对象与数组之间的转换

var arr = [1,2,3,4,4];
var set = new Set(arr) //数组转换set对象
set //{1,2,3,4}
//方法一
Array.from(set) //[1,2,3,4]
//方法二
[...set] //[1,2,3,4]

数组去重&并集

let arr1 = [1,2,3,4,5];
let arr2 = [4,5,6,7,8];
let a = new Set(arr1);
let b= new Set(arr2)

new Set([...arr1,...arr2]) //{1,2,3,4,5,6,7,8}
let arr3 = [...new Set([...arr1,...arr2])] //[1,2,3,4,5,6,7,8]

交集

let arr3 = new Set(arr1.filter(x=>b.has(x))) //{4,5}

差集

let arr3 = new Set(arr1.filter(x=>!b.has(x))) //{1,2,3}
let arr4 = new Set(arr2.filter(x=>!a.has(x))) //{6,7,8}
[...arr3,...arr4] //[1,2,3,6,7,8]