JavaScript(二)

最新推荐文章于 2024-02-05 18:04:39 发布

李大哥1

最新推荐文章于 2024-02-05 18:04:39 发布

阅读量2.8k

点赞数

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

本文链接：https://blog.csdn.net/weixin_42330641/article/details/127821515

版权

1 JavaScript 函数

1.1 JavaScript 的函数的实参和形参；

形参和实参想对应(数量可以不对应)；
形参可以是设置默认值；
参数的类型不确定；
实参的值可以是字面量；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //给b设置默认参数5，在调用函数的时候如果只传一个a;b就会使用默认值；
        function react(a, b = 5) {
            console.log(a + b);
        }
        react(5) //等于5
            //类型不确定 传入两个字符串
        react("JavaScript", "函数");//JavaScript函数
        //可以传入多个值 但是使用的只有前面2个
        react(1, 5, 96, 9);//6
    </script>
</body>

</html>

在这里插入图片描述

1.2 声明函数的3种方法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //第一种方法
        function react(a, b) {
            console.log(a + b);
        }
        //第二种方法
        var react1 = function(c, d) {
                console.log(c + d);
            }
            //第三种方法
        var react2 = new Function("e", "f", "console.log(e + f)");
        react1(1, 2);
    </script>
</body>

</html>

在这里插入图片描述

1.3 return

返回函数的值；
中断流程；
只能在函数中返回；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //返回函数的值
        function react(a, b) {
            console.log(a + b);
            return a + b
        }
        //终端流程

        function react1(a) {
            if (a < 5) {
                return "a点结束了"

            }
            console.log("b点结束了")
        }

        console.log(react1(1))
    </script>
</body>

</html>

在这里插入图片描述

1.4 变量的作用域

全局变量：挂载到window对象上的；
局部变量：函数体内部声明的变量；
函数可以使用全局变量，但是在函数内部声名的局部变量，其他变量无法使用；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //全局变量
        var aa = 100;

        function react1(a) {
            //声明局部变量
            var b = 200;
            return a + aa + b;
        }
        console.log(react1(1))

        function react2(c) {

            return c + b;
        }
        //无法使用局部变量b
        console.log(react2(1))//Uncaught ReferenceError: b is not defined
    </script>
</body>

</html>

1.5 JavaScript的隐藏参数arguments

arguments 指的实参的数组；
传⼊的实参都能在函数体⾥通过arguments类数组取到；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function react1(a) {
            //声明局部变量
            return a + arguments[1] + arguments[2];
        }
        console.log(react1(1, 20, 20))//41
    </script>
</body>

</html>

在这里插入图片描述

1.6 递归

自己调用自己：
必须设置一个中止条件不然会一直调用下去；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //递归 如果不设置条件将会一直执行下去；
        // function react1(sum) {
        //     sum++
        //     console.log(sum)
        //     react1(sum)
        // }
        // react1(1);

        //设置条件
        function react2(sum) {
            sum++
            console.log(sum)
            return sum < 10 ? react2(sum) : sum;
        }
        react2(1);
    </script>
</body>

</html>

在这里插入图片描述

1.7 直接执行的函数

匿名；
自动执行；
执行后自动销毁；
前⾯的语句必须加分号，否则会解析错误；
格式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
       // 第一种方式
        (function(sum) {
            console.log(sum)

        })(1);
        //第二种方式
        (function(sum) {
            console.log(sum)

        }(1));
        
    </script>
</body>

</html>

1.8 小挑战

编写⼀个函数，排列任意元素个数的数字数组，按从⼩到⼤顺序输出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        var array = [1, 85, 16, 9, 57, 65, 62, 85, 22, 5];
        for (var i = 0; i < array.length - 1; i++) {
            for (var j = 0; j < array.length - i - 1; j++) {
                if (array[j] > array[j + 1]) {
                    var c = array[j];
                    array[j] = array[j + 1];
                    array[j + 1] = c;
                }
            }
        }
        console.log(array);
    </script>
</body>

</html>

在这里插入图片描述

