前端js遍历总结。。。

前端遍历

我的博客都是关于我的学习过程。这篇博客是我的前端遍历的代码。

<!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>遍历</title>
</head>

<body>
    <!-- switch -->
    <button onclick="switchFun()">switch</button>
    <p id="demo1"></p>

    <!-- for -->
    <button onclick="forFun()">for</button>
    <p id="demo2"></p>

    <!-- for ... in -->
    <button onclick="forInFun()">for ... in</button>
    <p id="demo3"></p>

    <!-- while -->
    <button onclick="whileFun()">while</button>
    <p id="demo4"></p>

    <!-- forEach -->
    <button onclick="forEachFun()">forEach</button>
    <p id="demo5"></p>

    <!-- map -->
    <button onclick="mapFun()">map</button>
    <p id="demo6"></p>
    
    <!-- $.each -->
    <button onclick="jQeach()">jQ-each</button>
    <p id="demo7"></p>

</body>
<script>
    // switch
    function switchFun() {
     
        let d = new Date().getDay();
        switch (d) {
     
            case 0:
                x = "今天是星期日";
                break;
            case 1:
                x = "今天是星期一";
                break;
            case 2:
                x = "今天是星期二";
                break;
            case 3:
                x = "今天是星期三";
                break;
            case 4:
                x = "今天是星期四";
                break;
            case 5:
                x = "今天是星期五";
                break;
            case 6:
                x = "今天是星期六";
                break;
            default:
                x = "日期错乱!";
        }
        let demo1 = document.getElementById('demo1');
        demo1.innerHTML = x;
    }

    // for
    function forFun() {
     
        cars = ['1', 2, '3', 4];
        let forSum = '';
        for (let i = 0; i < cars.length; i++) {
     
            forSum += cars[i];
        }
        document.getElementById('demo2').innerHTML = forSum;
    }

    // for ... in
    function forInFun() {
     
        let x;
        let txt = '';
        let person = {
     
            fname: 'bill',
            lname: 'gates',
            age: 56
        }
        for (x in person) {
     
            txt += person[x];
        }
        document.getElementById('demo3').innerHTML = txt;
    }

    // while
    function whileFun() {
     
        let a = [0, 1, 2, 3, 4];
        let sum = 0;
        let i = 0;
        while (i < 5) {
     
            sum += a[i];
            i++;
        }
        document.getElementById('demo4').innerHTML = sum;
    }

    // forEach:  IE8以上支持,只能遍历数组,不能遍历伪数组
    function forEachFun() {
     
        let a = ['张三', '李四', '王二', '麻子'];
        let sum = '';
        a.forEach(function (value, index, arr) {
     
            sum += value + "," + index + "," + arr + "
"
; }) document.getElementById('demo5').innerHTML = sum; } // map function mapFun(){ let arr = [1,3,5,7,9,11]; let result = arr.map(function(value,index){ return value*2; }) document.getElementById('demo6').innerHTML = result; console.log(result); //result变成了数组 } </script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> // $.each 可以遍历伪数组 function jQeach() { let sum = ''; let arr = [1, 2, 3, 4, 5, 6]; let obj = { a: 1, b: 2, c: 3 }; $.each(arr, function (index, value) { sum += index + " " + value + "
"
; }); $.each(obj, function (index, value) { sum += index + " " + value + "
"
; }); document.getElementById('demo7').innerHTML = sum; } </script> </html>

运行结果:
前端js遍历总结。。。_第1张图片

你可能感兴趣的:(前端基础,javascript,jquery)