【ES6】学习笔记--ES6中的Map

🌞从模仿由至进阶🌞

🔫:ES6中的Map
🚀:zZhiqg的主页
🍉:嘿 也许你和我一样~

ES6中的Map

初识Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

const m = new Map();

简述Map

Object 结构提供了 “字符串—值” 的对应，Map 结构提供了“值—值”的对应。值可以是any,也就是说这种对应的关系更加“自由”
下面举两个例子：

//Object
const o = {
    name: 'zZhiqg',
    age: 22,
    weight: '65kg'
}
console.log(o['name'])  //**Object结构的键是字符串！！
console.log(o['age'])   //索引时也要用''字符串的形式
//  zZhiqg    
//  22

//Map
const m = new Map(); //Map结构
const o = {         //Object结构
    say:'hello'
}
m.set(o, 'content') // 添加到Map里去
console.log(m.get(o)) 
// content

Set-学习笔记
map作为和set一起推出的新的数据结构，也是有相通之处的。它同样接收有iterable接口的数据来作为入参，常见的就是数组Array

const map = new Map([ // 这里接收一个二维数组
  ['name', 'zZhiqg'], // 二维数组的次维由两个元素组成
  ['age', '22']
]);

map.size // 2
map.has('name') // true
map.get('name') // "zZhqg"
map.has('age') // true
map.get('age') // "22"

不仅仅是数组，只要满足具有Iterator接口，且每个成员都是两个元素，就可以用来当作Map构造函数的参数。

Map的遍历

作为拥有Iterator接口的数据结构，遍历的方式是一致的。

const map = new Map([ // 这里接收一个二维数组
  ['name', 'zZhiqg'], // 二维数组的次维由两个元素组成
  ['age', '22']
]);
for (let key of map.keys()) {
    console.log(key);
}
// "name"
// "age"

for (let value of map.values()) {
    console.log(value);
}
// "zZhiqg"
// "22"

for (let item of map.entries()) {
    console.log(item[0], item[1]);
}
// "name" "zZhiqg"
// "age" "22"

// 或者
for (let [key, value] of map.entries()) {
    console.log(key, value);
}
// "name" "zZhiqg"
// "age" "22"

// 等同于使用map.entries()
for (let [key, value] of map) {
    console.log(key, value);
}
// "name" "zZhiqg"
// "age" "22"
ey, value] of map) {
    console.log(key, value);
}
// "name" "zZhiqg"
// "age" "22"

数组的.map方法

🚲🚲
*注意不要跟数组里的.map方法混淆了

🌞Map本身是没有.map方法的🌞
我们可以通过(...)拓展运算符的方式把Map转换成数组

const map = new Map([
    [1, '1'],
    [2, '2'],
    [3, '3']
])
const mapA = [...map] //先弄成数组
const mapn = new Map(  //.map返回的是一个新的数组，所以可以作为Map构造的入参
    mapA.map(([k, v]) => [k * 2, 'k' + v])
)
console.log(mapn)   //打印处理后的mapn

/*console结果*/
//  2 "k1"
//  4 "k2"
//  6 "k3"