ES6 Set结构的应用实例分析

本文实例讲述了ES6 Set结构的应用。分享给大家供大家参考,具体如下:

Set 类似于数组,但是成员的值都是唯一的,没有重复的值, 实现了iterator接口

set 的值不可重复,数组的值可以重复

let arr = [1,2,3,'5','5'];
let st = new Set(arr);
console.log(st); // 可以通过set来去除数组的重复的值,返回的是一个伪数组
console.log(st.size); // 4

set 的 add , delete, has, clear 方法

简单的add 与 delete :

let st = new Set();
var u = {name:'Joh'};
st.add(u);
let bool = st.delete(u);
console.log(bool); // true;

连续add与has的api :

let st = new Set();
var u = {name:'Joh'};
var r = {name:'Lily'};
st.add(u).add(r);
let bool = st.delete(r);
console.log(bool); // true
console.log(st.has(r)); // false
console.log(st.has(u)); // true;

clear清空set集合

let st = new Set();
var u = {name:'Joh'};
var r = {name:'Lily'};
st.add(u).add(r);
st.clear();
console.log(st.size); // 0

通过Array.from方法把类似数组结构的模型转化为数组

let arr = ['xxx', 'yyyy', 'yyyy'];
let newArr = Array.from(new Set(arr));
console.log(Array.isArray(newArr)); // true
console.log(newArr); // ["xxx", "yyyy"]

Set 原型上的Symbol.iterator 和 values 是同一个值, 可直接for-of遍历

console.log(Set.prototype[Symbol.iterator] === Set.prototype.values); // true
let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']);
for(let k of st) {
 console.log(k); // 依次输出 xxx yyyy John 可以直接遍历,兼容map的数据结构
}

set中的keys和values方法

let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']);
console.log(st.size); // 3
let itKeys = st.keys();
for(let k of itKeys) {
   console.log(k); // 依次输出 xxx yyyy John
}
console.log('>>>>>');
let itVals = st.values();
for(let v of itVals) {
   console.log(v); // 依次输出 xxx yyyy John
}

set 的entries 实体对象,是个键和值的数组结构

let st = new Set(['xxx', 'yyyy', 'yyyy', 'John']);
let entriesIt = st.entries(); //
for(let v of entriesIt) {
 console.log(v); // 依次输出 ["xxx", "xxx"] ["yyyy", "yyyy"] ["John", "John"]
}

关于NaN在set中的特殊性

