es6新特点：箭头函数\rest\spread\classList对象与dataset对象的总结与应用 -

一：箭头函数：

箭头函数是用来简化匿名函数的语法糖,将普通函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体
基础语法：
(arg1,arg2)=>{function body};
例如：

 let multiply = (num1,num2)=>{return num1*num2};
console.log(multiply(12,5));//60

如果只有一条语句，可以省略函数的”{}”

let add = (num1,num2)=>num1+num2;
console.log(add(55,33));//88

如果只有一个参数可以连()都省了，如果没有参数，则要保留()

let echoName = name => `我的名字是${name}`;
console.log(echoName('Jasper'));//我的名字是Jasper

二：rest归并/sprend展开

有时候不知道函数当中到底要传多少个参数，可以使用…rest归并，或在函数调用参数时用…spread展开数组
例如

 let sum1 = (a,b)=>a+b;
console.log(sum1(1,2,3,4,5,6));//结果是3，不会因多传参数而报错，但多余的实参并没作用

针对上例，我们可以在定义函数时使用Rest参数，Rest参数的操作符表示为3个点 … ，直白地讲，它的意思就是“把剩余的参数都放到一个数组中”。

let sum2 = (...rests)=>{let sum = 0;for(let rest of rests)sum+=rest;return sum};
console.log(sum2(1,2,3,4,5,6));//21

用…spread在函数中展开数组：

const arr1 = [1,3,5,7,9];
let arrSum = arr =>Math.max(...arr);
console.log(arrSum(arr1));//9

三：获取DOM元素的方式

1：传统的方式：

document.getElementById //ID选择器
document.getElementsByClassName //类名选择器
document.getElementsByName //name选择器
document.getElementsByTagName //标签选择器

2：用css选择器来获取元素
2.1：querySelector:返回匹配的元素集合中的第一个元素,(返回一个)
例如用querySelector操作以下html代码中第一个li：

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

js代码如下：

li = document.querySelector("li");
 li.style.color="red";//如图第一个li变红了

2.2:querySelectorAll:返回匹配的元素集合所有成员
例如操作所有li的背景色：

ls=document.querySelectorAll("li");
        ls.forEach(element => {
        element.style.backgroundColor="red";
});

所有li全部背景变红了：

四：classList对象和自定义类：

1.classList:classList专门用来操作类class,通过自带的一些方法可以操作class的属性

方法	说明
classList.add()	添加
classList.remove()	删除
classList.replace(old,new)	替换
classList.replace()	切换

写四个盒子来举例说明：
html/css代码如下

    <style>
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        .blue{
            background-color: blue;
        }
        div{
            height: 5em;
            width:5em;
            margin: .5em;
            cursor: pointer;
            text-align: center;
            line-height: 5em;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="ad ">点击添加</div>
    <div class="rm red">点击移除</div>
    <div class="tg ">点击切换</div>
    <div class="rp blue" >点击替代</div>
<script>

js代码如下：

<script>
    const ad = document.querySelector(".ad");
    const rm = document.querySelector(".rm");
    const tg = document.querySelector(".tg");
    const  rp = document.querySelector(".rp");
    ad.onclick=()=>ad.classList.add("green");//点击后添加.green
    rm.onclick=()=>rm.classList.remove("red");//点击后移除.red
    tg.onclick=()=>tg.classList.toggle("red");//多次击会来回切换.red
    rp.onclick=()=>rp.classList.replace("blue","green");//点击后把class里面的.blue切换成.green
</script>

运行后点击前：

点击后：

2.自定义 datast
dataset对象专用于访问自定义的标签属性,在自定义属性前面加上data-,便可以用“dataset.自定义标签名”，进行访问，如果自定义的标签是两个单词组成且中间有加”-“，访问时要省略掉”-“,并把第二个单词首字母进行大写
例如：

<body>
    <div class="user" data-my-email="jasper@163.com"></div>
</body>
<script>
    const em = document.querySelector(".user");
    console.log(em.dataset.myEmail);//jasper@163.com
</script>