Community Learn Tools Library Leisure
search
English
Home > List of blog posts > js箭头函数的应用场景和rest,sprend参数的使用方法
Blogger Information
Blog 37
fans 2
comment 0
visits 26507
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
js箭头函数的应用场景和rest,sprend参数的使用方法
世纪天城
Original
844 people have browsed it

箭头函数的应用场景

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>箭头函数的应用场景</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         // 箭头函数是用来简化匿名函数的语法糖
  12.         // 原始函数
  13.         function demo() {
  14.             return ['A111', '手机', 'MI 11 pro', 3999];
  15.         }
  16.         res = demo();
  17.         console.log(res);
  18.         // 箭头函数简写
  19.         let demo1 = ()=>['A111', '电脑', 'MI 11 pro', 3999];
  20.         res1 =demo1();
  21.         console.log(res1);
  22.         // 重点：
  23.         // 没有参数,小括号必须要有
  24.         // 如果函数体只有一条语句,可以不写return和"{}"
  26.         // 只有一个参数, 参数的小圆括号也可以不写
  27.         let id = 'B888';
  28.         let name = '电脑';
  29.         let model = 'MacBook Pro';
  30.         let demo2 = name => ['C888', name, '相机123'];
  31.         let demo3 = (id, name, model) => ({ id: id, name: name, model: model });
  32.         res2= demo2(name);
  33.         res3 =demo3(id,name,model);
  34.         console.log(res2);
  35.         // 遍历
  36.         res2.forEach(item => console.log(item));
  37.         console.log('--------------');
  38.         for (let key in res3) console.log(res3[key]);
  39.         // 总结：
  40.         // 1. 当参数只有一个时,圆括号可以省略,如果没有参数,反而不能省
  41.         // 2. 当有多个参数时, 圆括号必须要写
  42.         // 3. 当有多条语句时,函数体的大括号不能省
  43.         // 4. 如果函数体只有一条语句时,可以省略大括号
  44.     </script>
  45. </body>
  46. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>实例演示rest,sprend参数的使用方法</title>
  8. </head>
  9. <body>
  10.     <script>
  11.         //  ...rest剩余参数
  12.         function demo4(...arr) {
  13.             // console.log(arguments);
  14.             let res = 0;
  15.             for (let v of arr) {
  16.                 res = res + v;
  17.                 console.log(res);
  18.             } 
  19.         };
  20.         let arr1 = [1, 2, 3, 4, 5, 6, 7, 8];
  21.         // ...spread
  22.         demo4(...arr1)
  23.         // 等价于
  24.         demo4(1, 2, 3, 4, 5, 6, 7, 8)    
  25.         // 总结：
  26.         // 1.在函数的参数中就是...rest 归并
  27.         // 2.在函数的调用的参数列表中就是...spread 展开
  28.     </script>
  29. </body>
  30. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>classList对象</title>
  8.     <style>
  9.         .p{
  10.             color: coral;
  11.         }
  12.         .pp{
  13.             color: cornflowerblue;
  14.         }
  15.         .bg{ background-color: darkkhaki;}
  16.         .red{
  17.             color:red;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23.     <p class="red">classList对象</p>
  24.     <script>
  25.     const p = document.querySelector('p');
  26.     console.log(p);
  27.     // p.style.color ='cornflowerblue';
  28.     // className用来给类添加样式的
  29.     // p.className = 'p';
  30.     p.className = 'pp bg';
  32.     // classList 专门用来操作类class
  33.     // p.classList.add('pp');
  34.     // // add()方法同时添加两个类
  35.     p.classList.add('p', 'bg');
  36.     // // remove()用于删除类
  37.     // p.classList.remove('pp');
  38.     // replace用于替换
  39.     p.classList.replace('p','pp');
  41.     // toggle():动态切换样式,如果已有则删除,如果没有则添加
  42.     p.classList.toggle('red');
  43.     </script>
  44. </body>
  45. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>dataset对象</title>
  8. </head>
  9. <body>
  10.     <div class="user" data-email='tp@php.cn' data-my-gender="男">个人简介</div>
  11.     <script>
  12.         const user = document.querySelector('.user');
  13.         user.id = 'A005';
  14.         console.log(user.id);
  15.         // dataset对象专用于访问自定义的标签属性
  16.         console.log(user.dataset.email);
  17.         // 这里想拿到data-my-gender的值只需要将第二个单词的首字母大写
  18.         console.log(user.dataset.myGender);
  19.     </script>
  21. </body>
  22. </html>

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>获取dom元素</title>
  8.     <style>
  9.         div{
  10.             width: 2em;
  11.             height: 2em;
  12.             background-color: coral;
  13.             margin-bottom: 1em;
  14.         }
  15.     </style>
  17. </head>
  18. <body>
  19.     <div class="div">1</div>
  20.     <div class="div">2</div>
  21.     <div class="div">3</div>
  22.     <div class="div">4</div>
  23.     <div class="div" id="div">5</div>
  24.     <script>
  25.         // tag, id, class,name...
  26.         // 用css选择器来获取元素
  27.         // 1. 返回匹配的元素集合中的第一个元素,(返回一个) 
  28.         // tag标签
  29.         const div = document.querySelector('div').style.background ='#845538';
  30.         // console.log(div); 
  31.         // class
  32.         const classname = document.querySelector('.div').style.background = '#000';
  33.         // console.log(classname);
  34.         // id
  35.         const id = document.querySelector('#div')
  36.         // console.log(id);
  37.         // 2. 返回匹配的元素集合所有成员
  38.         const req = document.querySelectorAll('.div');
  39.         console.log(req);
  40.         // req.style.background = '#705628';
  41.         // 将类数组通过 ...sprend语法转为真正的数组
  42.         let a = [...req];
  43.         // console.log(list);
  44.         a.forEach(div=>{
  45.             console.log(div);
  46.             div.style.background= '#45b97c';
  47.         });
  48.         //也可以用下面的方法指定某一个元素
  49.         req[0].style.background ='#845538';
  50.     </script>
  51. </body>
  52. </html>

图例：

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