JavaScript之温故--(持续更新)

矫情吗；* 2022-01-20 08:41 151阅读 0赞

###### IF（BOOL 学习= =FALSE）BOOL 落后=TRUE；不断的学习，我们才能不断的前进。 ######

## 什么是javaScript： ##

是一种高级的，解释型语言的编程语言。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，
    它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，
    不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。
    
    avaScript是一种脚本语言，其源代码在发往客户端运行之前不需经过编译，而是将文本格式的字符代码发送给
    浏览器由浏览器解释运行。解释型语言的弱点是安全性较差，而且在JavaScript中，如果一条运行不了，那么
    下面的语言也无法运行。而其解决办法就是于使用异常处理try{}catch(){}︰
    
    console.log("a");    //這是正確的
    console.log("b");    //這是正確的
    console.logg("c");   //这是错误的，并且到这里会停下来
    console.log("d");    //這是正確的
    console.log("e");    //這是正確的
    
    /*解決辦法*/
    try{console.log("a");}catch(e){}    //這是正確的
    try{console.log("b");}catch(e){}    //這是正確的
    try{console.logg("c");}catch(e){}   //这是错误的，但是到这里不会停下来，而是跳过
    try{console.log("d");}catch(e){}    //這是正確的
    try{console.log("e");}catch(e){}    //這是正確的
    复制代码

## IO是什么： ##

1、I/O（英语：Input/Output），即输入/输出。
    2、IO - 同步，异步，阻塞，非阻塞怎么去理解：
        1）同步（synchronous）
           A用的是最老式的鱼竿，所以呢，得一直守着，等到鱼上钩了再拉杆；
        2）异步（asynchronous）
           B的鱼竿有个功能，能够显示是否有鱼上钩，所以呢，B就和旁边的MM聊天，隔会再看看有没有鱼上钩，
           有的话就迅速拉杆；
        3）阻塞（blocking）
           C用的鱼竿和B差不多，但他想了一个好办法，就是同时放好几根鱼竿，然后守在旁边，一旦有显示说鱼
           上钩了，它就将对应的鱼竿拉起来；
        4）D是个有钱人，干脆雇了一个人帮他钓鱼，一旦那个人把鱼钓上来了，就给D发个短信。   
    复制代码

## 什么是http协议： ##

1、http协议是：Hyper Text Transfer Protocol（超文本传输协议）的缩写；
    2、用于万维网服务器传输超文本到本地浏览器的传输协议；
    3、http是基于TCP/IP通信协议来传递数据(HTML文件、图片文件、查询结果等)；
    4、http是一个属于应用层的面向对象协议，工作于客户端-服务器上；
        浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。
        Web服务器根据接收到的请求后，向客户端发送响应信息。
    5、HTTP协议的特点：
        1）简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST
        每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而
        通信速度很快。
        2）无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答
        后，即断开连接。采用这种方式可以节省传输时间。
        3） 无状态：HTTP协议是无状态协议。是为了提高Web服务器对并发访问的处理能力，不保存发出请求的
        浏览器进程的任何状态信息
        4）工作流程：
                （1）建立连接、 （2）发送请求 、（3）响应请求、（4）客户端处理数据
        5）HTTP之响应消息Response
                1、HTTP响应也由四个部分组成，分别是：状态行、消息报头、空行和响应正文。
                2、HTTP/1.1 200 OK     //状态行
                    Date: Fri, 22 May 2009 06:07:21 GMT     //消息报头
                    Content-Type: text/html; charset=UTF-8  //消息报头
                                                            //空行
                    <html>  //响应正文
                          <head></head>
                          <body>
                                
                          </body>
                    </html>
        6）HTTP之状态码：
            状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:
                    1xx：指示信息--表示请求已接收，继续处理
                    2xx：成功--表示请求已被成功接收、理解、接受
                    3xx：重定向--要完成请求必须进行更进一步的操作
                    4xx：客户端错误--请求有语法错误或请求无法实现
                    5xx：服务器端错误--服务器未能实现合法的请求
    复制代码

