Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 箭头函数及classList对象与dataset对象
Blogger Information
Blog 37
fans 0
comment 0
visits 34815
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
箭头函数及classList对象与dataset对象
手机用户1607314868
Original
607 people have browsed it

箭头函数

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

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

2.调用
sum();

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

总结：

  • 当不确定参数个数，…rest表示所有参数的对象
  • 在函数的参数中就是 …rest归并
  • 在函数调用的参数列表中 …spread展开
    匿名函数
    顾名思义就是没有名字的函数
  1. let demo3=function(){
  2. return [1,2,3];
  3. }
  4. res=demo3();
  5. res.forEach(function(item){
  6.    console.log(item);
  7. });
箭头函数

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

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

注意：

  • 当参数中有一个时，圆括号可以省略，如果没有参数，反而不能省
  • 当有多个参数时，圆括号必须要写
  • 当有多条语句时，函数体的大括号不能省
  • 如果函数体只有一条语句时，可以省略大括号

    获取dom元素的方式

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

classList对象与dataset对象

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

  1. <style>
  2. .red{
  3.     color:red;
  4. }
  5. .bg{
  6.     backgroudn-color:greenyellow;
  7. }
  8. .bule{
  9.     color:blue;
  10. }
  11. </style>
  12. <body>
  13.     <p>
  14.         你好
  15.     </p>
  16.     <script>
  17.      const p=document.querySelector('p');
  18.     //给p标签增加class类名 red bg
  19.     p.classList.add('red','bg');
  20.     //将p标签的类名bg去掉
  21.     p.classList.removed('bg');
  22.     //将p标签的class类名red改为blue
  23.     p.classList.replace('red','blue');
  24.     //toggle的属性像开关一样，p标签没有red则添加 有则去除
  25.     p.classList.toggle('red');
  26.     </script>
  27. </body>

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

  1. <body>
  2.     <div class="user">
  3.         自定义属性
  4.     </div>
  5.     <script>
  6.     const user=document.querySelector('.user');
  7.     user.id='a001';
  8.     //可以访问但在div上不显示该属性，因为不是预定义属性
  9.     user.email='@qq.com';
  10.     //如若需要div显示自定义属性需要用到dataset。在标签表现形式为data-email
  11.     user.dataset.email="@163.com";
  12.     //<div class='user' data-email='@163.com'></div>
  13.     //如果自定义属性名称较长如下,获取该属性的值，属性名称采用小驼峰形式
  14.     //<div class='user' data-email='@163.com' data-my-gender="男" ></div>
  15.     //获取自定义的值
  16.     console.log(user.dataset.myGender);
  17.     </script>
  18. </body>
Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post