箭头函数及classList对象与dataset对象 - js

首页 > 博客列表 > 箭头函数及classList对象与dataset对象

博主信息

博文 37

粉丝 0

访问量 44347

专题推荐

更多>

箭头函数

函数是代码复用的手段
1.声明

function sum(){
  console.log('函数名:',sum.name);
}

2.调用
sum();

rest和是spread使用

<script>
function demo(a,b,c,d){
    console.log(arguments);
}
    demo(1,2,3,4);
function demo2(...rest){
    console.log(rest);
    //求和
    rest.reduce(function(prev,curr){
        return prev + curr;
    });
}
demo2(1,2,3,4,5);
...rest用来接收不确定的参数个数
let spread=[1,2,3,4,5,6,7,8];
//无法求和，因为 ...rest会将spread当成一个参数，所以应该将 spread 展开依次放入
demo2(spread);
//如此便可将arr1放入demo2函数中
demo2(...spread);
</script>

总结：

当不确定参数个数，…rest表示所有参数的对象
在函数的参数中就是 …rest归并
在函数调用的参数列表中 …spread展开
匿名函数
顾名思义就是没有名字的函数

let demo3=function(){
return [1,2,3];
}
res=demo3();
res.forEach(function(item){
   console.log(item);
});

箭头函数

箭头函数是用来简化匿名函数的语法糖
语法：
let demo=()=>{}

let demo4=(id,name,model)=>{
console.log(id,name,model);
}

如果没有参数，小括号必须有
let demo5=()=>[‘1’,’2’,’3’];
如果函数体只有一条语句，可以不写return 和 {}
只要有一个参数，参数的小括号可以不写
let demo5=name=>[‘23’,name,’你好’];
调用：res=demo5(name);
有多个参数则小括号必须存在
5.如果返回一个对象，因为函数的{}会和对象的{}混淆，需要用()包裹起来

let demo=(id,name,model)=({
id:id,name:name,model:model
});
res=demo(id,name,model);

注意：

当参数中有一个时，圆括号可以省略，如果没有参数，反而不能省
当有多个参数时，圆括号必须要写
当有多条语句时，函数体的大括号不能省
如果函数体只有一条语句时，可以省略大括号
获取dom元素的方式
document.querySelector()获取元素

  <ul id="list">
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
        <li class="item">item6</li>
    </ul>
    <script>
        // 用css选择器来获取元素
        // 返回匹配的元素集合中的第一个元素
       const li= document.querySelector('.item');
       //返回匹配的元素集合所有成员 nodelist类数组  类型像数组但又不是
       const lis=document.querySelectorAll('.item');
        //类数组转为数组 使用 ...sprend语法转为真正的数组
        let list=[...lis];
        list.forEach(item=>console.log(item));
</script>

classList对象与dataset对象

classList用来操作class的，包括class类名的增删改

<style>
.red{
    color:red;
}
.bg{
    backgroudn-color:greenyellow;
}
.bule{
    color:blue;
}
</style>
<body>
    <p>
        你好
    </p>
    <script>
     const p=document.querySelector('p');
    //给p标签增加class类名 red bg
    p.classList.add('red','bg');
    //将p标签的类名bg去掉
    p.classList.removed('bg');
    //将p标签的class类名red改为blue
    p.classList.replace('red','blue');
    //toggle的属性像开关一样，p标签没有red则添加 有则去除
    p.classList.toggle('red');
    </script>
</body>

dataset属性用来给标签添加自定义属性

<body>
    <div class="user">
        自定义属性
    </div>
    <script>
    const user=document.querySelector('.user');
    user.id='a001';
    //可以访问但在div上不显示该属性，因为不是预定义属性
    user.email='@qq.com';
    //如若需要div显示自定义属性需要用到dataset。在标签表现形式为data-email
    user.dataset.email="@163.com";
    //<div class='user' data-email='@163.com'></div>
    //如果自定义属性名称较长如下,获取该属性的值，属性名称采用小驼峰形式
    //<div class='user' data-email='@163.com' data-my-gender="男" ></div>
    //获取自定义的值
    console.log(user.dataset.myGender);
    </script>
</body>

批改老师：

天蓬老师

批改状态：合格

老师批语：

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

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

0条评论

作者最新博文

html的基本标签介绍

2020-12-09 11:43:07

箭头函数

rest和是spread使用

匿名函数

箭头函数

获取dom元素的方式

classList对象与dataset对象