## 什么是TCP协议 ##

1、 TCP 提供一种面向连接的、可靠的字节流服务
    2、 TCP 协议的三次握手简单理解：
         第一次：连接请求{浏览器: 你好服务器，我是浏览器A}
     	 第二次：授予连接{服务器：你好 浏览器A，我是服务器B}
     	 第三次：确认连接{浏览器：服务器B ，我们可以聊天了}
    3、 为什么要三次握手？
         如果发送两次就可以建立连接话，那么只要客户端发送一个连接请求，服务端接收到并发送了确认，就会
         建立一个连接。可能出现的问题：如果一个连接请求在网络中跑的慢，超时了，这时客户端会从发请求，
         但是这个跑的慢的请求最后还是跑到了，然后服务端就接收了两个连接请求，然后全部回应就会创建两个
         连接，造成浪费资源！
         如果加了第三次客户端确认，客户端在接受到一个服务端连接确认请求后，后面再接收到的连接确认请求
         就可以抛弃不管了。
    4、TCP 协议的四次分手简单理解：
        1）首先客户端请求关闭客户端到服务端方向的连接，这时客户端就要发送一个FIN=1，表示要关闭一个方
           向的连接。
        2）服务端接收到后是需要确认一下的，所以返回了一个ACK=1
        3）这时只关闭了一个方向，另一个方向也需要关闭，所以服务端也向客户端发了一个FIN=1 ACK=1
        4）客户端接收到后发送ACK=1，表示接受成功
    复制代码

## 什么是IP协议： ##

IP协议是将多个包交换网络连接起来，它在源地址和目的地址之间传送一种称之为数据包的东西，它还提供
        对数据大小的重新组装功能，以适应不同网络对包大小的要求。
        IP不提供可靠的传输服务，它不提供端到端的或（路由）结点到（路由）结点的确认，对数据没有差错控制，
        ，它只使用报头的校验码，它不提供重发和流量控制。如果出错可以通过ICMP报告，ICMP在IP模块中实现。
    复制代码

## 什么是HTTPS协议： ##

