ES6中的Map
一、Map
Map 是 ES6 中新增的数据结构，Map 类似于对象，但普通对象的key必须是字符串或者数字，而 Map 的 key 可以是任何数据类型...
1. Map构造器
先看Map的简单用法
// 字符串作为key，和JS对象类似
var map = new Map()
// set
map.set('name', 'John')//两个参数，分为对应map中key,value, 推进去的时候会自动检查类型，Object,String,Array等l
map.set('age', 29)
// get
map.get('name') // John
map.get('age') // 29
这么对代码，看起来确实没有JS对象简洁
但Map的强大之处在于它的key可以是任意类型
// 对象作为key演示
var xy = {x: 10, y: 20} // 坐标
var wh = {w: 100, h: 200} // 宽高
var map = new Map()
// set
map.set(xy, '坐标')
map.set(wh, '宽高')
// get
map.get(xy) // '坐标'
map.get(wh) // '宽高'
以上演示了用对象作为key的Map。以下为图示
Map构造器还支持传数组方式
var map = new Map([["name", "John"], ["age", "29"]])
// 遍历key
for (var key of map.keys()) {
console.log(key) // name, age
}
2. 迭代
和Set一样用for of来迭代Map，键调用map.keys()，值调用map.values()，键值实体调用map.entries()
var map = new Map()
// set
map.set('name', 'John')
map.set('age', 29)
// get
map.get('name') // 'John'
map.get('age') // 29
// 遍历key
for (var key of map.keys()) {
console.log(key)
}
// 遍历value
for (var val of map.values()) {
console.log(val)
}
// 遍历实体
for (var arr of map.entries()) {
console.log('key: ' + arr[0] + ', value: ' + arr[1])
}
// 遍历实体的简写
for (var [key, val] of map.entries()) {
console.log('key: ' + key + ', value: ' + val)
}
map.forEach(function (value, key, map) {
//value对应map的键值
//key对应map的键名
//与书写的字母无关，就是这么对应的
//value和key就是map的key，value，map是map本身
});
3. 方法和属性
二、WeakMap
与Map的区别
- 不接受基本类型的值作为键名
- 没有keys、values、entries和size
有以下方法
4.合并多个map
let merged = new Map([...map1, ...map2, ...map3])
5.普通object转换成map
const map = new Map(Object.entries({foo: 'bar'}));
map.get('foo'); // 'bar'
6.删除前n个值
方法一：
aa = new Map(Array.from(aa).slice(3));
方法二：
for (let i = 0; i < 3; i ++) {
aa.delete(aa.keys().next());
}
Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环也枚举原型链中的属性）。
通俗点就是 Object.entries() 可以把一个对象的键值以数组的形式遍历出来，结果和 for...in 一致，但不会遍历原型属性。
示例1 -- 传入对象
const obj = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj)); // [['foo', 'bar'], ['baz', 'abc']]
示例2.1 -- 数组
const arr = [1, 2, 3];
console.log(Object.entries(arr)); // [['0', 1], ['1', '2'], ['2', '3']]
示例2.2 -- 数组（数组中包含对象）
const arr1 = [{ a: 1 }, 2, 3];
console.log(Object.entries(arr1)); // [['0', { a: 1 }], ['1', '2'], ['2', '3']]
示例2.3 -- 数组（数组中的值全部为对象）
const arr2 = [{ a: 1 }, { b: 2 }, { c: 3 }];
console.log(Object.entries(arr2)); // [['0', { a: 1 }], ['1', { b: 2 }], ['2', { c: 3 }]]
示例3 -- 字符串
const str = '123';
console.log(Object.entries(str)); // [['0', '1'], ['1', '2'], ['2', '3']]
示例4 -- 数字、浮点数
const num = 123;
console.log(Object.entries(num)); // []
const float1 = 12.3;
console.log(Object.entries(float1)); // []
示例5 -- 将Object转化为Map
new Map()构造函数接受一个可迭代的entries。 借助Object.entries方法你可以很容易的将Object转换为Map:
const obj2 = { foo: 'bar', baz: 'abc' };
console.log(Object.entries(obj2)); // [['foo', 'bar'], ['baz', 'abc']]
const map = new Map(Object.entries(obj2));
console.log(map); // Map {'foo' => 'bar', 'baz' => 'abc'}
数组的map方法
map()方法：map，映射，即原数组映射成一个新的数组；
map方法接受一个新参数，这个参数就是将原数组变成新数组的映射关系。
function myfun_1(arr){
var array = [];
arr.map(item => {
array.push(item*item);
});
console.log(array);
}
function myfun_2(arr){
var array = [];
arr.map(function(item){
array.push(item*item);
});
console.log(array);
}
var arr3 = [1,2,3,4,5];
myfun_1(arr3); //[1,4,9,16,25]
var arr1 = [5,2,1,3,4];
myfun_1(arr1); //[25,4,1,9,16]
var arr2 = [3,4,5,1,2,6];
myfun_2(arr2); //[9,16,25,1,4,36]
在实际的应用中，我们可以通过map方法得到某一个对象数组中特定属性的值
var obj = [
{name:'小明',age:16,sex:'男'},
{name:'小红',age:17,sex:'女'},
{name:'小白',age:18,sex:'女'},
]
function getter(obj){
obj.map(item => {
console.log(item.age);
})
}
getter(obj);//16 //17 //18