JS 和 ES6 补充学习

1、JS对象-自定义对象

javascript">let 对象名 = {属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function（形参列表）{}，函数名称（形参列表）{}
}；

2、JS对象-JSON对象

JSON概念：本质是通过JavaScript对象标记法书写的文本。

使用场景：现多用于作为数据载体，在网络中进行数据传输。

JSON定义

javascript">//两种定义
let 变量名 = {"key":value, "key":value, "key":value,...}let json = [value,value,value];

value的数据类型为：数字、字符串、逻辑值、数组、对象、null。

js对象转为JSON字符串

javascript">let str = JSON.stringify(json);

JSON字符串转为js对象

javascript">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对象：地址栏对象，获取或者设置地址栏地址，设置地址栏地址可以实现页面跳转效果。

javascript">        // confirm(msg) - 对话框 -- 确认：true，取消：falselet 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. 获取元素对象
2. 操作内容、属性、样式

    <div class="cls">教育</div><div class="cls">程序员</div><input type="checkbox" name="hobby" class="hobby">电影<input type="checkbox" name="hobby" class="hobby">旅游<input type="checkbox" name="hobby" class="hobby">游戏<script>// 将所有div标签的内容后面加上：very good(红色字体)let divs=document.querySelectorAll(".cls");for (let div of divs) {div.innerHTML+="<font color='red'>very good</font>";}// 使所有复选框呈现选中状态let checkboxs=document.querySelectorAll(".hobby");for (let checkbox of checkboxs) {checkbox.checked=true;}</script>

5、JS事件-事件介绍和绑定

事件：HTML事件是发生在HTML元素上的“事情”。比如：按钮被点击、鼠标移到元素上、按下键盘按键等。
事件监听：JavaScript可以在事件被侦测到时执行代码。
事件绑定
- 方式一：通过HTML标签中的事件属性进行绑定
- 方式二：通过DOM元素属性绑定

    <input type="button" id="btn1" value="事件绑定1" onclick="on()"><input type="button" id="btn2" value="事件绑定2"><script>// 方式一：通过HTML标签中的事件属性进行绑定function on(){alert("事件1被点击了");}// 方式二：通过DOM元素属性绑定document.querySelector("#btn2").onclick=function(){alert("事件2被点击了");}</script>

6、JS事件-常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

事件和DOM操作结合使用的步骤：
1. 给标签绑定事件（有两种方式）
2. 在事件函数中获取元素（标签）对象
3. 通过元素（标签）对象操作内容体、属性、样式
JS事件案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JS学习</title>
</head>
<body><img src="../resource/image/dhimg2.png" alt="" id="img"><br><input type="button" value="点亮"  onclick="on()"><input type="button" value="熄灭" onclick="off()"><br><input type="text" value="ITCAST" id="txt" onfocus="fc()" onblur="br()"><br><input type="checkbox" name="box" id="box">电影<input type="checkbox" name="box" id="box">旅游<input type="checkbox" name="box" id="box">游戏<br><input type="button" value="全选" onclick="on1()"><input type="button" value="反选" onclick="on2()"><script>function on(){let i = document.querySelector("#img");i.src="../resource/image/dhimg3.png";}function off(){let i = document.querySelector("#img");i.src="../resource/image/dhimg2.png";}function fc(){let i = document.querySelector("#txt");i.value=i.value.toLowerCase();}function br(){let i = document.querySelector("#txt");i.value=i.value.toUpperCase();}function on1(){let i = document.querySelectorAll("#box");for (let s of i) {s.checked=true;}}function on2(){let i = document.querySelectorAll("#box");for (let s of i) {s.checked=false;}}</script>
</body>
</html>

1、变量、常量、数据类型

变量可以用let定义，常量用const定义
常量定义后不能被重新赋值

javascript">        // 字符串类型 stringlet name="sss";// 数字类型 numberlet balance=100;// 布尔类型 booleanlet tv=true;// 对象 objectlet boy={name:"sss",age:20,weight:88.7}// 键值对 Maplet 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'}// 数组 Arraylet arr=['a',100,'b'];// 函数 functionfunction add(a,b){console.log(a+b);}// 类 classclass 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、函数

javascript">        // 定义函数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、数组

javascript">        // 定义数组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集合、扩展运算符

javascript">        // 创建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 清空Setset2.clear();// 数组去重let num=[1,20,392,329,1,1,3,20];let set3=new Set(num);

5、Map集合

javascript">        // 创建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 清空Mapmap2.clear();

6、对象

javascript">        // 创建对象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、模板字符串、私有属性、存取器、继承

javascript">        class Person{name;// 私有属性，仅在类内部可访问和操作的属性, 外部无法直接访问和修改#age;// 构造函数constructor(name,age){this.#age=age;this.name=name;}// 使用存取器getter获取私有属性get age(){return this.#age;}// 使用存取器setter设置私有属性set age(age){this.#age=age;}info(){// 模板字符串return `姓名：${this.name},年龄：${this.#age}`;}sleep(){return `${this.name}在睡觉`;}}let person = new Person("sss",22);console.log(person.age);person.age=30;console.log(person.age);// 继承extendsclass Son extends Person{height;constructor(name,age,height){//  调用父类构造函数super(name,age);this.height=height;}eat(){return `${this.name}在吃饭`;}}let son = new Son("xiaoming",20,178);console.log(son.eat());console.log(son.sleep());

8、解构