1、Hypertext Transfer Protocol Secure(超文本传输安全协议)，缩写：HTTPS；
    2、是一种通过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。
    3、SSL协议位于TCP/IP协议与各种应用层协议之间，为数据通讯提供安全支持。
    4、SSL协议可分为两层：SSL记录协议（SSL Record Protocol）：它建立在可靠的传输协议（如TCP）之上，
        为高层协议提供数据封装、压缩、加密等基本功能的支持。
    5、SSL握手协议（SSL Handshake Protocol）：它建立在SSL记录协议之上，用于在实际的数据传输开始前，
        通讯双方进行身份认证、协商加密算法、交换加密密钥等。
    6、SSL协议提供的服务主要有哪些：
        1）认证用户和服务器，确保数据发送到正确的客户机和服务器
        2）加密数据以防止数据中途被窃取
        3）维护数据的完整性，确保数据在传输过程中不被改变。
    7、 SSL协议的工作流程：
            服务器认证阶段：
                1）客户端向服务器发送一个开始信息“Hello”以便开始一个新的会话连接；
                2）服务器根据客户的信息确定是否需要生成新的主密钥，如需要则服务器在响应客户的“Hello”信息时将包含生成主密钥所需的信息；
                3）客户根据收到的服务器响应信息，产生一个主密钥，并用服务器的公开密钥加密后传给服务器；
                4）服务器恢复该主密钥，并返回给客户一个用主密钥认证的信息，以此让客户认证服务器。
            用户认证阶段：
                1）在此之前，服务器已经通过了客户认证，这一阶段主要完成对客户的认证。
                2）经认证的服务器发送一个提问给客户。
                3）客户则返回（数字）签名后的提问和其公开密钥，从而向服务器提供认证。
    8、握手过程：
           1） 浏览器将自己支持的一套加密规则发送给网站。
           2） 网站从中选出一组加密算法与HASH算法，并将自己的身份信息以证书的形式发回给浏览器。证书里
           面包含了网站地址，加密公钥，以及证书的颁发机构等信息。
           3） 获得网站证书之后浏览器要做以下工作： 
             a) 验证证书的合法性（颁发证书的机构是否合法，证书中包含的网站地址是否与正在访问的地址一
             致等），如果证书受信任，则浏览器栏里面会显示一个小锁头，否则会给出证书不受信的提示。 
             b) 如果证书受信任，或者是用户接受了不受信的证书，浏览器会生成一串随机数的密码，并用证书
             中提供的公钥加密。 
             c) 使用约定好的HASH计算握手消息，并使用生成的随机数对消息进行加密，最后将之前生成的所有
             信息发送给网站。
           4）网站接收浏览器发来的数据之后要做以下的操作： 
              a) 使用自己的私钥将信息解密取出密码，使用密码解密浏览器发来的握手消息，并验证HASH是
                否与浏览器发来的一致。 
              b) 使用密码加密一段握手消息，发送给浏览器。
            5.浏览器解密并计算握手消息的HASH，如果与服务端发来的HASH一致，此时握手过程结束，之后所有
            的通信数据将由之前浏览器生成的随机密码并利用对称加密算法进行加密。
            
            这里浏览器与网站互相发送加密的握手消息并验证，目的是为了保证双方都获得了一致的密码，并且
            可以正常的加密解密数据，为后续真正数据的传输做一次测试。另外，HTTPS一般使用的加密与HASH
            算法如下： 
                非对称加密算法：RSA，DSA/DSS 
                对称加密算法：AES，RC4，3DES 
                HASH算法：MD5，SHA1，SHA256
    复制代码

## 一、数据类型： ##

1、null  /定义为空
    2、undefined /声明未赋值
    3、number /数字类型
            123; // 整数123
            0.456; // 浮点数0.456
            1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
            -99; // 负数
            NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
            Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大
            的值时，就表示为Infinity
           
            
                    1 + 2; // 3
                    (1 + 2) * 5 / 2; // 7.5
                    2 / 0; // Infinity
                    0 / 0; // NaN
                    10 % 3; // 1
                    10.5 % 3; // 1.5
    4、string /字符串类型
    5、bollean /布尔类型
    //es5(5种)
    6、symbol /ES6 新增 符号类型是唯一的并且是不可修改的
    object /对象 
    复制代码

## 二、比较类比： ##

2 > 5; // false
        5 >= 2; // true
        7 == 7; // true
    复制代码

实际上，JavaScript允许对任意数据类型做比较： false == 0; // true false === 0; // false

要特别注意相等运算符==。JavaScript在设计时，有两种比较运算符：

第一种是==比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
    
    第二种是===比较，它不会自动转换数据类型，如果数据类型不一致，返回false，如果一致，再比较。
    复制代码

由于JavaScript这个设计缺陷，不要使用==比较，始终坚持使用===比较。

另一个例外是NaN这个特殊的Number与所有其他值都不相等，包括它自己：
    NaN === NaN; // false
    唯一能判断NaN的方法是通过isNaN()函数：
    isNaN(NaN); // true
    复制代码

## 三、js对象： ##

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成

JavaScript的对象用于描述现实世界中的某个对象。例如，为了描述“小明”这个淘气的小朋友，我们可以用若干
    键值对来描述他： 
                var xiaoming = {
                name: '小明',
                birth: 1990,
                school: 'No.1 Middle School',
                height: 1.70,
                weight: 65,
                score: null
                };
        JavaScript用一个{...}表示一个对象，键值对以xxx: xxx形式申明，用,隔开。注意，最后一个键值
        对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。
        上述对象申明了一个name属性，值是'小明'，birth属性，值是1990，以及其他一些属性。最后，把这个
        对象赋值给变量xiaoming后，就可以通过变量xiaoming来获取小明的属性了：
        xiaoming.name; // '小明'
        xiaoming.birth; // 1990
        访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就
        必须用''括起来
    复制代码

