明天也要努力的博客

项目中需要根据不同的版本添加不一样的 css 样式，于是在 main.js 中添加 if 条件判断，发现即使没有进入判断里，require 始终会引入。查阅 require.js 机制后发现，require 依赖前置，所以添加 if 限制无效。

为了判断是否离线，在页面加载后，可先通过 navigator.onLine 取得初始的状态，然后通过ononline、onoffline 事件来确定网络连接状态是否变化。一个缺点：navigator.onLine 和 online、offline事件却不是万能的，只能判断无线和网线是否连接，而不能进一步判断该网络是否能够上网。

默认值name : '明天也要努力' , city : '南京' , job : {post : '前端' } };const {post , level = '初级' } } = user;// 明天也要努力 25 undefined 前端 初级新变量创建一个全新的变量并分配一个使用对象属性值计算的值name : '明天也要努力' , city : '南京' , job : {post : '前端' } };const {

Generator 函数是 ES6 提供的一种异步编程解决方案。它既是一个生成器，也是一个状态机，内部拥有值及相关的状态，生成器返回一个迭代器 Iterator 对象，可以通过这个迭代器，手动地遍历相关的值、状态，保证正确的执行顺序。function 关键字和函数之间有一个星号(*)，且内部使用 yield 表达式，定义不同的内部状态；调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是遍历器对象（Iterator Object）；...

传送门：ES6、 ES7、 ES8、 ES9、 ES10 新特性概览1.1 动态 import ()在 ES 2015 定义的模块语法中，所有模块导入语法都是静态声明的：虽然这套语法已经可以满足绝大多数的导入需求，而且还可以支持实现静态分析以及树抖动等一系列重要的功能。但却无法满足一些需要动态导入的需求。例如：若没有动态导入，将难以实现这些需求。虽然可以通过创建 script 标签来动态地导入某些脚本，但这是特定于浏览器环境的实现方式，也无法直接和现有的模块语法结合在一起使用，所以只能作为内部实现机制，但

在 JavaScript 中：window 对象是一个虚拟的对象，浏览器在打开 HTML 文档时生成 window 对象，可以把它看作是所使用的浏览器的窗口，其地位很高。因为它是浏览器脚本引擎中的 globalObject。可以用 window 对象访问窗口中绘制的文档、窗口中发生的事件和影响窗口的浏览器特性。浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。BOM的核心对象是 window，它表示一个实例。在浏览器中，window 对象有双重角色，它既

关于 orientationchange 事件定义和用法： 在用户水平或者垂直翻转设备（即方向发生变化）时触发的事件。当视图状态发生改变时，监听器对应的函数就会执行，而对应的 MediaQueryList 对象也会传入。这个对象包括两个属性：matches（布尔值），表示CSS media query是否与当前的显示状态匹配；media 对应传入的参数字符串。关于 matchMedia() 方法定义和用法： matchMedia() 返回一个新的 MediaQueryList 对象，表示指定的媒体查询

touch 事件：touchstart 事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发；touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用 preventDefault() 事件可以阻止滚动；touchend 事件：在用户从元素上移开手指时会发生。touchcancel 事件：在触摸事件被中断时发生。不同的设备会在不同的动作中中断触摸事件，如果发生这种“错误”，那么包含此事件来清理代码被认为是一种好习惯。...

1. 简介FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。其中 File 对象可以是来自用户在一个 < input > 元素上选择文件后返回的 FileList 对象，也可以来自拖放操作生成的 DataTransfer 对象，还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。重要提示： FileReader 仅用于

简介：FormData 对象用以将数据编译成键值对，以便用 XMLHttpRequest 来发送数据。主要用于：发送表单数据，也可用于发送带键数据(keyed data)，而独立于表单使用。如果表单 enctype 属性设为 multipart/form-data ，则会使用表单的 submit() 方法来发送数据，从而发送数据具有同样形式。在这里插入代码片...

1. 概述在看代码的时候发现基本上都是用 querySelector() 和 querySelectorAll() 来获取元素，疑惑为什么不用 getElementById()。可能因为自己没用过那两个，所以并不清楚原因所在。1.1 querySelector() 和 querySelectorAll() 的用法querySelector() 方法定义： querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素；注意： querySelector() 方法仅返回匹

1. 正则表达式的使用一个正则表达式可认为是对一种字符片段的特征描述，而它的作用就是从一堆字符串中找出满足条件的子字符串。比如：在JavaScript中定义一个正则表达式var reg = /hello/ 或 var reg = new RegExp("hello")那么这个正则表达式可以用来从一堆字符串中找出 hello 这个单词。而“找出”这个动作，其结果可能是找出第一个 hello 的位置、用别的字符串替换 hello、找出所有 hello 等。下面就列举一下JavaScript中可

