前言 数组作为在开发中常用的集合，除了for循环遍历以外，还有很多内置对象的方法，包括map，以及数组筛选元素filter等。 注：文章结尾处附深层次数组扁平化方法操作。 作为引用数据类型的一种，在处理数组Array的时候，我们需要考虑到深拷贝和浅拷贝的情况 可以参考以下文章 javaScript中深拷贝和浅拷贝简单梳理 深度解析javaScript常见数据类型检查校验 常用数组操作方法

Js 单线程之异步编程 先了解一个概念，为什么 JavaScript 采用单线程模式工作，最初设计这门语言的初衷是为了让它运行在浏览器上面。它的目的是为了实现页面的动态交互，而交互的核心是进行 Dom 操作，这也就决定了必须使用单线程模式，否则就会出现很复杂的线程同步问题。假如有两个同步线程工作，其中一个线程进行了新增 demoA，另一个线程进行了删除 demoA，此时浏览器就无法明确以哪个线程

前言 在前端日常开发过程中，if else判断语句使用的次数应该是比较频繁的了，一些较为复杂的场景，可能会用到很多判断，在某个代码块使用很多if else时，代码会显得较为冗余，阅读起来不够清晰。 除了if else，在开发过程中，还经常使用 逻辑运算符 && || 以及三木运算符? : 等。 if else 基本使用 let name = "zhangsan"; if (n

javascript gsap 动画2种常用写法   import gsap from "gsap";   gsap.to(".ball", { keyframes: { "0%": { yPercent: 0, scaleX: 1, scaleY: 1 }, "7%": { yPercent: 5, scaleY: 0.9, scaleX: 1.1, ease: "s

从简单的基本图形，到复杂炫酷的动画，通过canvas元素获取的2D图形渲染上下文CanvasRenderingContext2D，能够使用丰富的API来进行图形绘制。这篇文章将会总结在之前的canvas教程中用到的所有渲染上下文的API。 可以参考之前的教程： 如何绘制基本图形可以参考：canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考：canvas图形变换 如何设置基本图形颜色和样式

经过前面的文章，我们已经能够在canvas画布上画出各种炫酷的图形和画面，但是这些画面都是禁止的，怎么样才能让他们动起来呢？ 如何绘制基本图形可以参考：canvas基本图形绘制 如何对基本图形移动旋转缩放可以参考：canvas图形变换 如何设置基本图形颜色和样式可以参考：canvas样式和颜色 如何使用外部图片以及图形组合可以参考：canvas使用图片，图形组合以及裁剪 canvas如何保存和加

本文将会从水波的基本原理开始，详细讲解在canvas中模拟水波扩散，分析并计算水波的能量分布，并通过振幅模拟水波对图像的折射效果，最后实现水波特效。 水波基本原理 首先复习一波高中物理知识。 波是指振动的传播。波的传播方向与质点振动方向垂直的为横波，相同则为纵波，水波是横波和纵波的叠加。 对于水波这种波，我们在实现这个特效的时候，需要考虑到下面的特性： 圆形波：当你投一块石头到水池中时，你会看到

序言 去年7月刚过了日语N2，想着今年考个N1，为了加深日语文化的了解，还有学习日语，平时免不了经常上日语网站。 但是毕竟水平有限，所以不免遇到不认识的单词，日语单词的一个特点就是很多单词你知道是什么意思，但是不知道怎么读。 比如：“簡素な構造” 中的第一个词：“簡素”，很显然就是“简单，朴素的意思”，但是你肯定不知道它的读音是：“[かんそ]①”。 以前遇到这样的词的时候，就会在沪江小D网页版上

sort⽅法接收⼀个函数作为参数，这⾥嵌套⼀层函数⽤来接收对象属性名，其他部分代码与正常使⽤sort⽅法相同. var arr = [ {name:'zopp',age:0}, {name:'gpp',age:18}, {name:'yjj',age:8} ]; function compare(property){ return function(a,b){

Js 数组去重 探讨几种数组去重的方法，多几个思路和解题方法终归是好的。 一、双循环for嵌套 (ES5常用) 比较简单的方法，外层循环元素，内层循环检查是否重复，当有重复的值时，就删除掉。 var arr = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, Na

Js 中的对象 在 JavaScript 中万物皆对象，比如：字符串、数组、日期等等。但是 JavaScript 又不是一种真正的面向对象编程（OO）语言，因为 ECMAScript（ES6之前） 中没有类的概念，因此它的对象也与基于类的语言中的对象有所不同。 ECMA-262 把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”大白话来讲就是：“对象就是拥有属性和方法的数据”

Js 构造函数的继承 在上一篇 文章 中讲述了 Js 对象、构造函数以及原型模式，这篇文章来讨论下 JavaScript 的继承。 继承是 OO 语言中的一个最为人津津乐道的概念。许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。如前所述，由于函数没有签名，在 ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承

Js 防抖与节流 【概述】防抖和节流算性能优化的知识，所以记录下防抖与节流，从概念、使用场景到代码的简单实现。 比如：监听滚动，基本每个网站都会有返回顶部的按钮，当用户下拉到一定高度时，会出现返回顶部按钮。那我们现在写一下这个功能代码如下： function showTop() { var scrollTop = document.body.scrollTop || document

前言 　　promise 是前端开发人员必须掌握的知识点，本文来总结一下相关学习笔记。 正文 　　1、什么是prommise，promise 解决了什么问题 　　a、promise 是什么 　　Promise 是承诺的意思，承诺它过一段时间会给你一个结果。Promise 是一种解决异步编程的方案，相比回调函数和事件更合理和更强大。从语法上讲，promise 是一个对象，从它可以获取异步操作的消

函数式编程 为什么要学习函数式编程以及什么是函数式编程，包括函数式编程的特性（纯函数、柯里化、函数组合等） 函数式编程就是利用纯函数来实现一些细粒度的函数，再通过函数的组合把这些细粒度的函数组合成为功能更强大的函数 为什么要学习函数式编程 函数式编程是非常古老的一个概念，早于第一台计算机的诞生。有兴趣的同学可以自行搜索，那我们为什么还要学习函数式编程，基于以下几点来简单说明下： 函数式编程是随着

读 Angular 代码风格指南 本文写于 2021 年 1 月 17 日 原文地址：Angular 文档 该文章拥有完整的代码风格指南——大到如何编排文件夹，小到如何进行变量命名都涉及。但是与 ng 略有绑定，所以这里整理一下可以单独拿出来的通用部分。 单一职责 请坚持每个文件只定义一样东西（例如服务或组件），并且把文件大小限制在 400 行代码以内。 小文件通常非常容易阅读、维护，并能防止在

Vue3 与依赖注入 本文写于 2021 年 2 月 19 日 在 React 中，我们可以通过 context 与 useContext 实现单例、注入……等诸多特性。 详细请看上一篇文章：如何利用 React Hooks 管理全局状态. 例如： const SomeService = createContext(null); const useRootSomeService = () =&

理解 Angular 服务 本文写于 2021 年 3 月 29 日 理解 Angular 服务 什么是服务 服务写法 原理简述 提供服务 1. 在服务中注册 2. 在 module 中注册 3. 在组件中注册 该在哪里注入服务 什么是服务 angular 的最佳实践推荐业务逻辑要尽量分门别类的抽离为一个个的 Service。 那么到底什么是 Service 呢？ service 意为服务

JavaScript 任务池 本文写于 2022 年 5 月 13 日 线程池 在多线程语言中，我们通常不会随意的在需要启动线程的时候去启动，而是会选择创建一个线程池。 所谓线程池，本意其实就是（不止这些作用，其余作用可以自行查阅）： 节省操作系统资源 限制最大线程数。 对于 JavaScript 来说，虽然不存在“启动线程”这种问题，但我们还是可以通过类似的思想，来限制我们做异步操作的数量。

前言 在软件开发中肯定要用到图标，比如下图的 Groove 音乐中就用到了许多图标。一种获取这些图标的方法是把 Groove 音乐截个图，然后熟练地开启 Photoshop，开始抠图。这种方式很逊，效率也很低（虽然我刚开始就是这么干的）。 如果打开 C:/Program Files/WindowsApps（需要修改权限才能进入），可以发现几个名字里带 ZuneMusic 的文件夹，其中的某一个