## 四、js函数： ##

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。 在JavaScript中，用var申明的变量实际上是有作用域的。

如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量

<button onclick="myFunction()">点击这里</button>
    
            function functionname(){
                alert('今天天气很好')
            }
            //弹出窗口 显示 今天天气很好
            
    function foo(x) {
        console.log('x = ' + x); // 10
        for (var i=0; i<arguments.length; i++) {
        console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
      }
    }
    foo(10, 20, 30); 
    输出//
    x = 10
    arg 0 = 10
    arg 1 = 20
    arg 2 = 30
    
    function max(a, b) {
        if (a > b) {
            return a;
        } else {
            return b;
        }
    }
    console.log(max(15, 20));  //输出 20
    复制代码

；

## 五、高阶函数 ##

JavaScript的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

1、一个最简单的高阶函数：

function add(x, y, f) {
            return f(x) + f(y);
        }
    复制代码

当我们调用add(-5, 6, Math.abs)时，参数x，y和f分别接收-5，6和函数Math.abs，根据函数定义，我们可以推导计算过程为：

x = -5;
        y = 6;
        f = Math.abs;
        f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11;
        return 11;
    复制代码

代码验证如下：

function add(x, y, f) {
            return f(x) + f(y);
        }
        var x = add(-5, 6, Math.abs); // 11
        console.log(x);//输出11  -5的绝对值就是5，5+6=11；
    复制代码

2、map集合的简单使用：

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; 
       // 调用Array的map()方法，传入函数
    var results = arr.map(pow); // [1, 4, 9, 16, 25, 36, 49, 64, 81]   
        //map()传入的参数是pow，即函数对象本身。
    console.log(results);//输出1,4,9,16,25,36,49,64,81
    
    数组内的字符串转化成数字：
    var arr = ['1', '2', '3'];
    var r;
    r = arr.map(x=>x);//利用箭头函数
    console.log(r);
    复制代码

3、filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
    var r = arr.filter(function (x) {
        return x % 2 !== 0;
    });
    r; // [1, 5, 9, 15]
    复制代码

4、闭包：

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 在函数外部自然无法读取函数内的局部变量。

注意！：函数内部声明变量的时候，一定要使用var命令。如果不用的话，你实际上声明了一个全局变量！

## 六、js面向对象思维 ##

JavaScript 是一门彻底的面向对象的语言：

1、一切事物皆对象
    2、对象具有封装和继承特性
    3、对象与对象之间使用消息通信，各自存在信息隐藏
    JavaScript 语言是通过一种叫做 原型（prototype）的方式来实现面向对象编程的。
    复制代码

基于类的（class-based）面向对象和 基于原型的 (prototype-based) 面向对象这两种方式在构造客观世界的方式上的差别。

基于类的面向对象和基于原型的面向对象方式比较：
    1、在基于类的面向对象方式中，对象（object）依靠 类（class）来产生。
    
    2、而在基于原型的面向对象方式中，对象（object）则是依靠 构造器（constructor）
    利用 原型（prototype）构造出来的。
    
    3、举个例子来说明二种方式认知的差异。例如工厂造一辆车，一方面，工人必须参照一张
    工程图纸，设计规定这辆车应该如何制造。这里的工程图纸就好比是语言中的 类 (class)
    ，而车就是按照这个 类（class）制造出来的；
    另一方面，工人和机器( 相当于 constructor) 利用各种零部件如发动机，轮胎，方向
    盘 ( 相当于 prototype 的各个属性 ) 将汽车构造出来。
    复制代码