JS 和 ES6 补充学习

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，取消：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定义
常量定义后不能被重新赋值

        // 字符串类型 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、函数

        // 定义函数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 清空Setset2.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 清空Mapmap2.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;}// 使用存取器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、解构

        // 解构：可以从数组或对象中提取值并赋给变量// 数组解构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方法来处理错误。
注意：异步操作是指在程序执行过程中, 某个操作不会立即返回结果, 而是需要一段时间的等待。

        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对象

        // 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");})

JS 和 ES6 补充学习

1、JS对象-自定义对象

2、JS对象-JSON对象

3、JS对象-BOM对象

4、JS对象-DOM对象

1、概念

2、DOM操作-获取元素对象

3、DOM操作-使用元素对象

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

6、JS事件-常见事件

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

2、函数

3、数组

4、Set集合、扩展运算符

5、Map集合

6、对象

7、类class、模板字符串、私有属性、存取器、继承

8、解构

9、Promise

10、Fetch

最新新闻

热搜词