JS进阶技巧与实战-CSDN博客

本文链接：https://blog.csdn.net/weixin_44791254/article/details/89221275

1.使用sort方法进行数组排序

<script type="text/javascript">
	var arr=[1,2,3,2,1,4,55,2,111,42,2];
	var newArr=arr.sort(function(a,b){
		return a-b;//升序排列，需要降序排列，返回b-a就行了
	});
	newArr.forEach(function(v,i){
		console.log(`下标${i}的值为${v}`);
	})
</script>

2.复习回顾

forEach——数组的方法，伪数组不能使用forEach，因为伪数组实际上是对象。
事件冒泡
- 什么是事件冒泡
- 阻止事件冒泡
简单的运动框架：offsetLeft+步长

3.ES6中的两种新的声明变量方式

var关键字的替换let、const
- 使用let在同一个作用环境中重复声明同名变量，会报错；重新赋值是可以的。
- const和let一样，不能重复声明变量，但是const不能重新赋值。也就是说，用const声明的变量是常量，不能重新进行赋值，永远不会改变。
- let、const使JS有了块级作用域，就是说在{}中声明赋值的变量，在{}外面访问会出错。
- 点击按钮，出现对应下标，三种解决办法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
		<button>按钮4</button>
		<button>按钮5</button>
		<button>按钮6</button>
		<button>按钮7</button>
	</body>
	<script type="text/javascript">
		var btns=document.getElementsByTagName("button");
		//第一种实现办法
		for(var i=0;i<btns.length;i++){
			btns[i].index=i;
			btns[i].function(){
				alert(this.index+1);
			}
		}
		//第二种实现办法
		for(var i=0;i<btns.length;i++){
			(function(i){
				btns[i].function(){
					alert(i+1);
				}
			})(i)
		}
		//第三种实现办法
		for(let i=0;i<btns.length;i++){
			btns[i].function(){
				alert(i+1);
			}
		}		
	</script>
</html>

4.简单的运动框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box {
				height: 150px;
				width: 150px;
				background-color: yellow;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<button id="btn1">点击运动到300</button>
		<button id="btn2">点击运动到600</button>
		<button id="btn3">回到原点</button>
		<div id="box"></div>
	</body>
	<script src="js/move.js"></script>
	<script type="text/javascript">
		const btn1 = $id("btn1");
		const btn2 = $id("btn2");
		const btn3 = $id("btn3");
		const box = $id("box");
		btn1.onclick = function() {
			animate(box, 300);
		}
		btn2.onclick = function() {
			animate(box, 600);
		}
		btn3.onclick = function() {
			animate(box, 0);
		}		
	</script>
</html>
//move.js文件
function $id(id) {
	return document.getElementById(id);
}
function animate(obj, target) {
	clearInterval(obj.timer);
	let buchang = target > obj.offsetLeft ? 5 : -5;
	obj.timer = setInterval(function() {
		obj.style.left = obj.offsetLeft + buchang + "px";
		if(Math.abs(target - obj.offsetLeft) <= Math.abs(buchang)) {
			clearInterval(obj.timer);
			obj.style.left = target + "px";
		}
	}, 30);
}

WebGI学习网站
 邀请码 N8HTN8 来获得三个月的蓝灯专业版！立即下载

5.轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:590px;
				height:470px;
				border:5px solid #333;
				margin:100px auto;
				position: relative;
			}
			#content{
				width:590px;
				height:470px;
				overflow: hidden;
			}
			ul,ol{
				list-style: none;
			}
			ul{
				width:1000%;
				position: relative;
			}
			ul li{
				float:left;
			}
			ol{
				position: absolute;
				bottom:10px;
				right:20px;
			}
			ol li{
				width:50px;
				height:50px;
				background-color:white;
				margin-right: 5px;
				border-radius: 50%;
				float: left;
				text-align: center;
				line-height: 50px;
				font-size: 20px;
				cursor: pointer;
			}
			.bgc{
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="content">
				<ul>
					<li><img src="img/1.jpg" alt="1" /></li>
					<li><img src="img/2.jpg" alt="1" /></li>
					<li><img src="img/3.jpg" alt="1" /></li>
					<li><img src="img/4.jpg" alt="1" /></li>
				</ul>
			</div>
		</div>
	</body>
	<script src="js/common.js"></script>
	<script type="text/javascript">
		var box=$id("box");
		var uu=box.children[0].children[0];
		var img=document.querySelector("img");		
		var cOl=document.createElement("ol");
		box.appendChild(cOl);
		for(var i=0;i<uu.children.length;i++){
			var cLi=document.createElement("li");
			cLi.innerHTML=i+1;
			cOl.appendChild(cLi);
		}
		var lis=cOl.children;
		lis[0].className="bgc";
		for(var i=0;i<lis.length;i++){
			lis[i].index=i;
			lis[i].function(){
				for(var j=0;j<lis.length;j++){
					lis[j].className="";
				}
				this.className="bgc";
				animate(uu,-this.index*img.offsetWidth);
			}			
		}
		var timer=null;
		move();
		timer=setInterval(move,1000);
		function move(){			
			if(uu.offsetLeft==-(lis.length-1)*img.offsetWidth){
				animate(uu,0);
			}
			if(uu.offsetLeft==0){
				animate(uu,-(lis.length-1)*img.offsetWidth);
			}
			var circle=Math.round(Math.abs(-uu.offsetLeft/img.offsetWidth));
			for(var j=0;j<lis.length;j++){
				lis[j].className="";
			}
			lis[circle].className="bgc";						
		}
		box.function(){
			clearInterval(timer);			
		}
		box.function(){
			timer=setInterval(move,1000);
		}
	</script>
</html>
//common.js文件
function $id(id) {
	return document.getElementById(id)
}

//obj:运动对象 , target:运动目标位置
function animate(obj, target) {
	clearInterval(obj.timer)
	var buchang = obj.offsetLeft > target ? -5 : 5;
	obj.timer = setInterval(function() {
		var result = obj.offsetLeft - target;
		obj.style.left = obj.offsetLeft + buchang + "px";
		if(Math.abs(result) < Math.abs(buchang)) {
			clearInterval(obj.timer);
			obj.style.left = target + "px";
		}
	}, 20);
}

了解内容：轮播图插件、jQuery插件

6.取整函数

parseInt
数学意义上的取整
- Math.ceil; 进一法
- Math.floor; 去尾法
- Math.round; 四舍五入法
Math.abs(); 取绝对值
Math.sqrt(); 开根号
Math.pow(x,y); x的y次方
Math.random();

7.json的遍历

json中不合法属性名，用""包裹就不报错了;想要获取属性值时，使用[’’]包裹来获取。
[’’]也可以访问普通属性，但是比较麻烦，使用点更方便。
for(var key in json){console.log(json[key])}; for in语法，遍历json对象的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json={
			width:200,
			height:300,
			color:"red",
			"background-color":"yellow"			
		}		
		for(var key in json){
			console.log(`json.${key}:${json[key]};`);
		}
	</script>
</html>

JavaScript 标准参考教程