在这篇博文中,我们将通过实例介绍Typecript/javascript的Set教程。
Javascript/Typescript Set
Es6引入了用于存储唯一元素的Set类,javascript在Es6版本中支持Set、Map、WeakMap数据结构。Set保留了数值插入的顺序。做迭代时也显示相同的顺序。Typescript没有支持Set的内置类,但Typescript支持与ES6相同的数据结构。
在tsconfig.json文件中,添加 "lib"。["es6"] 或者你可以为这个类添加polyfill.js。这个例子提到的将在Typescript和Javascript中工作 。
设置语法
使用let和new关键字创建set对象。
new Set([iterable]);
参数 - 传递可迭代的数据,数据可以用一个数组传递。所有的元素被添加到新的Set中,并返回Set对象。如果参数是空的或Null,则创建空的Set。
创建集合对象的例子
我们将看到我们如何添加/删除/获取/包含一个Set对象的元素。空对象的创建对象集的创建很简单。
向Set添加数组元素
let setData=new Set(['one', 'two', 'three']); // {"one", "two", "three"}
我们也可以使用add()方法添加元素。
new Set().add('one').add('two).add('three'); // {"one", "two", "three"}
上面的例子使用了add方法链到Set对象。add()方法添加元素并返回对象引用而不是添加的元素
Set.add()方法的例子
此方法将元素添加到一个集合对象的末尾,并返回集合对象。
语法
Set.add(value:any):Set
参数 - 向集合添加特定的值 返回 - 返回集合对象示例
var myset = new Set();
myset.add(1);
myset.add(13).add(14).add(51);
console.log(myset) // outputs 1, 13, 14, 51
Set.delete()方法的例子
这个方法从Set对象中删除一个元素。语法
Set.delete(value:any):boolean
参数 - 要从Set中删除的值 返回 - true, 如果一个值存在于Set中并从Set中删除, false - 如果无法删除并且值不存在于Set中示例
var myset = new Set();
myset.add(1);
myset.add(13).add(14).add(51);
console.log(myset.delete(1)) // Outputs true
console.log(myset.delete(43)) // Outputs false
Set.clear()方法示例
这个方法从一个Set中删除所有元素语法
Set<any>.clear():void
它不接受任何参数,不返回任何东西例子
var myset = new Set([11, 12, 13, 14, 15]);
console.log(myset); //outputs {11, 12, 13,14, 15}
myset.clear()
console.log(myset); // outputs empty set {}
Set.has()方法的例子
如果一个值存在于Set中,该方法返回true。
语法:
Set.has(value:any):boolean
参数 - 要在集合中检查的值 返回 - 如果一个值存在于集合中,则为真,否则为假例子
var myset = new Set([11, 12, 13, 14, 15]);
console.log(myset.has(11));// output true
console.log(myset.has(131));// output false
Set entries()方法示例
此方法用于遍历Set对象中的元素。它返回新的Iterator对象,该对象有一个元素数组。每个元素包含[value,value]语法
Set.entries():IterableIterator
不传递参数 返回带有key和value的Iterator。这里的key和value是一个集合中的同一个元素。例子
var myset = new Set([11, 12, 13, 14, 15]);
var entriesIterator = myset.entries();
console.log(entriesIterator.next().value); // outputs 11
console.log(entriesIterator.next().value); // outputs 12
console.log(entriesIterator.next().value); // outputs 13
Set keys()方法的例子
这个方法用于遍历Set对象中的元素。它按插入顺序返回Set中的所有元素语法
Set.keys():IterableIterator
返回元素迭代器。例子:
var myset = new Set([11, 12, 13, 14, 15]);
var keysIterator = myset.keys();
console.log(keysIterator.next().value); // outputs 11
console.log(keysIterator.next().value); // outputs 12
console.log(keysIterator.next().value); // outputs 13
Set values()方法示例
这个方法用来遍历Set对象中相同插入顺序的元素。这与keys()方法相同语法
Set.values():IterableIterator
返回元素/值迭代器。例子:
var myset = new Set([11, 12, 13, 14, 15]);
var valuesIterator = myset.values();
console.log(valuesIterator.next().value); // outputs 11
console.log(valuesIterator.next().value); // outputs 12
console.log(valuesIterator.next().value); // outputs 13
Set forEach()方法示例
这是用来迭代一个元素集的。这需要回调函数,适用于Set的每个元素语法:
Set.forEach(callbackFn[,parameters]):void
callbackFn - 这是一个对Set的每个元素执行的函数,参数--传递的值 callbackFn接受三个参数,第一个参数是key,第二个参数是value,第三个参数是Set对象。例子:
var myset = new Set([11, 12, 13, 14, 15]);
// one way to use forEach
myset.forEach(display);
function display(key)
{ console.log(key);
}
// Another way to use forEach
myset.forEach(function (value) {
console.log(value);
});
设置大小的例子
返回一个集合中唯一元素的大小语法:
Set<any>.size():number
返回 - 集合中的元素数量示例:
var myset = new Set([11, 12]);
console.log(myset.size); // outputs 2
for...of Set 示例
这是在Set of Objects中进行迭代的另一种方式。
var myset = new Set([11, 12, 13, 14, 15]);
for (let noValue of myset) {
console.log(noValue); //outputs 11,12,13,14,15
}
在这个例子中,重复的元素被添加,但集合接受唯一的元素。
var myset = new Set([11, 12, 11]);
console.log(myset);
var myset =new Set([{name: 'one'}, {name: 'one'}, {name: 'one'}]);
console.log(myset); //outputs {{name: 'one'}, {name: 'one'}, {name: 'one'}}
使用===操作符测试唯一的值。对于原始值,这很简单,也很容易理解 对于对象的唯一性 - === 如果两个对象的引用相等,则返回。在第二个例子中,添加了三个对象,三个不同的引用,三个对象被添加。 如何将Set转换为数组 Set接受一个可迭代对象作为添加元素的参数。一个实现了Iterable的数组可以作为参数传入
var array = [3, 14, 35];
var myset = new Set(array);
console.log(myset.size === array.length); // true
console.log(myset.has(14)); // true
过滤器、地图和还原示例
map和reduce以及filter运算符不支持使用javascript和typescript的Set对象。但是我们可以用javascript和typescript中的一些机制来应用。首先,你需要使用Es6 Spread操作符转换为数组,然后我们就可以应用这些方法。
const mySet = new Set([0,1,4,8]);
[...mySet].map()
[...mySet].filter()
[...mySet].reduce()
如何进行多个集合的合并?
使用forEach方法,我们可以合并多个集合
var first = new Set([11,12,13]);
var second = new Set([41,51,61]);
second.forEach(first.add, first);
console.log(first); // 11,12,13,41,51,61