![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>解构赋值</title></head><body><script>const user = ["猪老师", "498668472@qq.com"];// 将用户名,邮箱,保存到独立 变量中let userName = user[0];let userEmail = user[1];console.log(userName, userEmail);// es6, 解构完成以上功能// 将多值/引用,解析到单值变量中// 针对 数组, 对象// 1. 数组解构// 模板 = 具体的值let [name, email] = ["猪老师", "498668472@qq.com"];console.log(name, email);//更新[name, email] = ["灭绝", "a@qq.com"];console.log(name, email);// 参数不足: 默认参数[name, email, age = 18] = ["灭绝", "a@qq.com"];console.log(name, email, age);// 参数过多: 归并参数let [a, b, c, d, ...e] = [1, 2, 3, 4, 5, 6, 7];console.log(a, b, c, d, e);// 交换二个数let x = 10;let y = 20;console.log("x = %d, y = %d", x, y);// let t = 0;// t = x;// x = y;// y = t;// 使用解构一行搞定[y, x] = [x, y];console.log("x = %d, y = %d", x, y);// 2. 对象解构let { id, course, score } = { id: 1, course: "JS", score: 88 };// 属性与变量同名console.log(id, course, score);// 等号左边的数据,左值,禁止出现大括号 , 使用括号包住将它转为表达式进行求值({ id, course, score } = { id: 2, course: "PHP", score: 99 });console.log(id, course, score);// 使用别名,防止命名冲突let { name: myName, email: myEmail } = { name: "灭绝", email: "a@qq.com" };console.log(myName, myEmail);let { ...r } = { a: 1, b: 2, c: 3 };console.log(r);// 3. 解构用在函数参数// function getUser(user) {// console.log(user.id, user.name, user.email);// }// 作用解构来简化传参与使用function getUser({ id, name, email }) {console.log(id, name, email);}getUser({ id: 156, name: "李四", email: "ls@a.com" });</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>dom元素的增删</title></head><body><script>// 创建元素// 内存中,页面中不可见let div = document.createElement("div");let p = document.createElement("p");p.textContent = "hello world";// 添加到页面中p.append("大家好");div.append(p);document.body.append(div);const li = document.createElement("li");li.textContent = "第一个";div.append(li);// insertAdjacentElement('插入位置', 元素)// 插入位置有四个// afterBegin: 开始标签之后,第一个子元素// beforeBegin: 开始标签之前,是它的前一个兄弟元素// afterEnd: 结束标签之后,它的下一个兄弟元素// beforeEnd: 结束标签之前,它的最后一个子元素const item = document.createElement("li");item.textContent = "大家再坚持一会";div.insertAdjacentElement("beforeBegin", item);const h3 = document.createElement("h3");h3.textContent = "我有点饿了";div.insertAdjacentElement("beforeEnd", h3);</script></body></html>
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>自定义属性: dataset对象</title></head><body><!-- id,class: 内置/预定义email, index: 自定义/ 数据属性 --><div id="user" class="active" data-email="admin@php.cn" data-index="5"><h2>Hello world</h2></div><script>const div = document.querySelector("#user");// console.log(div["data-email"]);console.log(div.dataset.email);console.log(div.dataset.index);// dataset对象: 用于获取用户的自定义属性// 自定义必须使用data-为前缀, 访问时前缀不要写</script></body></html>