jquery之数组遍历的方法

143 阅读1分钟
<!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>
    <script src="./js/jquery-1.12.4.js"></script>
    <button onclick="query()">查询</button>

    <script>
        let arr = [{
            name: "张三",
            age: 18,
            marry: 0,
            arr01: {
                car: '宝马',
                color: '白色'
            }
        }, {
            name: "李四",
            age: 30,
            marry: 1,
            arr01: {
                car: '奔驰',
                color: '红色'
            }
        }, {
            name: "王五",
            age: 28,
            marry: 0,
            arr01: {
                car: '奥迪',
                color: '粉色'
            }
        }, {
            name: "Lily",
            age: 35,
            marry: 1,
            arr01: {
                car: '布加迪威龙',
                color: '蓝色'
            }
        }];

        //传统循环数组
        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) => {
            return r.arr01;
        })
        console.log(newArr);

        //es6数组方法之过滤, 返回一个过滤后的新数组
        //返回一个已婚人数的新数组
        let newArr = arr.filter(r => r.marry == 1)
        console.log(newArr);

        //es6数组方法之some,返回一个布尔值
        //重点:只要有一个符合条件,就返回true
        let flag = arr.some(r => r.marry == 0)
        console.log(flag);

        //es6方法之every,返回一个布尔值
        //只要有一个不满足条件,就返回false
        let flag = arr.every(r => r.marry == 0);
        console.log(flag);
    </script>
</body>

</html>