前端基本功

ZhipengWan
151 阅读9分钟

toString、parseInt

Object.prototype.toString() // 返回[Object [[class]]]

Number.prototype.toString(radix) // 数字转字符串或者数字转成对应进制

区别于parseInt // 字符串转数字

如果是第一位不是0就遇到字母就停止解析，并把字母前面的值作为10进制去解析，如果第一个就是字母那么值就是空，空成了NaN,比如:
parseInt(“a”)==>parseInt(“”,10)==>NaN.

parseInt(“10a”)==>parseInt(“10”)==>parseInt(“10”,10)==>10;

如果第一位是0,且第2位不是x也和上面一样遇到字母就停止解析，并把字母前面的值作为8进制去解析,比如:

parseInt(“0a”)==>parseInt(“0”)==>parseInt(“0”,10)==>0.

PS:这个有点特殊，因为0a被解析成了0，还不具备看做是8进制的结构，下面那个就明显了。

parseInt(“010a”)==>parseInt(“010”)==>parseInt(“10”,8)==>8;

如果第一位是0,且第2位是x那后面也和上面一样遇到字母就停止解析，并把字母前面的值作为16进制去解析,比如:

parseInt(“0xt”)==>parseInt(“”,16)==>NaN.

parseInt(“0x12t”)==>parseInt(“12”,16)==>18.

如css 颜色值 #FF4500 对应的 rgb数值为：rgb(255, 69, 00)

parseInt('0xff') = 255 parseInt('0x45') = 69 parseInt('0x00') = 0

js引入方式

defer 文档和脚本同步下载，文档下载完成时执行脚本

async 异步下载脚本，脚本下载完成后立即执行

尾部script标签引入

监听onload，动态创建脚本引入

image.png

编码

常用的是escape、encodeURI和encodeURIComponent。escape是对字符串编码，后两个是对URL进行编码。

后两者区别在于编码范围不同，encodeURIComponent的编码范围更广，范围是除了ASCII字母 数字 ~!*()' 以外的都编码，encodeURI的编码范围是除了ASCII字母 数字 ~!*()'不编码， 还有@#$&=:/,;?+也不编码。

所以对字符串编码用escape，对URL编码用encodeURI，不会编码//，只对URL参数进行编码，用encodeURIComponent，/也会编码，编码范围广，不容易出问题。

Promise

Promise.all

  • 都成功才算成功，有一个失败就失败了

Promise.race

  • 有一个先结束，就跟着改变

Promise.allSettled

  • 都结束了才执行接下来的操作，不管成功还是失败

Promise.any

  • 有一个成功就变成成功，都失败才变成失败

Promise.try

  • 让同步方法同步执行，异步方法异步执行

数组的some和every

  • some
    • 有一个满足条件返回true，都不满足返回false
    • 不改变原数组
  • every
    • 都满足条件返回true,有一个不满足条件返回false
    • 不改变原数组

let const var区别

  • let
    • 块级作用域、不存在变量提升，声明前访问报undefined（暂时性死区）
    • 块级作用域
    • 可更改
  • const
    • 不存在变量提升，声明一个常量，声明必须赋值
    • 块级作用域
    • 不可更改
  • var
    • 存在变量提升，并且挂载到window上
    • 函数作用域
    • 可更改

map和weakmap

  • Map
    • 键值对集合
    • get、set、has、delete、size
    • 释放map赋值为weakMap
  • WeakMap
    • 键值对的集合
    • 键是对象的弱引用，值是任意的
    • 键名不计入垃圾回收机制
    • 经典应用dom作为键，值是引用次数

New命令的实现

  • 将参数数组化 args = [].slice.call(arguments)
  • 取出构造函数  constructor = [].shift()
  • 构造一个空对象，继承构造函数的prototype属性context
  • 执行构造函数 result = constructor.apply(context, args)
  • 返回结果是不是对象，不是对象返回构造的对象

如果是new调用，new.target 指向当前函数，否则是undefined

This绑定Call、apply、bind

