MENU

React学习笔记【11】

第十三节

map和foreach

<!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 type="text/javascript">
        let arr = [1, 2, 3, 4, 5, 6]
        //forEach:对数组直接进行循环,相当于直接for循环
        //没有返回值
        arr.forEach((item, index, arr) => {
            console.log(item);//内容
            console.log(index);//索引
            console.log(arr);//数组
        })

        let arr2 = ['alice', 'bob', 'cherry']
        //map,对数组每一项进行加工,加工完成后返回一个新的数组
        let result2 = arr2.map((item, index, arr) => {
            let str = index + "-" + item
            return str
        })
        console.log(result2);

        let arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        //filter:过滤,想要的内容筛选,不要的内容去除,最终返回想要的内容的数组
        //留下偶数
        let result3 = arr3.filter((item, index) => {
            //通过返回true还是false进行选择
            //true为留下,false为去除
            return item % 2 == 0;
        })
        console.log(result3);

        let arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        let result4 = arr4.reduce((pre, cur, index) => {
            //reduct是对整个数组进行整合
            //比如做一个将数组里所有的数字进行相加
            //最终返回一个内容
            console.log(pre);
            console.log(cur);
            console.log(index);
            return pre + cur;
        }, 0)
        console.log(result4);

        //for...in... 主要用于遍历对象,不适用于遍历数组
        //for...of... ES6特性,可以用来遍历数组,类数组的对象,字符串,set/map,generator

        let obj = {
            name: "react",
            type: "front",
            content: "test"
        }
        //无序的,不适合遍历数组
        for (key in obj) {
            console.log(key + "=" + obj[key]);
        }

        let arr5 = [1, 3, 5, 7, 9]
        //for...of... 循环每一项
        for (let item of arr5){
            console.log(item);
        }
    </script>
</body>

</html>

文章标题:React学习笔记【11】
如果文中内容侵犯了您的权益,请及时与博主取得联系进行删除!
本站文章未经许可禁止转载,本文地址:https://blog.wanvale.com/archives/246/

Archives QR Code Tip
QR Code for this page
Tipping QR Code