master

分支 (3)

管理

管理

master

test

testing

ES6
/
08_扩展运算符小练习.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>08_扩展运算符 spread operator intro</title>
		<style>
			.heading span{
				cursor: pointer;
				display: inline-block;
				transition: transform 0.25s;
			}
			.heading span:hover{
				color: yellow;
				transform: translateY(-20px) rotate(10deg) scale(2);
			}
		</style>
	</head>
	<body>
		<h2 class="heading">LARAVIST!</h2>
		<ul>
			<li>go to store</li>
			<li>watch tv</li>
			<li>go shopping</li>
		</ul>
	     <script type="text/javascript">
			// 将文本拆分成独立的值
			const heading=document.querySelector('.heading');
			// console.log(heading.textContent);
			heading.innerHTML=wrapWithSpan(heading.textContent);
			function wrapWithSpan(heading){
				return [...heading].map(i=>`<span>${i}</span>`).join('');
			}
	     </script>
		 <script type="text/javascript">
			// 将arguments或者NodeList转换为Array
		 	// const todos=Array.from(document.querySelectorAll('li'))
		 	const todos=[...document.querySelectorAll('li')]
			const names=todos.map(name=>name.textContent)
			console.log(names)//["go to store", "watch tv", "go shopping"]

			// 删除某个元素
			// const todo=[
			// 	{id:1,name:'go to store',completed:false},
			// 	{id:2,name:'watch tv',completed:true},
			// 	{id:3,name:'go shopping',completed:false},
			// ]
			// const id=2;
			// const todoIndex=todo.findIndex(todo=>todo.id===id);
			// const newTods=[
			// 	...todo.slice(0,todoIndex),
			// 	...todo.slice(todoIndex+1)
			// ];
			// console.log(newTods)
		    // this.setState({todo:newTods})
		 </script>
	</body>
</html>