多啦的博客

想要实现这样一个需求，给定一个输入框和按钮，点击按钮时会将输入框的内容复制到剪贴板，方便用户操作。该如何实现呢？

JavaScript中的高精度运算

在群聊里看到一位同学要实现这样一个需求，点击按钮，弹窗回收到按钮的位置。实现这样一个小动画，群里的大神给出了一个解决方案，自己记录一下，并进行了一点改进，以备不时之需。

JavaScript中函数参数调用时：基本类型是传值调用，引用类型是传共享调用

连等赋值面试题

实现Echarts双Y轴刻度对齐

数组中的空位 JavaScript中数组有空位的概念，也就是一个数组的位置上没有任何的值，生成的方式有四种： （1）直接定义 let arr = [1, , 3]; // [1, empty, 3] （2）删除属性 let arr = [1]; delete arr[0]; // [empty,]; （3）使用new Array方法 new Array(2); // [empty, empt...

元素可见性 页面的可见性可以用document.visibilityState或者document.hidden获得，通过document.visibilitychange来监听页面可见性的变化，但是对于页面的元素的可见性却只能手动通过位置判断。 例如下面这个例子 需要监听scroll事件，根据target元素的是否出现，来更改顶部的文字和样式。由于target内嵌了几层，所以判断时需要通过ge...

mouseover/mouseout与mouseenter/mouseleave的区别以及模拟