首先他们都是实例方法，其次他们都能this指向，即函数执行时的作用域

  • call
    • 改变this指向，作用域绑定到call的对象（不是对象，转换成包装对象）
    • 检测原型对象某些方法或属性被覆盖，Object.prototype.hasOwnProperty.call(obj, 'toString’)，即使toString被覆盖了，也能检测出来
  • Apply
    • 也是改变this指向，区别在于传入的参数不同，它接收一个数组
  • Bind
    • bind将this绑定到一个对象，返回一个新函数

this的本质

之所以js有this的设计，本质跟内存里面的数据结构有关系。由于函数可以在不同的运行环境执行，所以需要一种机制能够在函数体内获得函数的运行环境。所以，this就诞生了。它的设计目的就是在函数体内部，指代当前函数的运行环境。

  • 构造函数中的this指代实例对象
  • 全局的this，指代window
  • 对象中的this，指向方法运行时所在的对象。该方法赋值给另一个对象，就会改变this的指向
  • this只是指向当前层的运行环境，而不会继承更上面的层

For…in

  • 遍历所有可枚举属性（自身和原型）

hasOwnProperty

  • 判断是自身属性还是原型属性

isConnected属性返回一个布尔值，表示当前节点是否在文档之中。

document.designMode属性控制当前文档是否可编辑。该属性只有两个值on和off，默认值为off。一旦设为on，用户就可以编辑整个文档的内容。

getSelection().toString()返回选中内容

三次握手、四次挥手

三次握手和四次挥手是TCP/IP协议中用于建立和断开网络连接的过程。

三次握手指的是客户端和服务器之间建立一个TCP连接的过程。它的具体步骤如下：

  1. 第一次握手：客户端向服务器发送SYN包（SYN=1，ACK=0），并等待服务器的确认。
  2. 第二次握手：服务器收到客户端的SYN包后，回复一个SYN包（SYN=1，ACK=1），表示自己也愿意建立TCP连接，并等待客户端的确认。
  3. 第三次握手：客户端收到服务器的SYN包后，向服务器回复一个ACK包（SYN=0，ACK=1），确认自己也愿意建立TCP连接。此时，客户端和服务器都能够互相确认对方已经准备好了，可以开始传输数据了。

四次挥手指的是客户端和服务器之间断开TCP连接的过程。它的具体步骤如下：

  1. 第一次挥手：客户端主动发起断开请求，发送一个FIN包（FIN=1，ACK=0），表示自己已经没有数据要发送了。
  2. 第二次挥手：服务器收到客户端的FIN包后，回复一个ACK包（ACK=1），表示已经收到客户端的请求。
  3. 第三次挥手：服务器发送一个FIN包（FIN=1，ACK=0），表示自己的数据已经全部发送完毕，可以断开连接了。
  4. 第四次挥手：客户端收到服务器的FIN包后，回复一个ACK包（ACK=1），表示自己已经收到了服务器的请求，断开连接完成。

通过这样的三次握手和四次挥手过程，客户端和服务器之间能够建立和关闭TCP连接，并确保双方的数据传输安全和可靠。

形象解释三次握手、四次挥手：
第一次（客户端）：你愿意和我在一起吗
第二次（服务端）：我愿意，你愿意吗
第三次（客户端）：我也愿意
开开心心生活

形象解释四次挥手：
第一次（客户端）：我们分手吧，过不下去了
第二次（服务端）：我知道了，我想一下
第三次（服务端）：好，我同意分手，拜拜
第四次（客户端）：拜

强缓存、协商缓存

  1. 强缓存：也叫本地缓存，是浏览器在第一次请求资源时，将该资源的一些关键信息（如过期时间、缓存标识等）存储在本地缓存中。之后，在一定时间范围内，如果请求再次发起，浏览器会先检查本地缓存中的该资源信息，判断是否过期或者被更新。如果资源未过期或者未被更新，浏览器就可以直接从本地缓存中获取资源，而不需要再向服务器发送请求。

（1）Expires：服务器通过该字段设定资源的过期时间。浏览器在第一次请求资源时，会将该字段存储在本地缓存中，如果资源过期时间未到，浏览器就可以直接从本地缓存获取资源。
（2）Cache-Control：该字段用于控制发送请求时缓存如何进行处理。例如：no-cache，表示强制向服务器请求资源并忽略本地缓存，no-store，表示禁止本地缓存，max-age，设定资源可以被缓存的最长时间。

  1. 协商缓存：也叫服务器缓存，是浏览器在请求资源时，通过在请求头中添加一些额外的字段，向服务器询问该资源是否需要更新。服务器接收到该请求后，会对比客户端传递的字段和服务器端存储的该资源信息，判断该资源是否需要更新。如果需要更新，服务器就返回新的资源数据；如果不需要更新，服务器则返回一个304状态码，告知浏览器可以直接从本地缓存中获取资源。

(1）Last-Modified：服务器在响应请求时，会返回资源的最后修改时间。浏览器在下一次请求时，会在请求头中添加一个字段If-Modified-Since，值为上次请求时返回的Last-Modified的时间值。如果两者值相等，代表资源没有更新，服务器返回304状态码，浏览器就可以直接从本地缓存获取资源。

（2）ETag：服务器返回的响应头中包含ETag字段，它标识着资源的特定版本。浏览器在下一次请求时，在请求头中添加If-None-Match字段，值为上次请求时返回的ETag值。如果服务器检测到该资源与客户端传递的ETag值不一致，说明资源已经更新了，服务器就会返回新的资源数据。

附录

blog.csdn.net/haoaiqian/a…

Vue通信方式

avatar
文章
阅读
粉丝