碎片化知识整理

P_AMing
200 阅读7分钟

js

Object方法

Object.entries() 返回一个给定对象可枚举属性的键值对数组

操作符

?. 可选链操作符 在引用对象为空，null，undefined的情况下不会引起错误，会返回undefined
?? 空值合并 当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数
??= 逻辑空赋值 (x ??= y)当x是空值(null,undefined)时对其赋值y
! 取反 会隐式类型转换为布尔类型
!! 双向取反

?? 与 ||运算符的区别 当左侧的值为'' ， 0时有着不同的效果

let a = 0 || 18 // 值为18
let b = 0 ?? 18 // 值为0
let c = '' || 18 // 值为18
let d = '' ?? 18 // 值为''

object.is 与 === 操作符 对比

console.log(NAN === NAN) // false
console.log(Object.is(NAN, NAN)) //true 可以正确的判断nan
conso.log(+0 === -0) // true
conso.log(-0 === 0) // true
conso.log(+0 === 0) // true
conso.log(Object.is(+0, -0)) // false 可以正确的判断0,-0,+0
conso.logObject.is(-0, 0)) // false
conso.log(Object.is(+0, 0)) // true

.call .bind .apply方法

相同点：
function对象的方法
都可以改变this指向
接受的第一个参数都是this要指向的对象
都可以传递参数
不同点
call和bind传入参数相同，多个参数依次传入
apply只有两个参数，一个this指向对象，一个参数为数组
call和apply会直接调用函数，bind不会立即调用函数，而是返回一个修改了this后的函数

typeof 和 instanceof的区别

typeof 操作符用于检查一个变量的类型，它返回一个字符串，表示该变量的类型。
console.log(typeof 变量)

instanceof 操作符用于检查一个对象是否是某个类的实例，它返回一个布尔值。
console.log(变量 instanceof 类)

类数组转为数组

类数组是指那些看起来像数组但实际不是数组的对象。它们通常具有以下两种特点：

  1. 生成的对象通常包含一个 length 属性，该属性表示该对象中元素的数量。
  2. 它们通常具有以数字为键的属性，这些属性的取值范围通常从 0 开始，按顺序递增，但是它们并没有数组所具有的一些方法，如 push()、pop()、slice() 等等。

常见的类数组对象包括 arguments 对象、DOM 元素集合（如通过 document.querySelectorAll() 获取到的一组 DOM 节点）、函数调用时返回的参数列表等等。

// 转化为数组的几种方式

// Array.form
Array.form(arguments)
// 扩展运算符
[...arguments]
// Array.prototype.slice.call()
Array.prototype.slice.call(arguments)

let暂时性死区例子

let a = 1
function demo (){
    console.log(a) // 报错
    let a = 2
}

因为它在局部作用域中使用let声明的变量a之前就调用了a。在JavaScript中，变量的声明提升并不适用于let和const变量。虽然全局作用域中存在一个值为1的变量"a"，但是demo函数中也有着一个名叫"a"且带有块级作用域（只在函数内部可见）的变量。当调用console.log()时，它在该变量无法访问之前就引用了"a"。因此，程序在访问已经被声明但未初始化的变量"a"之前就抛出了一个引用错误(TypeError)。

箭头函数与普通函数的区别

箭头函数没有arguments，new.target
箭头函数没有自己的this值是通过词法作用域链（Lexical Scope）来获取父级执行上下文的this值，普通函数this指向调用时所在的作用域。
箭头函数不能用作构造函数，即不能实例化对象。
普通函数可以通过call，bind，apply改变this指向，箭头函数不可以

every / find / some 数组查找方法

  • every 当数组中所有元素都满足条件返回true，否则返回false（当数组为空的时候会返回true，对于空数组来说，它被认为是 "什么都满足" 的，因为没有元素能够违反条件。）

  • find 返回第一个符合条件的元素值，没有则返回undefined

  • some 判断是否有符合条件的元素，有返回true，否则返回false

try catch只能捕获同步执行代码的错误

try { 
    setTimeout(() => { 
        throw new Error('err') 
    }, 200); 
} catch (err) { 
    console.log(err); 
}

CSS

css包含块

关于包含块的定义，引用MDN定义：

一个元素的尺寸和位置经常受其包含块(containing block)的影响。大多数情况下，包含块就是这个元素最近的祖先块元素的内容区，但也不是总是这样。

由根元素生成的包含块叫做 初始包含块（initial containing block) 布局和包含块 - CSS：层叠样式表 | MDN (mozilla.org)

清除浮动

清除浮动是指通过一些 CSS 技术来解决浮动元素引起的高度塌陷问题。有以下几种清除浮动的方法：

  1. 使用 clear 属性：在浮动元素后面添加一个空元素，给这个空元素设置 clear 属性。
  2. 使用 overflow 属性：给浮动元素的父元素加上 overflow:hidden 或 overflow:auto 属性。
  3. 使用 clearfix hack：给浮动元素的父元素添加一个类名为 clearfix 的样式，然后在 CSS 中定义该样式。
  4. 使用伪元素：给浮动元素的父元素添加一个伪元素（::after），并将其 display 属性设置为 table 或 table-cell。
  5. 给父元素添加一个空div

