js 循环案例小结

最新推荐文章于 2024-05-25 17:17:06 发布

星辰志

最新推荐文章于 2024-05-25 17:17:06 发布

阅读量398

点赞数

本文链接：https://blog.csdn.net/jaquechen/article/details/102462972

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div>
        <p><b>for...of语句</b>在可迭代对象(包括Array,Map,Set,String,TypedArray,arguments对象等等)上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句</p>
    </div>
    <div>
        <button onclick="Cyclefun()">
            遍历数组
        </button>
        <button onclick="CycleObj()">
            遍历字符串
        </button>
        <button onclick="CycleMap()">
            迭代Map
        </button>
        <button onclick="CycleEach()">
            forEach()方法循环
        </button>
    </div>
    <div>
        <p><b>Map</b>对象保存键值对。任何值(对象或者原始值)都可以作为一个键或者值</p>
        <ul>
            <li><h3>语法</h3></li>
            <li>new Map([iterable])</li>
        </ul>
        <p>
            <b>iterable</b>
            iterable可以是一个数组或者其他iterable对象，其元素未键值对(两个元素的数组，例如:[[1,'first'],[2,'second']])。每个键值对都会添加到新的Map。null会被当做undefined。
        </p>
        对象类似于数组，且成员的值都是唯一的
    </div>
</body>
<script>
        const array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n'];
        const str = 'china';
        let iterable = new Map([["a",1],["b",2],["c",3]])
        const arr = [];
        function Cyclefun(){
            for(const element of array){

            console.log(element);
                }    
        }
        function CycleObj(){
            for(const element of str){
                console.log(element)
            }
        }
        function CycleMap(){
            for(let element of iterable){
                console.log(element)
            }
        }
        function CycleEach(){
             array.forEach(function (element){
                 console.log(element);
             })
        }
</script>
</html>

循环方式本人总结了四种，当然还有更多，本人最喜欢的是for...in遍历，但是文档中说for...in遍历是按数组下标遍历的，不多建议使用，所以贴了一些其他的遍历方法。

星辰志

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 循环案例小结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