输⼊某个数字，计算数字的阶乘

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function mul(a) {
            if (a === 1) {
                return a;
            } else {
                return a * mul(a - 1);

            }

        }
        console.log(mul(5));
    </script>
</body>

</html>

在这里插入图片描述

2 闭包

什么是闭包：闭包就是访问另一个函数的变量的函数；
缺点：正常函数调用后，变量都会进行销毁，但是通过闭包的方式会把变量强行的保留下来，会造成内存溢出；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function close() {
            //定义一个局部变量
            var a = 5;
            //定义一个返回的方法
            return function closeone() {
                a++
                return a;
            };
        }
        var sum = close();
        //这样就能访问局部变量；
        console.log(sum()); //6
        console.log(sum()); //7
    </script>
</body>

</html>

在这里插入图片描述

3 原型及原型链；

3.1 原型

每一个构造函数都有一个prototye属性，这个属性指向了一个对象，这个对象就是原型对象,根据这个构造函数声明的对象都会继承这个原型对象的方法和属性；
构造函数有prototye属性，对象没有prototye属性，但是对象有一个隐式属性_proto_这个属性指向prototye属性，换句话说就是_proto_和prototye的值相同，但是构造函数可以修改prototye属性，对象却不能修改；
原型对象里面有一个constructor方法指向了构造函数；

3.2 原型链

原型链：当对象访问属性name 如果本地有这个属性则会直接返回，如果没有，则会去原型对象去寻找name属性，如果原型对象没有则会一直上找去直到_proto_为null；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //声明一个函数
        function Close() {
            this.name = "张三";

        }
        //增加prototype的属性
        Close.prototype.name = "政帅";
        Close.prototype.name1 = "瓜蛋";
        Close.prototype.age = "27";
        Close.prototype.sex = "男";

        //创建对象1
        var clsoe1 = new Close();
        //访问的是本地的对象的name属性
        console.log(clsoe1.name); //张三
        //访问的prototype的属性
        console.log(clsoe1.name1) //瓜蛋
        console.log(clsoe1.age) //27

        //创建对象2
        var clsoe2 = new Close();
        console.log(clsoe2.name1) //瓜蛋
        console.log(clsoe2.age) //27

        //constructor执行的是构造函数
        console.log(Close.prototype.constructor === Close) //true
    </script>
</body>

</html>

在这里插入图片描述

3.3 instance of

用来判断对象的prototype是否出现在某个构造函数的原型链，及判断该对象是不是构造函数的实例对象；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function ins() {}

        function insi() {}

        var one = new ins();
        var two = new insi();

        console.log(one instanceof ins); //true
        console.log(two instanceof ins); //false
    </script>
</body>

</html>

3.4 插件化开发初体验之写⼀个插件

写⼀个对两个数字进⾏加法运算计算器
- 声明⼀个构造函数
- 将公共⽅法写在原型上
- 将构造函数挂载到window上
- 写⼀个⽴即执⾏函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        (function() {
            //声明一个函数
            function Sum() {}
            Sum.prototype.add = function(a, b) {
                return a + b;
            }
            window.Sum = Sum;
        }());
        var adda = new Sum();
        console.log(adda.add(1, 2));//3
    </script>
</body>
</html>

4 ajax

4.1 JOSN

JavaScript Object Noation是一种轻量级的信息交换格式，易于人们编写和查看，也便于机器的解析；
格式：
- 字符串必须用双引号
- 键值对，用逗号隔开，最后一个值不用逗号
- 数组用[];
序列化于反序列化；
- 序列化把json对象转化为json字符串；
- 反序列化把json字符串转化json对象；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var json1 = {
                name: "dog",
                age: 2,
                type: "dog"
            }
            //序列化
        var jsonstr = JSON.stringify(json1);
        console.log(jsonstr); //{"name":"dog","age":2,"type":"dog"}
        //反序列化  
        var jsonobj = JSON.parse(jsonstr);
        console.log(jsonobj);//{name: 'dog', age: 2, type: 'dog'}
    </script>
</body>
</html>

在这里插入图片描述

