箭头函数,rest,sprend 参数 dom元素获取 classlist dataset 自定义对象 -

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

箭头函数是语法糖
箭头函数是匿名函数所以没有方法名，直接写进一个变量中
ep:
let demo = () => {console.log(name)}
-当参数只有一个时参数的括号可以不写,方法体中只有一行代码时可以省略大括号这时就是返回值

let ep1 =name => ["我是没有参数的，只返回一个连return也不用写", 2];
    let res1 = ep1(name);
    console.log(res1, typeof res1);

-当有多个参数时小括号不能省，方法体中多条语句不能省略大括号

let id = "b888";
    let name = "电脑";
    let model = "macbook Pro";
    let demo7 = (id, name, modle) => ({ id: id, name: name, modle: model });
    let res = demo7(id, name, name);返回的是对象
    console.log(res.name, typeof res);

rest spreand参数方法使用

function demo3(...arr) {
console.log(arr);
console.log(
     arr.reduce(function (prev, curr) {
        return prev + curr;
     })
);
}
    demo3(4, 5, 6, 7);
    let a = [1, 2, 3];
    demo3(...a);

要注意…有元素组成数组和数组分解为元素们的功能 ,
用在实参中且类型为数组就分解为元素们,展开
用在形参中会将各个参数组成数组,合并
.

2. 获取dom元素的方式;

dom 是文档对象样式的缩写

有几种方式标签 id name class css选择器

cont tag1 =document.getelementsbytagname(tag)
cont id1 = document.getelementbyid(id)
contdocument.getelementbyname(name)
document.getelementsbyclassname(classname)

函数：

    document.queryselector() 返回符合的第一个
    document.queryselectorall() 返回一组集合
    要注意的类型，注意转换为数组

css选择器较灵活

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

-classlist 应用场景先用dom选取页面元素如 p 标签

p.classlist.add(css样式1,css样式2)
p.classlist.remove(css样式)
p.classlist.replace(被替换样式,替换样式)
p.classlist.toggle(样式)  如果当前有这种样式就删除,没有就加上,用于反复点击操作,按一次样式A,再按一次样式B,循环..

dataset 是自定义类名时选择器

<ul id="list" data-email="qq.@saf">   自定义类名要以 data开头中间用 - 连接
    <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>
    const list1 = document.querySelector("list");
    console.log(list);   
    console.log(list.dataset.email); 调用时 自定义部分要是里面有 - 则用小驼峰 如自定义有 data-email-user  则调用时  dataset.emailUser  U要大写
  </script>