前言:明天是疯狂星期四,能不能提前v我50
JavaScript的对象(Object),本质上是键值对的集合(hash结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。
为了解决这个问题,ES6提供了Map数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
定义: 键/值对的集合
const mapObj = new Map();
const mapObj = new Map([[key,value],[key,value]]); // 默认带初始化参数的定义
注意:
-
如果Map的键是一个简单类型的值(数字、字符串、布尔值),则只要两个值严格相等,Map将其视为一个键,包括0和-0。另外,虽然NaN不严格相等于自身,但Map将其视为同一个键。
-
Map() 只能用 new 构造。尝试不使用 new 调用它会抛出 TypeError。
属性及方法
1.size属性:size属性返回Map结构的成员总数。
const obj = new Map([['name', '帕克'], ['age', 38], ['sex', '男']]);
console.log(obj.size); // 3
2.set(key, value):set方法设置key所对应的键值,然后返回整个Map结构。如果key已经有值,则键值会被更新,否则就新生成该键。
// 常用写法
const obj = new Map();
obj.set("age", 20); // 键是字符串
obj.set(0, "pake"); // 键是数值
obj.set(undefined, "undefined"); // 键是undefined
// set方法返回的是Map本身,也可以采用链式写法
const map = new Map().set(1, 'a').set(2, 'b');
console.log(map); // Map(2) {1 => "a", 2 => "b"}
3.get(key):get方法读取key对应的键值,如果找不到key,返回undefined。
const obj = new Map();
obj.set('帕鲁', '你不干有的是帕鲁干');
console.log(obj.get('帕鲁')); // 你不干有的是人干
console.log(obj.get('帕克')); // undefined
4.has(key):has方法返回一个布尔值,表示某个键是否在Map数据结构中。
const obj = new Map();
obj.set('帕鲁', '你不干有的是帕鲁干');
console.log(obj.has('帕鲁')); // true
console.log(obj.has('帕克')); // false
5.delete(key):delete方法删除某个键,返回true。如果删除失败,返回false。
const obj = new Map();
obj.set('帕鲁', '你不干有的是帕鲁干');
console.log(obj.has('帕鲁')); // true
console.log(obj.delete('帕鲁')); // true
console.log(obj.delete('帕克')); // false
console.log(obj.has('帕鲁')); // false
6.clear():clear方法清除所有成员,没有返回值。
const obj = new Map()
obj.set('帕鲁', '你不干有的是帕鲁干');
console.log(obj.size); // 1
obj.clear();
console.log(obj.size); // 0
7.keys():keys() 方法返回一个新的 map 迭代器对象,该对象包含了此 map 中每个元素的键,按插入顺序排列。
const map= new Map();
map.set('0', 'foo');
map.set(1, 'bar');
const iterator1 = map.keys();
console.log(iterator1.next().value);
// Expected output: "0"
console.log(iterator1.next().value);
// Expected output: 1
next() 方法是 JavaScript 中 Iterator 协议的一部分,它用于获取迭代器的下一个元素。每次调用 next() 都会返回一个包含 value 和 done 属性的对象。value 属性包含下一个元素的值,done 属性是一个布尔值,表示迭代是否结束。
8.values():values() 方法返回一个新的 map 迭代器对象,该对象包含此 map 中每个元素的值,按插入顺序排列。
const map = new Map();
map.set('0', 'foo');
map.set(1, 'bar');
const iterator1 = map.values();
console.log(iterator1.next().value);
// Expected output: "foo"
console.log(iterator1.next().value);
// Expected output: "bar"
9.entries():entries() 方法返回一个新的 map 迭代器对象,该对象包含了此 map 中的每个元素的 [key, value] 对,按插入顺序排列。
const map= new Map();
map.set('0', 'foo');
map.set(1, 'bar');
const iterator1 = map.entries();
console.log(iterator1.next().value);
// Expected output: Array ["0", "foo"]
console.log(iterator1.next().value);
// Expected output: Array [1, "bar"]
10.forEach():forEach() 方法按插入顺序对该 map 中的每个键/值对执行一次提供的函数。
function logMapElements(value, key, map) {
console.log(`m[${key}] = ${value}`);
}
new Map([
['foo', 3],
['bar', {}],
['baz', undefined],
]).forEach(logMapElements);
// Expected output: "m[foo] = 3"
// Expected output: "m[bar] = [object Object]"
// Expected output: "m[baz] = undefined"
11.groupBy():静态方法使用提供的回调函数返回的值对给定可迭代对象中的元素进行分组。最终返回的 Map 使用测试函数返回的唯一值作为键,可用于获取每个组中的元素组成的数组。
该方法主要用于对与对象相关的元素进行分组,特别是当该对象可能随时间而变化时。如果对象不变,你可以使用字符串表示它,并使用 Object.groupBy() 分组元素。
const inventory = [
{ name: 'asparagus', type: 'vegetables', quantity: 9 },
{ name: 'bananas', type: 'fruit', quantity: 5 },
{ name: 'goat', type: 'meat', quantity: 23 },
{ name: 'cherries', type: 'fruit', quantity: 12 },
{ name: 'fish', type: 'meat', quantity: 22 },
];
const restock = { restock: true };
const sufficient = { restock: false };
const result = Map.groupBy(inventory, ({ quantity }) =>
quantity < 6 ? restock : sufficient,
);
console.log(result.get(restock));
// [{ name: "bananas", type: "fruit", quantity: 5 }]
所以在实际开发过程中,如果涉及到复杂的数据结构,能使用 Map 就不使用 Array,对于数组的存储考虑唯一性使用 Set 。
今天就这样,下班下班 bye bye