<!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>
</head>
<body>
<select name="" id="">
<option value="">是否已婚</option>
<option value="0">未婚</option>
<option value="1">已婚</option>
</select>
<button onclick="query()">查询</button>
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>是否已婚</th>
</tr>
</table>
<script src="./js/jquery-1.12.4.js"></script>
<script>
/* yh:0未婚 1已婚 */
let arr = [{
name:"张三",
age:18,
yh:0,
arr01:{
car:'宝马',
color:'白色'
}
},{
name:"李四",
age:30,
yh:1,
arr01:{
car:'奔驰',
color:'红色'
}
},{
name:"王五",
age:28,
yh:0,
arr01:{
car:'保时捷',
color:'黄色'
}
},{
name:"李丽",
age:35,
yh:1,
arr01:{
car:'法拉利',
color:'绿色'
}
}];
/* 第一次进入页面 渲染table */
arr.forEach(r=>{
$('table').append(`
<tr>
<td>${r.name}</td>
<td>${r.age}</td>
<td>${r.yh}</td>
</tr>
`)
})
/* 点击查询的时候选择对应的数据 */
function query(){
let val = $('select').val();
$('table').html(`
<tr>
<th>姓名</th>
<th>年龄</th>
<th>是否已婚</th>
</tr>`);
let newArr = arr.filter(r=>r.yh==val);
console.log(newArr);
newArr.forEach(r=>{
$('table').append(`
<tr>
<td>${r.name}</td>
<td>${r.age}</td>
<td>${r.yh}</td>
</tr>
`)
})
}
/* 传统方式 */
/* for(let i=0;i<arr.length;i++){
console.log(arr[i].name)
} */
/* for in 常用于遍历对象 数组也可以 key就是数组的索引*/
/* for(let key in arr){
console.log(arr[key].name)
} */
/* es6的另一个循环的方式 */
/* val直接就是数组的每一个值 */
/* for(let val of arr){
console.log(val.name);
} */
/* es6的forEach 不能return */
/* r表示数组的每个值 i代表索引 */
/* arr.forEach( (r,i)=>{
console.log(r,i);
}) */
/* es6的map方法 可以帮我们返回一个新数组 */
/* let newArr = arr.map( (r,i)=>r.arr01); */
/* 判断内容结果的布尔值数组 r.yh==1*/
/* 返回一个姓名的新数组 =>r.name */
/* console.log(newArr); */
/* 新建一个json数组 循环 返回json数组的 全是姓名的新数组 */
/* es6的数组方法之过滤 返回一个过滤后的新数组*/
/* 返回一个已婚人数的新数组 */
/* let newArr = arr.filter( r => r.yh==1 );
console.log(newArr); */
/* es6数组方法之some （一些的意思） 返回一个布尔值*/
/* 重点 只有有一个符合条件 就返回true */
/* let flag = arr.some(r=>r.yh==0);
console.log(flag); */
/* es6数组方法之every （每一个的意思） 返回一个布尔值 */
/* 重点 只有有一个不满足条件 就返回false */
/* let flag = arr.every( r => r.yh==0 );
console.log(flag); */
/* es6中对象的方法 */
/* Object.keys() 返回一个全是key的新数组*/
let obj = {
car:"保时捷",
color:"红色",
price:"200w",
zhuren:"韩老师"
}
/* let keysArr = Object.keys(obj); */
/* console.log(keysArr); */
/* Object.values() 返回全是对象的value的新数组*/
/* let valArr = Object.values(obj);
console.log(valArr); */
/* 后台给我们数据（是一个对象） 有可能有 有可能没有
我们怎么去判断呢？*/
/* let l = Object.keys(obj).length;
console.log(l);
if(l){
console.log(obj.zhuren)
}else{
console.log('后台数据有误')
} */
/* 创建一个对象 答应出他的所有的key 和他所有的value
并判断对象的长度是否为0 为0则打印出 数据为空 */
</script>
</body>
</html>
