/*
11.1.1 Set基本用法:
es6 提供了新的数据结构 ———— Set。
它类似于数组,但是成员的值都是唯一的,没有重复。
Set本身是一个构造函数,用来生成 Set 数据结构
*/
const s = new Set()
var arr = [2, 3, 4, 5, 2, 2]
arr.forEach(element => {
// console.log(element)
s.add(element)
// console.log(s)
});
console.log(s) // {2, 3, 4, 5}
for( let i of s) {
console.log(i)
}
// 上面的代码通过 add 方法向 Set 结构加入成员,结果表明 Set 结构不会添加重复的值。
// Set 函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。
// 例1:
const set1 = new Set([1, 2, 3, 4, 4])
console.log(set1) // Set(4) {1, 2, 3, 4}
console.log(set1.size) // 4
console.log(...set1) // 1 2 3 4
console.log([...set1]) // [1, 2, 3, 4]
// 例2:
const items = new Set([1, 2, 5, 5, '5', 9])
console.log(items) // Set(5) {1, 2, 5, "5", 9}
console.log(items.size) // 5
// 例3:
function divs () {
return [...document.querySelectorAll('div')]
}
console.log(divs()) // [div, div, div]
const set2 = new Set(divs())
console.log(set2) // Set(0) {} // Set(3) {div, div, div}
console.log(set2.size) // 0 // 3
// 去除数组的重复成员 ----------> [...new Set(array)]
/*
向 Set 加入值时不会发生类型转换,所以 '5' 和 5 是两个不同的值.Set 内部判断两个值是否相同使用的算法叫作 "Same-value equality",
它类似于精确相等运算符(===),主要的区别是是 NaN 等于自身,而精确相等运算符认为 NaN 不等于自身.
*/
let set4 = new Set()
let a = NaN
let b = NaN
set4.add(a)
set4.add(b)
console.log(set4) // Set(1) {NaN}
console.log(set4.size) // 1
// 上面的代码表明: 在 Set 内部,两个 NaN 是相等的
// 另外,两个对象是不相等的
let set5 = new Set()
set5.add({})
set5.add({})
console.log(set5) // Set(2) {{…}, {…}}
console.log(set5.size) // 2
// 上面的代码表示,由于两个空对象不是精确相等,所以它们被视为两个值
/*
11.1.2 Set 实例的属性和方法
Set 结构的实例有以下属性:
+ Set.prototype.constructor : 构造函数,默认就是 Set 函数
+ Set.prototype.size : 返回 Set 实例的成员总数
Set 实例的方法分为两大类: 操作方法(用于操作数据)和遍历方法(用于遍历成员).下面先介绍 4 个操作方法
+ add(value) : 添加某个值,返回 Set 实例的成员总数
+ delete(value) : 删除某个值,返回一个布尔值,表示删除是否成功
+ has(value) : 返回一个布尔值,表示参数是否为 Set 的成员
+ clear(value) : 清楚所有成员,没有返回值
*/
// 上面这些属性和方法的实例如下:
var set6 = new Set()
set6.add(1).add(2).add(2)
console.log(set6) // Set(2) {1, 2}
console.log(set6.size) // 2
console.log(set6.has(1)) // true
console.log(set6.has(2)) // true
console.log(set6.has(3)) // false
console.log(set6.delete(2)) // true
console.log(set6.has(2)) // false
// 下面是一个对比,判断是否包括一个键上 Object 结构和 Set 结构的写法不同
// 对象的写法:
const properties1 = {
'width': 1,
'height': 2
}
if (properties1['width']) {
// 如果对象 properties1 存在属性 width, 则做一些事情
// do something
}
// Set 的写法:
const properties2 = new Set()
properties2.add('width')
properties2.add('height')
if (properties2.has('width')) {
// 如果对象 properties2 存在属性 width, 则做一些事情
// do something
}
// Array.from 方法可以将Set 结构转为数组
const set7 = new Set([1, 2, 3, 4, 5])
console.log(set7) // Set(5) {1, 2, 3, 4, 5}
const array = Array.from(set7)
console.log(array) // [1, 2, 3, 4, 5]
// 这就提供了一种去除数组的重复元素的方法:
function dedupe(array) {
return Array.from(new Set(array))
}
var res = dedupe([1, 1, 2, 4])
console.log(res) // [1, 2, 4]
/*
11.1.3 遍历操作:
Set 结构的实例有 4 个遍历方法,可用于遍历成员
+ keys() : 返回键名的遍历器
+ values() : 返回键值的遍历器
+ entries() : 返回键值对的遍历器
+ forEach() : 使用回调函数遍历每个成员
需要特别指出的是,Set 的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。
*/
/*
keys()、values()、entries()
keys 方法、values 方法、entries 方法返回的都是遍历器对象。由于 Set 结构没有键名,只有键值(或者说键名和键值都是同一个值),所以 keys 方法和 values 方法的行为完全一致
*/
let set8 = new Set(['red', 'green',' blue'])
for (let item of set8.keys(0)) {
console.log(item)
}
// red
// green
// blue
for (let item of set8.values()) {
console.log(item)
}
// red
// green
// blue
for (let item of set8.entries()) {
console.log(item)
}
// ["red", "red"]
// ["green", "green"]
// [" blue", " blue"]
/*
Set 结构的实例默认可遍历,其默认遍历器生成函数就是它的 values 方法
这意味着,可以省略 values 方法,直接用 for...of 循环遍历 Set
*/
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values) // true
let set9 = new Set(['red', 'green',' blue'])
for (let x of set9) {
console.log(x)
}
// red
// green
// blue
/*
forEach()
Set 结构实例的 forEach 方法用于对每个成员执行某种操作,没有返回值
*/
let set10 = new Set([1, 2, 3])
set10.forEach((value, key) => console.log(value + ',' + key))
// 1,1
// 2,2
// 3,3
/*
上面的代码说明,forEach 方法的参数就是一个处理函数。该函数的参数依次为键值、键名、集合本身。
另外,forEach 方法还可以有第二个参数,表示绑定的 this 对象
*/
11.1、Set数据结构
最新推荐文章于 2024-07-22 16:14:54 发布