JavaScript复习：四

最新推荐文章于 2025-05-24 15:24:14 发布

self_correction

最新推荐文章于 2025-05-24 15:24:14 发布

阅读量171

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/self_correction/article/details/128743289

版权

一、正则表达式

 <input type="text" required id="mytext">
    <script>
        //正则表达式

        //JS复杂类型

        //1 字面量 //
        var reg = /abc/

        //2. 内置构造函数
        var reg2 = new RegExp("abc")

        mytext.onblur = function(){
            console.log(mytext.value)

            console.log(reg.test (mytext.value))
        }
    </script>

二、元字符

<1>.基本元字符

  <script>
        //1 \d 一位数字（0-9）
        var reg = / \d\d /

        //2 \D 一位非数字

        var reg = / \Dk\D /

        //3 \s 一位空白（空格 缩进 换行）
        var reg = / \s /

        //4 \S 一位非空白
        var reg = / \S /
        
        //5 \w 字母 数字 下划线
        var reg = / \w\w / 

        //6 \W 非字母 数字 下划线
        var reg = / \W\W /

        //7 . 任意内容(换行不算)
        var reg = / . /

        //8 \ 转义字符
        var reg = / \d.\d /
    </script>

<2>.边界符

<script>
        // ^ 开头
        var reg = / ^\d /

        // $ 结尾边界
        var reg = / \d$ /

        // ^开头结束$
        var reg = / ^a\dc$ /

    </script>

<3>.限定符

  <script>
        //1 * 0~多次
        var reg = / \d* /

        //2 + 1~多次
        var reg = / \d+ /

        //3 ? 0~1
        var reg = / \d? /

        //4 {n} 指定次数
        var reg = / a{3} /

        // 5 {n,m}
        var reg = / \d{3,5} /
    </script>

<4>.特殊符号

  <script>
        //1 () 整体
        var reg = / (abc){2} /

        //2 | 或 ,
        var reg = / a|b /
        var reg2 = / (abc|def) /
        var reg3 = / abc|def|xyz /

        //3 [] 代表1个
        var reg = / [abcdef]{3,5} /

        //[a-zA-Z0-9_] /w

        // [0-9] \d

        //4 [^abc]\

        var reg2 = / [^abc] /
    </script>

三、捕获exec

   <script>
        // test()
        // exec() 捕获片段

        var reg = / \d{3} /

        var datestr = 'time is 2029/01/01 16:34:20'

        var reg = /d{4}-\d{1,2}-\d{1,2}/
        varnewdatestr =  reg.exec(datestr)

        var newdatester1 = reg.exec(datestr)

        //标识 i g

        // / \d / i g
    </script>

四、正则表达式的两大特性

 <script>
        //1.懒惰 解决 使用全局标识符
        
        //2。贪婪
        
        var reg = / \d{1,4} /

        //3. 非贪婪
        var reg = / \d{1,4}? /

        var str ='<p class=" active" ><span>kerwin</span></p>'

    </script>

五、正则与字符串方法

 <script>
        //正则.test(字符串)
        //正则.exec(字符串)
        //字符串.replace search match
        var str= "adearfa"
        // var newstr = str.replace("a","*")
        var newstr = str.replace(/a/g,"*")

        //search

        //match 捕获内容
        

    </script>

六、this指向

  <button type="button" id="box"></button>
    <script>
        //this 关键字

        //this 谁调用我，this 就指向谁(es6 箭头函数)

        //zzy = this

        //全局

        function test(){
            console.log(this)
        }
        window.test()

        //对象

        var obj = {
            name:"zzy",
            test:function(){
                console.log("11111",this.name)
            }
        }

        obj.test()

        //事件绑定的this

        box.onclick = function(){
            console.log(this.innerHTML)
        }
    </script>

