扩展运算符数组运用场景1：知识点有：Array.from()、...

缺乏、安全感 2021-12-13 13:55 152阅读 0赞

<!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>扩展运算符数组运用场景1：知识点有：Array.from()、...</title>
    </head>
    
    <body>
        <ul>
            <li>去跑步</li>
            <li>去购物</li>
            <li>去学习</li>
        </ul>
        <script>
            /*
            注意：你现在需要将ul li里面的东西通过querySelectorAll全部都打印出来，
            接着看工作台：应该会出现NodeList(3)，点开__proto__属性(默认原型链指向)里面应该没有map函数，
            现在你要将控制台里面的__proto__属性里面拥有map函数。
    
            .querySelectorAll()
            返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。
            返回的对象是 NodeList 。
            */
            const todos = document.querySelectorAll('li');
            console.log(todos);//NodeList(3) [li, li, li]  __proto__属性里面没有map函数
    
            const todos1 = Array.from(document.querySelectorAll('li'));
            console.log(todos1);//(3) [li, li, li]  __proto__属性里面有map函数
    
            const todos2 = [...document.querySelectorAll('li')];
            console.log(todos2);//(3) [li, li, li]  __proto__属性里面有map函数
    
    
            /*
             注意：现在你需要将ul li里面的内容，存入到一个数组中，
            效果是这样：['去跑步','去购物','去学习']
            */
            const todos3 = [...document.querySelectorAll('li')];
            let name=todos3.map(todo=>{
                return todo.textContent
            })
            console.log(name);//(3) ["去跑步", "去购物", "去学习"]
    
    
    
        </script>
    </body>
    
    </html>