1.ES6的循环：
<script>
let arr = [{
name:'戴森',
price:1000,
},{
name:'美的',
price:2000,
},{
name:'格力',
price:3000,
}]
/* 返回一个对象,name叫做'戴森'的对象 */
/* let obj = {};
arr.forEach(function(item){
if(item.name = '戴森'){
obj = item
}
})
console.log(obj); */
/* es6循环之find 循环数组可以找到第一个符合条件的一项(原数组里面的成员) */
/* 找到第一个之后立即终止循环 */
let arr2 = arr.find(function(item,index){
return item.name
})
/* let arr2 =[]
arr.forEach(function(r,i){
arr2.push(r,name)
})
console.log(arr2); */
/* map 循环可以把数组里面的某一项组合成一个新数组 */
/* let arr2 = arr.map(function(item,index){
return item.name
})
console.log(arr2);
let arr3 = arr.map(function(item1,index){
return item1.price
})
console.log(arr3); */
/* 过滤 price 大于1500 组合成新数组 */
/* let arr2 = []
arr.forEach(function(item,index){
if(item.price>1500){
arr2.push(item)
}
})
console.log(arr2); */
/* es6 循环过滤的方法 return一个条件
会返回一个符合条件的新数组 对原数组不会造成改变 */
/* let arr2 = arr.filter(function(item,index){
return item.price>1500
})
console.log(arr2); */
</script>
2.ES6循环功能实战：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./bootstrap.min.css">
<style>
.dian{
width: 230px;
display: block;
text-overflow:ellipsis;
overflow: hidden;
white-space: nowrap;
}
.table-bordered>tbody>tr>td{
border-bottom: 0;
}
</style>
</head>
<body>
<div style="display: flex;">
<div style="width: 300px;margin:10px;">
<select class="form-control" onchange="handlePrice(this)">
<option value="0">价格升序</option>
<option value="1">价格降序</option>
</select>
</div>
<div style="width: 300px;margin:10px;">
<select class="form-control" onchange="filterPrice(this)">
<option value="0">全部</option>
<option value="1">价格大于500</option>
<option value="2">价格小于500</option>
</select>
</div>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th style="width: 230px;">商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品重量</th>
<th>商品状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">查看商品</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<!-- 给button加上data-dismiss="modal"这个属性可以实现关闭弹框 -->
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<script src="./jquery-1.12.4.js"></script>
<script src="./bootstrap.min.js"></script>
<script>
function filterPrice(that) {
filterData( $(that).val() );
}
/* change事件是option的value值改变了才触发 */
function handlePrice(that) {
init($(that).val());
/* 不走接口 利用全局变量goodsList进行渲染 */
// showTable($(that).val(),goodsList)
}
init(0);
let goodsList = []
function init(flag) {
let params = { pagenum: 1, pagesize: 10 }
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/goods",
headers: {
/* 最新的token token过一段时间会失效 失效需要重新获取 */
Authorization: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE2NDQ4MDQyNjIsImV4cCI6MTY0NDg5MDY2Mn0.JyAB5ngwtiJSx-Rb4_VrQ3WnfkmAKGXrTduLqsOGAlU'
},
data: params,
success: function (res) {
let { data: { goods } } = res;
showTable(flag, goods);
/* 第一次调用的时候把goods存到全局变量之中 */
goodsList = goods;
}
})
}
function showTable(flag, goods) {
if (flag == 0) {
goods.sort(function (item1, item2) {
return item1.goods_price - item2.goods_price
})
}
if (flag == 1) {
goods.sort(function (item1, item2) {
return item2.goods_price - item1.goods_price
})
}
showCase(goods)
}
function filterData(flag2) {
if (flag2 == 0) {
/* 全部 */
showCase(goodsList)
}
if (flag2 == 1) {
let goods1 = goodsList.filter(function (item) {
return item.goods_price > 500
})
showCase(goods1)
}
if (flag2 == 2) {
let goods2 = goodsList.filter(function (item) {
return item.goods_price < 500
})
showCase(goods2)
}
}
function showCase(arr){
let str = '';
arr.forEach(function (r, i) {
str += `
<tr>
<th scope="row">${i + 1}</th>
<td class="dian">${r.goods_name}</td>
<td>${r.goods_price}</td>
<td>${r.goods_number}</td>
<td>${r.goods_weight}</td>
<td>${r.goods_state}</td>
<td>
<button type="button" class="btn btn-info" onclick="look(${r.goods_id})">查看</button>
</td>
</tr>
`
})
$('tbody').html(str)
}
function look(id){
let arr2 = goodsList.find(function(item){
return item.goods_id == id
})
console.log(arr2);
$('#exampleModal').modal('show');
$('.modal-body').html(`
<div class="form-group">
<label>商品名称 </label>
<p>${arr2.goods_name}</p>
</div>
<div class="form-group">
<label>商品ID</label>
<p>${arr2.goods_id}</p>
</div>
<div class="form-group">
<label>价格 </label>
<p>${arr2.goods_price}</p>
</div>
<div class="form-group">
<label>数量 </label>
<p>${arr2.goods_number}</p>
</div>
<div class="form-group">
<label>重量 </label>
<p>${arr2.goods_weight}</p>
</div>
<div class="form-group">
<label>更新时间</label>
<p>${arr2.upd_time}</p>
</div>
`)
}
</script>
</body>
</html>
功能效果：
