map与weakmap_Map与WeakMap类型在JavaScript中的使用详解

map类型特点与创建方法：

Document

// 对象的键名会自动转为字符串

// let obj = {

// 1: 'cyy1',

// '1': 'cyy2'

// };

// console.log(obj);

// 对象的键名是对象时，会自动转为字符串

// 读取时也要先转为字符串再读取

// let obj = {

// name: 'cyy'

// };

// let obj2 = {

// obj: 'cyy2',

// [obj]: 'cyy3'

// };

// console.log(obj2);

// console.log(obj2[obj.toString()]);

// map类型，什么都可以作为键，键名可以是任何类型

// let map = new Map();

// map.set('name', 'cyy');

// map.set(function() {}, 'cyy2');

// map.set({}, 'cyy3');

// map.set(1, 'cyy4');

// console.log(map);

// 构造函数创建时加入数据

let map = new Map([

['name', 'cyy'],

['age', 18]

]);

console.log(map);

// 支持链式操作

let str = 'cyy';

let str2 = str.toUpperCase().substr(1, 2);

console.log(str2);

map.set('11', 11).set('22', 22);

console.log(map);

map类型增删改查操作：

Document

let obj = {

name: 'cyy'

};

let map = new Map();

map.set(obj, 'obj');

console.log(map.has(obj));

console.log(map);

console.log(map.get(obj));

console.log(map.delete('abc'));

console.log(map.delete(obj));

map.clear();

console.log(map);

遍历map类型数据：

Document

let map = new Map([

[1, 11],

[2, 22]

]);

// console.log(map.keys());

// console.log(map.values());

// console.log(map.entries());

// for (let k of map.keys()) {

// console.log(k);

// }

// for (let v of map.values()) {

// console.log(v);

// }

// for (let e of map.entries()) {

// console.log(e);

// }

// for (let [k, v] of map.entries()) {

// console.log(`${k}--${v}`);

// }

map.forEach((item, key) => {

console.log(item + '--' + key);

})

map类型转换操作：

Document

let map = new Map([

['name', 'cyy'],

['age', '18']

]);

// console.log(...map);

// console.log([...map]);

// console.log([...map.entries()]);

// console.log([...map.keys()]);

// console.log([...map.values()]);

// let arr = [...map].filter(item => item[1].includes('cyy'));

let arr = [...map].filter(item => {

return item[1].includes('cyy');

});

// console.log(arr);

let new_map = new Map(arr);

console.log(new_map);

console.log(new_map.values());

// ...是展开语法

console.log(...new_map.values());

map类型管理DOM节点：

Document

cyy1

cyy2

let map = new Map();

let divs = document.querySelectorAll('div');

divs.forEach(item => {

// 往map中压入数据

map.set(item, {

content: item.getAttribute('name')

});

});

// console.log(map);

map.forEach((config, elem) => {

// console.log(config, elem);

elem.addEventListener('click', function() {

console.log(config.content);

});

})

使用map类型控制网站表单提交：

Document

接受协议：

我是学生：

function post() {

let map = new Map();

let inputs = document.querySelectorAll('[error]');

console.log(inputs);

inputs.forEach(item => {

map.set(item, {

error: item.getAttribute('error'),

status: item.checked

});

});

// console.log(map);

return [...map].every(([elem, config]) => {

// 短路操作，前面为真，则不会执行后面

// 前面会假，则执行后面

config.status || alert(config.error);

return config.status;

// console.log(config);

});

}

WeakMap的语法使用：

Document

cyy

cyy2

// WeakMap的键只能是引用对象

// let map = new WeakMap();

// map.set('name');

// console.log(map);

// map.set([]);

// console.log(map);

// let map = new WeakMap();

// let divs = document.querySelectorAll('div');

// divs.forEach(item => map.set(item, item.innerHTML));

// console.log(map);

// WeakMap也是弱引用类型

// let arr = [];

// let map = new WeakMap();

// map.set(arr, 'cyy');

// map.delete(arr);

// console.log(map.has(arr));

// console.log(map);

// 弱引用类型，values、keys、entries、迭代循环都用不了

let map = new WeakMap();

// console.log(map.keys());

for (const iterator of map) {

console.log(iterator);

}

WeakMap弱引用类型体验：

Document

let a = { name: 'cyy' };

let b = a;

let map = new WeakMap();

map.set(a, 'cuu2');

console.log(map);

a = null;

b = null;

console.log(map);

setTimeout(function () {

console.log(map);

}, 1000);

使用WeakMap开发选课组件：

Document

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

main {

width: 100%;

display: flex;

flex: 1;

}

section {

border: 2px solid #ddd;

width: 50%;

padding: 10px;

}

ul {

list-style: none;

}

li {

padding: 10px;

border: 2px solid orange;

margin-bottom: 5px;

position: relative;

}

a {

display: inline-block;

position: absolute;

right: 10px;

width: 20px;

height: 20px;

background: green;

color: white;

text-decoration: none;

line-height: 20px;

text-align: center;

}

#list span {

background: green;

border-radius: 5px;

padding: 5px;

color: white;

margin: 5px;

}

#list {

margin-top: 20px;

}

• html＋
• css＋
• js＋

共选了2门课

class Lesson {

// 构造函数

constructor() {

this.lis = document.querySelectorAll('li');

this.countElem = document.getElementById('count');

this.listElem = document.getElementById('list');

// console.log(this.lis, this.countElem, this.listElem);

this.map = new WeakMap();

}

run() {

this.lis.forEach(li => {

li.querySelector('a').addEventListener('click', event => {

let a = event.target;

// console.log(li);

// console.log(event.target.parentElement);

const state = li.getAttribute('select');

if (state) {

// 移除

li.removeAttribute('select');

this.map.delete(li);

a.style.backgroundColor = 'green';

a.innerHTML = '＋';

} else {

// 添加

li.setAttribute('select', true);

this.map.set(li);

a.style.backgroundColor = 'red';

a.innerHTML = '-';

}

// console.log(this.map);

this.render();

});

})

}

render() {

this.countElem.innerHTML = `共选了${this.count()}门课`;

// console.log(this.count());

this.listElem.innerHTML = this.list();

}

count() {

return [...this.lis].reduce((count, li) => {

return count += this.map.has(li) ? 1 : 0;

}, 0);

}

list() {

let lis = [...this.lis].filter(li => {

return this.map.has(li);

}).map(li => {

return `${li.querySelector('span').innerHTML}`;

}).join('');

// console.log(lis);

return lis;

}

}

new Lesson().run();

到此这篇关于Map与WeakMap类型在JavaScript中的使用的文章就介绍到这了,更多相关Map与WeakMap类型在JavaScript中的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！