focus-within伪类

当一个元素获得焦点，或该元素的后代元素获得焦点就会触发。相关文章

滚动条跟随内容滚动（实时滚动至最后一条）

// 获取节点
let bottomContentLeft = document.querySelector('.bottomContentLeft')
this.$nextTick(() => {
    // scrollTop 滚动距离（默认为0） scrollHeight 内容高度像素值 px
    bottomContentLeft.scrollTop = bottomContentLeft.scrollHeight
});

html

img

当img指定了宽度后，图片会被等比例缩放了；
如果从性能的角度考虑，建议你同时给出图片的宽高，因为替换型元素加载完文件后，如果尺寸发生变换，会触发重排版

img 标签还有一组重要的属性，那就是 srcset 和 sizes，
它们是 src 属性的升级版。这两个属性的作用是在不同的屏幕大小和特性下，使用不同的图片源。

pictrue

picture 元素可以根据屏幕的条件为其中的 img 元素提供不同的源，它的基本用法如下：

<picture>
// 当屏幕宽度大于等于600像素时，选择此图片资源进行显示。
  <source srcset="image-wide.png" media="(min-width: 600px)">
// 小于的时候选择下面这张图片
  <img src="image-narrow.png">
</picture>

video

<!- 浏览器将根据它的支持情况自动选择并播放第一个可用的视频源。如果浏览器不支持任何一种视频格式，
    将会显示“Your browser does not support video.”的文本信息。 ->
<video controls="controls" >
  <source src="movie.webm" type="video/webm" >
  <source src="movie.ogg" type="video/ogg" >
  <source src="movie.mp4" type="video/mp4">
  You browser does not support video.
</video>

VUE

常见的事件修饰符

  • .stop:等同于JavaScript中的event.stopPropagation()，防止事件冒泡
  • .prevent:等同于JavaScript 中的event.preventDefault()，防止执行预设的行为(如果事件可取消，则取消该事件，而不停止事件的进一步传播)
  • .capture : 与事件冒泡的方向相反，事件捕获由外到内
  • .self :只会触发自己范围内的事件，不包含子元素
  • .once :只会触发一次

env文件配置

文件命名

  • .env.development 开发环境
  • .env.production 正式环境

参数规则

在vue中属性名必须以 VUE_APP 开头；注释以#开头

image.png

使用

package.json
  • npm run serve 默认加载 mode 为 development 的环境变量配置文件.env.development;
  • npm run build 默认加载 mode 为 production 的环境变量配置文件.env.production;
  • npm run build:prod 加载 mode 为 prod 的环境变量配置文件.env.prod;
  • npm run build-prod 加载 mode 为 prod 的环境变量配置文件.env.prod;
  • "test": "vue-cli-service serve --mode test" 加载mode为test的环境配置文件.env.test
vue / js 文件读取
console.log(process.env)

image.png

this.http.get('url',{baseURL: process.env.VUE_APP_API_BAS_URL)

VITE

手动分包

分包策略就是把一些不会经常更新的文件，进行单独打包处理（vue，lodash）

不分包的话他会将我们自己写的代码 和 node_modules打包成一个文件。而每当代码发生改变后，打包后文件的hash值都会改变，重新部署代码后，浏览器都会重新请求资源文件。造成不必要的资源浪费

// vite.config.js
export default defineConfig({
    plugins: [vue()],
    build: { //打包配置选项
        rollupOptions: {
            manualChunks(id) {
                if(id.includs('node_module')) {
                    return 'vendor' // 包名
                }
            }
        }
    }
})

网络请求

axios 响应/请求 拦截器

import axios from 'axios'
const server = axios.create({
  baseURL: '',
  headers: {
    'Content-Type': 'application/json',
  }
});

// axios 请求拦截器 添加请求头配置 如：sign、i18n、project、token
server.interceptors.request.use(config => {
  config.headers['i18n'] = cookie.getCookie('lang')
  config.headers['token'] = cookie.getCookie('token')
  config.headers['project'] = 'xxx'
  let secret = cookie.getCookie('secret')
  // 对config.params中的参数进行遍历检查，如果值为undefined、null或空字符串，则从params中删除该参数。
  for (let key in config.params) {
    if (config.params[key] === undefined || config.params[key] === null || config.params[key] === '') {
      delete config.params[key]
    }
  }
  return config // 必须返回
})

//axios 响应拦截器 可以做token失效等处理
server.interceptors.response.use(res => {
  if (res.headers['content-type'].includes('excel')) {
    return res
  } else {
    return res.data
  }
})

export default server

TCP三次握手四次挥手 + UDP协议

B站笔记 三次握手，确认连接

image.png

四次挥手，断开连接 image.png

avatar
文章
阅读
粉丝