Map类型
2020-04-26 本文已影响0人
小雪洁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map类型</title>
</head>
<body>
</body>
<script>
//对象的属性也就是键名,只能是字符串
//但是Map类型的键名可以是字符串、数字、对象、函数等
//Map中的属性也不能重复
let map =new Map();
map.set("name","hxj");
map.set(function(){},"ydc");
map.set({},"hwx");
map.set(1,"hql");
console.log(map);
let map1=new Map([['name','hxj'],['name',"ydc"]]);
console.log(map1);//Map(1) {"name" => "ydc"} 只有一个元素，
let map2=new Map([['name','hxj'],['age',30]]);
console.log(map2);//Map(2) {"name" => "hxj", "age" => 30}
//Map类型链式添加操作
map2.set('address',"衡水")
.set('id',12334);
//Map(4) {"name" => "hxj", "age" => 30, "address" => "衡水", "id" => 12334}
console.log(map2);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map类型的增删清空</title>
</head>
<body>
</body>
<script>
//对象为键名的Map类型对象
let obj={
name:"hxj"
};
let map =new Map();
map.set(obj,'haoxuejie');
//给map添加元素
map.set("age",30);
console.log(map);//Map(2) {{…} => "haoxuejie", "age" => 30}
//获取元素
console.log(map.get("age"));//30
console.log(map.get(obj));//haoxuejie
//查找元素是否存在
console.log(map.has("age"));//true
console.log(map.has("ss"));//false
//删除元素
console.log(map.delete("age"));//true
console.log(map);//Map(1) {{…} => "haoxuejie"}
//清空元素
map.clear();
console.log(map);//Map(0) {}
//查找元素是否存在
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map类型转换</title>
</head>
<body>
</body>
<script>
//a类型办不到的事，转成b类型，然后再转回a
let map=new Map([['name','hxj'],['age',30]]);
//转换键值对
console.log(...map);//转成了两个数组，分别为["name", "hxj"]，["age", 30]
console.log([...map]);//转成了一个含有两个数组的一个数组[['name','hxj'],['age',30]]
//转换键
console.log(...map.keys());//转成了非数组 name age
console.log([...map.keys()]);//转成了数组["name", "age"]
//转换键值
console.log(...map.values());//hxj 30
console.log([...map.values()]);//["hxj", 30]
//筛选map中含有'hxj'的元素
console.log("筛选map中含有'hxj'的元素");
let arr=[...map].filter(item=>{
return item.includes("hxj");
});
console.log(arr);
let newmap =new Map(arr);
console.log(newmap);//Map(1) {"name" => "hxj"}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map类型转换</title>
</head>
<body>
</body>
<script>
//a类型办不到的事，转成b类型，然后再转回a
let map=new Map([['name','hxj'],['age',30]]);
//转换键值对
console.log(...map);//转成了两个数组，分别为["name", "hxj"]，["age", 30]
console.log([...map]);//转成了一个含有两个数组的一个数组[['name','hxj'],['age',30]]
//转换键
console.log(...map.keys());//转成了非数组 name age
console.log([...map.keys()]);//转成了数组["name", "age"]
//转换键值
console.log(...map.values());//hxj 30
console.log([...map.values()]);//["hxj", 30]
//筛选map中含有'hxj'的元素
console.log("筛选map中含有'hxj'的元素");
let arr=[...map].filter(item=>{
return item.includes("hxj");
});
console.log(arr);
let newmap =new Map(arr);
console.log(newmap);//Map(1) {"name" => "hxj"}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Map类型操作dom元素</title>
</head>
<body>
<div name="hxj">haoxuejie</div>
<div name="ydc">yangdingchuan</div>
</body>
<script>
//我们要给div节点加点击事件,点击div时弹出其name的属性值
//核心就是用Map类型的键保存dom对象，值保存所需要的附加信息
let divs=document.querySelectorAll("div");
let map=new Map();
divs.forEach(item=>{
map.set(item,{
content:item.getAttribute('name')
});
});
console.log(map);//Map(2) {div => {…}, div => {…}}
//注意map里面的键是div，是一个dom节点对象，值是content;
map.forEach((config,item)=>{
//forEach()中config是值，item是键即dom节点
item.addEventListener('click',()=>{
alert(config.content);
})
})
//console.log(map);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Map类型控制表单提交</title>
</head>
<body>
<form action="" onsubmit="return post()">
<input type="checkbox" name="agreement" error="请接受协议" />
接受协议
<input type="checkbox" name="student" error="网站只对学生开放" />
我是学生
<input type="submit"/>
</form>
</body>
<script>
//如果不勾选接受协议就提交就弹出error信息
/* function post(){
//let map= new Map();
//找到所有的input，
let agree=document.querySelector("input[name='agreement']");
//let agree=inputs.querySelector("");
//console.log(agree.getAttribute("error"));
//console.log(agree.checked);//false
if(agree.checked==false){
alert(agree.getAttribute("error"));
}
return false
} */
function post(){
let map= new Map();
//找到所有带有错误信息的input，
let inputs=document.querySelectorAll("input[error]");
//给map里面压入数据，
//Map类型一个很大的特点就是键里面可以存放很多内容
inputs.forEach(item=>{
map.set(item,{
error:item.getAttribute("error"),
status:item.checked
});
});
//every(())里面使用解构赋参数
console.log([...map]);
return [...map].every(([elem,config])=>{
//elem是map里的键即dom节点，config是map里的值
//使用短路特性，如果status为真不弹出错误，否则弹出错误信息
config.status||alert(config.error);
//因为every()是全部为真函数值为真，把status返回，status都为真时就能提交了
return config.status;
});
}
</script>
</html>