七、改变this指向

  <script>
        // call apply bind
        var obj1 = {
            name:"obj1",
            test:function(){
                console.log("getName1",this.name)
                console.log("参数",a,b,c)
            }
        }
        var obj2 = {
            name:"obj2",
            test:function(){
                console.log("getName2",this.name)
            }
        }

        //call 执行函数，并改变this执行为函数的第一个参数

        obj1.getName.call(obj2)

        //apply 执行函数，并改变this执行为函数的第一个参数
        //两个参数，第二个参数是一个数组
        obj1.getName.apply(obj2,[1,2,3])

        //bind 改变this 指向为函数的第一个参数，不会自动执行函数
        //支持多个参数
        var fun1 = obj1.getName.bind(obj2,1,2,3)
        console.log(fun1)
        fun1() //收到执行
    </script>

八、ES6

<1>.ES6定义变量

    <script>
        console.log(a)
        var a = 100

        function test(){
            var a = 100
        }

        //let const
        // 与var区别
        // 1.必须先定义再使用
        // 2.变量重名
        // 3.块级作用域
        let a = 100
        console.log(a)

        //let 变量
        //const 常量
    </script>

<2>.ES6箭头函数

  <script>
        var test = () =>{
            console.log(2222)
        }
        test();
        //1.(只有一个形参的时候)可省略
        //2.{}可以省略，只有一句代码，只有返回值的时候
        //3.没有arguments
        //4.箭头函数没有this，箭头函数this是父级作用域的，

        var test = a => 100*a
        var test = () => console.log("11111")
        //函数的默认参数
        function test (a,b){
            return a + b;
        }
        var test = (a=1,b=2)=>{
            return a + b;
        }
        console.log(test(10,20))
    </script>

<3>.ES6结构赋值

 <script>
        //快速的从对象和数组中获取里面的成员

        var arr = ["xiaoming","xiaohong"]

        let [x,y] = arr
        
        var a = 10
        var b = 10

        var [b,a] = [a,b]

        var arr2 = [1,2,[3,4,[5]]] //多为数组
        
        var [a,b,[c,d,[e]]] = arr2
    </script>

<4>.ES6对象简写

 <input type="text" id="myusername">
    <input type="password" id="mypassword">
    <button id="mtbtn">login</button>
    <script>
        mybtn.onclick = function(){
        let username = myusername.value
        let password = mypassword.value
        var obj = {
            username:username,
            password:password
        }
    }
    </script>

<5>.ES6展开运算符

  <script>
        // ... 展开数组
        // var a= [1,2,3]
        // var b = [4,5,6]
        // console.1og(a.concat(b) )
        // var C = [...a,...b]
        // console.log(c)

        //... 复制
        var a = [1,2,3]
        var b = [...a]
        b[0] = "zzy"

        // ...参数-实参-形参
        var test = function(...arr){
            console.log(arr)
        }
        test(1,2,3,4,5)

        //为数组转换
        function test(){
            var arr =[...arguments]
            console.log(arr)
        }
        console.log(1,2,3,4,5)

        // ... 对象
        var obj1 = {
            name:"zzy",
            age:18
        }
        var obj2 ={
            name:"xiaoming",
            age:18
        }
        var obj ={
            ...obj1,
            ...obj2
        }
    </script>

九、面向对象

首先，我们要明确，面向对象不是语法，是一个思想，是一种编程模式

面向:面(脸)，向(朝着)
面向过程:脸朝着过程=》关注着过程的编程模式
面向对象:脸朝着对象=》关注着对象的编程模式

实现一个效果：
在面向过程的时候，我们要关注每一个元素， 每一个元素之间的关系, 顺序，。。。
在面向过程的时候，我们要关注的就是找到一个对象来帮我做这个事情,我等待结果

我们以前的编程思想是，每一个功能，都按照需求一步一步的逐步完成

