<p>1</p>
    <p>2</p>
    <p>3</p>
    <script>
        const [p1, p2, p3] = document.querySelectorAll('p');
        // const m1 = new Map([
        //     ['color', 'red'],
        //     ['backgroundColor', 'yellow'],
        //     ['fontSize', '40px']
        // ]);
        // const m2 = new Map([
        //     ['color', 'green'],
        //     ['backgroundColor', 'pink'],
        //     ['fontSize', '40px']
        // ]);
        // const m3 = new Map([
        //     ['color', 'blue'],
        //     ['backgroundColor', 'orange'],
        //     ['fontSize', '40px']
        // ]);
        // const m = new Map([
        //     [p1, m1],
        //     [p2, m2],
        //     [p3, m3]
        // ])
        // m.forEach((propObj, elem) => {
        //     propObj.forEach((css,sty)=>{
        //         elem.style[sty]=css;
        //     })
        // });

        // const a=new Map([
        //     ['ane','w']
        // ]);
        // a.forEach((value,key)=>{
        //     console.log(value);
        // })


        //封装函数
        //将属性值作为参数传入
        function func(color, backgroundColor, fontSize) {
            //返回map实例
            return new Map([
                ['color',color],
                ['backgroundColor',backgroundColor],
                ['fontSize',fontSize]
            ])
        };
        const m=new Map([
            //函数调用时，将不同的属性传入到形参中，
            [p1,func('red','yellow','40px')],
            [p2,func('red','blue','40px')],
            [p3,func('red','yellow','40px')]
        ]);
        //遍历 forEach
        m.forEach((propObj, elem) => {
            propObj.forEach((css,sty)=>{
                elem.style[sty]=css;
            })
        });
    </script>