当前位置：网站首页>Basic usage of set, map, DOM classlist in ES6

It's like an array , But the values of the members are unique , There are no duplicate values . It's like an array , But the values of the members are unique , There are no duplicate values .

1.set Define and initialize data

const set = new Set([1,2,3,4,4]);
console.log(set);// Will automatically delete the duplicate  1,2,3,4

2.add add to

const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
console.log(set);//1,2,3,4,5,6

3.delete Deletes the specified element

const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
set.delete(6);
console.log(set);//1,2,3,4,5,

4.has Query the specified element

const set = new Set([1,2,3,4,4]);
set.add(5).add(6);
set.delete(6);
console.log(set.has(6));//false

5.clear Delete all

const set = new Set([1,2,3,4,4]);    
set .clear();
console.log(set);//set(0)

Two 、map data structure

1.set get Basic usage

const Info = {height:190,major:" Computer "};
const map = new Map();
// Set up map Value  key->value
map.set("realname"," Zhang San ");
map.set("age",18);
map.set(Info," Personal details ");
//get obtain map Value   Parameters ：key
console.log(map.get("realname"));

2.delete Deletes the specified element

// Delete map Value   Parameters ：key
map.delete("age");

3.size obtain map The length of has Get the specified element

// obtain map The length of 
console.log(map.size);
console.log("age Whether there is :" + map.has("age"));//falase  Above to delete

4. obtain map All of key

const keys = map.keys();
console.log(keys);

5.clear Delete

map.clear();

3、 ... and 、DOM classList Basic usage

1. Complete code

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.class1{
				background: red;
			}
			.class2{
				color:#fff;
			}
			.class3{
				font-size: 20px;
			}
		</style>
	</head>
	<body>
		<div id="demo"> I am a container </div>
		<button id="btn1"> Control the color </button>
		<button id="btn2"> Control font size </button>
		<button id="btn3"> Determine whether there is a color style </button>
		<button id="btn4"> Judging index 1 The name of the class </button><br/>
		<button id="btn5"> Delete color style </button>
		<button id="btn6"> Control font toggle The way </button>
		
		<script>
			
		let Demo = document.getElementById("demo");
		let btn1 =  document.getElementById("btn1");
		let btn2 =  document.getElementById("btn2");
		let btn3 =  document.getElementById("btn3");
			
		btn1.addEventListener('click',()=>{
				//classlist  Add multiple styles 
                Demo.classList.add("class1","class2");
			});
		btn2.addEventListener('click',()=>{
				Demo.classList.add("class3")
			});
			// classList.contains  Determine whether there is a certain style 
		btn3.addEventListener('click',()=>{
				console.log(Demo.classList.contains("class1")?" There is class1 The style of ":" non-existent class1 The style of ");
			});
			// classList.item  Determine the class name of the specified subscript 
		btn4.addEventListener('click',()=>{
				console.log(Demo.classList.item(1));
			});
			// classList.remove  Delete style 
		btn5.addEventListener('click',()=>{
				Demo.classList.remove("class1","class2");
			});
		btn6.addEventListener('click',()=>{
				Demo.classList.toggle("class3");
				// The second parameter   Whether the style exists or not  true Just force it   false Force removal 
			Demo.classList.toggle("class3",false);	
			});
		</script>
		
	</body>
</html>