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

最新推荐文章于 2024-03-28 06:45:00 发布

&XYZ&

最新推荐文章于 2024-03-28 06:45:00 发布

阅读量203

点赞数

分类专栏： ES6

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/95036196

版权

ES6 专栏收录该内容

40 篇文章 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>

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
扩展运算符数组运用场景1：知识点有：Array.from()、...

<!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...
复制链接

扫一扫