箭头函数-rest剩余参数|dom元素|classList与dataset对象

1. 理解并演示箭头函数的应用场景，并实例演示rest,sprend参数的使用方法；
2. 获取dom元素的方式;
3. classList对象与dataset对象的应该场景

1. 理解并演示箭头函数的应用场景，并实例演示rest,sprend参数的使用方法；

箭头函数：简化匿名函数的语法糖

1.1 理解并演示箭头函数的应用场景

1. // 理解并演示箭头函数的应用场景
3. // 1. 无参数，() 不能省
4. let var1 = () => true;
6. // 2. 一参数，() 可以省
7. let var2 = (b) => b;
8. let var3 = a => a;
10. // 3. 二参数
11. let var4 = (a, b) => (a === b);
13. // 4. 多参数，多条语句，() 不能省，{} 不能省
14. let var5 = (a, b) => {
15. let c = a + b;
16. return c;
17. };
19. // 以上例程下面输出 true "aa" "bb" false 3
20. console.log(var1(), var2('aa'), var3('bb'), var4(true, false), var5(1, 2));

1.2 实例演示rest,sprend参数的使用方法

函数参数中 …rest 剩余参数归并
函数调用参数列表中 …spread展开

1. // 函数参数中 ...rest 将多参数归并 arr 数组
2. function arr(...arr) {
3. // 归并到 arr 数组，输出 [1, 2, 3]
4. console.log(arr)
5. let sum = 0;
6. for (let num of arr)
7. sum += num;
8. return sum;
9. }
11. // 函数参数
12. let res1 = arr(1, 2, 3);
14. // 函数参数 ...spread 展开数组
15. let res2 = arr(...[1, 2, 3]);
17. // console 都输出 6 即 arr(1, 2, 3) = arr(...[1, 2, 3])
18. console.log(res1, res2);

2. 获取dom元素的方式;

• body 下面添加 html

1. id="list">
2. class="item">item1
3. class="item" data-item="item2">item2
4. class="item" data-last-item="item3">item3

• 续写 js 代码

1. // 获取dom元素的方式
3. // 标签 tag
4. const tags = document.getElementsByTagName('li');
6. // ID 选择器
7. const id = document.getElementById('list');
9. // Class 类选择器
10. const classes = document.getElementsByClassName('item');
12. // CSS 选择器
13. // querySelector 匹配元素集合中第一个元素
14. // querySelectorAl 匹配元素集合中所有元素
15. const selector = document.querySelector('.item');
16. console.log(selector);
17. const selectorAll = document.querySelectorAll('.item');
18. console.log(selectorAll);

• 控制台输出图

3. classList对象与dataset对象的应该场景

classList 对象 增 改 删 切换 元素的 class 属性
dataset 对象 专用于访问自定义标签属性

3.1 classList对象

1. // classList对象与dataset对象的应该场景
2. const item = document.querySelector('.item');
3. // 输出类名 item
4. console.log(item.className);
6. // 增
7. item.classList.add('first', 'active');
8. // 输出类名 item first active
9. console.log(item.className);
11. // 改
12. item.classList.replace('active', 'visited');
13. // 输出类名 item first visited
14. console.log(item.className);
16. // 删
17. item.classList.remove('visited');
18. // 输出类名 item first
19. console.log(item.className);
21. // 切换
22. // 没有类名 active 则添加类 active
23. item.classList.toggle('active');
24. // 添加后输出类名 item first active
25. console.log(item.className);
26. // 已有类名 active 则删除类 active
27. item.classList.toggle('active');
28. // 删除后输出类名 item first
29. console.log(item.className);

3.2 dataset对象的应该场景

1. // dataset对象的应该场景
2. const item2 = document.querySelector('.item:nth-of-type(2)');
3. const lastItem = document.querySelector('.item:last-of-type');
4. // 控制台输出 item2 item3
5. console.log(item2.dataset.item, lastItem.dataset.lastItem);