Set 和 Map|青训营笔记

用户7612218367748
87 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 23 天

学习笔记

 Set

Set 是集合。

Set 方法和属性

const s = new Set();

add 方法

s.add(0);
// 可以连写
s.add(1).add(2).add(2).add(3);
console.log(s);		// Set(4) { 0, 1, 2, 3 }

has 方法

console.log(s.has(1));	// true
console.log(s.has(4));	// false

delete 方法

s.delete(2);
// 使用 delete 删除不存在的成员，什么都不会发生，也不会报错
s.delete(4);
console.log(s);	// Set(3) { 0, 1, 3 }

clear 方法

s.clear();
console.log(s);	// Set(0) {}

forEach 方法

作用：用于遍历 Set 的（按照成员添加进集合的顺序遍历）。

forEach 方法可以接受两个参数，第一个是：回调函数，第二个是：指定回调函数的 this 指向。

s.forEach(function (value, key, set) {
    // Set 中 value = key
    // set 就是 s 本身
    console.log(value, key, set === s);
    console.log(this);
});

/*
0 0 true
Window
1 1 true
Window
2 2 true
Window
3 3 true
Window 
*/

s.forEach(function (value, key, set) {
    ......
}, document);

/*
0 0 true
#document
1 1 true
#document
2 2 true
#document
3 3 true
#document
*/

size 属性

console.log(s.size);	// 4

Set 构造函数的参数

【数组】

const s = new Set([1, 2, 1]);
console.log(s);		// Set(2) { 1, 2 }

【字符串】

console.log(new Set('hii'));	// Set(2) { 'h', 'i' }

【arguments】

function func() {
    console.log(new Set(arguments));
}
func(1, 2, 1);	// Set(2) { 1, 2 }

【NodeList】

<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
    console.log(new Set(document.querySelectorAll('P')));
</script>
</body>

【Set】

const s = new Set([1, 2, 1]);
console.log(new Set(s));	// Set(2) { 1, 2 }
console.log(s);				// Set(2) { 1, 2 }
// 这也是复制一个 Set 的方法

Set 注意事项

【Set 如何判断重复】

  • Set 对重复值的判断基本遵循严格相等（===）
  • 但是对于 NaN 的判断与 === 不同，Set 中 NaN 等于 NaN
const s = new Set();
s.add({}).add({});
console.log({} === {});	 // false
console.log(s);			 // Set(2) { {}, {} }

【什么时候使用 Set】

  • 数组或字符串需要去重
  • 不需要通过下标访问，只需要遍历
  • 为了使用 Set 提供的方法和属性

Set 的应用

【数组去重】

const s = new Set([1, 2, 1]);
console.log(s);			// Set(2) { 1, 2 }
console.log([...s]);	// [ 1, 2 ]

【字符串去重】

const s = new Set('abbacbd');
console.log(s);					// Set(4) { 'a', 'b', 'c', 'd' }
console.log([...s].join(''));	// abcd

【存放 DOM 元素】

<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
    // 这里使用 Set 是因为我们不需要通过下标去访问，只需直接遍历即可
    const s = new Set(document.querySelectorAll('p'));
    s.forEach(function (elem) {
        elem.style.color = 'red';
    });
</script>
</body>

【遍历】

数组的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}

// （a 相对于 b 的）差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}

Map 方法和属性

set 方法

set方法设置键名key对应的键值value，然后返回整个 Map。如果key已经有值，则键值会被更新，否则就新生成该键。

const m = new Map();

m.set('edition', 6)        // 键是字符串
m.set(262, 's')     // 键是数值
m.set(undefined, 'n')    // 键是 undefined

set方法返回的是当前的Map对象，可以采用链式写法。

let mapP = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

get 方法

get方法读取key对应的键值，找不到key返回undefined。

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数

m.get(hello)  // Hello ES6!

has 方法

has方法返回一个布尔值，某个键是否在当前 Map 。

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

delete 方法

delete方法删除某个键，返回true。如果删除失败，返回false。

m.delete(undefined)
m.has(undefined)       // false

clear 方法

clear方法清除所有成员，没有返回值。

let mapPP = new Map();
mapPP.set('foo', true);
mapPP.set('bar', false);

mapPP.size // 2
mapPP.clear()
mapPP.size // 0

forEach 方法

m.forEach(function (value, key, map) {
    console.log(this);
}, document);

size 属性

size属性返回 Map 结构的成员总数。

const mapPPP = new Map();
mapPPP.set('foo', true);
mapPPP.set('bar', false);

map.size // 2

Map 构造函数的参数

【二维数组】

console.log(new Map([
    ['name', 'alex'],
    ['age', 18]
]));
// Map(2) { 'name' => 'alex', 'age' => 18 }

【Set、Map】

// Set
// Set 中也必须体现出键和值
const s = new Set([
    ['name', 'alex'],
    ['age', 18]
]);
console.log(new Map(s));
console.log(s);
// Map(2) { 'name' => 'alex', 'age' => 18 }
// Set(2) { [ 'name', 'alex' ], [ 'age', 18 ] }

// Map
const m = new Map([
    ['name', 'alex'],
    ['age', 18]
]);
console.log(m);
const m2 = new Map(m);
console.log(m2, m2 === m);
// Map(2) { 'name' => 'alex', 'age' => 18 } false
// Map 复制的方法

Map 注意事项

【Map 如何判断键名是否相同】

Map 中遇到重复的键值则是后面的覆盖前面的。

  • 基本遵循严格相等（===）
  • Map 中 NaN 等于 NaN

【什么时候使用 Map】

  • 如果只是需要键值对结构
  • 需要字符串以外的值做键
  • 对象一般用在模拟实体上

Map 的应用

<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
    const [p1, p2, p3] = document.querySelectorAll('p');
    const m = new Map([
        [p1, {
            color: 'red',
            backgroundColor: 'yellow',
            fontSize: '40px'
        }],
        [p2, {
            color: 'green',
            backgroundColor: 'pink',
            fontSize: '40px'
        }],
        [p3, {
            color: 'blue',
            backgroundColor: 'orange',
            fontSize: '40px'
        }]
    ]);
    m.forEach((propObj, elem) => {
        for (const p in propObj) {
            elem.style[p] = propObj[p];
        }
    });	// 由于不需要改变 this 指向，所以可以使用箭头函数
</script>
</body>
avatar
文章
阅读
粉丝