js箭头函数的应用场景和rest,sprend参数的使用方法 - html

首页 > 博客列表 > js箭头函数的应用场景和rest,sprend参数的使用方法

博主信息

博文 37

粉丝 2

访问量 34601

专题推荐

更多>

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

js箭头函数的应用场景和rest,sprend参数的使用方法

世纪天城

原创

1103人浏览过

箭头函数的应用场景

箭头函数是用来简化匿名函数的语法糖

<!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>箭头函数的应用场景</title>
</head>
<body>
    <script>
        // 箭头函数是用来简化匿名函数的语法糖
        // 原始函数
        function demo() {
            return ['A111', '手机', 'MI 11 pro', 3999];
        }
        res = demo();
        console.log(res);
        // 箭头函数简写
        let demo1 = ()=>['A111', '电脑', 'MI 11 pro', 3999];
        res1 =demo1();
        console.log(res1);
        // 重点：
        // 没有参数,小括号必须要有
        // 如果函数体只有一条语句,可以不写return和"{}"
        // 只有一个参数, 参数的小圆括号也可以不写
        let id = 'B888';
        let name = '电脑';
        let model = 'MacBook Pro';
        let demo2 = name => ['C888', name, '相机123'];
        let demo3 = (id, name, model) => ({ id: id, name: name, model: model });
        res2= demo2(name);
        res3 =demo3(id,name,model);
        console.log(res2);
        // 遍历
        res2.forEach(item => console.log(item));
        console.log('--------------');
        for (let key in res3) console.log(res3[key]);
        // 总结：
        // 1. 当参数只有一个时,圆括号可以省略,如果没有参数,反而不能省
        // 2. 当有多个参数时, 圆括号必须要写
        // 3. 当有多条语句时,函数体的大括号不能省
        // 4. 如果函数体只有一条语句时,可以省略大括号
    </script>
</body>
</html>

实例演示rest,sprend参数的使用方法
1.在函数的参数中就是…rest 归并
2.在函数的调用的参数列表中就是…spread 展开

<!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>实例演示rest,sprend参数的使用方法</title>
</head>
<body>
    <script>
        //  ...rest剩余参数
        function demo4(...arr) {
            // console.log(arguments);
            let res = 0;
            for (let v of arr) {
                res = res + v;
                console.log(res);
            } 
        };
        let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
        // ...spread
        demo4(...arr1)
        // 等价于
        demo4(1, 2, 3, 4, 5, 6, 7, 8)    
        // 总结：
        // 1.在函数的参数中就是...rest 归并
        // 2.在函数的调用的参数列表中就是...spread 展开
    </script>
</body>
</html>

classList对象
classList 专门用来操作类class

<!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>classList对象</title>
    <style>
        .p{
            color: coral;
        }
        .pp{
            color: cornflowerblue;
        }
        .bg{ background-color: darkkhaki;}
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <p class="red">classList对象</p>
    <script>
    const p = document.querySelector('p');
    console.log(p);
    // p.style.color ='cornflowerblue';
    // className用来给类添加样式的
    // p.className = 'p';
    p.className = 'pp bg';
    // classList 专门用来操作类class
    // p.classList.add('pp');
    // // add()方法同时添加两个类
    p.classList.add('p', 'bg');
    // // remove()用于删除类
    // p.classList.remove('pp');
    // replace用于替换
    p.classList.replace('p','pp');
    // toggle():动态切换样式,如果已有则删除,如果没有则添加
    p.classList.toggle('red');
    </script>
</body>
</html>

dataset对象
dataset对象专用于访问自定义的标签属性

<!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>dataset对象</title>
</head>
<body>
    <div class="user" data-email='tp@php.cn' data-my-gender="男">个人简介</div>
    <script>
        const user = document.querySelector('.user');
        user.id = 'A005';
        console.log(user.id);
        // dataset对象专用于访问自定义的标签属性
        console.log(user.dataset.email);
        // 这里想拿到data-my-gender的值只需要将第二个单词的首字母大写
        console.log(user.dataset.myGender);
    </script>
</body>
</html>

获取dom元素
获取单个元素是用document.querySelector('这里可是元素也可以用css选择器来获取元素')

<!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>获取dom元素</title>
    <style>
        div{
            width: 2em;
            height: 2em;
            background-color: coral;
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
    <div class="div">1</div>
    <div class="div">2</div>
    <div class="div">3</div>
    <div class="div">4</div>
    <div class="div" id="div">5</div>
    <script>
        // tag, id, class,name...
        // 用css选择器来获取元素
        // 1. 返回匹配的元素集合中的第一个元素,(返回一个) 
        // tag标签
        const div = document.querySelector('div').style.background ='#845538';
        // console.log(div); 
        // class
        const classname = document.querySelector('.div').style.background = '#000';
        // console.log(classname);
        // id
        const id = document.querySelector('#div')
        // console.log(id);
        // 2. 返回匹配的元素集合所有成员
        const req = document.querySelectorAll('.div');
        console.log(req);
        // req.style.background = '#705628';
        // 将类数组通过 ...sprend语法转为真正的数组
        let a = [...req];
        // console.log(list);
        a.forEach(div=>{
            console.log(div);
            div.style.background= '#45b97c';
        });
        //也可以用下面的方法指定某一个元素
        req[0].style.background ='#845538';
    </script>
</body>
</html>

图例：

批改老师：

天蓬老师

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

js的数组详解及6个常用函数

2019-12-19 22:16:07