之前有使用过 flat()
方法,但是一直不知道 flatMap()
方法,在使用 map()
方法组装集合的时候,在组装完成之后还要链式调用一下 flat()
,如果可以知道 flatMap()
代码还能精简一点,也方便递归返回的数组内容。
本来是上个月发现的,但隔了一个月才有时间写,已经想不起来当时怎么发现的 flatMap()
这个方法了…
就直接跳过前置场景,直接开始聊这两个扩展方法吧。
之前有使用过 flat()
方法,但是一直不知道 flatMap()
方法,在使用 map()
方法组装集合的时候,在组装完成之后还要链式调用一下 flat()
,如果可以知道 flatMap()
代码还能精简一点,也方便递归返回的数组内容。
本来是上个月发现的,但隔了一个月才有时间写,已经想不起来当时怎么发现的 flatMap()
这个方法了…
就直接跳过前置场景,直接开始聊这两个扩展方法吧。
一直没有怎么用过 Vue 的 过滤器 API,都是直接用 AntD Pro 当中提供的数字千分格式化、时间格式化之类的,没有自己去声明过,主要是因为 Array.prototype.filter
的先入为主,一直把 vue.filter
理解成为了筛选,而不是过滤器。
其实,vue.filter
是借鉴了 Linux 当中的 Pipe 符号 (|
) 来处理数据 ,然后借用了 filter
这个名字:
利用 Linux 所提供的管道符 “
|
” 将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入
其实我觉得如果直接用 pipe
来命名其实就更好理解了,但是也许是因为前端圈子接触到 pipe
的人并不多,使用 filter
这个熟悉的单词可能更加容易让大众接受。
使用起来确实很方便,用 |
符号分隔就行,会按照 从前往后的顺序 依次 传入过滤器,然后返回转换后的值。
等到后来再遇到适合的场景想起来使用 filter
,但又因为项目的历史原因没有去使用,因为自己都是局部使用 computed
计算 和 方法调用返回 来处理(也是Vue3所推荐的替代过滤器的方式)
群里突然又聊到了CSS样式的权重,这个话题每隔一段时间就会出现一次,但是每次都去搜索找选择器权重的文章分享有点太麻烦了,
主要是配图,想要找到自己记忆里的那张图真的很麻烦😂,所以还是自己整理一篇,以后直接分享自己的笔记就好了。
其实权重计算这个东西不麻烦,就是分 4
类:
inlineStyle
: 行内样式#ID
: ID选择器.Class
: 类,属性和伪类选择器Element
: 元素和伪类元素选择器简单的权重比较 inline style > ID > Class > Element > *
这个应该不需要说了吧,主要是多个选择器混合使用时计算的问题。
在思否上遇到一个问位运算符的问题 字符串的位运算,是怎么执行的,我也挺好奇的,就是为啥字符串进行位运算的时候返回的结果是 0
,索性在解答这个问题的同时把位运算符都整理一遍。
那么先来整理一下位运算符,最后再说明为什么字符串的处理结果为 0
该来的一天还是来了,两年前立的Flag还是到了,现在在跟进项目配套的小程序开发,但对于写惯了 Stylus 的我,真的是太煎熬了,每次都忘记写冒号和分号…
所以就想着翻翻开发文档看 .wxss
支持不支持CSS预处理器的写法,比如 SCSS
。明显这是不可能的,官方也没有计划支持,所以还是得自己动手。
.wxss
文件。这段时间项目迭代比较快,所以很多时候对于记录的状态和类型判断我都是使用的 魔术字符串 的形式,但是这样就与代码形成了 “强耦合”, 不利于后期的维护。
例如这样的代码结构:
<!-- 用vue template来举例 -->
<template>
<table>
<!-- 其它结构 -->
<td>
<!-- 直接使用状态值判断 -->
<a @click='xxx' v-if='record.status === 0'>操作A</a>
<!-- 使用数组下标判断 -->
<a @click='xxx' v-eles-if='record.status === status[1].key'>操作B</a>
<a @click='xxx' v-else'>其他操作</a>
</td>
<!-- 其它结构 -->
</table>
</template>
特别是最近一整个分类的类型和状态的都变更了,所以在业务逻辑内的魔术字符串也需要一个一个文件去同步修改,大部分的都被替换了,但还有一些零碎的地方没有被修改到,导致不断有 BUG 被提上来,这就很头疼了。
所以我就想者怎么把业务逻辑内的魔术字符串使用一种方式替换掉,最开始我想法是把状态集中起来进行管理
最近在一些 Demo 中经常会看到 Symbol()
这个东西,例如:
var race = {
protoss: Symbol(),
terran: Symbol(),
zerg: Symbol()
}
就只能记得大概了,就是赋值一个独特的值,但是这个值具体是什么我想不起来了。
所以还是记个笔记加深下印象,省的看了又忘。
ES6 引入了一种新的原始数据类型
Symbol
,表示独一无二的值。它是 JavaScript 语言的第七种数据类型
今天在一个需求里边遇到一个使用 MAP 数据结构的场景,就去解了一下 ES6 的新数据结构
ECMAScript 6 内提供了 4种 新结构 Set
, WeakSet
, Map
, WeakMap
,虽然已经是5年前的知识了,但是对于我来说还是新🤣
本来想先聊 Map
的,但是仔细看了阮一峰老师的文章之后发现,确实是要从 Set
开始讲
今天洗澡的时候在听 饥人谷的模拟面试 (五) 的时候,一直觉得这次面试的学生有点差,如果是我来面话可能已经让他回家了,但是 方方老师 很有耐心,在中间问道 .sync
的时候我 ???? 完全没有印象了。
正好已经有2个月没有更新了,所以复习一下 v-bind
的三个修饰符 [ .prop
, .camel
, .sync
]
一直以来,我对于 VueJS 中对于使用 ref
注册的组件,在使用 $refs
调用时,为什么有时候是一个 DOM元素/组件实例,是时候会是一个实例数组。
所以在很长一段时间内我觉得 ref
注册的的组件在使用 $refs
调用时有很大的不确定性,虽然我的弹窗组件一直都是用的 $refs.modal.open()
来打开的。
直到前一段时间,我在一个场景下想在 v-for
循环渲染的组件下 slot
模板中想使用 ref
注册成一个实例集合来调用时,发现怎么样重写返回的都只是一个组件实例,而不是一个组件实例集合。
所以有了这样一篇笔记。