4.2 ajax基本知识

什么是ajax：向服务器发送异步请求。
背景：没有前后端分离的时候，后端响应的是整个html；
原理；
- 使用XmlHttpRequest异步发送请求；
- 是js操作BOM
- ajax是IE5引入的异步请求技术；
- 通过js发送异步请求和接收响应，不阻塞流程；

4.3 XmlHttpRequest

XmlHttpRequest 就是xml的http请求，是浏览器的一个接口，使javascript实现了http(s)通信,ajax就是基于XmlHttpRequest 实现的，ajax的翻译就是异步的JavaScript 和 XML，传统的网页是如果需要重载内容就必须要更新整个网页，使用了ajax就可以实现异步更新网页；

4.3.1 访问的基本流程；

先看下基本流程，后面会对方法进行解释和补充；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Xhr = new XMLHttpRequest();
        Xhr.open("GET", "https://api-v2.xdclass.net/api/category/v1/list");
        console.log(Xhr.readyState);

        Xhr.send();
        console.log(Xhr.readyState);
        Xhr.timeout = 2000;

        Xhr.onreadystatechange = function() {
            // 为了保证数据完整返回，我们⼀般会判断两个值
            if (Xhr.readyState === 4 && Xhr.status === 200) {
                alert(Xhr.responseText);
            } else {
                alert('出错了，Err:' + Xhr.status);
            }
        };
    </script>
</body>

</html>

4.3.2 设置请求头

setRequestHeader
请求头对大小写不敏感，context-type和Context-type都不会报错
setRequestHeader方法必须放在open方法之后，send方法之前；
setRequestHeader对相同的键不会覆盖而进行覆盖；

<script>
        var Xhr = new XMLHttpRequest();
        Xhr.open("GET", "https://api-v2.xdclass.net/api/category/v1/list");
		Xhr.setRequestHeader("context-type","application/json");
		Xhr.send();
        console.log(Xhr.readyState);
</script>

4.3.3 建立连接

open();方法；
方法的第一个参数为请求的方法例如：get、post、head、put、delete…
第二个请求参数为请求的地址；
第三个参数为async，默认参数为true，表示异步，false表示同步；
第四个参数username请求认证的用户名；
第五个密码为userpassword 请求认证的用户名密码；

<script>
        var Xhr = new XMLHttpRequest();
        Xhr.open("GET", "https://api-v2.xdclass.net/api/category/v1/list","true","zhangsan","*****");    
</script>

4.4.4 发送请求

send 方法是向目标地址发送请求；
一般get请求send的值为null，就算有值也会被忽略；
send可以发送的值有
- Arraybuffer
- Nlob
- document
- DOMString
- FormatData
- null
如果请求头不设置context-type就会根据不同的值设置默认的 context-type；如果请求头设置context-type值则会被覆盖
- Document 类型context-type的值为 text/html;charset=UTF-8;或者application/xml;charset=UTF-8；
- DOMString 类型context-type的值为 text/plain;charset=UTF-8；
- FormData 类型context-type的值为 multipart/form-data; boundary=[xxx]；
- 如果是其他类型则不会设置默认值；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Xhr = new XMLHttpRequest();
        //建立连接
        Xhr.open("PSOT", "https://api-v2.xdclass.net/api/account/v1/login");
        //设置请求头
        Xhr.setRequestHeader("content-type", "application/json");
        Xhr.setRequestHeader("chaset", "utf-8");

        var data = {
            identifier: "zhangsan",
            credential: "zhangsan"
        };

        Xhr.send(fordata);

        Xhr.onreadystatechange = function() {
            // 为了保证数据完整返回，我们⼀般会判断两个值
            if (Xhr.readyState === 4 && Xhr.status === 200) {
                alert(Xhr.responseText);
            } else {
                alert('出错了，Err:' + Xhr.status);
            }
        };
    </script>
</body>

</html>

4.4.5 监听事件

