JS Project：iterator
程序员文章站
2024-02-20 20:24:52
...
iter遍历的data
const data = [
{
name:'Jone Doe',
age:32,
gender:'male',
lookingfor:'female',
location:'Boston MA',
image:'https://randomuser.me/api/portraits/men/82.jpg'
},
{
name:'Jone Doe2',
age:32,
gender:'male',
lookingfor:'female',
location:'Boston MA',
image:'https://randomuser.me/api/portraits/women/82.jpg'
},
{
name:'Jone Doe3',
age:32,
gender:'male',
lookingfor:'female',
location:'Boston MA',
image:'https://randomuser.me/api/portraits/women/80.jpg'
},
];
iterator函数
每次返回profiles的下一个数据；
//Profile Iterator
function profileIterator(profiles){
let nextIndex = 0;
return {
next: function(){
return nextIndex<profiles.length?
{value:profiles[nextIndex++],done:false}:
{done:true};
}
};
}
将数据显示在html中
currentProfile 得到当前data；
在document中显示data；
若遍历完成——currentProfile返回null，刷新页面
function nextProfile(){
const currentProfile=profiles.next().value;
if(currentProfile!=null){
document.getElementById('profileDisplay').innerHTML=`
<ul class='list-group'>
<li class='list-group-item'>Name : ${currentProfile.name}</li>
<li class='list-group-item'>Age : ${currentProfile.age}</li>
<li class='list-group-item'>Location : ${currentProfile.location}</li>
<li class='list-group-item'>Preference : ${currentProfile.gender} looking for ${currentProfile.lookingfor}</li>
</ul>
`;
document.getElementById('imageDisplay').innerHTML=`
<img src="${currentProfile.image}">
`
}else{
//No more profiles
window.location.reload();
}
}
页面加载时调用next
const profiles = profileIterator(data);
//Call first profile
nextProfile();
设定button调用next
//Next Event
document.getElementById('next').addEventListener('click',nextProfile);
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<title>Profile Scroller</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 mx-auto text-center">
<h1 class="mb-3">Profile Scroller</h1>
<div id="imageDisplay"></div>
<br>
<div id="profileDisplay"></div>
<br>
<button id="next" class="btn btn-dark btn-block">Next</button>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
上一篇： Collection之Iterator
下一篇： 浅析mysql交互式连接&非交互式连接