方法一：正则表达式 （推荐）/** 下划线转换驼峰*/ function underlineToHump(str) { // 如果首字母是_，执行replace时会多一个_，这里需要去掉 if(str.slice(0,1) === '_'){ str = str.slice(1); } return str.replace(/([^_])(?:_+([^_]))/g, function ($0, $1, $2) { return $1 + $2.toUpperCas

const arr = [1,2,3,4,5];const test = 3;arr.forEach((item) => { if(item == test){ return item } console.log(item);})const arr = [1,2,3,4,5];const test = 3;arr.forEach((item) => { if(item == test){ break } console.log(item); //

问题：发送协议请求一个文件流，需要在回包里拿到响应头里的 Content-Disposition 字段的值，从中分离出文件名。但是通过查看控制台，header 里确实有这个属性：在控制台 Network 里明明能看到，但是在响应拦截器里用 js headers[“content-disposition”] 来获取，但是打印 header 对象里并没有 content-disposition 无法获取，这是什么原因？原因：根据MDN文档：Access-Control-Expose-Headers

开发过程中，我们可能会取接口返回的数组数据的第一项，进行页面渲染。当某一用户的该数据为空时，就会出现未定义的报错。如下：<script>export default { data() { return { dealItem:{} }; }, methods:{ getPersonInfo(){ this.sendRequest({ // 获取待办数据...

1. slice()功能：可提取字符串的某个部分，并以新的字符串返回被提取的部分；语法：array.slice(start, end)start: 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取， slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。 如果没有指定该参数，那么切分的

JavaScript中有几个可以对字符串编码的函数，分别是：escape、encodeURI、encodeURIComponent。1. escape

1. 获取元素的 css 大小1.1 获取元素的行内样式<script> function boxInfo(){ let box = document.getElementById('box'); let w = box.style.width; let h = box.style.height; console.log(w,h) // 700px 800px }</script><body> <div id="

1. 变量作用域理解闭包，首先必须理解变量作用域，在ECMAScript5的标准中有两种作用域：全局作用域和函数作用域。两者的调用关系是：函数内部可以直接读取全局变量；正常情况下，函数外部无法读取函数内部声明的变量；let num = 1;function test() { let n = 2; console.log(num); // 1}test(); console.log(n); // ReferenceError: n is not defined实际开发中

1. ES5 中 var 声明变量的弊端ES5 中其实给我们提供了两种声明变量的方法：var 命令和 function 命令。使用 function 命令声明函数这里不参与讨论，我们主要对比 var 命令。var 命令声明变量有三大特点：变量可以重复声明；变量声明会被提升；没有块级作用域；这三个特点使得 JS 代码的编写显得有些“随意”，不够规范，而且这样的语法逻辑也有悖常理，举两个例子：1.1 内层变量会覆盖外层同名变量我们用 var 声明一个全局变量 num 赋值为 1，之后在 s

要创建 Person 的新实例，必须使用 new 操作符。以这种方式调用构造函数实际上会经历以下 4个步骤：创建一个新对象；将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）；执行构造函数中的代码（为这个新对象添加属性）；返回新对象;1. new 操作符在有上面的基础概念的介绍之后，在加上 new 操作符，我们就能完成传统面向对象的class + new的方式创建对象，在JavaScript中，我们将这类方式成为 Pseudoclassical。基于上面的例子，我们执行如下

使用 JavaScript 开发的时候，很多开发者多多少少会被 this 的指向搞蒙圈，但是实际上，关于 this 的指向，记住最核心的一句话：哪个对象调用函数，函数里面的 this 指向哪个对象。this的几种模式：方法调用模式下，this 总是指向调用它所在方法的对象，this 的指向与所在方法的调用位置有关，而与方法的声明位置无关（箭头函数特殊）；函数调用下，this 指向 window ,调用方法没有明确对象的时候，this 指向 window，如 setTimeout、匿名函数等；构造函

1. Map 和 Set1.1 MapMap: 一组键值对的结构，具有极快的查找速度。举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array：var names = ['Michael', 'Bob', 'Tracy'];var scores = [95, 75, 85];给定一个名字，要查找对应的成绩，就先要在 names 中找到对应的位置，再从 scores 取出对应的成绩，Array越长，耗时越长。如果用Map实现，只需要一个“名字”-“成绩”的对照表，

将要过滤的数据，将 arr 里面 city 重复的数据去掉（下面方法中用的arr都是这组数据）var arr = [ {id: 1,city: '南京'}, {id: 2,city: '南京'}, {id: 3,city: '杭州'}, {id: 4,city: '广州'}];1. 对象法：数组的 reduce 方法ie9以下不支持此方法var obj = {};var newArr = arr.reduce((prev,cur)=>{ obj[cur.city

1. 语法arr.reduce(function(prev,cur,index,arr){...}, init);arr ：原数组；prev ：上一次调用回调时的返回值，或者初始值 init;cur ： 当前正在处理的数组元素；index ：当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；init ：初始值其实常用的参数只有两个：prev 和 cur。2. 常见用法2.1 数组求和var arr = [1,2,3,

1. base64简介Base64：选出64个字符作为一个基本字符集（A-Z，a-z，0-9，+，/，再加上作为垫字的"="，实际是65个字符），其它所有符号都转换成这个字符集中的字符。编码规则：将每三个字节作为一组，一共是24个二进制位。将这24个二进制位分为四组，每个组有6个二进制位。在每组前面加两个00，扩展成32个二进制位，即四个字节。根据下表，得到扩展后的每个字节的对应符号，这就是Base64的编码值。js-base64 npm地址1. 安装npm install --s

<div id="city" class="cities"> 城市 <div id="sh" class="east">上海</div> <div id="gz" class="south">广州</div> <div id="xa" class="west">西安</div> <div id="bj" class="north">北京</div></div&g

示例URLhttp://127.0.0.1:8080/testdemo/test.html?id=1&name=test// 返回 web 主机的域名，如：http://127.0.0.1:8080/testdemo/test.html?id=1&name=testvar url = window.location.href;// 返回所使用的 web 协议，如：http:var protocol = window.location.protocol;// 返回当

在一般的 Web 开发中，很少会用到 Blob，但 Blob 可以满足一些场景下的特殊需求。Blob，Binary Large Object 的缩写，代表二进制类型的对象。Blob 的概念在一些数据库中有使用到，例如，MYSQL中的 BLOB 类型就表示二进制数据的容器。在 Web 中，Blob 类型的对象表示不可变的类似文件对象的原始数据。通俗点说，Blob对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作 File 对象一样操作 Blob 对象，实际上，File 继承自Blob。1. B

1. 概述window对象 指当前的浏览器窗口，它也是当前页面的顶层对象，即最高一层的对象，所有其他对象都是它的下属。一个变量如果未声明，那么默认就是顶层对象的属性。// a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。a = 1;console.log(window.a) // 1window 有自己的实体含义，其实不适合当作最高一层的顶层对象，这是一个语言的设计失误。最早，设计这门语言的时候，原始设想是语言内置的对象越少越好，这样可以提高浏览器的性能。因此，语言设计者 Bre

扩展操作符（…）可在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还以在构造对象时, 将对象表达式按key-value的方式展开；1. 数组1.1 构造数组没有扩展运算符的时候，只能组合使用 push，splice，concat 等方法，将已有数组元素变成新数组的一部分。有了扩展运算符, 构造新数组会变得更简单、更优雅：扩展运算符(spread)就是我们知道的三个点(…)，它就好像 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。console.log(...

首先，定义一个类function Animal (name) { // 属性 this.name = name || 'Animal'; // 实例方法 this.sleep = function(){ console.log(this.name + '正在睡觉！'); }}// 原型方法Animal.prototype.eat = function(food)...

1. 相关知识点1.1 基本类型与引用类型分类基本类型：number，string，boolean，null，undefined，symbol及BigInt(任意精度整数)七类；引用类型:对象、数组、函数等；1.2 JS中变量的存储方式栈：自动分配内存空间，系统自动释放，里面存放的是基本类型的名值和引用类型的名（地址）；堆：动态分配的内存，大小不定，也不会自动释放，里面存放引用类型...

1. map()返回一个新的Array，每个元素为调用func的结果var numbers = [65, 44, 12, 4];var newNums = numbers.map( item => item * 10)console.log(newNums) // [650,440,120,40]2. filter()返回一个符合func条件的元素数组let nums = [...

方法一：for循环var arr1 = [0, 1];var arr2 = [2, 3];for(var i=0; i<arr2.length; i++){ arr1.push(arr2[i])}console.log(arr1); // [0, 1, 2，3]方法二：concat()将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本...

1. 树型数据const treeObj = [{ id: '0', name: '中国', children:[ { id: '1', name:'湖北省', children:[ { id: '1-1', name:'武汉市', children:[ ...

1. 回调函数回调（callback）是一个函数被作为一个参数传递到另一个函数里，在那个函数执行完后再执行。假定有两个函数f1和f2，f2等待f1的执行结果，f1()–>f2()；如果f1很耗时，可以改写f1，把f2（箭头函数）写成f1的回调函数：function f1(callback){ setTimeout(() => { let name = '小明' ......

传统的javascript中只有对象，没有类的概念。它是基于原型的面向对象语言。原型对象特点就是将自身的属性共享给新对象。这样的写法相对于其它传统面向对象语言来讲，很有一种独树一帜的感脚！非常容易让人困惑！1. class类与构造函数对比1.1 构造函数实现如果要生成一个对象实例，需要先定义一个构造函数，然后通过new操作符来完成。// 函数名和实例化构造名相同且大写（非强制，但这么写有助...

待转字符串(验证微信号)var weChatReg = '/^[a-zA-Z]{1}[-_a-zA-Z0-9]{5,19}$/'console.log(weChatReg)方法一 eval()console.log(eval(weChatReg))2. 方法二 new RegExp（）console.log(new RegExp(weChatReg))参考文章（侵删...