十、创建对象的方式

  <script>
        //内置构造函数 new Object()
        var obj = new Object();
        obj.name = "守望先锋"; //向obj中添加一个name属性
        obj.age = 6;          //向obj中添加一个age属性
        obj.name = "OverWatch";
        delete obj.name;
        console.log(obj); 

        //字面量
        var obj = {
            name:"hello world",
            age : 27,
            gender:"无",
            test:{name : "小明"}
        };
        //obj.name = "hello";
        console.log(obj);

        //工厂函数 
        function createObj(){
            var obj = {}
            obj.name = "守望先锋";
            obj.age = 6;
        }

        //自定义构造函数
        //new Object() 
        //new String() 
        //new Array()

        function createObj(name){
            this.name = name
            this.material =[]
            this.cook = function(){

            }
        }
        console.log(obj)
    </script>

十一、面向对象原型

 <h1></h1>
    <ul></ul>
    <script>
    var data={
        title:"体育",
        list:["体育-1" ,"体育-2","体育-3"]
    }

    function CreateList(title,list){
        this.title = title,
        this.list = List
    }
    var obj1 = new CreateList(data.title,data.list)
    console.log(obj1)


    function CreateList(select,data){
        this.ele = document.querySelector(seLect)
        this.title = data.title,
        this.list = data.list
        this.render = function(){
            //渲染页面
            var h1 = this.ele.querySelector("h1")
            var ul = this.ele.querySelector("ul")

            // console.log(h1,ul)

            h1.innerHTML = this.title
            ul.innerHTML = this.list.map(item=>`<li> ${item}</li>^`)
            .join("")
            }
    }

    </script>

十二、面向对象继承

  <script>
        //构造函数继承
        function Student(name,age,classroom){
            Person.call(this,name,age)
            this.classroom = classroom
        }

        //原型继承
        Student.prototype = new Person()
        
        //组合继承
        //构造函数继承+原型继承
        function Person(name,age){
            this.name = name
            this.age = age
        }
        Person.prototype.say = function(){
            console.log("hello")
        }
        function Student(name,age,classroom){
            Person.call(this,name,age)
            this.classroom = classroom
        }
        Student.prototype = new Person()
            var obj = new Student("zyy",100,"2班")

    </script>

十三、ES6-继承

<script>
         //父类
         class Person {
            constructor(name,age){
                this.name = name
                this.age = age
            }
            say(){
                console.log(this.name,"hello")
            }
        }
        //子类
        //extends 原型继承
        class Student extends Person{
            constructor(name,age,grade){
                super(name,age) // Person.call(this,name,age)
                this.grade = grade
            }

            say(){
                super.say() //语法糖
                console.log(this.name,"你好")
            }
        }

        var obj = new Student("zzy",100,100)
        console.log(obj)
        obj.say()
    </script>

十四、Ajax

    <script>
        //ajax ===async javascript and xml(闭合标签)

        //JSON.parse() 

        //1. 创建XHR new XMLHttpRequest()

        var xhr = new XMLHttpRequest()
        console.log(xhr)

        //2。配置 open(请求方式，请求地址，是否异步)
        //localhost本机域名 127.0.0.1 本机ip
        // baidu.com 域名     221...... ip

        //3. send 

        xhr.send()

        //4. 接受数据，注册一个事件
        //btn.onclick = function(){} 
        // xhr.onreadystatechange = function(){
        //     // console.log(xhr.readyState)
        //     // console.log(xhr.readyState,xhr.responseText)
        //     if(xhr.readyState===4 && xhr.status=== 200){
        //         console.log("数据解析完成",xhr.responseText)

        //         document.write(xhr.responseText)
        //     }else if(xhr.readyState===4 && xhr.status=== 404){
        //         console.error("没有找到这个页面")
        //         // location.href = "404.html"
        //     }

        //     //200 ok
        //     //404 未找到页面。
        // }


        xhr.onload = function(){
            // console.log(xhr.responseText)
            if(xhr.status===200){
                // document.write(xhr.responseText)
                console.log(JSON.parse(xhr.responseText))
            }else if(xhr.status===404){
                console.error("没有找到这个页面")
                // location.href = "404.html"
            }
        }
    </script>

