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，取消：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. 获取元素对象
2. 操作内容、属性、样式

html 复制代码

    <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元素属性绑定

html 复制代码

    <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事件案例

html 复制代码

<!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 复制代码

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

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 清空Set
        set2.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 清空Map
        map2.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);

        // 继承extends
        class 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=2
        let[,,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请求 post
        fetch('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请求 postJson
        fetch('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请求 post
        let 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>