es6之数组循环和对象的方法

103 阅读1分钟
Document 是否已婚 未婚 已婚 查询
</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>
姓名 年龄 是否已婚