十五、Ajax同步异步

 <script>
         var xhr = new XMLHttpRequest()
        xhr.open("GET", "1.json", true)
        //true 表示异步请求
        //false表示同步请求
        xhr.onload = function () {
            if (xhr.status === 200) {
                console.log(xhr.responseText)
            }
        }
        xhr.send()

        console.log("11111111111111111111")
    </script>

十六、请求方式

<1>

 <script>
         //form get post 

        //ajax
        /*
            get 偏向获取数据
            post 偏向提交数据
            put 偏向更新（全部）{name:"kerwin",age:100}
            delete 偏向删除信息

            patch 偏向部分修改

            header
            options
            connnect
        */

    </script>

<2>

  <button id="myget">get</button>
    <button id="mypost">post1</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydelete">delete</button>
    <script>
        myget.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("GET","http://localhost:3000/users?username=gangdaner&password=123")

            xhr.onload = function(){
                if(xhr.status===200){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            xhr.send()
        }

        mypost.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("POST","http://localhost:3000/users")

            xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            //提交 信息
            //post name=kerwin&age=100
            //post {"name":"kerwin"}

            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //name=kerwin&age=100
            // xhr.send(`username=shanzhen&password=456`)
            xhr.setRequestHeader("Content-Type","application/json") //name=kerwin&age=100
            xhr.send(JSON.stringify({
                username:"ximen",
                password:"789"
            }))
        }

        myput.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("PUT","http://localhost:3000/users/1")

            xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            //提交 信息
            //post name=kerwin&age=100
            //post {"name":"kerwin"}

            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //name=kerwin&age=100
            // xhr.send(`username=shanzhen&password=456`)
            xhr.setRequestHeader("Content-Type","application/json") //name=kerwin&age=100
            xhr.send(JSON.stringify({
                username:"ximen11111111",
                password:"123456"
            }))
        }

        mypatch.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("PATCH","http://localhost:3000/users/2")

            xhr.onload = function(){
                if(/^2\d{2}$/.test(xhr.status)){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            //提交 信息
            //post name=kerwin&age=100
            //post {"name":"kerwin"}

            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //name=kerwin&age=100
            // xhr.send(`username=shanzhen&password=456`)
            xhr.setRequestHeader("Content-Type","application/json") //name=kerwin&age=100
            xhr.send(JSON.stringify({
                username:"xiaoming11111111",
            }))
        }

        mydelete.onclick = function(){
            var xhr = new XMLHttpRequest()
            xhr.open("DELETE","http://localhost:3000/users/1")

            xhr.onload = function(){
                if(xhr.status===200){
                    console.log(JSON.parse(xhr.responseText))
                }
            }
            xhr.send()
        }
    </script>

十七、Ajax封装

<1>

   <script>
         // ajax({
        //     url:"http://localhost:3000/users",
        //     data:{
        //         username:"kerwin222",
        //         password:"789"
        //     },
        //     success:function(res){
        //         console.log("sucess",res)
        //     },
        //     error:function(err){
        //         console.log("error",err)
        //     }
        // })

        ajax({
            url:"http://localhost:3000/users",
            method:"POST",
            data:{
                username:"kerwin3333",
                password:"789"
            },
            headers:{
                "content-type":"application/json"
            },
            success:function(res){
                console.log("sucess",res)
            },
            error:function(err){
                console.log("error",err)
            }
        })
    </script>

<2>

 <button id="myget">get</button>
    <button id="mypost">post1</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydelete">delete</button>
    <script>
        myget.onclick = function () {
            ajax({
                url:"http://localhost:3000/users",
                data:{
                    username:"kerwin",
                    password:"789"
                },
                success:function(res){
                    console.log("sucess",res)
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }

        mypost.onclick = function () {
            ajax({
                url:"http://localhost:3000/users",
                data:{
                    username:"xiaoming",
                    password:"456"
                },
                method:"POST",
                headers:{
                    "content-type":"application/x-www-form-urlencoded"
                },
                success:function(res){
                    console.log("sucess",res)
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }

        myput.onclick = function () {
            ajax({
                url:"http://localhost:3000/users/1",
                data:{
                    username:"ximenteacher1111",
                    
                },
                method:"PUT",
                headers:{
                    "content-type":"application/json"
                },
                success:function(res){
                    console.log("sucess",res)
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }

        mypatch.onclick = function () {
            ajax({
                url:"http://localhost:3000/users/1",
                data:{
                    username:"ximenteacher1111",
                    
                },
                method:"PATCH",
                headers:{
                    "content-type":"application/json"
                },
                success:function(res){
                    console.log("sucess",res)
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }

        mydelete.onclick = function () {
            ajax({
                url:"http://localhost:3000/users/1",
                
                method:"delete",
                success:function(res){
                    console.log("sucess",res)
                },
                error:function(err){
                    console.log("error",err)
                }
            })
        }
    </script>

十八、回调地狱问题

 <script>
        // tiechui 已经登录
        ajax({
            url: "http://localhost:3000/news",
            data: {
                author: "kerwin"
            },
            success: function (res) {
                console.log(res[0])
                ajax({
                    url: "http://localhost:3000/comments",
                    data: {
                        newsId: res[0].id
                    },
                    success: function (res) {
                        console.log(res)
                    }
                })
            }
        })

        // q.js 

        // Promise 解决回调地狱，嵌套金字塔
    </script>

十九、Promise

<1>.基本语法

<script>
        //Promise 构造函数

        var q = new Promise(function(resolve,reject){
            //异步
            setTimeout(()=>{
                //成功兑现承诺
                // resolve(["1111","222","3333"])

                //失败拒绝承诺
                reject("errrror")
            },2000)
        })
        //pending 执行中
        //fulfilled
        //reject

        //q是promise对象

        q.then(function(res){
            //兑现承诺，这个函数被执行
            console.log("success",res)
        }).catch(function(err){
            //拒绝承诺，这个函数就会被执行
            console.log("fail",err)
        })
    </script>

<2>.封装Ajax

 <script src="util.js"></script>
    <script>
        pajax({
            url: "http://localhost:3000/news",
            data: {
                author: "tiechui"
            }
        }).then(res => {
            // console.log(res[0])
            return pajax({
                url: "http://localhost:3000/comments111",
                data: {
                    newsId: res[0].id
                }
            })
        }).then(res=>{
            console.log("success",res)

            // return pajax
        }).catch(err=>{
            console.log("error",err)
        })

        // console.log(1111)
    </script>

二十、async和await语法

 <script type="module">
        import {pajax} from './util.js'
    //    console.log(11111)
    //    async function test(){

    //     //await 同步代码/promise对象
    //      var res =  await pajax({
    //           url:"http://localhost:3000/news",
    //           data:{
    //               author:"tiechui"
    //           }
    //       })
    //     //   console.log(res)
    //     var res1 = await  pajax({
    //             url: "http://localhost:3000/comments",
    //             data: {
    //                 newsId: res[0].id
    //             }
    //         })
    //     console.log(res1)
    //     return res1
    //    }

    //    test().then(res=>{
    //        console.log("返回结果",res)
    //    }).catch(err=>{
    //        console.log("err",err)
    //    })
    //    console.log(33333)

    async function test(){

            try{
                //await 同步代码/promise对象
                    var res =  await pajax({
                        url:"http://localhost:3000/news",
                        data:{
                            author:"tiechui"
                        }
                    })
                    //   console.log(res)
                    var res1 = await pajax({
                            url: "http://localhost:3000/comments",
                            data: {
                                newsId: res[0].id
                            }
                        })

                        console.log("success",res1)
            }catch(err){
                console.log("err",err)
            }
            
            
            console.log(1111)
    }
    test()
   </script>

二十一、fetch

  <button id="myget">get</button>
    <button id="mypost">post1</button>
    <button id="myput">put</button>
    <button id="mypatch">patch</button>
    <button id="mydelete">delete</button>
    <script>
        myget.onclick = function () {
            // ajax({
            //     url:"http://localhost:3000/users",
            //     data:{
            //         username:"kerwin",
            //         password:"789"
            //     },
            //     success:function(res){
            //         console.log("sucess",res)
            //     },
            //     error:function(err){
            //         console.log("error",err)
            //     }
            // })
            var username = "kerwin"
            fetch(`http://localhost:3000/users111?username=${username}`)
            .then((res)=>{
                console.log(res)
                if(res.ok){
                    return res.json()
                }else{
                    //Promise.resolve()
                    
                    //拒绝
                    return Promise.reject({
                        a:1,
                        status: res.status,
                        statusText: res.statusText
                    })
                }
            }) // res.json() res.text()
            .then(res=>{
                console.log("success",res)
            }).catch(err=>{
                console.log("error",err)
            })

        }

        mypost.onclick = function () {
            // ajax({
            //     url:"http://localhost:3000/users",
            //     data:{
            //         username:"xiaoming",
            //         password:"456"
            //     },
            //     method:"POST",
            //     headers:{
            //         "content-type":"application/x-www-form-urlencoded"
            //     },
            //     success:function(res){
            //         console.log("sucess",res)
            //     },
            //     error:function(err){
            //         console.log("error",err)
            //     }
            // })

            // fetch("http://localhost:3000/users",{
            //     method:"POST",
            //     headers:{
            //         "content-type":"application/x-www-form-urlencoded"
            //     },
            //     body:"username=tiechui&password=123"
            // })
            // .then(res=>res.json())
            // .then(res=>{
            //     console.log(res)
            // })

            fetch("http://localhost:3000/users",{
                method:"POST",
                headers:{
                    "content-type":"application/json"
                },
                body:JSON.stringify({
                    username:"shanzhen",
                    password:"234"
                })
            })
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
            })
        }

        myput.onclick = function () {
            // ajax({
            //     url:"http://localhost:3000/users/1",
            //     data:{
            //         username:"ximenteacher1111",
                    
            //     },
            //     method:"PUT",
            //     headers:{
            //         "content-type":"application/json"
            //     },
            //     success:function(res){
            //         console.log("sucess",res)
            //     },
            //     error:function(err){
            //         console.log("error",err)
            //     }
            // })

            fetch("http://localhost:3000/users/2",{
                method:"PUT",
                headers:{
                    "content-type":"application/json"
                },
                body:JSON.stringify({
                    username:"shanzhen",
                    // password:"234"
                })
            })
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
            })
        }

        mypatch.onclick = function () {
            // ajax({
            //     url:"http://localhost:3000/users/1",
            //     data:{
            //         username:"ximenteacher1111",
                    
            //     },
            //     method:"PATCH",
            //     headers:{
            //         "content-type":"application/json"
            //     },
            //     success:function(res){
            //         console.log("sucess",res)
            //     },
            //     error:function(err){
            //         console.log("error",err)
            //     }
            // })

            fetch("http://localhost:3000/users/3",{
                method:"PATCH",
                headers:{
                    "content-type":"application/json"
                },
                body:JSON.stringify({
                    username:"shanzhen",
                    // password:"234"
                })
            })
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
            })
        }

        mydelete.onclick = function () {
            // ajax({
            //     url:"http://localhost:3000/users/1",
                
            //     method:"delete",
            //     success:function(res){
            //         console.log("sucess",res)
            //     },
            //     error:function(err){
            //         console.log("error",err)
            //     }
            // })
            fetch("http://localhost:3000/users/2",{
                method:"delete"
            })
            .then(res=>res.json())
            .then(res=>{
                console.log(res)
            })
        }
    </script>

二十二、cookie

 <button id="savebtn">存</button>
    <button id="getbtn">获取</button>    
    <button id="delbtn">删除</button>
    <script>
       // http协议无状态

       // localStorage :用户名密码？  token 钥匙 ==> Nodejs token认证。。

       // cookie 本地存储  sessionID 钥匙 ===> Nodejs cookie+session


       //cookie 本地存储

       // 存cookie

       savebtn.onclick = function(){
           //路径设置
        //    document.cookie = "username=xiaoming;path=/155-cookie/aaa"
            document.cookie = "age=18"
       
            //过期时间设置
            var date = new Date()
            date.setMinutes(date.getMinutes()+10)
            document.cookie = `username=kerwin;expires=${date.toUTCString()}`
        }

        getbtn.onclick = function(){
            console.log(getCookie("age"))
        }

        function getCookie(key){
            var str = document.cookie
            var arr = str.split("; ")
            // console.log(arr)
            var obj = {}
            for(var i=0;i<arr.length;i++){
                var subArr = arr[i].split("=")
                // console.log(subArr)
                obj[subArr[0]] = subArr[1]
            }

            // console.log(obj)
            return obj[key]
        }

        delbtn.onclick = function(){
            var date = new Date()
            date.setMinutes(date.getMinutes()-1)
            document.cookie = `username=111;expires=${date.toUTCString()}`
            document.cookie = `age=111;expires=${date.toUTCString()}`
        }
    </script>

二十三、Jsonp

<1>

   <script>
        // fetch("https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E5%8C%97%E4%BA%AC&ci=1&channelId=4")
        // .then(res=>res.json())
        // .then(res=>{
        //     console.log(res)
        // })

        /*
          同源策略：同域名 同端口号 同协议
          不符合同源策略，浏览器为了安全，会阻止请求
        */

        /*
         解决：
          1.cors  由后端设置 ，Access-Control-Allow-Origin: *
          2. jsonp:前后端必须协作
        
        */
    </script>

<2>

  <button id="mybtn">jsonp</button>
    <script>
        
        /*
          jsonp原理：动态创建script标签，src属性指向没有跨域限制
            指向一个接口，接口返回的格式一定是 ****() 函数表达式。
        */

        function test(obj){
            console.log(obj)
        }

        
        mybtn.onclick = function(){
            // var oscript = document.createElement("script")
            // oscript.src="01.txt" //未来地址
            // document.body.appendChild(oscript)
        
            var oscript = document.createElement("script")
            oscript.src=`https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=test` //未来地址
            document.body.appendChild(oscript)

            oscript.onload = function(){
                //删除当前节点
                oscript.remove()
            }
        }

        
    </script>

   <script>
       /*
        注意：
        1. 后端接口形式必须**（），需要后端配合
        2. jsonp 缺点
            (1) onload 删除sciprt标签
            （2）只能get请求，不能post put delete
       */
   </script>

二十四、再谈函数

  <script>
        // function test(){
        //     var name = "kerwin"
        //     console.log(name)
        // }

        // test()


        /*
          函数有返回值， 而且返回值必须是复杂类型，而且要赋值给外面的变量。
        */

        function test(){
            var name = "kerwin"
            console.log(name)
            var obj = {
                a:1,
                b:2
            }
            return obj
        }

        var obj1 = test()

        var obj2 = test()


        obj1 = null
        obj2 = null
    </script>

二十五、闭包

  <script>
        /*闭包：
         函数内部返回一个函数，被外界所引用。
         这个内部函数就不会被销毁回收。
         内部函数所用到的外部函数的变量也不会被销毁。
        
        */

        function outer(){
            var name = "kerwin"
            var age = 100
            return function(){
                return name+"11111111111111"
            }
        }

        var func = outer()

        console.log(func())

        func()

        func()

        /*
          优点：让临时变量永驻内存
          缺点：内存泄漏 func = null
        
        */


        // fetch("http://www.a.com/aaa")
        // fetch("http://www.a.com/bbb")
        // fetch("http://www.b.com/aaa")
        // fetch("http://www.b.com/bbb")
        // fetch("http://www.c.com/aaa")
        // fetch("http://www.c.com/bbb")



        function FetchContainer(url){
            
            return function(path){
                return fetch(url+path)
            }
        }

        var fetcha = FetchContainer("http://www.a.com")

        fetcha("/aaa").then(res=>res.json()).then(res=>console.log(res))
        fetcha("/bbb").then(res=>res.json()).then(res=>console.log(res))
        fetcha("/ccc").then(res=>res.json()).then(res=>console.log(res))
        fetcha("/ddd").then(res=>res.json()).then(res=>console.log(res))


        fetcha = null

        var fetchb = FetchContainer("http://www.b.com")

        fetchb("/aaa").then(res=>res.json()).then(res=>console.log(res))
        fetchb("/bbb").then(res=>res.json()).then(res=>console.log(res))
        fetchb("/ccc").then(res=>res.json()).then(res=>console.log(res))
        fetchb("/ddd").then(res=>res.json()).then(res=>console.log(res))
        fetchb = null
        //闭包应用：函数柯里化
    </script>

二十六、闭包的应用

<1>

 <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
    </ul>
    <script>
        //1. 记住列表的索引

        var oli = document.querySelectorAll("li")
        // for(let i=0;i<oli.length;i++){
        //     oli[i].onclick  =function(){
        //         console.log(i)
        //     }
        // }

        for(var i=0;i<oli.length;i++){
            oli[i].onclick = (function(index){
                
                return function(){
                    console.log(11111,index)
                }
            })(i) //匿名自执行函数
        }   

        //2. jsonp案例优化--函数防抖
    </script>

<2>

<input type="text" name="" id="mysearch">
    <ul id="list"></ul>
    <script>
        //https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36542,36464,36673,36454,31660,36692,36166,36695,36697,36570,36074,36655,36345,26350,36469,36314&wd=a&req=2&csor=1&cb=jQuery110208771006365075591_1656294200526&_=1656294200527

        // mysearch.oninput = function (evt) {
        //     console.log(evt.target.value)
        //     if (!evt.target.value) {
        //         list.innerHTML = ""
        //         return
        //     }

        //     var oscript = document.createElement("script")
        //     oscript.src =
        //         `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36542,36464,36673,36454,31660,36692,36166,36695,36697,36570,36074,36655,36345,26350,36469,36314&wd=${evt.target.value}&req=2&csor=1&cb=test&_=1656294200527`
        //     document.body.appendChild(oscript)

        //     oscript.onload = function () {
        //         oscript.remove()
        //     }
        // }

        function test(obj) {
            console.log(obj.g)

            list.innerHTML = obj.g.map(item =>
                `<li>${item.q}</li>`
            ).join("")
        }

        mysearch.oninput = (function () {
            var timer = null
            return function (evt) {
                console.log("111111111")
                if (timer) {
                    clearTimeout(timer)
                }
                timer = setTimeout(function () {
                    if (!evt.target.value) {
                        list.innerHTML = ""
                        return
                    }

                    var oscript = document.createElement("script")
                    oscript.src =
                        `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=36542,36464,36673,36454,31660,36692,36166,36695,36697,36570,36074,36655,36345,26350,36469,36314&wd=${evt.target.value}&req=2&csor=1&cb=test&_=1656294200527`
                    document.body.appendChild(oscript)

                    oscript.onload = function () {
                        oscript.remove()
                    }
                }, 500)
            }
        })()

        /*
          1. cors 
          2. 反向代理
        */
    </script>