1. 实例演示解构赋值,特别是函数参数中使用解构的方式
<!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>
2. dom元素的增删改查基本操作,必须达到熟练层次
<!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>
3. dataset,classList对象的使用方式与场景
<!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>
