一、ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。也可以结合map(循环遍历数组),filter(过滤数组)使用
例1:
const set = new Set([1, 2, 3, 4, 4]);
console.log( [...set] ) // [1,2,3,4]
例2:
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
console.log( items ) // [1,2,3,4,5]
console.log( items.size ) // 5
1.1、去除数组的重复成员 [...new Set(array)]
let arr = [1,2,3,4,4,5,5,7,1,2,3,8]
let a1 = [...new Set(arr)]
console.log( a1 ); //[1,2,3,4,5,7,8]
1.2、Set两个对象总是不相等的,由于两个空对象不相等,所以它们被视为两个值。
let set = new Set();
set.add({});
set.size // 1
set.add({});
set.size // 2
二、操作方法(用于操作数据)
--add(value):添加某个值,返回 Set 结构本身。
--delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
--has(value):返回一个布尔值,表示该值是否为Set的成员。
--clear():清除所有成员,没有返回值。
2.1、Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items);
console.log( items ); // Set { 1, 2, 3, 4, 5 }
console.log( array ); // [ 1, 2, 3, 4, 5 ]
去除数组重复数据
function dedupe(array) {
return Array.from(new Set(array));
};
dedupe([1, 1, 2, 3]) // [1, 2, 3]
三、遍历方法(用于遍历成员)
--keys():返回键名的遍历器
--values():返回键值的遍历器
--entries():返回键值对的遍历器
--forEach():使用回调函数遍历每个成员
let set = new Set(['red', 'green', 'blue']);
--keys():
for (let item of set.keys()) {
console.log(item); // red green blue
};
--values():
for (let item of set.values()) {
console.log(item); // red green blue
};
--entries():
for (let item of set.entries()) {
console.log(item);
};
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
--forEach();
set = new Set([1, 4, 9]);
set.forEach(
(value, key) => {
console.log(key + ' : ' + value)
}
)
// 1 : 1
// 4 : 4
// 9 : 9
四、map和filter方法用于 Set
--map 用于循环遍历数组
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6}
--filter 用于过滤
let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}
4.1、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
5.1、类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
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
5.2、如果对同一个键多次赋值,后面的值将覆盖前面的值
const map = new Map();
map
.set(1, 'aaa')
.set(1, 'bbb');
map.get(1) // "bbb"
5.3、注意,只有对同一个对象的引用,Map 结构才将其视为同一个键。这一点要非常小心。
const map = new Map();
map.set(['a'], 555);
map.get(['a']) // undefined
上面代码的set和get方法,表面是针对同一个键,但实际上这是两个值,内存地址是不一样的,因此get方法无法读取该键,返回undefined。
const map = new Map();
const k1 = ['a'];
const k2 = ['a'];
map
.set(k1, 111)
.set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222
变量k1和k2的值是一样的,但是它们在 Map 结构中被视为两个键。
5.4、实例的属性和操作方法
--size();属性返回 Map 结构的成员总数
const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
--set(key, value);设置键名key对应的键值为value,然后返回整个 Map 结构。
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
// set方法返回的是当前的Map对象,因此可以采用链式写法。
--get(key)读取key对应的键值,如果找不到key,返回undefined。
const m = new Map();
const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数
m.get(hello) // Hello ES6!
--has(key);返回一个布尔值,表示某个键是否在当前 Map 对象之中。
const m = new Map();
m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah');
m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
--delete(key);删除某个键,返回true。如果删除失败,返回false。
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
--clear();清除所有成员,没有返回值。
let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0
5.5、遍历方法
--keys():返回键名的遍历器。
--values():返回键值的遍历器。
--entries():返回所有成员的遍历器。
--forEach():遍历 Map 的所有成员。
5.6、Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...)。
const 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']]