1、JS对象-自定义对象
let 对象名 = {
属性名1：属性值1，
属性名2：属性值2，
属性名3：属性值3，
函数名称：function（形参列表）{}，
函数名称（形参列表）{}
}；
2、JS对象-JSON对象
JSON概念：本质是通过JavaScript对象标记法书写的文本。
使用场景：现多用于作为数据载体，在网络中进行数据传输。
JSON定义
//两种定义
let 变量名 = {"key":value, "key":value, "key":value,...}
let json = [value,value,value];
value的数据类型为：数字、字符串、逻辑值、数组、对象、null。
js对象转为JSON字符串
let str = JSON.stringify(json);
JSON字符串转为js对象
let json = JSON.parse(str);
3、JS对象-BOM对象
概念：BOM浏览器对象模型，指的是JS将浏览器的各个组成部分封装为对象，使用对象可以操作浏览器。
组成：
Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象
Window对象：浏览器窗口对象，可以直接使用，使用的时候也可以省略不写。
alert(msg)：显式带有一段消息和一个确认按钮的警告框。
confirm(msg) - 对话框 -- 确认：true，取消：false
setInterval(function,毫秒值) - 定时器 --按照指定的周期（以毫秒计）循环调用函数
setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
location对象：地址栏对象，获取或者设置地址栏地址，设置地址栏地址可以实现页面跳转效果。
// confirm(msg) - 对话框 -- 确认：true，取消：false
let flag=confirm("您确定要删除吗？");
if(flag){
alert("开始删除数据...");
}
//setInterval(function,毫秒值) - 定时器 --按照指定的周期（以毫秒计）循环调用函数
setInterval(function(){
console.log("循环定时器执行");
},2000);
//setTimeout(function,毫秒值) - 定时器 -- 在指定的毫秒数后调用函数
setTimeout(function(){
console.log("一次定时器执行");
},2000);
//获取地址栏地址
let href=location.href;
location.href="http://www.baidu.com"//效果：会页面跳转
console.log(href);
4、JS对象-DOM对象
1、概念
DOM是文档对象模型，将HTML的各个组成部分封装为对应的对象：
Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
JavaScript通过DOM，就能够对HTML进行操作：
改变HTML元素的内容
改变HTML元素的属性
改变HTML元素的样式（CSS）
对HTML DOM事件作出反应
2、DOM操作-获取元素对象
HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。
获取：使用Document对象的方法来获取（ES5提供的方法）
document.getElementById：根据id属性值获取，返回一个Element对象
document.getElementsByTagName：根据标签名获取，返回Element对象数组
document.getElementsByName：根据name属性值获取，返回Element对象数组
document.getElementsByClassName：根据class属性值获取，返回Element对象数组
获取：使用Document对象的方法来获取（ES6提供的方法）
document.querySelector（"css选择器"）：根据css选择器获取一个Element对象
document.querySelectorAll（"css选择器"）：根据css选择器获取一个Element对象数组
3、DOM操作-使用元素对象
Element：元素对象的使用（查阅文档）
常用操作：
访问内容体：元素对象.innerHTML h2.innerHTML="scc";
访问输入框内容：元素对象.value console.log(usernameInput.value);
访问属性：元素对象.属性名 img.src="img/on.gif";
访问样式：元素对象.style.样式属性名 h2.style.color="red";
步骤：
获取元素对象
操作内容、属性、样式
电影
旅游
游戏
1、变量、常量、数据类型
变量可以用let定义，常量用const定义
常量定义后不能被重新赋值
// 字符串类型 string
let name="sss";
// 数字类型 number
let balance=100;
// 布尔类型 boolean
let tv=true;
// 对象 object
let boy={
name:"sss",
age:20,
weight:88.7
}
// 键值对 Map
let girl=new Map([
["name","luna"],
["age",18]
])
console.log(girl);//Map(2) {'name' => 'luna', 'age' => 18}
// 元素不重复 Set
let number=new Set([1,2,3,2,'2']);
console.log(number);//{1, 2, 3, '2'}
// 数组 Array
let arr=['a',100,'b'];
// 函数 function
function add(a,b){
console.log(a+b);
}
// 类 class
class Person{
constructor(name,age){
this.name=name;
this.age=age;
}
info(){
console.log(this.name,this.age);
}
}
let person=new Person("sss",18);
person.info();
2、函数
// 定义函数
function add(){
let i=5;
return i;
}
// 传参
function sub(number){
return number-1;
}
// 默认值
function getPage(page = 10){
return page;
}
// 匿名函数
let arr = function(x,y){
return x+y;
}
// 箭头函数（匿名函数的一种）
let plus = (x,y)=>{
return x+y;
}
// 隐式返回
let nun = (x,y)=> x+y;
3、数组
// 定义数组
let arr=[10,11];
// push 向数组末尾添加一个或多个元素，并返回修改后数组的长度
let arrlength=arr.push(12,13);
// unshift 向数组开头添加一个或多个元素，并返回修改后数组的长度
let arrlength2=arr.unshift(19);
// shift 删除数组中的第一个元素，并返回被删除元素
let delet1=arr.shift();
// pop 删除数组中的最后一个元素，并返回被删除元素
let delet2=arr.pop();
// splice 删除元素，并返回包含被删除元素的数组 splice(要删除元素的索引位置，要删除的元素数量)
let delet3=arr.splice(2,1);
// reverse 反转数组
arr.reverse();
// sort 数组中的元素按首字母排序
arr.sort();
// 数组中的元素按数字排序
let arr2=[1,5,6,7,2];
arr2.sort((a,b)=>a-b);
// filter 符合筛选条件的元素，返回一个新的数组
let arr3=arr2.filter((value,index)=>{
return value>5;
})
// concat 合并数组
arr.concat(arr2);
// 使用for...of遍历数组
for (let i of arr) {
console.log(i);
}
// 使用forEach遍历数组
arr.forEach(value=>{
console.log(value);
})
4、Set集合、扩展运算符
// 创建Set集合
let set=new Set();
let set2=new Set(['a','b','c']);
//add 添加新的元素
set2.add("n");
// delete 删除元素
set2.delete("b");
// has 检查Set集合是否包含指定元素
console.log(set2.has("b"));
// size 获取Set集合的大小
console.log(set.size);
// Array.from()将Set集合转换为数组
let arr=Array.from(set2);
// 扩展运算符...将Set集合转换为数组
let arr2=[...set2];
// 扩展运算符是用于展开可迭代对象(如数组、字符串等)
let arr3="sssskkkals";
console.log([...arr3]);//['s', 's', 's', 's', 'k', 'k', 'k', 'a', 'l', 's']
// for...of循环遍历
for (let ik of arr3) {
console.log(ik);
}
// forEach方法遍历
arr3.forEach((value) => {
console.log(value);
});
// clear 清空Set
set2.clear();
// 数组去重
let num=[1,20,392,329,1,1,3,20];
let set3=new Set(num);
5、Map集合
// 创建Map集合
let map=new Map();
let map2=new Map([
["name","sss"],
["age",20],
["gender","girl"]
])
//set 添加新的元素
//在Map集合中, 每个键都是唯一的, 当使用相同的键再次调用set()方法时, 会替换原来键对应的值
map2.set("height",170);
// delete 删除元素
map2.delete("gender");
// has 检查Map集合是否包含指定元素
console.log(map2.has("gender"));
// size 获取Map集合的大小
console.log(map2.size);
// Array.from()将Map集合转换为数组
let arr=Array.from(map2);
// 扩展运算符...将Map集合转换为数组
let arr2=[...map2];
// for...of循环遍历
//解构可以从数组或对象中提取值并赋给变量
//[key, value] 就是一种解构语法, 用于将 Map 集合中的键值对解构为 key 和 value 两个变量
for (let [key,value] of map2) {
console.log(key,value0)
}
// forEach方法遍历
map2.forEach((value,key) => {
console.log(key,value);
});
// clear 清空Map
map2.clear();
6、对象
// 创建对象
let person={
name:"sss",
gender:"girl",
age:26
};
// 向对象中添加新的属性
person.height=170;
// 在对象中，每个键都是唯一的，当使用相同的键再次赋值时，会替换原来键对应的值
person.age=20;
// 删除属性
delete person.gender;
// 检查对象是否包含指定属性
let i = "age" in person;
console.log(i);
// 获取对象属性名的数组
Object.keys(person);
// 获取对象的属性数量
console.log(Object.keys(person).length);
// 获取对象的键值对数组
Object.entries(person);
// 使用for...in循环遍历对象
// for...of 用于遍历可迭代对象[如数组、Set、Map、字符串等]
// for...in 用于遍历对象的可枚举属性
for (let key in person) {
console.log(key,person[key]);
}
// 使用forEach方法遍历
Object.entries(person).forEach(([key,value])=>{
console.log(key,value);
})
// 清空对象
person={};
7、类class、模板字符串、私有属性、存取器、继承
class Person{
name;
// 私有属性，仅在类内部可访问和操作的属性, 外部无法直接访问和修改
#age;
// 构造函数
constructor(name,age){
this.#age=age;
this.name=name;
}
// 使用存取器getter获取私有属性
get age(){
return this.#age;
}
