JavaScript数组常用方法解析和深层次js数组扁平化-编程思维

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

JavaScript 单线程之异步编程-编程思维

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

JavaScript中if语句优化和部分语法糖小技巧推荐-编程思维

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

canvas API总结-编程思维

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

canvas动画:自由落体运动-编程思维

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

canvas实现水波纹效果-编程思维

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

一次日语翻译的Chrome插件开发经历-编程思维

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

Js 数组去重-编程思维

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

Js 对象-编程思维

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

Js 构造函数的继承-编程思维

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

Js 防抖与节流-编程思维

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

js--promise、async 和 await 相关知识总结-编程思维

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

函数式编程-编程思维

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

读 Angular 代码风格指南-编程思维

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

Vue3 与依赖注入-编程思维

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

理解 Angular 服务-编程思维

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

JavaScript 任务池-编程思维

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

如何使用 Javascript 将图标字体渲染为图片-编程思维

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