• 前端JS循环操作一览


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>前端循环一览</title>
    </head>
    
    <body>
        <script>
            // 1、while循环
            console.log('--------------where循环Array--------------');
            var i = 0;
    
            while (i < 10)
    
            {
                console.log(i)
                i += 1;
    
            }
            // 1、do-while循环,先执行后判断,至少执行一次
            console.log('--------------do-where循环Array--------------');
            var i = 0;
            do {
                console.log(i)
                i += 1;
    
            } while (i < 10)
            // 2、for-of循环 (Array、Map、Set、String、Arguments )
            console.log('--------------for-of循环Array--------------');
            let arr = [1, 2, 3, 4, 5]
            for (let value of arr) {
                console.log(value)
            }
            console.log('--------------for-of循环Map--------------');
            //第一种创建map的方式
            let map = new Map();
            map.set('a', 1).set('b', 2).set('c', 3)
            console.log(map)
            //第二种创建map的方式
            let map1 = new Map([
                ['a', 1],
                ['b', 2],
                ['c', 3]
            ])
            console.log(map1);
            for (let [key, value] of map) {
                console.log(key, value)
            }
            console.log('--------------for-of循环Set--------------');
            let set = new Set([1, 2, 2, 3, 3, 4, 5, 6])
            for (let value of set) {
                console.log(value)
            }
            console.log('--------------for-of循环String--------------');
            let str = '我是循环String的代码';
            for (let value of str) {
                console.log(value);
            }
            console.log('--------------for-of循环Arguments--------------');
    
            function func() {
                for (let value of arguments) {
                    console.log(value)
                }
            }
            func(1, 3, 4);
            console.log('--------------for-of循环object--------------');
            let obj1 = {
                a: 1,
                b: 2,
                c: 3
            }
            //第一种方式,求出它的键
            for (let key of Object.keys(obj1)) {
                console.log(key)
            }
            //第二种方式,求出它的值
            for (let key of Object.values(obj1)) {
                console.log(key)
            }
            //第三种方式,Object.entries返回一个可枚举的键值对
            for (let [key, value] of Object.entries(obj1)) {
                console.log(key, value)
            }
            // 3、for-in循环的使用(key in json)
            console.log('--------------for-in循环object--------------');
            let obj = {
                a: 1,
                b: 2,
                c: 3
            }
            for (let key in obj) {
                console.log(key, obj[key])
            }
            //4、map循环的使用
            console.log('--------------map循环Array--------------');
            let arr1 = ['a', 'b', 'c'];
            let arr3 = [{
                'a': 'a'
            }, {
                'a': 'b'
            }, {
                'a': 'c'
            }];
            let newArr1 = arr1.map((value, index) => {
                console.log(value, index)
                if (index == 0) {
                    value = 'change'
                }
                return value
            }).filter(value => {
                // console.log(item,1234)
                return value == 'change'
            })
            arr3.map((value, index) => {
                if (index == 0) {
                    value.a = 'change'
                }
            })
            console.log(arr1, arr3, newArr1)
            //4、forEach循环的使用
            console.log('--------------forEach循环Array--------------');
            let arr2 = ['a', 'b', 'c'];
            let arr4 = [{
                'a': 'a'
            }, {
                'a': 'b'
            }, {
                'a': 'c'
            }];
            let newArr2 = arr2.forEach((value, index) => {
                console.log(value, index)
                if (index == 0) {
                    value = 'change'
                }
                return value
            })
            arr4.forEach((value, index) => {
                if (index == 0) {
                    value.a = 'change'
                }
            })
            console.log(arr2, arr4, newArr2)
            console.log('--------------forEach与map的区别--------------');
            console.log(
                '可以从上面的代码中看见map循环可以接受返回的一个新数组并进行链式操作,forEach不能返回一个新数组;改变值的方面,forEach跟map都不能改变一个不是由对象构成的数组,因为改变对象改变的是引用地址,不是对象的值'
            );
            //5、every循环的使用,判断返回的数组每一项是否全部满足条件
            console.log('--------------every循环Array--------------');
            let arr5 = [2, 3, 4, 5]
            let bool1 = arr5.every(item => item > 2)
            console.log(bool1)
            //6、some循环的使用,判断返回的数组是否满足1个或1个以上条件
            console.log('--------------some循环Array--------------');
            let arr6 = [2, 3, 4, 5]
            let bool2 = arr6.some(item => item > 2)
            console.log(bool2)
            //7、filter循环的使用,将满足条件的值筛选出来
            console.log('--------------filter循环Array--------------');
            let arr7 = [2, 3, 4, 5];
            let arr8 = arr7.filter(item => item > 2)
            console.log(arr8)
        </script>
    </body>
    
    </html>
    

      

  • 相关阅读:
    酒店预定系统
    毕业论文管理系统 ——总体设计
    毕业论文管理系统
    毕业管理系统——面向对象方法 项目前期
    项目前期
    5/23用户故事和backlog
    5/18
    4.8
    4.3
    第四章 需求分析
  • 原文地址:https://www.cnblogs.com/uimeigui/p/14109890.html
Copyright © 2020-2023  润新知