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

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

世纪天城
世纪天城原创
2020年12月31日 19:51:07849浏览

箭头函数的应用场景

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

  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和"{}"
  25. // 只有一个参数, 参数的小圆括号也可以不写
  26. let id = 'B888';
  27. let name = '电脑';
  28. let model = 'MacBook Pro';
  29. let demo2 = name => ['C888', name, '相机123'];
  30. let demo3 = (id, name, model) => ({ id: id, name: name, model: model });
  31. res2= demo2(name);
  32. res3 =demo3(id,name,model);
  33. console.log(res2);
  34. // 遍历
  35. res2.forEach(item => console.log(item));
  36. console.log('--------------');
  37. for (let key in res3) console.log(res3[key]);
  38. // 总结:
  39. // 1. 当参数只有一个时,圆括号可以省略,如果没有参数,反而不能省
  40. // 2. 当有多个参数时, 圆括号必须要写
  41. // 3. 当有多条语句时,函数体的大括号不能省
  42. // 4. 如果函数体只有一条语句时,可以省略大括号
  43. </script>
  44. </body>
  45. </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>
  21. <body>
  22. <p class="red">classList对象</p>
  23. <script>
  24. const p = document.querySelector('p');
  25. console.log(p);
  26. // p.style.color ='cornflowerblue';
  27. // className用来给类添加样式的
  28. // p.className = 'p';
  29. p.className = 'pp bg';
  30. // classList 专门用来操作类class
  31. // p.classList.add('pp');
  32. // // add()方法同时添加两个类
  33. p.classList.add('p', 'bg');
  34. // // remove()用于删除类
  35. // p.classList.remove('pp');
  36. // replace用于替换
  37. p.classList.replace('p','pp');
  38. // toggle():动态切换样式,如果已有则删除,如果没有则添加
  39. p.classList.toggle('red');
  40. </script>
  41. </body>
  42. </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>
  20. </body>
  21. </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>
  16. </head>
  17. <body>
  18. <div class="div">1</div>
  19. <div class="div">2</div>
  20. <div class="div">3</div>
  21. <div class="div">4</div>
  22. <div class="div" id="div">5</div>
  23. <script>
  24. // tag, id, class,name...
  25. // 用css选择器来获取元素
  26. // 1. 返回匹配的元素集合中的第一个元素,(返回一个)
  27. // tag标签
  28. const div = document.querySelector('div').style.background ='#845538';
  29. // console.log(div);
  30. // class
  31. const classname = document.querySelector('.div').style.background = '#000';
  32. // console.log(classname);
  33. // id
  34. const id = document.querySelector('#div')
  35. // console.log(id);
  36. // 2. 返回匹配的元素集合所有成员
  37. const req = document.querySelectorAll('.div');
  38. console.log(req);
  39. // req.style.background = '#705628';
  40. // 将类数组通过 ...sprend语法转为真正的数组
  41. let a = [...req];
  42. // console.log(list);
  43. a.forEach(div=>{
  44. console.log(div);
  45. div.style.background= '#45b97c';
  46. });
  47. //也可以用下面的方法指定某一个元素
  48. req[0].style.background ='#845538';
  49. </script>
  50. </body>
  51. </html>

图例:

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议