js基础笔记(持续更新)

为什么有的编程规范要求用 void 0 代替 undefined？

因为 JavaScript 的代码 undefined 是一个变量，而并非是一个关键字，这是
JavaScript 语言公认的设计失误之一，所以，我们为了避免无意中被篡改，我建议使用
void 0 来获取 undefined 值。

js中通过Object.prototype.toString方法----精确判断对象的类型

对于数组、null、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串。

参考：https://www.cnblogs.com/bq-med/p/8796836.html

比较浮点数的方法

根据浮点数的定义，非整数的 Number 类型无法用 == （=== 也不行）来比较

console.log( 0.1 + 0.2 == 0.3);  //false

浮点数运算的精度问题导致等式左右的结果并不是严格相等，而是相差了个微小的
值，正确的比较方法是使用 JavaScript提供的最小精度值,检查等式左右两边差的绝对值是否小于最小精度，才是正确的比较浮点数的方法。

console.log( Math.abs(0.1 + 0.2 - 0.3) <= Number.EPSILON);  //true

注：Math.abs()取绝对值，ES6 在Number对象上面，新增一个极小的常量Number.EPSILON。根据规格，它表示 1 与大于 1 的最小浮点数之间的差。

对于 64 位浮点数来说，大于 1 的最小浮点数相当于二进制的1.00…001，小数点后面有连续 51 个零。这个值减去 1 之后，就等于 2 的 -52 次方。

Number.EPSILON实际上是 JavaScript 能够表示的最小精度。误差如果小于这个值，就可以认为已经没有意义了，即不存在误差了。

创建对象的方法

1、使用构造函数和原型对象共同创建

function Person(name, age, job){//构造器函数this.name = name;this.age = age;this.job = job;
}
Person.prototype = {//设置构造器函数prototype指定的对象，即重置原型对象constructor : Person,sayName : function(){alert(this.name);}
}
var p1 = new Person("Tom", 29, "Teacher");//实例化对象p1
//{name:"Tom",age:29,job:"Teacher",__proto__:object}，object即原型对象：Person.prototype指向的对象
var p2 = new Person("Jack", 27, "Doctor");//实例化对象p2
//{name:"Jack",age:27,job:"Doctor",__proto__:object}

2、仅使用原型对象创建

var person={ classname:'human'}//将这个对象当做原型
var p1=Object.create(person)//生成实例对象
console.log(p1.classname)//human，相当于p1.__proto__.classname

不同点：

1）创建对象的方式不同

new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。
Object.create() es6创建对象的另一种方式，可以理解为继承一个对象, 添加的属性是在原型下。

// new Object() 方式创建
var a = {  rep : 'apple' }
var b = new Object(a)
console.log(b) // {rep: "apple"}
console.log(b.__proto__) // {}
console.log(b.rep) // {rep: "apple"}// Object.create() 方式创建
var a = { rep: 'apple' }
var b = Object.create(a)
console.log(b)  // {}
console.log(b.__proto__) // {rep: "apple"}
console.log(b.rep) // {rep: "apple"}

2）创建对象属性的性质不同

// 创建一个以另一个空对象为原型,且拥有一个属性p的对象
o = Object.create({}, { p: { value: 42 } })// 省略了的属性特性默认为false,所以属性p是不可写,不可枚举,不可配置的:
o.p = 24
o.p
//42o.q = 12
for (var prop in o) {console.log(prop)
}
//"q"delete o.p
//false

创建对象的方式不同Object.create() 用第二个参数来创建非空对象的属性描述符默认是为false的，而构造函数或字面量方法创建的对象属性的描述符默认为true。看下图解析：

3）创建空对象时不同

当用构造函数或对象字面量方法创建空对象时，对象时有原型属性的，即有_proto_;
当用Object.create()方法创建空对象时，对象是没有原型属性的。

参考：https://www.cnblogs.com/gulei/p/6733707.html（秒懂JS对象、构造器函数和原型对象之间的关系）
https://www.jianshu.com/p/28d85bebe599 （ Object.create() ）