首先看最简的题目： for(var i=0; i++； i<2) { setTimeout(() => console.log(i)) } 输出结果是什么？ 由于i是通过var定义的，它是一个全局变量，当log的时候内存中只存在一个i，并且这个i通过循环已经变成了2，所以输出结果是输出两次2 对题目进行改造。将var换为let: for(let i=0; i++；...

以美图的图片处理为例子，学习JS中对图片的处理。处理图片时需要使用canvas 1 图片的跨域 使用canvas处理图片，首先需要加载图片，如果是在线图片需要针对图片进行跨域的处理。具体的处理方法是： 在图片服务器上设置跨域头，并且在前端加载图片之前将<img>标签的crossOrigin设置为* 这样做的原因是： 尽管不通过CORS就可以在画布中使用图片，但是这会...

1 form标签 <form>标签用于为用户输入创建HTML表单，向服务器传输数据。 表单能够包含input元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含menus、textarea、fieldset、legend和label元素。 注释：form 元素是块级元素，其前后会产生折行。 <form id="myForm" action="htt...

在上传图片的过程中，如果耗时较长，如果能够给用户一个进度的提示，会让用户体验更加良好。做了几个比较常见的上传进度提示的demo： 原理 这几个demo是在Vue框架中完成的，使用了axios发送http请求，原理和简单，都是获取上传进度值，控制视图状态，其他就是表现形式的不同。 关键点就是onprogress这个事件，它是XMLHttpRequest对象的一个回调函数，在上传或者下载...

1 什么是JWT JWT是JSON WEB TOKEN的缩写，是为了在网络应用环境建传递声明而执行的一种基于JSON的开放标准。该Toekn被设计为紧凑并且安全的，特别适用于分布式站点的单点登录（SSO） 2 传统的session认证 传统的session认证是为了让我们的而英勇能识别是哪个用户发送的请求，需要在服务器存储一份用户的登陆信息，这份登陆信息会在返给用户的响应时传递给浏览器，...

简介 bcryptjs是一个第三方加密库，用来实现在Node环境下的bcrypt加密 bcrypt，是一个跨平台的文件加密工具。由它加密的文件可在所有支持的操作系统和处理器上进行转移。它的口令必须是8至56个字符，并将在内部被转化为448位的密钥。 安装和引入 安装： npm install bcryptjs -S 引入： import bcrypt from '...

精华 （1） ES6是静态加载，在编译时加载，为静态代码检查提供了更多可能性。 （2） export实质上是向外提供了接口，正确的语法： export const a = 1 export function f(){} // 更加推荐的做法： const b = 1 const c = 'de' function g(){} export {a, g} export {a as hel...

ES6 诞生以前，异步编程的方法，大概有下面四种。 - 回调函数 - 事件监听 - 发布/订阅 - Promise 对象 协程的Generator函数实现 整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。 Generator函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性...

Webpack 配置 目前使用这个特性，需要使用webpack进行编译 首先安装插件： npm install babel-plugin-transform-decorators-legacy --save-dev 然后在哎.babelrc中进行配置： { "presets": ["es2015", "stage-0", "react"], "plugins": [ ...

开始 Jest是由Facebook发布的开源的、基于Jasmine的Javascript的单元测试框架。官方文档在这里。 安装： npm install --save-dev jest 然后创建一个sum.js文件，输出一个方法： function sum(a, b) { return a + b; } module.exports = sum; 然后，创建一个名为sum....

含义 Promise 是异步编程的一种解决方案，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 Promise对象有以下两个特点。 对象的状态不受外界影响。 Promise对象代表一个异步操作，有三种状态：...

基本概念 Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。 Generator函数有多种理解角度。语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。 执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数...

Iterator（遍历器）的概念 遍历器（Iterator）是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。 Iterator 的作用有三个： 1. 为各种数据结构，提供一个统一的、简便的访问接口 2. 使得数据结构的成员能够按某种次序排列 3. ES6 创造了一种新的遍历命令for....

精华 （1）建议不再使用var命令，而是使用let命令取代。 （2）在let和const之间，建议优先使用const，尤其是在全局环境 （3）所有的函数都应该设置为常量 （4）静态字符串一律使用单引号或反引号，不使用双引号。动态字符串使用反引号 （5）使用数组成员对变量赋值时，优先使用解构赋值 （6）函数的参数如果是对象的成员，优先使用解构赋值 （7）如果函数返回多个值，优先使用对象...

数组的reduce()方法接受一个函数作为累加器，将数组的每个值从左到右开始用该函数进行处理，最终输出为一个值 最常见的用法就是数组求和： let arr = [5, 4, 3, 2, 1]; let reducer = (total, currentValue, currentIndex, arr) => { console.log('total', total); con...

含义 async函数是ES2017引入的，实质上，async函数是Generator函数的语法糖 用一个Generator函数依次读取两个文件 const fs = require('fs'); const readFile = function (fileName) { return new Promise(function (resolve, reject) { fs....

ES6为了更接近传统语言的写法，引入了Class的概念，作为对象的模板。 基本上，ES6的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。 ES5的写法： function Person(name) { this.name = name } Person.prototype.sayHe...

这里的内容和原型、继承关系很大，应该再重新回顾原型、继承之后再来重看这里（2018.4.26） 简介 Class可以通过extends关键字实现继承 class Point { } class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y...

关于reg.exec和string.match方法 exec是RegExp对象的方法，参数才是字符串，match是字符串执行匹配正则表达式规则的方法，参数是正则表达，返回的都是数组； 在正则表达式没有全局标志g时，二者的返回值是相同的 - 正则表达式中没有捕获组时，返回值是只有一个成员的数组，第一项是从起始位置开始寻找的第一个匹配项，无论执行多少次都是相同的（从位置0开始） - 正则表达式...

简介 一个很方便的用来在JS中控制元素类的方法，完全可以取代jQuery中对class的操作 classList属性返回元素的类名，作为DOMTokenList对象。该属性用于在元素中添加，移除及切换 CSS 类。 classList属性是只读的，但你可以使用add()和remove()方法修改它。 兼容性： 方法 add(class1, class2, ...)：在元素中添加一个或多个类名。...

定义 bind的作用和call与apply类似，区别在于使用上。bind的执行的结果返回的是绑定了一个对象的新函数 先看一个使用例子： var obj = { name: 'Jay' }; function sayName(){ console.log(this.name); } var fn = sayName.bind(obj) ; fn() // 'Jay' MDN上的定义： b...

定义 函数可以访问它被创建时的上下文环境，称为闭包 内部函数比它的外部函数具有更长的生命周期 function closure(name) { var status = 1; return { getName: function() { return name; }, getStatus: function() { return status...

继承相关知识还是有点乱，来总结一下。 本质上，JS里面的继承都是通过原型链实现的（除了实例属性之外），原型链继承的关键就是对象的__proto__属性，它应该指向另外一个对象的prototype 构造函数的继承 ES5里面最常用的继承方法是以下两种： 在子类内部执行父类（call/apply改变this），继承实例属性 子类的prototype等于父类的一个实例(new 父类)，继承实例属性和原...

新的API W3C指定了Page Lifecycle API，统一了网页从诞生到卸载的行为模式，并且定义了新的事件，允许开发者响应网页状态的各种转换。 生命周期 网页的生命周期被分为了六个阶段，每个时刻只可能处于其中一个阶段。 （1）Active 阶段 网页处于可见状态，且拥有输入焦点。 （2）Passive阶段 此阶段网页可见，但是没有输入焦点，无法接受输入。UI更新（比如动画）仍然在执行。 ...

已同步到个人博客，欢迎访问。 ES10/ES2019还只是一个草案，但是大多数功能在新版本的Chrome中已经实现了。 虽然ES6还没有掌握全，但是还是要紧跟时代，了解一下JavaScript的发展趋势吧 BigInt BigInt是第七种原始类型，用来标识超出JavaScript最大安全整数之外的数字 在之前，JavaScript的数字是使用的是双精度浮点数数据类型，可以表示的最大安全整数...

已同步到个人博客，欢迎访问 传统方法 所谓异步，简单说就是一个任务不是连续完成的，被分成了两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。 在JavaScript中，ES6之前，实现的异步编程的方法有四种： 回调函数 事件监听 发布/订阅 Promise 回调函数 所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到回过头重新执行这个任务的时候，就直接调用...

无法使用Map遍历Array创建的数组的原因 原文：Here’s Why Mapping a Constructed Array in JavaScript Doesn’t Work 作者：shawn.webdev 示例 为了便于说明，假设现在需要你生成一个数组，数组由数字 0~99 组成。你会怎么做？下面是一种方案： const arr = []; for (let i = 0; i &l...

已同步到个人博客，欢迎访问 简介 Generator函数有两个特征： function关键字后面有一个* 函数体内部使用yield表达式 function* helloWorldGenerator() { yield 'hello'; yield 'word'; return 'ending' } const hw = helloWorldGenerator() 调用函数后，函数...

判断类型 利用parseInt const isInteger(target) => parseInt(target) === target 注意，parseInt只会返回两个类型的结果，数值或者NaN 利用取余运算 const isInteger(target) => typeof target === 'number' && target % 1 === 0 ...

JavaScript中的二进制运算 整数 JavaScript中，将十进制数字转换为二进制的方法是使用toString(2)方法，对于正整数的返回值是从不为零的首位开始返回： (8).toString(2); // 1000 对于负数，不会返回其真正的二进制编码（即其相反数的补码），而是直接利用符号-来表示： (-8).toString(2); // -1000 所以，想要求出负数的二进制编码...

2018.12更新 一般非构造函数的继承，最常用的就是Object.create方法： let child = Object.create(father, descriptors); 这样就可以实现child与father的继承，继承关系是通过child.__proto__ = father实现的，再通过描述符对象descriptors添加属于自己的属性 实际上，Object.create方法就...