关于前端:202112遇到的知识点总结

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')

<div ref="ref1"></div>

ref2.value = 'b'

11.css 选择器之如何抉择除最初一个元素外的其余元素

.tag:not(:last-child){} // 除最初一个元素外的其余元素

.tag:not(:last-child)::after {} // 除最初一个元素外的其余元素的 after 伪元素

12.v-model 参数

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

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

<input v-model.number="age" />

如果输出的是“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 构造和属性、办法

在子组合中须要用 defineExpose 定义暴露出的属性、办法

// 子组件
<div ref="a"></div>
const a = ref()
function test(){}
defineExpose({
    a,
    test
})

// 父组件
<son  ref="b"></son>
const b = ref()
onMounted(() => {console.dir(b.value.a)
    b.value.test()})