[‘2’,‘0’,‘1’,‘9’].map(parseInt)中map和parseInt的坑

['2','0','1','9'].map(parseInt)   // [2, NaN, 1, NaN]

原因：

参考：https://www.cnblogs.com/cjvae/p/9782387.html

console.dir()和console.log()的区别

参考：https://blog.csdn.net/manyangyangya/article/details/44859685

闭包的坑

闭包就是携带状态的函数，并且它的状态可以完全对外隐藏起来

另外使用es6的let声明也可以解决这个问题，let i=1；

参考：https://www.liaoxuefeng.com/wiki/1022910821149312/1023021250770016（闭包）
JS中的事件委托和事件代理

什么是事件委托？

事件委托还有一个名字叫事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。我用取快递来解释这个现象：有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递后核实并代为签收。

这里其实还有2层意思的：

第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；

第二，新员工也是可以被前台代为签收的，即程序中新添加的dom节点也是有事件的。

事件委托的优点:

提高性能:每一个函数都会占用内存空间，只需添加一个事件处理程序代理所有事件,所占用的内存空间更少。
动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。
例子解析:

<script>window.onload = function(){let div = document.getElementById('div');div.addEventListener('click',function(e){console.log(e.target)})let div3 = document.createElement('div');div3.setAttribute('class','div3')div3.innerHTML = 'div3';div.appendChild(div3)}
</script><body><div id="div"><div class="div1">div1</div><div class="div2">div2</div></div>
</body>

虽然没有给div1和div2添加点击事件,但是无论是点击div1还是div2,都会打印当前节点。因为其父级绑定了点击事件,点击div1后冒泡上去的时候,执行父级的事件。

参考：https://www.jianshu.com/p/a77d8928c5c9（简述JS中的事件委托和事件代理）
https://www.cnblogs.com/soyxiaobi/p/9498357.html（彻底弄懂JS事件委托的概念和作用）

Ajax的工作原理及优缺点

1.概念：什么是AJAX
AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。
2.为什么要使用他？
最大的优点：不刷新整个页面的情况下与服务器通信保持原有页面状态，通俗点，浏览网页的时候回有两种情况，点击，1，白屏，等待跳转到另一个页。2.页面不刷新，局部出现新内容获得更好的用户体验。
3.基本原理

XHR相当于是一个通信兵，来负责客户端与服务器之间的通信传输。要打仗了，前方阵地不可能只等着通信兵传递消息其他什么也不干吧，所以前方阵地还在干着自己的事情派通信兵去请求后方指挥的命令（服务器），指挥下达命令指挥，通信兵再吧命令传到前方阵地（客户端），然后客户端吧数据渲染到页面。
那什么是XHR？（AJAX工作原理）
他的全称是XMLHttpRequest，AJAX就是通过浏览器的内置对象XHMHttpResquest来发送异步请求的，异步请求不会妨碍前方阵地（客户端）的任何操作。
4.了解异步和同步
刚才说了异步，那什么是同步，同步就是前方阵地和通信兵一起去像服务器请求数据，直到通信兵请求到数据我才开始渲染页面，在请求的过程中一直是白屏等待的。
5.XMLHttpResquest对象的属性有哪些？
AJAX既然是通过浏览器的内置对象XMLHttpRequest来处理异步请求的那我们先来了解下他又哪些属性
属性描述

onreadyStatechange 状态改变的事件触发器每个状态改变时都会触发这个事件处理器，通常会调用一个javaScript函数
readyState 请求的状态：
0>.请求未初始化
1>.服务器链接已建立
2>.请求已接收
3>.请求处理中
4>.请求已完成，响应已就绪
3.responseText 返回请求数据文本
4.responseXML 返回XML文档对象
5.status 返回状态码如404 200

AJAX的优点：
1.最大的优点就是页面无需刷新，在页面内与服务器通信，非常好的用户体验。
2.使用异步的方式与服务器通信，不需要中断操作。
3.可以把以前服务器负担的工作转嫁给客户端，减轻服务器和带宽，可以最大程度减少冗余请求。
缺点：
1.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。
2.安全问题技术同时也对IT企业带来了新的安全威胁，ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于credentials的安全漏洞等。
3.对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。
4.、一些手持设备（如手机、PDA等）现在还不能很好的支持ajax，比如说我们在手机的浏览器上打开采用ajax技术的网站时，它目前是不支持的，当然，这个问题和我们没太多关系。(这个时候我们可以用其他的插件来代替)

