2021.12遇到的知识点总结 2021.12遇到的知识点总结

1.将url查询字符串转为对象

Object.fromEntries(new URLSearchParams('?foo=bar&baz=qux')) // { foo: "bar", baz: "qux" }

2.对象和map的互相转换

const map = new Map().set('foo', true).set('bar', false); Object.fromEntries(map) // { foo: true, bar: false }const obj = { foo: 'bar', baz: 42 }; const map = new Map(Object.entries(obj)); map // Map { foo: "bar", baz: 42 }

3.process.env.NODE_ENV process.env.NODE_ENV 是用来区分本地开发环境和打包后的环境的。
development 开发环境，production 生产环境
4.实例方法 vs 静态方法静态方法：类和属于类的方法可以直接调用的方法，可以用类名.方法名调用
实例方法：实例化类后的对象的调用方法
5.类数组对象类数组对象的本质特征只有一点，即必须具有length属性。
6.arr.at() 数组不支持负索引，因为[]不仅用于数组还可以用于对象，对于对象来说，[]里面的是键名，所以数组的[]里面不能是负数。
新提案：arr.at()可以传一个负数的参数。
7.str.padStart 补全字符串，可以用来补全时间格式或提醒字符串格式

day.padStart(2, '0')

'09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

8.el-popover的弹出框位置如果el-popover高度过高或位置在页面边缘，会导致页面出现滚动条，解决办法：
设置位置不合适时的替代选项fallback-placements
9.vue3的computed传入参数

const x = computed(() => (val) => val + 1)

10.vue3中声明响应式对象的ref和指向dom引用的ref

const ref1 = ref(null) const ref2 = ref('a')ref2.value = 'https://www.it610.com/article/b'

11.css选择器之如何选择除最后一个元素外的其他元素 .tag:not(:last-child){} // 除最后一个元素外的其他元素
.tag:not(:last-child)::after {} //除最后一个元素外的其他元素的after伪元素
12.v-model参数

13.引入类型 XXX only refers to a type, but is being used as a value here

import { XXX } from 'xxx'; 改为： import type { XXX } from 'xxx';

14.template与v-show template上不支持使用v-show，可以用v-if
15.按键修饰符.number

如果输入的是“12a”，显示的只有“12”，
如果输入的是“a12”，显示的还是“a12”，数字前面的字符串不能被过滤。
16.Date对象如果要判断x分y秒是否大于a分b秒，可以先用new Date()转换成日期类型，然后再用>运算符判断。
如果需要判断x分y秒是否在a分b秒和c分d秒区间内，转换成Date类型也很方便判断。

new Date(); new Date(value); new Date(dateString); new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

17.对象转换成url参数字符串

var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2}); 其他URLSearchParams参数类型： // Pass in a string literal var url = new URL('https://example.com?foo=1&bar=2'); // Retrieve from window.location var url2 = new URL(window.location); // Retrieve params via url.search, passed into ctor var params = new URLSearchParams(url.search); var params2 = new URLSearchParams(url2.search); // Pass in a sequence var params3 = new URLSearchParams([["foo", 1],["bar", 2]]); // Pass in a record var params4 = new URLSearchParams({"foo" : 1 , "bar" : 2});

18.vue3获取子组件dom结构和属性、方法 【2021.12遇到的知识点总结】在子组合中需要用defineExpose定义暴露出的属性、方法