filter,map,fincludes方法_.filter((item,index,temp)-CSDN博客

本文链接：https://blog.csdn.net/NAMEIKE/article/details/121293628

本文介绍了JavaScript中的数组操作，包括filter、includes和map方法的使用。通过示例展示了如何筛选数组元素、检查数组是否包含指定项以及如何映射数组以获取新的属性值。同时还提供了几个英雄角色的数据示例，进一步解释了map方法的应用。

摘要由CSDN通过智能技术生成

<!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>
    <!-- 
        filter
        var 新数组=数组.filter((item,index)=>{
        return boolean
        true:保留该项（在新数组中保留该项）
        false不保留该项（在新数组中不保留该项）
        })
     -->
    <script>
        let _temp = []
        let arr = [1, 2, 3, 4, 5, 6]
        for (var i = 0; i < arr.length; i++) {
            if (arr[i] > 3) {
                _temp.push(arr[i])
            }
        }

        console.log(_temp);
        let temp2 = arr.filter((item, index) => {
            return item > 3
        })
        console.log(temp2);

        // includes
        // 字符串.includes(某一个字符)   返回 true与false
        // 数组.includes(某一个项)   返回 true与false

        console.log("str".includes(''));
        console.log([].includes(''));


        // map方法
        var arr2 = [
            {
                "id": "Sylas",
                "tags": "melee_tag mage_tag charge_tag charge_tag boy_tag ",
                "title": "塞拉斯",
                "name": "塞拉斯",
                "iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Sylas.png",
                "story": "<h5>英雄故事:</h5>作为一个出生于德玛西亚穷苦家庭的法师，虽然当时塞拉斯还只是一个少年，搜魔人还是将他终身监禁。他使用偷来的魔法杀害了场上所有人，除了饱受惊吓的拉克丝。塞拉斯不是以逃犯的身份离开搜魔人监狱，而是成为了法师反抗的代表。",
                "img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big517000.jpg",
                "roles": ["法师", "刺客"]
            }, {
                "id": "Neeko",
                "tags": "ranged_tag girl_tag mage_tag charge_tag jungle_tag support_tag",
                "title": "妮蔻",
                "name": "妮蔻",
                "iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Neeko.png",
                "story": "<h5>英雄故事:</h5>妮蔻来自一个早已迷失的瓦斯塔亚部落。她可以借用别人的外表来伪装自己，融入人群，甚至通过影响别人的情绪状态，一瞬间就能化敌为友。没人知道妮蔻到底在哪儿——或者到底是谁，但是想要为难她的人会立刻见识到她的本色，感受原始的精神魔法倾泻在自己身上的痛苦。",
                "img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big518000.jpg",
                "roles": ["法师", "辅助"]
            }, {
                "id": "Pyke",
                "tags": "melee_tag boy_tag mage_tag charge_tag jungle_tag support_tag",
                "title": "派克",
                "name": "派克",
                "iconUrl": "https://ossweb-img.qq.com/images/lol/img/champion/Pyke.png",
                "story": "<h5>英雄故事:</h5>在比尔吉沃特的屠宰码头，颇有名气的鱼叉手派克葬身在一条巨大的琢珥鱼腹内……然而，他却回来了。他在家乡的阴街陋巷中徘徊着，用超自然的手段干脆残忍地解决那些鱼肉他人的恶棍——一座因捕猎怪物而自豪的城市如今发觉自己却成了狩猎的目标。",
                "img": "http://ossweb-img.qq.com/images/lol/web201310/skin/big555000.jpg",
                "roles": ["辅助", "刺客"]
            }]
        let _temparr2 = []
        for (var i = 0; i < arr2.length; i++) {
            _temparr2.push(arr2[i].name)
        }
        console.log(_temparr2);

        // map
        //返回值=数组.map((item,index)=>{return 值是什么，map返回值每一项的值就是什么})
        console.log(arr2.map((item, index) => {
            return item.name
        }));








    </script>
</body>

</html>