解构赋值
<script>
// 将用户名,邮箱,保存到独立 变量中
const user = ["小明", "xm@qq.com"];
let userName = user[0];
let userEmail = user[1];
// es6, 用解构完成以上功能 将多值/引用,解析到单值变量中
// 主要针对 数组, 对象
// 1. 数组解构
// 左边模板 = 右边具体的值
let [name, email] = ["小明", "xm@qq.com"];
//更新
[name, email] = ["灭绝", "mj@qq.com"];
// 参数不足: 可以添加默认参数
[name, email, age = 18] = ["灭绝", "mj@qq.com"];
// 参数过多: 归并参数
let [a, b, c, d, ...e] = [1, 2, 3, 4, 5, 6, 7];
console.log(a, b, c, d, e);
// 交换二个数 用传统思维
let x = 10,
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: "mj@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>
流程控制
分支 ( if 与 switch )
<script>
// 代码块, 无条件执行
{
// var , let 区别在于是否支持块级的作用域
// var a = 123; // 外面可以访问 这叫变量泄露
// let a = 123; // 外面不能访问到
console.log("Hi, 晚上好");
}
// console.log(a);
// 代码块: 有条件
let status = false;
// 单分支
if (status) {
console.log("Hi, 晚上好");
}
// 双分支
if (status) {
console.log("Hi, 晚上好");
} else {
console.log("Hi , 上午好");
}
// 多分支
status = 88;
// === 恒等,二个数据不仅值要相等, 而且类型也要相等,不会触发类型的自动转换
if (status === 1) {
console.log("Hi, 晚上好");
} else if (status === 2) {
console.log("Hi , 中午好");
} else if (status === 3) {
console.log("Hi , 下午好");
} else {
// 当所有条件都不满足,就走到这: 默认分支
console.log("参数错误");
}
// switch来简化多分支
status = 1;
switch (status) {
case 1:
console.log("Hi, 晚上好");
break;
case 2:
console.log("Hi , 中午好");
break;
case 3:
console.log("Hi , 下午好");
break;
default:
// 当所有条件都不满足,就走到这: 默认分支
console.log("参数错误");
}
// 简化方案
// 1. 如果只有一条语句,可以不写大括号
if (true) console.log("Hello world");
// 2. 双分支可以用"三元运算符"进行简化
// 条件 ? 为true 时 : 为false时
10 < 5 ? console.log(true) : console.log(false);
// 多条语句也可以用三元来简化,但是要与IIFE(立即执行函数配合)
10 > 5
? (function () {
console.log("true时结果:");
console.log(true);
})()
: (function () {
console.log("false时结果:");
console.log(false);
})();
</script>
循环 ( while 与 for )
<script>
// 循环有三个要素: 1. 循环变量 2. 循环条件 3. 更新循环条件
const lang = ["html", "css", "js"];
// 1. while():入口循环, 进入循环前必须判断一次循环条件
let i = 0;
while (i < lang.length) {
console.log(lang[i]);
i = i + 1;
}
// do-while(): 出口判断型, 所以条件不论是否满足, 都会执行一次循环体
i = 0;
do {
console.log(lang[i]);
i = i + 1;
} while (i > lang.length);
console.log("----------");
// 2. for
// for ( 循环变量初始化; 循环条件; 更新循环条件)
for (let i = 0; i < lang.length; i++) {
console.log(lang[i]);
}
// 简写 只有一条语句,可以不写大括号
for (let i = 0; i < lang.length; i++) console.log(lang[i]);
console.log("========");
</script>
遍历
<script>
// for - of 遍历数组
const lang = ["html", "css", "js"];
// for (item of arr) {}
// item 代表数组中的每一个成员
for(item of lang){
console.log(item);
}
// for (item of lang) console.log(item);
// forEach()遍历数组
// 函数是一个对象, 对象是一个值,是值就可以传递或保存,所以函数可以当成参数,传给另一个函数
// 当函数做为参数是,称为"回调函数"
lang.forEach(function (item, index, array) {
console.log(item, index, array);
});
// 只有第一个参数:数组成员才是必须的
lang.forEach(function (item) {
console.log(item);
});
// 箭头函数
lang.forEach((item) => console.log(item));
// 5. for - in : 遍历对象
let user = { id: 1, "my name": "zhu", age: 18 };
// for (属性/键名 in 对象) {}
for (let key in user) {
console.log(user[key]);
}
</script>
访问器属性
<script>
let user = {
data: { name: "猪老师", age: 18 },
getage() {
return user.data.age;
},
setage(age) {
return user.data.age = age;
},
};
//默认访问方式 console.log(user.data.name);
console.log(user.getage());
user.setage(30);
console.log(user.getage());
// 根据用户的访问习惯 用户更愿意用下面的方式进行访问
// 读 console.log(user.age);
// 写 user.age = 60;
// 使用"访问器属性"将方法伪装成"属性"
user = {
data: { name: "猪老师", age: 18 },
// 在以属性名命名的方法前,添加上get,set将该方法伪装成一个属性
get age() {
return user.data.age;
},
set age(age) {
return user.data.age = age;
},
};
// 读
console.log(user.age);
// 写
user.age = 60;
console.log(user.age);
</script>
DOM 操作
- document 代表当前 html 文档对象
- document.querySelectorAll: 返回满足条件的元素集合
- document.querySelector: 返回满足条件的元素集合中的第一个,通常用来获取某一个元素
<form action="" name="login" id="mylogin">
<!-- 使用对象属性的点语法(name属性)来访问表单中的每个数据 -->
<input type="email" name="email" value="admin@php.cn" />
<button>提交</button>
</form>
<script>
// 怎么获取form元素
// let form = document.querySelector("form");
// form = document.forms[0];
// form = document.forms.item(0);
// form = document.forms.login;
// form = document.forms.mylogin;
// form中id,name功能相同,推荐使用id
// email控件中, name属性,即是后端的变量名,也可以当成id使用
// email 是 name="email",它是name属性的值
// console.log(form.email);
// console.log(form.email.value);
// let value = document.forms.login.email.value;
let value = document.forms.mylogin.email.value;
</script>
dom树的遍历
- firstElementChild 返回对象的第一个子 元素
- lastElementChild 返回对象的最后一个子 元素
- nextElementSibling 返回对象的下一个兄弟 元素
- previousElementSibling 返回对象的前一个兄弟 元素
- children 属性返回元素的子元素的集合 是一个 HTMLCollection 对象。
- childNodes 属性返回包含被选节点的子节点的 NodeList。
<ul class="list">
<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>
</ul>
<script>
// dom: 你看到的所有内容都是"节点" 节点类型: 元素,文本,文档
let ul = document.querySelector(".list");
// 查看所有节点(不区分类型)
console.log(ul.childNodes); // 返回 NodeList 节点集合
console.log(ul.children); // 返回 HTMLCollection 元素集合
// ul.children是类数组,需要转为真正的数组才可使用数组方法来遍历
// 转为真数组的二种方式
console.log(Array.from(ul.children));
console.log([...ul.children]);
// [...ul.children].forEach(item => (item.style.color = "red"));
// [...ul.children][0].style.color = "blue";
// ul.firstElementChild.style.background = "yellow";
// ul.firstElementChild.nextElementSibling.style.background = "green";
// ul.lastElementChild.style.background = "yellow";
// ul.lastElementChild.previousElementSibling.style.background = "violet";
</script>
dom元素的创建
- createElement 方法可创建元素节点。
- textContent 属性设置或者返回指定节点的文本内容。
- insertAdjacentElement(‘插入位置’, 元素)
![](https://img.php.cn/upload/image/239/440/263/1633441693889908.jpg)
<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>
自定义属性: dataset对象
<!-- 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>
css对象 classList
<h2>Hello world</h2>
<style>
.red {color: red;}
.bgc {background-color: yellow;}
.blue {color: blue;}
h2 {border: 5px solid #000;}
</style>
<script>
// 以前添加类
// document.querySelector("h2").className = "red bgc";
const h2 = document.querySelector("h2");
h2.classList.add("red");
h2.classList.add("bgc");
h2.classList.remove("bgc");
h2.classList.replace("red", "blue");
</script>