数组循环的一种算法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组循环算法</title>
<link rel="stylesheet" href="./bootsrap.3.3.7.css">
<style>
.btn-group {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- <div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" onclick="clickMe('prev');">prev</button>
<button type="button" class="btn btn-default" onclick="clickMe('next');">next</button>
</div> -->
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default" onclick="clickMeTrandition('prev');">prev</button>
<button type="button" class="btn btn-default" onclick="clickMeTrandition('next');">next</button>
</div>
<script>
// 数组循环 两种方法
var arr = [0, 1, 2, 3, 4, 5],
index = 0;
//1. 传统方式
function clickMeTrandition (param) {
if (param === 'next')
index ++;
else if (param === 'prev')
index --;
if (index >= arr.length)
index = 0;
else if (index < 0)
index = arr.length-1;
console.log("arr",arr[index]);
}
//2. 另一种方式: 可以少一个判断
function clickMe(param) {
if (param === "next")
index = (index + 1) % arr.length;
else if (param === "prev")
index = (index - 1 + arr.length) % arr.length;
console.log("arr", arr[index]);
}
</script>
</body>
</html>总结
传统方式较于新的方式会多出一判断，理解上去会简单些。新的方式代码更加简洁。
扫一扫
1689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
