es6——内置对象扩展 数组扩展(Array.form和Array.of) 对象的扩展

版权声明:转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82708415

1.内置对象扩展

显示一行 不方便观看

     {
            let html='<body>' +
                '<p>good luck</p>' +
                '</body>';

            console.log(html);//<body><p>good luck</p></body>
        }

模板字符串 (好处:1.方便观看 2.内容方便改写)

     {
            let str='hello world';
            let className='text';

            let html=`<body>
                        <p>good luck</p>
                        <p class="${className}">${str}</p>
                        <p class="cc">${str}</p>
                      </body>`;//可以外置修改class;

            console.log(html);
            /*
            <body>
                <p>good luck</p>
                <p class="text">hello world</p>
                <p class="cc">hello world</p>
            </body>
            */
        }

2.数组扩展

Array.from(伪数组转换真数组)

       {
            let allLis=document.querySelectorAll('li');

            console.log(allLis);//NodeList(6) [li, li, li, li, li, li]
            console.log(Array.isArray(allLis));//false 伪数组

            let newLis=Array.from(allLis);
            console.log(newLis);//(6) [li, li, li, li, li, li]
            console.log(Array.isArray(newLis));//true 数组

        }

Array.of

     {
            console.log(Array.of(1, 2, 3, 4));//(4) [1, 2, 3, 4]
            console.log(Array.of('bob', 'lucy', 'tom'));//(3) ["bob", "lucy", "tom"]
        }

3.对象的扩展

key 和 value是一样的,写一个就够了

      {
            let name='bob';
            let age=20;
            let obj={
                name,
                age
            };
            console.log(obj);//{name: "bob", age: 20}
        }

Object.assign() (合并对象)

     {
            let obj1={'name':'lucy'};
            let obj2={'age':20};
            let obj3={'sex':'man'};
            let obj4={'friends':'bob'};
            let obj={};
            Object.assign(obj,obj1,obj2,obj3,obj4);
            console.log(obj);//{name: "lucy", age: 20, sex: "man", friends: "bob"}
        }

延展操作符(拆解作用)

        {
            //拆解字符串
            let str='hello world';
            let strAll=[...str];
            console.log(strAll);//(11) ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
        }
        {
            let student={
                name:'lucy',
                age:20,
                sex:'women'
            };
            //1.高效传递数据
            console.log({...student});//{name: "lucy", age: 20, sex: "women"}
            //2.去除重复元素
            let myArr=[1,2,3,2,3,'234',56,2];
            console.log(new Set(myArr));//伪数组:Set(5) {1, 2, 3, "234", 56}
                //伪数组转真数组
            console.log([...new Set(myArr)]);//数组:(5) [1, 2, 3, "234", 56]
        }

猜你喜欢

转载自blog.csdn.net/lucky541788/article/details/82708415