参考：https://blog.csdn.net/youjinli122/article/details/77412851

vue中组件的data为什么是一个函数

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，基于这一理念，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响。

组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

参考：https://www.cnblogs.com/wangjiachen666/p/9876266.html

vue中$refs的作用

一般来讲，获取DOM元素，需document.querySelector（".input1"）获取这个dom节点，然后在获取input1的值。

但是用ref绑定之后，我们就不需要在获取dom节点了，直接在上面的input上绑定input1，然后$refs里面调用就行。

然后在javascript里面这样调用：this.$refs.input1 这样就可以减少获取dom节点的消耗了

v-model 本质上不过是语法糖

用@input对输入框进行监听,监听的时候对值进行赋值value=$event.target.value

ES6数组去重


```javascript
let arr = [1,1,"six","six",null,null,undefined,undefined,false,false,true,true,"",""];// new Set 是实现数组去重，
// Array.from()把去重之后转换成数组let arr2 = Array.from(new Set(arr));console.log(arr2); //[1, "six", null, undefined, false, true, ""]

let声明和var声明的区别

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{let a = 10;var b = 1;
}a // ReferenceError: a is not defined.
b // 1

上面代码在代码块之中，分别用let和var声明了两个变量。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确的值。这表明，let声明的变量只在它所在的代码块有效。

for循环的计数器，就很合适使用let命令。

for (let i = 0; i < 10; i++) {// ...
}console.log(i);
// ReferenceError: i is not defined

上面代码中，计数器i只在for循环体内有效，在循环体外引用就会报错。

下面的代码如果使用var，最后输出的是10。

var a = [];
for (var i = 0; i < 10; i++) {a[i] = function () {console.log(i);};
}
a[6](); // 10

上面代码中，变量i是var命令声明的，在全局范围内都有效，所以全局只有一个变量i。每一次循环，变量i的值都会发生改变，而循环内被赋给数组a的函数内部的console.log(i)，里面的i指向的就是全局的i。也就是说，所有数组a的成员里面的i，指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是 10。

如果使用let，声明的变量仅在块级作用域内有效，最后输出的是 6。

var a = [];
for (let i = 0; i < 10; i++) {a[i] = function () {console.log(i);};
}
a[6](); // 6

上面代码中，变量i是let声明的，当前的i只在本轮循环有效，所以每一次循环的i其实都是一个新的变量，所以最后输出的是6。你可能会问，如果每一轮循环的变量i都是重新声明的，那它怎么知道上一轮循环的值，从而计算出本轮循环的值？这是因为 JavaScript 引擎内部会记住上一轮循环的值，初始化本轮的变量i时，就在上一轮循环的基础上进行计算。

另外，for循环还有一个特别之处，就是设置循环变量的那部分是一个父作用域，而循环体内部是一个单独的子作用域。

for (let i = 0; i < 3; i++) {let i = 'abc';console.log(i);
}
// abc
// abc
// abc

上面代码正确运行，输出了 3 次abc。这表明函数内部的变量i与循环变量i不在同一个作用域，有各自单独的作用域。

参考：http://es6.ruanyifeng.com/#docs/let （ let和const命令阮一峰）

source-map配置

开发环境(development)：cheap-module-eval-source-map
生产环境(production):cheap-module-source-map

页面更换图片显示之前的缓存怎么解决

问题：

上传一张图片，通过js更新src属性刷新图片使其即时显示时，当img的src当前的url与上次地址无变化时（只更改图片，名称不变，不同图片名称相同）图片不变化（仍显示原来的图片），但通过firebug看图片已经变化，因为当src的地址不变时浏览器不会重新加载图片仍从缓存里面读取

方法：

只需每次刷新图片时，改变一下src的地址内容就行了，
（1）通过前台变化，让js每次生成一个随机数作参数放在url后边,但该参数没有实际意义
（2）每次请求到该图片页面时，从后台传一个随机数，前台获得该随机变量并放在url后边，该随机数也没有什么实际意义

原理：

由于在img的src中增加了随机数参数，多次访问图片时，浏览器认为是访问了不同的图片路径(或者说是访问了不同的图片），浏览器会每次重新访问服务器读取图片，而不再读取缓存中的图片。

Example： $("#empImgContent").attr(‘src’, src=“**/uploads/empimgs/" + empObj.empPic+"?t=" + Math.random()); //显示图片

参考：https://blog.csdn.net/goodleiwei/article/details/50737548

CSS3 box-sizing 属性

四种post中的参数请求方式

1、application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。

<form action="form_action.asp" enctype="text/plain"><p>First name: <input type="text" name="fname" /></p><p>Last name: <input type="text" name="lname" /></p><input type="submit" value="Submit" />
</form>

此时可以看到：

Content-Type: application/x-www-form-urlencoded;charset=utf-8
title=test&sub%5B%5D=1

首先，Content-Type 被指定为 application/x-www-form-urlencoded；其次，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式很好的支持，常用的如jQuery中的ajax请求，Content-Type 默认值都是「application/x-www-form-urlencoded;charset=utf-8

2、multipart/form-data
这也是常见的post请求方式，一般用来上传文件，各大服务器的支持也比较好。所以我们使用表单上传文件时，必须让表单的enctype属性值为 multipart/form-data.

注意：以上两种方式：application/x-www-form-urlencoded和multipart/form-data都是浏览器原生支持的

3、application/json
application/json作为响应头并不陌生，实际上，现在很多时候也把它作为请求头，用来告诉服务端消息主体是序列化的JSON字符串，除了低版本的IE，基本都支持。除了低版本的IE都支持JSON.stringify（）的方法，服务端也有处理JSON的函数，使用json不会有任何麻烦。

4、text/xml

它是一种使用 HTTP 作为传输协议，XML 作为编码方式的远程调用规范

参考：https://blog.csdn.net/jiadajing267/article/details/87883725

cookie设置语法

document.cookie = “cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/dir;domain=myblog.com; max-age=3600; secure=true”;

cookieName=mader ：name=value，cookie的名称和值
expires=Fri, 31 Dec 2017 15:59:59 GMT：
expires，cookie过期的日期，如果没有定义，cookie会在对话结束时过期。日期格式为 new
Date().toUTCString()，删除某个cookie，只需要把它的过期时间调到某个之前的时间就可（减去1）
path=/dir: path=path (例如 ‘/’, ‘/dir’) 如果没有定义，默认为当前文档位置的路径。
domain=myblog.com：指定域(例如 ‘example.com’， ‘.example.com’ (包括所有子域名),
‘subdomain.example.com’) 如果没有定义，默认为当前文档位置的路径的域名部分。我们在设置Cookie时，只能设置顶域和自己的域，不能设置其他的域
max-age=3600：文档被查看后cookie过期时间，单位为秒
secure=true： cookie只会被https传输，即加密的https链接传输

url地址中传递数组参数的方法

?arrayName[]=content1&arrayName[]=content2

js中!!的用法

！可将变量转换成boolean类型：

!null=true!undefined=true!''=true!0=true!100=false!'abc'=false

例如

if(a!=null&&typeof(a)!=undefined&&a!=''){//a有内容才执行的代码
}

可以修改为：

if(!!a){//a有内容才执行的代码...
}

箭头函数和普通函数的区别

1.箭头函数是匿名函数，不能作为构造函数，不能使用new
2.箭头函数不能绑定arguments，取而代之用rest参数…解决
3.箭头函数没有原型属性
4.箭头函数的this永远指向其上下文的this，没有办改变其指向，普通函数的this指向调用它的对象

Promise.all中的错误处理

.all如果遇到其中一个发生错误会终止后面的调用
解决方式：
1.外面再包一层
2.Promise.allSettled()
参考：https://www.imooc.com/article/303153