javascript">        // 解构：可以从数组或对象中提取值并赋给变量// 数组解构let[x,y]=[1,2]; //x=1,y=2let[,,c]=[10,20,30]; //c=30// 扩展运算符let[A,...B]=[1,2,3,4,5,6,7]; //A=1,B=[2,3,4,5,6,7]// 默认值let [x1,y1=200]=[100]; //x1=100,y1=200// 两数交换let x2=10;let y2=20;[x2,y2]=[y2,x2]; //x2=20,y2=10// 对象解构let person={name:"sss",age:30,height:190}let{name}=person;console.log(name); //sss// 重命名let{name:userName,age,height}=person;console.log(userName,age,height); //sss 30 190// 默认值let{gender="girl"}=person;console.log(gender); //girl

9、Promise

Promise表示承诺在未来的某个时刻可能会完成并返回结果。（比如别人借钱，未来可能会还你）
对于某些需要时间来处理结果的操作, 如用户登录、读取文件等, 可以使用 Promise 对象来执行异步操作。
Promise对象有三种状态 pending(待处理)、fulfilled(已履行)、rejected(被驳回)。（你借钱给别人，还没到还钱时间，就是待处理状态；如果别人还钱了就是已履行状态；如果到还钱时间不给你还钱就是被驳回状态）
当创建一个Promise对象时, 它的初始状态为pending, 表示异步执行还未完成。
当异步执行成功时, 会调用resolve函数把Promise对象的状态改变为fulfilled, 可通过then方法来获取异步操作的结果。
当异步执行异常时, 会调用reject函数把Promise对象的状态更改为rejected, 可通过catch方法来处理错误。
注意：异步操作是指在程序执行过程中, 某个操作不会立即返回结果, 而是需要一段时间的等待。

javascript">        let promise = new Promise((resolve,reject)=>{// resolve("按时还钱");reject("不按时还钱");}).then(result=>{console.log(result);//按时还钱}).catch(error=>{console.log(error);//不按时还钱}).finally(()=>{console.log("异步执行结束了");})

10、Fetch

Fetch是基于Promise的api，它可以发送http请求并接收服务器返回的响应数据
Fetch返回的是一个Promise对象

javascript">        // get请求fetch('http://127.0.0.1/get').then(response=>{return response.json();// response.json()用于将响应数据解析为json格式的数据}).then(data=>{// 返回的解析后的json数据会传递给下一个then()方法中的回调函数作为参数,这个参数就是data// data 解析后的json数据console.log(data);}).catch(error=>{console.log(error.message);}).finally(()=>{console.log("finally");})// post请求 postfetch('http://127.0.0.1/post',{method:'POST',headers:{'Content-Type':'application/x-www-form-urlencoded'},body:new URLSearchParams({//URLSearchParams用于处理键值对类型的数据,并将其编码为url查询字符串name:"sss",age:20,}),}).then(response=>{return response.json();}).then(data=>{console.log(data);}).catch(error=>{console.log(error.message);}).finally(()=>{console.log("finally");})// post请求 postJsonfetch('http://127.0.0.1/postJson',{method:'POST',headers:{'Content-Type':'application/json',},body:JSON.stringify({//JSON.stringify用于将对象转换为json字符串name:"sss",age:20,}),}).then(response=>{return response.json();}).then(data=>{console.log(data);}).catch(error=>{console.log(error.message);}).finally(()=>{console.log("finally");})

11、Axios

axios引用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Axios是基于Promise的网络请求库，它可以发送http请求并接收服务器返回的响应数据
Axios返回的是一个Promise对象
Axios不仅可以用于浏览器，也可以用于Node.js，而Fetch主要用于浏览器

javascript">        // get请求axios.get('http://127.0.0.1/get').then(response=>{console.log(response.data);}).catch(error=>{console.log(error);}).finally(()=>{console.log("finally");})// post请求 postlet data={name:"sss",age:20,};axios.post('http://127.0.0.1/post',data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then(response=>{console.log(response.data);}).catch(error=>{console.log(error);}).finally(()=>{console.log("finally");})// post请求 postJson [axios的默认请求头是application/json]axios.post('http://127.0.0.1/postJson',data).then(response=>{console.log(response.data);}).catch(error=>{console.log(error);}).finally(()=>{console.log("finally");})

12、模块化开发

模块化开发是指将复杂的代码拆分为独立的模块，每个模块负责完成特定的功能。
不同的模块之间可以通过使用export关键字将代码导出为模块，其他模块可以使用import关键字导入该模块。

javascript">    //index.js文件let title="JS学习";let age=20;let add=(x,y)=>x+y;// 导出export {title,add,age}// 将一个对象作为整体导出, 导出的对象包含title,add,age三个属性export default{title,add,age}//html文件<script type="module">//从index.js文件中导入title、age、add变量/函数import{title,age as a,add} from './index.js';console.log(title);console.log(a);// as用来表示别名// 接收导出的对象整体import obj from './index.js';console.log(obj.title);// import * as obj 用于避免命名冲突import * as obj from './index.js';console.log(obj.age);</script>

13、async、await使用同步的方式编写异步代码

同步：代码按照编写顺序逐行执行，后续的代码必须等待当前正在执行的代码完成之后才能执行当遇到耗时的操作（如网络请求等）时，主线程会被阻塞，直到该操作完成。
异步：当遇到耗时的操作发生时，主线程不会被阻塞，主线程会继续执行后续的代码，而非等待耗时操作完成。
async：当一个函数被标记为async后，该函数会返回一个Promise对象。
await：只能在async函数内部使用，加上await关键字后，会在执行到这一行时暂停函数的剩余部分，等待网络请求完成，然后继续执行并获取到请求返回的数据。

javascript">    <script>// get请求axios.get('http://127.0.0.1/get').then(response=>{console.log(response.data);}).catch(error=>{console.log(error);}).finally(()=>{console.log("finally");})// async/await使用同步的方式编写异步代码，避免回调地狱const getData=async()=>{try{const response=await axios.get('http://127.0.0.1/get');console.log(response.data);}catch(error){console.log(error);}finally{console.log("finally");}}</script>