多啦的博客

《你不知道的JavaScript（上卷）》读书笔记。

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

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

JS中上传文件的两种原生方法

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

1 什么是JWTJWT是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 = 1export function f(){}// 更加推荐的做法：const b = 1const 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": [ ...

基本概念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...

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

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

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

普通对象与函数对象JavaScript 中，对象分为普通对象和函数对象通过new Function创建的都是函数对象，比如Function、Object、Array、Set、Map、Proxy、Symbol等，其他的对象都是普通对象typeof Function // "function"typeof Object // "function"typeof Array // "f...

定义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 父类)，继承实例属性和原...

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

已同步到个人博客，欢迎访问。ES10/ES2019还只是一个草案，但是大多数功能在新版本的Chrome中已经实现了。虽然ES6还没有掌握全，但是还是要紧跟时代，了解一下JavaScript的发展趋势吧BigIntBigInt是第七种原始类型，用来标识超出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()调用函数后，函数...

判断类型利用parseIntconst 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所以，想要求出负数的二进制编码...