onreadystatechange事件，会监听ajax请求，每次readystate变化就会触发onreadystatechange事件；
readystate共有五种状态
- 0 unsent 未发送，指的是创建了xmlhttprequest对象，未建立连接；
- 1 opened 建立了连接但是未调用send方法；
- 2 headers_revieced 请求头正在下载；
- 3 laoding 请求体正在下载；
- 4 done 请求结束；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Xhr = new XMLHttpRequest();
        //建立连接
        console.log(Xhr.readyState);
        Xhr.open("GET", "https://api-v2.xdclass.net/api/account/v1/detail");
        console.log(Xhr.readyState);

        Xhr.send();

        Xhr.onreadystatechange = function() {
                if (Xhr.readyState === 1) {
                    console.log(Xhr.readyState);
                }
                if (Xhr.readyState === 2) {
                    console.log(Xhr.readyState);
                }
                if (Xhr.readyState === 3) {
                    console.log(Xhr.readyState);
                }
                if (Xhr.readyState === 4) {
                    console.log(Xhr.readyState);
                }
            }
    </script>
</body>

</html>

在这里插入图片描述

4.4.6 获取响应头

xml请求中有2个获取请求头的方法：
- getAllResponeHeaders获取响应header的所有的数据（这点的所有数据和我们在浏览器网络看到的数据不同，这里的所有的数据是背W3C定义的安全的数据例如：）
  - simple response header ：Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma;
  - Access-Control-Expose-Headers；
- getResponeHeader(),获取指定的数据,如果获取到被限制的字段会报错：study.html:20 Refused to get unsafe header “Transfer-Encoding”；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Xhr = new XMLHttpRequest();
        //建立连接
        Xhr.open("GET", "https://api-v2.xdclass.net/api/account/v1/detail");
        Xhr.send();
        Xhr.onreadystatechange = function() {
            if (Xhr.readyState === 4 && Xhr.status === 200) {
                console.log(Xhr.getAllResponseHeaders());
                console.log(Xhr.getResponseHeader("Transfer-Encoding"));
                console.log(Xhr.getResponseHeader("content-type"));
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

4.7.7 获取响应头以及设置响应参数的类型

XMLHttpRequest在level1（overRideMimeType）不支持把响应参数转化为二进制，所以在level2中加上了responeType()方法
responeType()可以设置的类型有：

值	类型	说明
” “	String字符串	responeType不设置任何值
”text“	String字符串
”document“	document对象	文件
”Blod“	Blod对象
”arraybuffer“	arraybuffer对象

获取XMLHttpRequest影响的方法有三个：
- Respone
  - 当请求完成时，此属性才有正确的值；
  - 请求未完成时，此属性的值可能是"“或者 null，具体与 xhr.responseType有关：当responseType为”“或"text"时，值为”"；responseType为其他值时，值为 null；
- ResponeText
  - 只有当 responseType 为"text"、""时，xhr对象上才有此属性，此时才能调用xhr.responseText，否则抛错
  - 请求未完成、请求失败都是空字符串；
- ResponeXml
  - 只有当 responseType 为"text"、“”、"document"时，xhr对象上才有此属性，此时才能调用xhr.responseXML，否则抛错
  - 请求未完成、请求失败都是null；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Xhr = new XMLHttpRequest();
        //建立连接
        Xhr.open("GET", "https://api-v2.xdclass.net/api/account/v1/detail");
        Xhr.send();
        Xhr.responseType = "text";
        Xhr.onreadystatechange = function() {
            if (Xhr.readyState === 4 && Xhr.status === 200) {
                console.log(Xhr.responseText);
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

4.7.8 如何设置超时时间

timeout 设置超时时间；
必须send方法设置在之后；
同步请求时候必须设置为0

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        var Xhr = new XMLHttpRequest();
        //建立连接
        Xhr.open("GET", "https://api-v2.xdclass.net/api/account/v1/detail");
        Xhr.send();
        Xhr.responseType = "text";
        Xhr.timeout = 10;
        Xhr.onreadystatechange = function() {
            if (Xhr.readyState === 4 && Xhr.status === 200) {
                console.log(Xhr.responseText);
            }
        }
    </script>
</body>

</html>