箭头函数,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>