网站搭建大型公司,企业电话查询黄页,东营列表网,微信公众号手机app目录 set 1基本用法 2Set 实例的属性和方法 3遍历操作 3.1 keys() #xff0c; values() #xff0c; entries() 3.2 forEach() 3.3遍历的应用 weakset 含义 语法 总结 set 1基本用法 ES6 提供了新的数据结构 Set。它类似于数组#xff0c;但是成员的值都是唯一…目录 set 1基本用法 2Set 实例的属性和方法 3遍历操作 3.1 keys() values() entries() 3.2 forEach() 3.3遍历的应用 weakset 含义 语法 总结 set 1基本用法 ES6 提供了新的数据结构 Set。它类似于数组但是成员的值都是唯一的没有重复的值。 Set 本身是一个构造函数用来生成 Set 数据结构。 const s new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x s.add(x)); for (let i of s) { console.log(i); } // 2 3 5 4 上面代码通过 add 方法向 Set 结构加入成员结果表明 Set 结构不会添加重复的值。 Set 函数可以接受一个数组或者具有 iterable 接口的其他数据结构作为参数用来初始化。 // 例一 const set new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4] // 例二 const items new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5 // 例三 function divs () { return [...document.querySelectorAll(div)]; } const set new Set(divs()); set.size // 56 // 类似于 divs().forEach(div set.add(div)); set.size // 56 上面代码中例一和例二都是 Set 函数接受数组作为参数例三是接受类似数组的对象作为参数。 上面代码中也展示了一种去除数组重复成员的方法。 // 去除数组的重复成员 [...new Set(array)] 向 Set 加入值的时候不会发生类型转换所以 5 和 5 是两个不同的值。Set 内部判断两个值是否不同使用的算法叫做“Same-value equality”它 类似于精确相等运算符 主要的区别是 NaN 等于自身而精确相等运算符认为 NaN 不等于自身。 let set new Set(); let a NaN; let b NaN; set.add(a); set.add(b); set // Set {NaN} 上面代码向 Set 实例添加了两个 NaN 但是只能加入一个。这表明在 Set 内部两个 NaN 是相等。 另外两个对象总是不相等的 let set new Set(); set.add({}); set.size // 1 set.add({}); set.size // 2 上面代码表示由于两个空对象不相等所以它们被视为两个值 2Set 实例的属性和方法 Set 结构的实例有以下属性。 Set.prototype.constructor 构造函数默认就是 Set 函数。 Set.prototype.size 返回 Set 实例的成员总数。 Set 实例的方法分为两大类操作方法用于操作数据和遍历方法用于遍历成员。下面先介绍四个操作方法。 add(value) 添加某个值返回 Set 结构本身。 delete(value) 删除某个值返回一个布尔值表示删除是否成功。 has(value) 返回一个布尔值表示该值是否为 Set 的成员。 clear() 清除所有成员没有返回值。 上面这些属性和方法的实例如下。 s.add(1).add(2).add(2); // 注意2被加入了两次 s.size // 2 s.has(1) // true s.has(2) // true s.has(3) // false s.delete(2); s.has(2) // false 下面是一个对比看看在判断是否包括一个键上面 Object 结构和 Set 结构的写法不同 // 对象的写法 const properties { width: 1, height: 1 }; if (properties[someName]) { // do something } // Set的写法 const properties new Set(); properties.add(width); properties.add(height); if (properties.has(someName)) { // do something } Array.from 方法可以将 Set 结构转为数组。 const items new Set([1, 2, 3, 4, 5]); const array Array.from(items); 这就提供了去除数组重复成员的另一种方法。 function dedupe(array) { return Array.from(new Set(array)); } dedupe([1, 1, 2, 3]) // [1, 2, 3] 3遍历操作 Set 结构的实例有四个遍历方法可以用于遍历成员。 keys() 返回键名的遍历器 values() 返回键值的遍历器 entries() 返回键值对的遍历器 forEach() 使用回调函数遍历每个成员 需要特别指出的是 Set 的遍历顺序就是插入顺序。这个特性有时非常有用比如使用 Set 保存一个回调函数列表调用时就能保证按照添加顺序调用。 3.1 keys() values() entries() keys 方法、 values 方法、 entries 方法返回的都是遍历器对象详见《Iterator 对象》一章。由于 Set 结构没有键名只有键值或者说键名和键值 是同一个值所以 keys 方法和 values 方法的行为完全一致。 let set new Set([red, green, blue]); for (let item of set.keys()) { console.log(item); } // red // green // blue for (let item of set.values()) { console.log(item); } // red // green // blue for (let item of set.entries()) { console.log(item); } // [red, red] // [green, green] // [blue, blue] 上面代码中 entries 方法返回的遍历器同时包括键名和键值所以每次输出一个数组它的两个成员完全相等。 Set 结构的实例默认可遍历它的默认遍历器生成函数就是它的 values 方法。 Set.prototype[Symbol.iterator] Set.prototype.values // true 这意味着可以省略 values 方法直接用 for...of 循环遍历 Set。 let set new Set([red, green, blue]); for (let x of set) { console.log(x); } // red // green // blue 3.2 forEach() Set 结构的实例与数组一样也拥有 forEach 方法用于对每个成员执行某种操作没有返回值。 set new Set([1, 4, 9]); set.forEach((value, key) console.log(key : value)) // 1 : 1 // 4 : 4 // 9 : 9 上面代码说明 forEach 方法的参数就是一个处理函数。该函数的参数与数组的 forEach 一致依次为键值、键名、集合本身上例省略了该参数。这 里需要注意Set 结构的键名就是键值两者是同一个值因此第一个参数与第二个参数的值永远都是一样的。 另外 forEach 方法还可以有第二个参数表示绑定处理函数内部的 this 对象。 3.3遍历的应用 扩展运算符 ... 内部使用 for...of 循环所以也可以用于 Set 结构。 let set new Set([red, green, blue]); let arr [...set]; // [red, green, blue] 扩展运算符和 Set 结构相结合就可以去除数组的重复成员 let arr [3, 5, 2, 2, 5, 5]; let unique [...new Set(arr)]; // [3, 5, 2] 而且数组的 map 和 filter 方法也可以用于 Set 了。 let set new Set([1, 2, 3]); set new Set([...set].map(x x * 2)); // 返回Set结构{2, 4, 6} let set new Set([1, 2, 3, 4, 5]); set new Set([...set].filter(x (x % 2) 0)); // 返回Set结构{2, 4} 因此使用 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} 如果想在遍历操作中同步改变原来的 Set 结构目前没有直接的方法但有两种变通方法。一种是利用原 Set 结构映射出一个新的结构然后赋值给原 来的 Set 结构另一种是利用 Array.from 方法 // 方法一 let set new Set([1, 2, 3]); set new Set([...set].map(val val * 2)); // set的值是2, 4, 6 // 方法二 let set new Set([1, 2, 3]); set new Set(Array.from(set, val val * 2)); // set的值是2, 4, 6 上面代码提供了两种方法直接在遍历操作中改变原来的 Set 结构。 weakset 含义 WeakSet 结构与 Set 类似也是不重复的值的集合。但是它与 Set 有两个区别。 首先WeakSet 的成员只能是对象而不能是其他类型的值 const ws new WeakSet(); ws.add(1) // TypeError: Invalid value used in weak set ws.add(Symbol()) // TypeError: invalid value used in weak set 上面代码试图向 WeakSet 添加一个数值和 Symbol 值结果报错因为 WeakSet 只能放置对象。 其次WeakSet 中的对象都是弱引用即垃圾回收机制不考虑 WeakSet 对该对象的引用也就是说如果其他对象都不再引用该对象那么垃圾回收机 制会自动回收该对象所占用的内存不考虑该对象还存在于 WeakSet 之中。 这是因为垃圾回收机制依赖引用计数如果一个值的引用次数不为 0 垃圾回收机制就不会释放这块内存。结束使用该值之后有时会忘记取消引用导 致内存无法释放进而可能会引发内存泄漏。WeakSet 里面的引用都不计入垃圾回收机制所以就不存在这个问题。因此WeakSet 适合临时存放一 组对象以及存放跟对象绑定的信息。只要这些对象在外部消失它在 WeakSet 里面的引用就会自动消失。 由于上面这个特点WeakSet 的成员是不适合引用的因为它会随时消失。另外由于 WeakSet 内部有多少个成员取决于垃圾回收机制有没有运行 运行前后很可能成员个数是不一样的而垃圾回收机制何时运行是不可预测的因此 ES6 规定 WeakSet 不可遍历。 这些特点同样适用于本章后面要介绍的 WeakMap 结构 语法 WeakSet 是一个构造函数可以使用 new 命令创建 WeakSet 数据结构 const ws new WeakSet(); 作为构造函数WeakSet 可以接受一个数组或类似数组的对象作为参数。实际上任何具有 Iterable 接口的对象都可以作为 WeakSet 的参数。 该数组的所有成员都会自动成为 WeakSet 实例对象的成员。 const a [[1, 2], [3, 4]]; const ws new WeakSet(a); // WeakSet {[1, 2], [3, 4]} 上面代码中 a 是一个数组它有两个成员也都是数组。将 a 作为 WeakSet 构造函数的参数 a 的成员会自动成为 WeakSet 的成员。 注意是 a 数组的成员成为 WeakSet 的成员而不是 a 数组本身。这意味着数组的成员只能是对象 const b [3, 4]; const ws new WeakSet(b); // Uncaught TypeError: Invalid value used in weak set(…) 上面代码中数组 b 的成员不是对象加入 WeaKSet 就会报错。 WeakSet 结构有以下三个方法。 WeakSet.prototype.add(value)向 WeakSet 实例添加一个新成员。 WeakSet.prototype.delete(value)清除 WeakSet 实例的指定成员。 WeakSet.prototype.has(value)返回一个布尔值表示某个值是否在 WeakSet 实例之中。 下面是一个例子。 const ws new WeakSet(); const obj {}; const foo {}; ws.add(window); ws.add(obj); ws.has(window); // true ws.has(foo); // false ws.delete(window); ws.has(window); // false WeakSet 没有 size 属性没有办法遍历它的成员。 ws.size // undefined ws.forEach // undefined ws.forEach(function(item){ console.log(WeakSet has item)}) // TypeError: undefined is not a function 上面代码试图获取 size 和 forEach 属性结果都不能成功。 WeakSet 不能遍历是因为成员都是弱引用随时可能消失遍历机制无法保证成员的存在很可能刚刚遍历结束成员就取不到了。WeakSet 的一个 用处是储存 DOM 节点而不用担心这些节点从文档移除时会引发内存泄漏。 下面是 WeakSet 的另一个例子。 const foos new WeakSet() class Foo { constructor() { foos.add(this) } method () { if (!foos.has(this)) { throw new TypeError(Foo.prototype.method 只能在Foo的实例上调用); } } } 上面代码保证了 Foo 的实例方法只能在 Foo 的实例上调用。这里使用 WeakSet 的好处是 foos 对实例的引用不会被计入内存回收机制所以删除实 例的时候不用考虑 foos 也不会出现内存泄漏。 总结 本博客源于本人阅读相关书籍和视频总结创作不易谢谢点赞支持。学到就是赚到。我是歌谣励志成为一名优秀的技术革新人员。 欢迎私信交流一起学习一起成长。 推荐链接 其他文件目录参照 “睡服“面试官系列之各系列目录汇总建议学习收藏