let st = new Set();
console.log(NaN === NaN); // false , 此处 NaN 是不全等的,理应可以添加多个,不算重复,但是这里是个特例
st.add(NaN).add(NaN).add(NaN);
for(let v of st) {
 console.log(v); // 只输出一个 NaN
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • 详解ES6中的Map与Set集合

    集合的概念以及和数组的区别 其实数组也是集合, 只不过数组的索引是数值类型.当想用非数值类型作为索引时, 数组就无法满足需要了. 而 Map 集合可以保存多个键-值对(key-value),  Set 集合可以保存多个元素. 对Map 和 Set 一般不会逐一遍历其中的元素. Map 一般用来存储需要频繁取用的数据,  Set 一般用来判断某个值是否存在其中. ES 5 中对 Map 和 Set 的模拟方法 在ES 5 中,没有 Set和Map集合, 一般使用对象来模拟这两种集合, 对象的属性作

  • 一文搞懂ES6中的Map和Set

    Map Map对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值.构造函数Map可以接受一个数组作为参数. Map和Object的区别 •一个Object 的键只能是字符串或者 Symbols,但一个Map 的键可以是任意值. •Map中的键值是有序的(FIFO 原则),而添加到对象中的键则不是. •Map的键值对个数可以从 size 属性获取,而 Object 的键值对个数只能手动计算. •Object 都有自己的原型,原型链上的键名有可能和你自己在对象上的设置的键名产生冲突.

  • ES6新数据结构Set与WeakSet用法分析

    本文实例讲述了ES6新数据结构Set与WeakSet用法.分享给大家供大家参考,具体如下: 新数据结构Set与WeakSet 1. Set Set类似于数据,但是成员值都是唯一的.生成Set的方式如下. var s = new Set(); [1,1,3,3,5,5].map( x => s.add(x) ); console.log(s); //Set {1, 3, 5} 没有重复值哟,如果面试官再让你编写数组去重的函数是不是简单多了.或者你可以这样写. var set = new Set(

  • ES6新特性五:Set与Map的数据结构实例分析

    本文实例讲述了ES6新特性五之Set与Map的数据结构.分享给大家供大家参考,具体如下: 1. Set ① 定义:它类似于数组,但是成员的值都是唯一的,没有重复的值.Set本身是一个构造函数,用来生成Set数据结构. var s = new Set(); [2,3,5,4,5,2,2].map(x => s.add(x)) console.log(s); //Set { 2, 3, 5, 4 } ② 属性和方法 Set结构有以下属性. Set.prototype.constructor:构造函数

  • ES6中如何使用Set和WeakSet

    ES6中提供了两新数据结构-Set和WeakSet.Set是类似于数组,但是成员变量的值都是唯一的,没有重复的值.WeakSet也是不重复的值的集合,但是只能用来存放对象. 一.Set使用 (1)Set本身提供了一个构造函数,用来生成Set数据结构. var s = new Set(); [2,2,2,5,8,16,2,1].map(x => s.add(x)) for(i of s){console.log(i)} //2,5,8,16,1 (2)Set()函数可以接受一个数组,作为构造参数,

  • ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解

    本文实例讲述了ES6中Set和Map数据结构,Map与其它数据结构互相转换操作.分享给大家供大家参考,具体如下: ES6 的 Set: ES6 提供了新的数据结构──Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. Array和Set对比 都是一个存储多值的容器,两者可以互相转换,但是在使用场景上有区别.如下: ①Array的indexOf方法比Set的has方法效率低下 ②Set不含有重复值(可以利用这个特性实现对一个数组的

  • ES6学习笔记之Set和Map数据结构详解

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一个构造函数,用来生成Set数据结构. 1 . Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var s = new Set(); var set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] var items =

  • ES6学习笔记之map、set与数组、对象的对比

    前言 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一起看看详细的介绍吧. // 数据结构横向对比,增,查,改,删 1.map和数组对比 { let map=new Map(); let array=[]; /**增**/ map.set('t',1); array.push({t:1}); console.info('map-array',map,ar

  • ES6使用Set数据结构实现数组的交集、并集、差集功能示例

    本文实例讲述了ES6使用Set数据结构实现数组的交集.并集.差集功能.分享给大家供大家参考,具体如下: Set数据结构是es6中新增的,它类似于数组,但是成员的值唯一,没有重复值. Set本身是一个数据结构,用来生成Set数据节后 Set数据结构的实例有4种遍历方法: keys():返回一个键名的遍历器 values():返回一个键值便利器 entries():返回一个键值对便利器 forEach():使用回调函数遍历每个成员 由于Set数据结构没有键名,只有键值(或者说键名和键值是同一个值),

  • 详解ES6中的 Set Map 数据结构学习总结

    ES6中的 Set 数据结构 ES6 新增了一种 Set 数据结构.它类似数组. 最重要的一点是 Set中的结构成员没有重复的, 可用这点 一行代码实现数组去重. Set 本身是一个构造函数.通过 new Set() 来创建Set结构. let arr1 = ['Hello', 'World', 'ES6'] let set1 = new Set() arr1.forEach(type => { set1.add(type) }) 通过new Set创建一个Set结构. forEach 遍历ar

  • ES6教程之for循环和Map,Set用法分析

    本文实例讲述了ES6教程之for循环和Map,Set用法.分享给大家供大家参考,具体如下: 现在大家先想一想,如果要你遍历一个数组的元素,你会选择如何去做呢?一般都会想起for循环: for (var index = 0; index < myArray.length; index++) { console.log(myArray[index]); } 可惜我得告诉你,这个方法是二十年的人才应该使用的方法,在ES5中已经提出了更为简便的forEach方法,代码如下: myArray.forEac

随机推荐