![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
箭头函数是用来简化匿名函数的语法糖,将普通函数的“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归并，或在函数调用参数时用…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
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全部背景变红了：
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");//点击后添加.greenrm.onclick=()=>rm.classList.remove("red");//点击后移除.redtg.onclick=()=>tg.classList.toggle("red");//多次击会来回切换.redrp.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>