正文
js map数据结构
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
Map
对象保存键值对，并且能够记住键的原始插入顺序。任何值(对象或者原始值) 都可以作为一个键或一个值。
map对象常用于保存键值对，它的键是任意数据类型，常用于建立数据的映射关系
和对象的区别：Object对象的key只能是字符串或者Symbol，map的key可是是任意数据类型;Map的key是有序的；map的键值对个数通过size属性获取，对象只能自己统计
new Map(params)构造函数params可以接收二维数组|null|undefined;注意传入null|undefined其实也就相当于不传参数,直接new Map()
1.初始化map对象的三种方式
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
// 第二种方式 set方法返回的是当前map对象，因此可以采用链式写法
const map2 = new Map().set(60, '及格').set(80, '良').set(90, '优秀')
// 传入二维数组
const map3 = new Map([[60, '及格'], [80, '良'], [90, '优秀'],])
console.log(map3,map2);//Map { 60 => '及格', 80 => '良', 90 => '优秀' }
错误初始化map的形式。坚决不要使用[]来定义key-value
let wrongMap = new Map()
wrongMap['bla'] = 'blaa'
wrongMap['bla2'] = 'blaaa2'
console.log(wrongMap); //Map { bla: 'blaa', bla2: 'blaaa2' } 也是可以生成， 但是map的所有方法都不能使用，也就是这个错误的定义map对象方法
console.log(wrongMap.size); //
console.log(wrongMap.get('bla')); //undefined
2.map对象的key
对同一个key进行多次赋值，后面值会覆盖前面的值。说明map对象key唯一
map对象的key是跟内存地址绑定的。引用数据类型需要指向同一个内存地址才是同一个key
map对象key是基本数据类型，只要它们是严格相等=== map将其是作为同一个key
undefined 和 null是两个不同的key
let myMap = new Map();
let keyObj = {};
let keyFunc = function () { };
let keyArr = []
let keyString = 'a string';
let strNum = '0'
// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyArr, "和键keyArr关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");
myMap.set(strNum, "和键strNum关联的值");
myMap.set(null,'和null key关联的值')
myMap.set(undefined,'和 undefined key关联的值')
console.log(myMap.get(keyObj)) //和键keyObj关联的值
console.log(myMap.get(keyArr)) //和键keyArr关联的值
console.log(myMap.get(keyFunc)) // 键keyFunc关联的值
console.log(myMap.get(strNum)) //和键strNum关联的值
console.log(myMap.get(keyString)) // 键'a string'关联的值
console.log(myMap.get({})); //undefined
console.log(myMap.get([])); //undefined
console.log(myMap.get(function () { })); //undefined
console.log(myMap.get(0)) //undefined
console.log(myMap.get('a string')); // 键'a string'关联的值
console.log(myMap.get(null)); //和null key关联的值
console.log(myMap.get(undefined)); //和 undefined key关联的值
3.map对象的基本方法
size属性，返回map的长度
get (key) 返回键对应的值，如果不存在，则返回undefined。
has(key) 返回一个布尔值，表示Map实例是否包含键对应的值。
delete(key )如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
map1.set(90, '有优秀')
console.log(map1.has(60)) //true
console.log(map1.has('60')) //false
console.log(map1.delete(80)); //true 删除已有的key 原map会改变，返回值true
console.log(map1.size); //
console.log(map1.delete('80')); //false 删除不存在的key 原map不改变，返回值false
console.log(map1.size); //
map对象的迭代
map.values() 是一个可迭代对象 ,可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
map.keys(); 是一个可迭代对象，可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
map 是一个可迭代对象，可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
另外map对象还拥有forEach()遍历方法
map.forEach()遍历 如果回调函数只传一个参数 这个参数就是每次便利的map的值。如果传2个参数，依次是value ,key
for item of map 等价于 for item of map.entries() item是[key,value]一维数组组合（可是使用解构数组的技巧将其拆开）
for value of map.values() value是map对象的每一项的值
for key of map.keys() key是map对象的每一项的key
let [a, b, c] = [10, 20, 30]
// console.log(a, b, c); 10 20 30 数组解构的例子
for (const item of map1) {
console.log(item);
}
//解构了item
for (const [key, value] of map1) {
console.log(key, value);
}
for (const value of map1.values()) {
console.log(value); //及格 | 良 |优秀
}
for (const key of map1.keys()) {
console.log(key); //60 80 90
}
map1.forEach(value => console.log(value)) //如果回调函数只传一个参数 这个参数就是每次便利的map的值
map1.forEach((value, key) => {
console.log(value, key);
})
console.log([...map1]); //[ [ 60, '及格' ], [ 80, '良' ], [ 90, '优秀' ] ]
console.log([...map1.values()]); //[ '及格', '良', '优秀' ]
console.log([...map1.keys()]); //[ 60, 80, 90 ]
map对象的合并
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// 两个map对象合并，如果有重复的key,后面的key会覆盖前面的
let res = new Map([...first, ...second]) //Map { 1 => 'uno', 2 => 'dos', 3 => 'three' }
console.log(res);
map对象复制
重要：请记住，
数据本身
未被克隆。
let original = new Map([
[1, 'one']
]);
let clone = new Map(original);
console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较 不为同一个对象的引用
map对象改变形式 实现过滤或者新map
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
// map实现过滤和改变数据形式
// new Map([...map1].filter([key, value]=> key > 60))
let res = [...map1].filter(([key, value]) => key > 60)
const map2 = new Map(res) //Map { 80 => '良', 90 => '优秀' }
// 一步到位
new Map([...map1].filter(([key, value]) => key > 60)) //Map { 80 => '良', 90 => '优秀' }
// console.log(res1);
let res2 = new Map([...map1].map(([key, value]) => [key * 10, `${value}~~~`]))
console.log(res2); //Map { 600 => '及格~~~', 800 => '良~~~', 900 => '优秀~~~' }
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
// 第二种方式 set方法返回的是当前map对象，因此可以采用链式写法
const map2 = new Map().set(60, '及格').set(80, '良').set(90, '优秀')
// 传入二维数组
const map3 = new Map([[60, '及格'], [80, '良'], [90, '优秀'],])
console.log(map3,map2);//Map { 60 => '及格', 80 => '良', 90 => '优秀' }
错误初始化map的形式。坚决不要使用[]来定义key-value
let wrongMap = new Map()
wrongMap['bla'] = 'blaa'
wrongMap['bla2'] = 'blaaa2'
console.log(wrongMap); //Map { bla: 'blaa', bla2: 'blaaa2' } 也是可以生成， 但是map的所有方法都不能使用，也就是这个错误的定义map对象方法
console.log(wrongMap.size); //
console.log(wrongMap.get('bla')); //undefined
2.map对象的key
对同一个key进行多次赋值，后面值会覆盖前面的值。说明map对象key唯一
map对象的key是跟内存地址绑定的。引用数据类型需要指向同一个内存地址才是同一个key
map对象key是基本数据类型，只要它们是严格相等=== map将其是作为同一个key
undefined 和 null是两个不同的key
let myMap = new Map();
let keyObj = {};
let keyFunc = function () { };
let keyArr = []
let keyString = 'a string';
let strNum = '0'
// 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyArr, "和键keyArr关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");
myMap.set(strNum, "和键strNum关联的值");
myMap.set(null,'和null key关联的值')
myMap.set(undefined,'和 undefined key关联的值')
console.log(myMap.get(keyObj)) //和键keyObj关联的值
console.log(myMap.get(keyArr)) //和键keyArr关联的值
console.log(myMap.get(keyFunc)) // 键keyFunc关联的值
console.log(myMap.get(strNum)) //和键strNum关联的值
console.log(myMap.get(keyString)) // 键'a string'关联的值
console.log(myMap.get({})); //undefined
console.log(myMap.get([])); //undefined
console.log(myMap.get(function () { })); //undefined
console.log(myMap.get(0)) //undefined
console.log(myMap.get('a string')); // 键'a string'关联的值
console.log(myMap.get(null)); //和null key关联的值
console.log(myMap.get(undefined)); //和 undefined key关联的值
3.map对象的基本方法
size属性，返回map的长度
get (key) 返回键对应的值，如果不存在，则返回undefined。
has(key) 返回一个布尔值，表示Map实例是否包含键对应的值。
delete(key )如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
map1.set(90, '有优秀')
console.log(map1.has(60)) //true
console.log(map1.has('60')) //false
console.log(map1.delete(80)); //true 删除已有的key 原map会改变，返回值true
console.log(map1.size); //
console.log(map1.delete('80')); //false 删除不存在的key 原map不改变，返回值false
console.log(map1.size); //
map对象的迭代
map.values() 是一个可迭代对象 ,可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
map.keys(); 是一个可迭代对象，可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
map 是一个可迭代对象，可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
另外map对象还拥有forEach()遍历方法
map.forEach()遍历 如果回调函数只传一个参数 这个参数就是每次便利的map的值。如果传2个参数，依次是value ,key
for item of map 等价于 for item of map.entries() item是[key,value]一维数组组合（可是使用解构数组的技巧将其拆开）
for value of map.values() value是map对象的每一项的值
for key of map.keys() key是map对象的每一项的key
let [a, b, c] = [10, 20, 30]
// console.log(a, b, c); 10 20 30 数组解构的例子
for (const item of map1) {
console.log(item);
}
//解构了item
for (const [key, value] of map1) {
console.log(key, value);
}
for (const value of map1.values()) {
console.log(value); //及格 | 良 |优秀
}
for (const key of map1.keys()) {
console.log(key); //60 80 90
}
map1.forEach(value => console.log(value)) //如果回调函数只传一个参数 这个参数就是每次便利的map的值
map1.forEach((value, key) => {
console.log(value, key);
})
console.log([...map1]); //[ [ 60, '及格' ], [ 80, '良' ], [ 90, '优秀' ] ]
console.log([...map1.values()]); //[ '及格', '良', '优秀' ]
console.log([...map1.keys()]); //[ 60, 80, 90 ]
map对象的合并
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// 两个map对象合并，如果有重复的key,后面的key会覆盖前面的
let res = new Map([...first, ...second]) //Map { 1 => 'uno', 2 => 'dos', 3 => 'three' }
console.log(res);
map对象复制
重要：请记住，
数据本身
未被克隆。
let original = new Map([
[1, 'one']
]);
let clone = new Map(original);
console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较 不为同一个对象的引用
map对象改变形式 实现过滤或者新map
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
// map实现过滤和改变数据形式
// new Map([...map1].filter([key, value]=> key > 60))
let res = [...map1].filter(([key, value]) => key > 60)
const map2 = new Map(res) //Map { 80 => '良', 90 => '优秀' }
// 一步到位
new Map([...map1].filter(([key, value]) => key > 60)) //Map { 80 => '良', 90 => '优秀' }
// console.log(res1);
let res2 = new Map([...map1].map(([key, value]) => [key * 10, `${value}~~~`]))
console.log(res2); //Map { 600 => '及格~~~', 800 => '良~~~', 900 => '优秀~~~' }
对同一个key进行多次赋值，后面值会覆盖前面的值。说明map对象key唯一
map对象的key是跟内存地址绑定的。引用数据类型需要指向同一个内存地址才是同一个key
map对象key是基本数据类型，只要它们是严格相等=== map将其是作为同一个key
undefined 和 null是两个不同的key
let myMap = new Map();
let keyObj = {};
let keyFunc = function () { };
let keyArr = []
let keyString = 'a string';
let strNum = '0' // 添加键
myMap.set(keyString, "和键'a string'关联的值");
myMap.set(keyObj, "和键keyObj关联的值");
myMap.set(keyArr, "和键keyArr关联的值");
myMap.set(keyFunc, "和键keyFunc关联的值");
myMap.set(strNum, "和键strNum关联的值");
myMap.set(null,'和null key关联的值')
myMap.set(undefined,'和 undefined key关联的值') console.log(myMap.get(keyObj)) //和键keyObj关联的值
console.log(myMap.get(keyArr)) //和键keyArr关联的值
console.log(myMap.get(keyFunc)) // 键keyFunc关联的值
console.log(myMap.get(strNum)) //和键strNum关联的值
console.log(myMap.get(keyString)) // 键'a string'关联的值 console.log(myMap.get({})); //undefined
console.log(myMap.get([])); //undefined
console.log(myMap.get(function () { })); //undefined
console.log(myMap.get(0)) //undefined
console.log(myMap.get('a string')); // 键'a string'关联的值
console.log(myMap.get(null)); //和null key关联的值
console.log(myMap.get(undefined)); //和 undefined key关联的值
3.map对象的基本方法
size属性，返回map的长度
get (key) 返回键对应的值，如果不存在，则返回undefined。
has(key) 返回一个布尔值，表示Map实例是否包含键对应的值。
delete(key )如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。
size属性，返回map的长度
get (key) 返回键对应的值，如果不存在，则返回undefined。
has(key) 返回一个布尔值，表示Map实例是否包含键对应的值。
delete(key )如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false。
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
map1.set(90, '有优秀') console.log(map1.has(60)) //true
console.log(map1.has('60')) //false console.log(map1.delete(80)); //true 删除已有的key 原map会改变，返回值true
console.log(map1.size); //
console.log(map1.delete('80')); //false 删除不存在的key 原map不改变，返回值false
console.log(map1.size); //
map对象的迭代
map.values() 是一个可迭代对象 ,可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
map.keys(); 是一个可迭代对象，可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
map 是一个可迭代对象，可迭代对象可以用for...of遍历，也可以通过展开运算符转为数组
另外map对象还拥有forEach()遍历方法
map.forEach()遍历 如果回调函数只传一个参数 这个参数就是每次便利的map的值。如果传2个参数，依次是value ,key
for item of map 等价于 for item of map.entries() item是[key,value]一维数组组合（可是使用解构数组的技巧将其拆开）
for value of map.values() value是map对象的每一项的值
for key of map.keys() key是map对象的每一项的key
let [a, b, c] = [10, 20, 30]
// console.log(a, b, c); 10 20 30 数组解构的例子
for (const item of map1) {
console.log(item);
}
//解构了item
for (const [key, value] of map1) {
console.log(key, value);
}
for (const value of map1.values()) {
console.log(value); //及格 | 良 |优秀
}
for (const key of map1.keys()) {
console.log(key); //60 80 90
}
map1.forEach(value => console.log(value)) //如果回调函数只传一个参数 这个参数就是每次便利的map的值
map1.forEach((value, key) => {
console.log(value, key);
})
console.log([...map1]); //[ [ 60, '及格' ], [ 80, '良' ], [ 90, '优秀' ] ]
console.log([...map1.values()]); //[ '及格', '良', '优秀' ]
console.log([...map1.keys()]); //[ 60, 80, 90 ]
map对象的合并
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// 两个map对象合并，如果有重复的key,后面的key会覆盖前面的
let res = new Map([...first, ...second]) //Map { 1 => 'uno', 2 => 'dos', 3 => 'three' }
console.log(res);
map对象复制
重要：请记住，
数据本身
未被克隆。
let original = new Map([
[1, 'one']
]);
let clone = new Map(original);
console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较 不为同一个对象的引用
map对象改变形式 实现过滤或者新map
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
// map实现过滤和改变数据形式
// new Map([...map1].filter([key, value]=> key > 60))
let res = [...map1].filter(([key, value]) => key > 60)
const map2 = new Map(res) //Map { 80 => '良', 90 => '优秀' }
// 一步到位
new Map([...map1].filter(([key, value]) => key > 60)) //Map { 80 => '良', 90 => '优秀' }
// console.log(res1);
let res2 = new Map([...map1].map(([key, value]) => [key * 10, `${value}~~~`]))
console.log(res2); //Map { 600 => '及格~~~', 800 => '良~~~', 900 => '优秀~~~' }
另外map对象还拥有forEach()遍历方法
map.forEach()遍历 如果回调函数只传一个参数 这个参数就是每次便利的map的值。如果传2个参数，依次是value ,key
let [a, b, c] = [10, 20, 30]
// console.log(a, b, c); 10 20 30 数组解构的例子 for (const item of map1) {
console.log(item);
}
//解构了item
for (const [key, value] of map1) {
console.log(key, value);
} for (const value of map1.values()) {
console.log(value); //及格 | 良 |优秀
} for (const key of map1.keys()) {
console.log(key); //60 80 90
} map1.forEach(value => console.log(value)) //如果回调函数只传一个参数 这个参数就是每次便利的map的值
map1.forEach((value, key) => {
console.log(value, key);
}) console.log([...map1]); //[ [ 60, '及格' ], [ 80, '良' ], [ 90, '优秀' ] ]
console.log([...map1.values()]); //[ '及格', '良', '优秀' ]
console.log([...map1.keys()]); //[ 60, 80, 90 ]
map对象的合并
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
let second = new Map([
[1, 'uno'],
[2, 'dos']
]);
// 两个map对象合并，如果有重复的key,后面的key会覆盖前面的
let res = new Map([...first, ...second]) //Map { 1 => 'uno', 2 => 'dos', 3 => 'three' }
console.log(res);
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]); let second = new Map([
[1, 'uno'],
[2, 'dos']
]); // 两个map对象合并，如果有重复的key,后面的key会覆盖前面的
let res = new Map([...first, ...second]) //Map { 1 => 'uno', 2 => 'dos', 3 => 'three' }
console.log(res);
map对象复制
重要：请记住， 数据本身 未被克隆。
let original = new Map([
[1, 'one']
]); let clone = new Map(original); console.log(clone.get(1)); // one
console.log(original === clone); // false. 浅比较 不为同一个对象的引用
map对象改变形式 实现过滤或者新map
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀')
// map实现过滤和改变数据形式
// new Map([...map1].filter([key, value]=> key > 60))
let res = [...map1].filter(([key, value]) => key > 60)
const map2 = new Map(res) //Map { 80 => '良', 90 => '优秀' }
// 一步到位
new Map([...map1].filter(([key, value]) => key > 60)) //Map { 80 => '良', 90 => '优秀' }
// console.log(res1);
let res2 = new Map([...map1].map(([key, value]) => [key * 10, `${value}~~~`]))
console.log(res2); //Map { 600 => '及格~~~', 800 => '良~~~', 900 => '优秀~~~' }
// 初始化map的三种方式
const map1 = new Map()
map1.set(60, '及格')
map1.set(80, '良')
map1.set(90, '优秀') // map实现过滤和改变数据形式
// new Map([...map1].filter([key, value]=> key > 60))
let res = [...map1].filter(([key, value]) => key > 60)
const map2 = new Map(res) //Map { 80 => '良', 90 => '优秀' }
// 一步到位
new Map([...map1].filter(([key, value]) => key > 60)) //Map { 80 => '良', 90 => '优秀' }
// console.log(res1); let res2 = new Map([...map1].map(([key, value]) => [key * 10, `${value}~~~`]))
console.log(res2); //Map { 600 => '及格~~~', 800 => '良~~~', 900 => '优秀~~~' }
