Typecript/javascript的Set教程(附实例)

759 阅读5分钟

在这篇博文中,我们将通过实例介绍Typecript/javascript的Set教程。

Javascript/Typescript Set

Es6引入了用于存储唯一元素的Set类,javascript在Es6版本中支持Set、Map、WeakMap数据结构。Set保留了数值插入的顺序。做迭代时也显示相同的顺序。Typescript没有支持Set的内置类,但Typescript支持与ES6相同的数据结构。

在tsconfig.json文件中,添加 "lib"。["es6"] 或者你可以为这个类添加polyfill.js。这个例子提到的将在TypescriptJavascript中工作

设置语法

使用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