JavaScript使用reduce分组及合并数组的object对象
对象数组示例：var objects = [
{name:'group1', usedCount: 2, color:'red'},
{name:'group1', usedCount: 1, color:'blue'},
{name:'
JavaScript使用for...in迭代数组分析
for...in与其说是迭代，更恰当的说法应该是枚举。其目的是用来枚举object对象的属性，包括对象所继承的属性。有部分人会使用for...in来迭代数组，这是一种误用。以下对使用for...in迭代数组分析。问题一var a = ['a','b'];
a[5] = 'e';
for (var x in a
[译]Angular构造函数与ngOnInit的本质区别
在Stackoverflow上最受欢迎的其中一个Angular问题是构造函数与ngOnInit的区别，这个问题已经超过了100k的浏览量。在那我回答了此问题，但还是决定在这篇文章展开说明。这个问题的大部分回答以及网络里的文章都是集中在两者在使用上的不同，这里我想给出一个比较全面的比较，挖掘组件初始化的过程。JS/TS语言相关的区别我们先从一个与语言本身有关的最明显的区别开始。ngOnInit只是一
JavaScript检测浏览器支持的视频格式以及音频格式
不同的浏览器支持的视频/音频格式有所不同，为了在多个浏览器上兼容视频/音频的播放，需要使用JavaScript检测浏览器所支持的视频/音频格式。HTMLVideoElement和HTMLAudioElement继承于HTMLMediaElement，HTMLMediaElement的canPlayType()方法可以用来判断浏览器是否支持指定的多媒体格式。语法str = aud
CSS3：Flex布局
Flex是一种弹性布局，要分为两部分理解Flex：作用于容器（flex-container）的属性作用于容器里项目（flex-item）的属性Flex布局不同于块元素的垂直排列和行内元素的水平排列。Flex布局可以根据需要设定容器内的项目元素是水平还是垂直分布。设定了flex的方向后，我们就可以确定了Flex分布的主轴（main axis）以及交叉轴（cross axis）。主
JavaScript使用CryptoJS加解密
CryptoJS只一个JavaScript的加解密的工具包。它支持多种的算法：MD5、SHA1、SHA2、SHA3、RIPEMD-160 哈希散列，进行 AES、DES、Rabbit、RC4、Triple DES 加解密。CryptoJS的安装1、使用npm安装npm install crypto-js2使用Bower安装bower install crypto-jsCryptoJS的使用Cryp
CKEditor5 Observables
在CKEditor5中除了事件系统外，还有另一个重要的系统就是可观测对象,俗称Observable对象。此对象的属性是可观测的，一段对象的属性发生改变，将会触发一个事件，监听此事件的代码片段可以做出一些相应的操作。 CK5定义一个可观测对象import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin'
Angular装饰器——Decorators
最近有空学习了一下angular的基础知识，对于angular的装饰器有了一些理解。其实装饰器并非angular特有的，它是Typescript的语言特性。首先我们看看什么是装饰器 我们先看看Typescript官方的说明：装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必
初步理解RxJs
学习是一个由浅入深的过程，如果能够理解并掌握二八原则(帕累托法则)，那么我们对知识的学习定会事半功倍，甚至事半多倍。对基础知识的理解决定了对知识理解的深度。RxJs定义 RxJS是ReactiveX在JavaScript上的一个派生。ReactiveX是一个应用比较广泛的响应式
RxJs——创建型操作
我们在使用RxJs中，知道RxJs的操作分为两类，一类是创建型，比如of()，fromEvent()，from()等，还有一类是操作型，比如map()，filter()。而这两类操作的基础和心是一个叫做Observable的对象，如果对Observable不甚理解，需要快速理解的可以查看这一篇今天我们来学习第一类，尝试着自己实现一次。of()这个操作接收数组参数，返回一个Observable，一旦
RxJs——操作型
我们在使用Observable的时候，常常会涉及到一些操作，比如map()，filter()等，为了理解原理，今天我们在前几节(初步理解RxJs , RxJs——创建型操作 )的基础上，用两种不同的方式实现以上两个函数，希望能给大家提供借鉴。map代码实现废话不说，先来实现mapmap(fn) {
return new MyObservable(observer => {
RxJs——map，filter第二种实现
上一节我们实现了map和filter函数，我们将这些函数都挂载在MyObservable对象上，这里存在一个问题，类似map和filter这样的操作型函数很多，所以不可能将他们都挂载在MyObservable对象上，因此，这里出现了第二种实现。 这些操作函数能串联起来的本质就是能够形成嵌套调用，因此我想到了使用pipe，pipe的本质是接收一个 RxJS 操作符的运行结果作为参数，并返回
RxJs——subject理解一
什么是subject首先我们来理解什么是subject，按照官方的定义：A Subject is a special type of Observable that allows values to be multicasted to many Observers.Subjects are like EventEmitters.从定义我们看出subject就是一种允许发送值到多个观察者的特殊类型的
RxJs——Subject理解二
上一节我们对subject有了初步理解，今天我们继续学习subjectReplaySubject介绍这个ReplaySubject之前，我们说下一种使用场景1、我们创建一个subject2、在应用的某个地方，我们向subject推送值，但此时没有订阅3、在某个时点，有第一个观察者开始订阅4、我们期望观察者能接收之前主题推送的值（可能是全部值或者时其中一个）5、实际上啥都没发生，因为主题不能存储记忆
RxJs——错误处理（二）
从前文我们知道，错误处理有两种方式，一种是重新抛出一个错误，另一个是提供一个默认的回调值。今天我们介绍错误处理的另一种方式，先来看看重试。重试策略有一点需要记住，一旦流出现了错误，我们不能恢复它。但是没有什么能阻碍我们订阅其派生类对应的Observable，并且创建一个新的流。这种策略的工作原理是：1、我们将获取输入Observable并且订阅它，这将创建一个新的流。2、如果流没有出错，我们将在输
RxJs高阶运算——exhaustMap
上一节我们介绍了switchMap的特点，只要一个新的Source Observable到来，我们就订阅新的Observable，那么可能会有另一种情况就是，我们订阅第一个Source Observable,只有当这个Observable都完成的时候，如果之前有新的Observable到来，我们都忽略，这种情况就是我们今天介绍的exhaustMap.为了学习exhaustMap，我们先得理解Exh
webpack初步理解
Webpack 是一个非常强大且有趣的工具，被视为当今许多 Web 开发人员用来构建其应用程序的技术中的基本组件。然而，许多人会认为使用它是一个相当大的挑战，主要是因为它的复杂性。 webpack bundle过程图表webpack bundle processmodules模块是一个文件的升级版本。一个模块，一旦创建并且构建之后，除了包含原始的文件代码之外，还有一些其他信息，比如模块使
RxJs——takeUntil
今天我们继续学习takeUntil运算符。我们知道take运算符是主要是限制发送一定次数的值之后就结束发送；按照这样的思路，我们猜想，这个takeUntil也是发送一定的值之后应该结束，那么具体是什么呢？它将值从源 observable 传递给观察者，直到提供的称为通知 observable 发出其第一个值。它订阅源Observable，然后会监测源Observable；它还订阅了可观察的通知Ob
RxJs——takeWhile
上一节我们学习了takeUntil这个运算符,今天我们来看看另一个类似的运算符takeWhile.这个运算符的特点是：这个运算符接收一个谓词函数，函数的参数收到的就是流对象的值，如果谓词函数返回true,则直接将此值传递给观察者，否则，取消对源Observable'的订阅，然后完成。我们看看这个操作符的动态图：我们来分析一下：1、订阅源 observable2、当一个新值从源 observable
React 18 createRoot方法：ReactDOM.render is no longer supported in React 18
自React 18开始，ReactDOM.render被废弃，使用React 18会以兼容模式运行旧代码，并且会有类似以下的警告：Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will beh
Angular CLI常用命令——创建模块（ng generate module）
版本：v13基本命令ng generate module <name> [options]简写ng g m <name> [options]选项说明--flat：在当前项目的根目录创建文件，bool，默认false--module：简写-m，和--route一起使用，声明懒加载挂载的路由模块--project：项目名，string--route：懒加载模块的路由路径，这个需
MutationObserver初步理解
最近在学习怎么样给网站埋点，举个例子来说，我在文章中有了一些评论的信息，我需要知道这些评论信息是否被点击和查看，一种常用的做法就是在这些标签上绑定点击事件，然后在事件回调函数中向后台发送信息，从而判断这个文章中的评论是否有被点击和查看。今天我将尝试采用另外一种做法，来判断文章中的评论有没有被点击查看过。首先，我们需要知道的是用户在点击评论标签的时候，文章对应的dom是否发生变化？其次，我会用Mut
Angular依赖注入注解inject()和注解@Inject
注解@InjectAngular提供了注解@Inject来向组件或服务注入实例，例如：@Injectable()
class AService{
constructor(@Inject(BService) bService:BService) {
}
}这等同于添加访问修饰符后去掉注解，这也是我们常用的方式，上面示例可改为：@Injectable()
class AService{
TypeScript对优化代码最有用的几个工具类型（Utility Type）
TypeScript提供了好几个工具类型，它们主要用于常见的类型转换。这里介绍让代码优化非常有用的几个工具类型：Partial，Required，Record，Pick，Omit和Exclude。PartialPartial顾名思义，取部分。它的作用是把已有类型里的所有属性变为可选。示例interface User{
id:number;
name:string;
atavarUrl:
数据加载中