3月13日前端学习记录

仙人掌一号
213 阅读5分钟

植树节的下一天（3月13日）前端学习记录

什么是URL，URL的结构是什么

URL是统一资源定位符，用来定位互联网上资源，也叫网址

结构

scheme://host.domain:port/path/filename?abc = 123 #456789,

scheme          - 定义因特网协议类型：http,https,ftp,file等，常见的是http，而https则是进行加密的网                  络传输
host            - 定义域主机（http的默认主机是www）
domain          - 定义因特网域名，比如baidu.com
port            - 定义主机端口号（http的默认端口号是80）
path            - 定义服务器上的路径
filename        - 定义文档/资源的名称
query           - 查询参数
fragment        - 即#后边的hash值，一般用来定位到某个位置

scheme://host.domain:post/path/filename?query#123456

从URL输入到页面展现到底发生什么？

  • DNS 解析:将域名解析成 IP 地址

    浏览器不能通过域名来找到对应的服务器，所以要将域名转换成ip地址

  • TCP 连接：TCP 三次握手

    syn = 1 seq = x

    syn = 1 ack = x+1 seq = y

    ack = y+1 seq = z

  • 发送 HTTP 请求

  • 服务器处理请求并返回 HTTP 报文

  • 浏览器解析渲染页面

  • 断开连接：TCP 四次挥手

    FIN =1 SEQ = U

    ACK = 1 ack = u+1 seq = v

    FIN = 1 ACK = 1 seq = w ack = u+1

    ACK = 1 seq = u+1 ack = w+1

CSS选择器

  1. 类型选择器（h1{}）
  2. 通配选择器（*{}）
  3. 类选择器（.wrapper{}）
  4. ID选择器（#unique{}）
  5. 标签属性选择器（a[title]{}）
  6. 伪类选择器（p:nth(1)-child）
  7. 伪元素选择器
  8. 后代选择器（article p{}）
  9. 子代选择器（article>p{}）
  10. 相邻兄弟选择器（h1+p{}）
  11. 通用兄弟选择器（h1 ~ p{}）

Vue响应式原理（源码分析）

非常好的文章，可重复阅读：juejin.cn/post/684490…

typeof 与 instanceof 有什么区别？

typeof 操作符返回一个字符串，表示为经计算的操作数的类型

typeof 可以精准判断出原始类型，但是不能精准地判断null和引用类型

typeof null

引用类型数据，用typeof来判断的话，除了function会被识别出来之外，其余都输出object

**typeof** NaN === 'number' *// 尽管它是 "Not-A-Number" (非数值) 的缩写*

判断一个变量是否存在

if(a){
 // Uncaught ReferenceError: a is not defined
}
if(typeof a !=='undefined'){
​
}

instanceof

instanceof 运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上，但判断对象一定要是对象实例

JS 浅拷贝、深拷贝

这里的东西要重点记录一下，因为一直以来我对浅拷贝的概念理解都是错误的！！！

js的深拷贝与浅拷贝是针对引用类型来说的，

浅拷贝：对一个对象进行浅拷贝，该对象下的基本类型属性会开辟新的空间，引用类型属性还是指向同一块内存空间。属于只进行了一层的复制，浅拷贝的对象和原对象一定程度上是会相互影响的

对象引用的直接赋值不是浅拷贝！！！！！

深拷贝：无限层级的复制，深拷贝的对象不会和原对象产生影响。

浅拷贝

  1. 使用Object.assign进行浅拷贝

    const obj = {
            name:'wang',
            obj1:{
                a:1
            }
        }
        const newObj = Object.assign({},obj)
        obj.name = 'xxx'
        console.log(obj==newObj);//false
        console.log(obj.name==newObj.name);//true 原始变量直接比较值，但事实上是开辟了新空间
        console.log(obj.obj1==newObj.obj1);//true 浅拷贝只能复制一层，更深层的只能复制地址

  2. 数组的slice和concat方法

    const arr = ['Wang','is','handsome']
        const newArr = arr.slice(0)//slice(start,end)两个参数都是可选，只有一个参数的情况下从start切割到尾，不会改变原数组，返回选中的元素
        console.log(arr,newArr);// ['Wang','is','handsome'] ['Wang','is','handsome']
        console.log(arr==newArr);//false

    const arr = [1,2,3,4]
        const newArr = [].concat(arr)
        console.log(arr==newArr);//[1,2,3,4] [1,2,3,4]
        console.log(arr,newArr);//false

  3. 数组静态方法Array.from

    const arr = ['lin','is','handsome']
const newArr = Array.from(arr)
arr[2] = 'rich'
console.log(newArr)
console.log(arr=newArr)//两者指向不同的地址

  4. 扩展运算符

    const arr = ['lin', 'is', 'handsome']
const newArr = [...arr]
​
arr[2] = 'rich' // 改变原来的数组
​
console.log(newArr) // ['lin', 'is', 'handsome'] // 新数组不变
​
console.log(arr == newArr) // false 两者指向不同地址
​
深拷贝

  1. 一行代码版本

    JSON.parse(JSON.stringify(obj))

    优点很明显非常的方便，缺点也很明显，会忽略掉undefined，symbol和function函数，无法解决循环引用的问题

    const obj = {
  a: undefined,
  b: Symbol('b'),
  c: function () {}
}
​
const newObj = JSON.parse(JSON.stringify(obj))
​
console.log(newObj) // {} 什么也没有 因为都忽略掉了
​

    const obj = {
  a: 1
}
​
obj.obj = obj
​
const newObj = JSON.parse(JSON.stringify(obj)) // 报错
​

    日常使用需要深拷贝简单对象的时候，会首选这个方法

    手写深拷贝

    function deepClone (target) { if (target === null) return target // 处理 null if (target instanceof Date) return new Date(target) // 处理日期 if (target instanceof RegExp) return new RegExp(target) // 处理正则

    if (typeof target !== 'object') return target // 处理原始类型

    // 处理对象和数组 const cloneTarget = new target.constructor() // 创建一个新的克隆对象或克隆数组 for (const key in target) { // 递归拷贝每一层 cloneTarget[key] = deepClone(target[key]) } return cloneTarget }

    function deepClone (target) {
  if (target === null) return target // 处理 null
  if (target instanceof Date) return new Date(target) // 处理日期
  if (target instanceof RegExp) return new RegExp(target) // 处理正则
  
  if (typeof target !== 'object') return target // 处理原始类型
  
  // 处理对象和数组
  const cloneTarget = new target.constructor() // 创建一个新的克隆对象或克隆数组
  for (const key in target) { // 递归拷贝每一层
    cloneTarget[key] = deepClone(target[key]) 
  }
  return cloneTarget
}
​

POST和GET的区别

 1）GET的数据在URL是可见的。POST请求是不显示在URL中的  2）GET请求对长度是有限制的，POST请求长度是无限制的  3）GET请求的数据可以收藏为书签，POST请求到的数据不可收藏为书签  4）GET请求后，按后退按钮、刷新按钮无影响，POST数据会被重新提交  5）GET的编码类型：application/x-www-form-url。POST编码类型：有很多种，   列举以下几种（不止）：

encodeapplication/x-www-form-urlencoded 
multipart/form-data 
复制代码

 6）GET历史参数会被保留在浏览器里，psot不会保存在浏览器中的。  7）GET只允许ASCII.post没有编码限制，允许发二进制的。  8）GET与POST相比，GET安全性较差，因为所发的数据是URL的⼀部分

avatar
文章
阅读
粉丝