下雨天的纸飞机
下雨天的纸飞机

前端知识总汇（持续更新...）

 

目录

JavaScript

JS的数据类型

JS中的深拷贝

null与undefined的区别

null为什么是对象

特殊的比较

使用new操作符后有哪些操作

this指向

call、apply、bind区别与联系

eval方法

JSON

JS的内置对象

JS中数据类型的判断

JS中对象的创建

原型和原型链

JS继承

作用域链、闭包、立即执行函数

window对象和document对象

生成随机数公式

有关数字的方法

有关数组的常用方法（注意：红色标注的方法会改变原数组）

有关字符串的方法（注意：下列方法都不会改变原字符串）

setTimeOut()和setInterval()

JS的预解析

事件流

事件委托

JS的垃圾回收机制

DOM操作

Object.defineProperty(obj,prop,descriptor)方法

EventLoop事件循环机制

forEach、for...in、for...of的区别

最简单的数组去重方法（可深度去重）

退出循环的三种方法

keydown、keyup 和 keypress的区别

ES6

let、const

Symbol

模板字符串

ES6中对象的扩展

解构赋值

模块化开发

ES6中函数的扩展

尾调用、尾递归

Generator函数

扩展运算符

Set数据结构

Map数据结构

Class

Proxy

Promise

Vue

vue的两大核心

vue的生命周期（钩子函数）

vue的数据双向绑定

computed和watch的区别

vue的页面传参

vue的自定义组件

MVVM

Vue与Angular的异同

Vue与React的异同

vue路由中的hash模式和history模式

vue的自定义指令

vue的自定义过滤器

vue的组件缓存

vue-router的导航钩子

v-if 和 v-show 的区别

$route和$router的区别

vue常用指令

vue中操作DOM

vue-loader

Webpack

webpack是什么，它与其他打包工具有什么区别

webpack的bundle、chunk、module分别是什么

webpack的loader和plugin

webpack的模块热更新

webpack的Tree-shaking

CSS

居中方法

BFC

三栏布局（双飞翼、圣杯、flex）

行内元素与块级元素区别

position属性

浮动元素引起的父元素高度塌陷问题的解决方法

浏览器中设置更小字体

flex弹性布局

nth-child(n)和nth-of-type(n)的区别

css选择器匹配规则

viewport标签 和 meta标签

自适应布局和响应式布局

CSS中可以和不可以继承的属性

网络（TCP、HTTP）

get、post的区别、联系

HTTP的八种常用请求方法

同源、跨域问题

ajax

axios的使用

浏览器缓存

常用的请求头

禁止浏览器缓存的方法

跳过缓存处理的方式

互联网的五层模型（TCP）

三握四挥

HTTP和TCP的关系

HTTPS

一次完整的HTTP请求流程

域名解析

TCP和UDP的区别

CSRF攻击和XSS攻击

cookie、session、webstorage、IndexDB的区别与联系

JavaScript

  • JS的数据类型

  1. 值类型：null、undefined、string、number、bollean、symbol
  2. 引用类型：object、function、array
  3. 两种类型的区别：
    1. 值类型存储在栈中。引用类型的变量名存储在栈中，值存储在堆中，且栈中存的是值的地址，该地址指向堆中的值。
    2. 值类型在赋值后，两个变量是相互独立的。引用类型赋值后，两个变量指向的是堆内存中的同一个值，修改其中一个，都会影响另一个。

  • JS中的深拷贝

  1. 注意：数组的concat方法和slice方法并不是深拷贝。它们只能做到数组的一级属性的深拷贝，再往下级，依然是浅拷贝。
  2. 递归拷贝：使用for in 去遍历对象的每一个元素，将其添加到新的空对象中，如果元素是对象，就递归进行拷贝。代码如下：                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    function deepCopy(obj) {
  //判断拷贝的要进行深拷贝的是数组还是对象，是数组的话进行数组拷贝，对象的话进行对象拷贝
  var newObj= Array.isArray(obj) ? [] : {};
  //进行深拷贝的不能为空，并且是对象
  if (obj && typeof obj === "object") {
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        if (obj[key] && typeof obj[key] === "object") {
          newObj[key] = deepCopy(obj[key]);
        } else {
          newObj[key] = obj[key];
        }
      }
    }
  }
  return newObj;
}

     

  3. Object.assign()方法：使用Object.assign(newObject，oldObj)方法，只能进行浅拷贝。如需进行深拷贝，还得递归使用此方法。代码如下： 
    function deepCopy(obj){
    let newObj = new Object();
    Object.assign(newObj,obj);
    for(let key in obj){
        if(typeof obj[key] == 'object'){
            newObj[key] = deepCopy(obj[key]);
        }
    }
    return newObj;
}
  4. 使用JSON的方法：先使用JSON.stringify()将对象转换为JSON字符串，再用JSON.parse()将JSON字符串转换为对象，此对象已经与原对象脱离了关系，最后返回这个对象。但是这种简单粗暴的方法有其局限性：当值为undefined、function、symbol的时候，会在转换过程中被忽略。

  • null与undefined的区别

null表示已经赋值，但是赋值为空。undefined表示声明了但还未赋值。

  • null为什么是对象

JS存储变量时，将其机器码的低位的前三位存储数据类型，而null的机器码全是0，而JS把000视为对象。undefined的机器码是-2^30，typeof undefined == undefined。

  • 使用new操作符后有哪些操作

  1. 创建一个新的空对象。
  2. 把对象的__proto__属性指向构造函数的prototype属性。
  3. 将构造函数中的this指向空对象。
  4. 执行构造函数中的代码。
  5. 返回这个对象。

  • this指向

  1. 对于普通函数，谁调用它，this就指向谁，一般都指向window。
  2. 对于构造函数，this指向的是new之后的实例对象。
  3. 对于箭头函数，它会捕获其定义位置的上下文的this，作为自己的this。
  4. 多层函数嵌套时，内层函数的this一般会指向window，若想让它指向父级，则需要用变量去保存this或使用箭头函数。

  • call、apply、bind区别与联系

  1. 联系：三者都用于改变函数中this的指向。都是函数的内置方法。
  2. call：接收多个参数，第一个参数为运行函数的作用域，后续参数作为默认参数依次传入调用函数。
  3. apply：接收两个参数，第一个参数与call一样为运行函数的作用域，第二个参数为一个数组或类数组作为参数传入调用函数。
  4. bind：接收多个参数，与call一样，第一个参数为运行函数的作用域，后续参数作为默认参数依次传入调用函数。但它与前两个方法的最大区别是bind方法会创建并返回一个函数，且该函数的 this 指向会指向传入的参数的作用域。

  • eval方法

eval()方法会把接收的字符串解析成JS代码并运行。尽量不要使用它，不安全，且十分消耗性能。

  • JSON

一种轻量级的数据交换格式，数据格式简单，易于读写，占用带宽小。采用键值对的方式表示。JSON.stringify()将对象字符串化，JSON.parse()将字符串解析为对象。

  • JS的内置对象

  1. 数据封装类对象：object、array、number、string、boolean
  2. 其他对象：function、date、math、arguments、regexp、error
  3. es6新增：set、map、promise、proxy、reflect、symbol

  • JS中数据类型的判断

  1. typeof：使用typeof来区分数据类型时，对于string、number、boolean、undefined、function、symbol，都可以返回相应的类型。但是在检测null、array、object等类型时，全都返回object。
  2. instanceof：A instanceof B  表示 A 是否为 B 的实例，抽象来说就是B的prototype是否在A的原型链上。返回true或false。注意:当A的原型链上只有null的时候，instanceof会失真。且instanceof仅适用于对象。
  3. constructor属性：constructor 属性返回对创建此对象的构造函数的引用，根据元素的constructor属性，可以判断对象的类型。但是null和undefined没有constructor属性，且constructor属性是可修改的。
  4. toString()：Object的原型方法，它返回当前对象的[[class]]，这是一个内部属性，包含了对象的类型。对于非Object类型，需要借助call方法去调用（Object.prototype.toString.call()），从返回值中可以提取数据类型。

  • JS中对象的创建

  1. 工厂模式：声明一个创建函数，在创建函数中，创建一个新对象，给新对象添加相应的属性和方法，最终返回对象。这种创建方法不能解决对象识别问题。
  2. 构造函数模式：声明一个构造函数，内部使用this关键字，初始化对象的属性和方法。这种方法不能做到函数的复用。
  3. 原型模式：声明一个函数，内部不进行操作。直接修改函数的prototype属性，把属性和方法都添加到原型上。这种方法会导致每个实例对象都共享所有的属性，尤其是引用类型的属性。注意：若直接重写构造函数的原型，需要将其construcor重新指向构造函数。
  4. 组合使用构造函数模式和原型模式（推荐）：使用构造函数模式添加实例属性，使用原型模式添加共享属性和方法。

  • 原型和原型链

  1. 原型：
    1. __proto__：对象的内置属性。它是用来寻找原型链的属性。IE不允许使用__proto__属性。
    2. prototype：函数的内置属性。它是一个指针，指向原型对象。用来修改和访问函数的原型。
    3. 注意点：__proto__是对象的属性，而prototype是函数的属性。
  2. 原型链：
    1. 当调用不在对象中直接定义的属性或方法时，会沿着其__proto__属性，向上查找，一直到找到Object.prototype为止，这样就形成了一条原型链。
    2. 原型链的顶端是null，因为每个对象的原型链的顶部都是Object.prototype，而Object.prototype的__proto__指向null。
    3. JS中的对象是通过引用传递的，如果修改了原型，则与之牵扯的对象都会有改变。

  • JS继承

  1. 原型链继承：将子类构造函数的prototype属性指向父类的实例。注意：重写prototype时，要改变constructor的指向。缺点：a.引用类型的属性会被所有子类的实例共享。b.创建子类实例时，无法向父类传参。
  2. 借用构造函数继承：在子类构造函数中，使用call或apply方法，将父类构造函数绑定在子类构造函数上。缺点：a.无法做到函数的复用。b.无法继承定义在父类构造函数原型上的属性和方法。
  3. 组合继承：将原型链继承和借用构造函数继承的方法结合，使用原型链继承，可以避免函数的多次创建。使用借用构造函数继承，可以避免所有实例共享引用类型的属性，且可以向父类传参。缺点：会调用两次父类构造函数。第一次是将子类构造函数的prototype指向父类构造函数实例时。第二次是在创建子类时，子类构造函数中绑定父类构造函数时。
  4. 原型式继承：创建一个新的构造函数，将构造函数的prototype指向已有的对象，最后返回这个构造函数的实例。原型式继承相当于对父类对象进行了一次浅复制。ES5的Object.create()方法规范了这种继承，可以直接拿来使用。缺点：所有子类实例会共享引用类型的值。
  5. 寄生式继承：创建一个仅用于封装继承过程的函数，该函数在内部用某种方式来增强对象，最后再返回新的对象。缺点：不能做到函数的复用。
  6. 寄生组合式继承（最理想的继承方式）：主要是用来解决组合继承的缺点。仍然使用借用构造函数的方法去继承父类属性，但是在继承父类原型上定义的属性和方法时，不直接将子类的prototype指向父类实例，而是将使用寄生式继承的方法，创建一个新的构造函数，将其prototype指向父类构造函数的prototype，然后将其constructor指向子类构造函数，最后将子类的prototype指向新的构造函数的实例。这样就避免了组合继承的缺点，整体上只会调用一次父类的构造函数。缺点：麻烦。
  7. ES6中的extends关键字：具体内容查看阮一峰的博客：http://es6.ruanyifeng.com/#docs/class-extends

  • 作用域链、闭包、立即执行函数

  1. 作用域链：每个函数都有自己的作用域，函数嵌套形成作用域链，全局作用域是最外层的作用域，即作用域链的顶端是全局作用域。当函数中的所有代码执行完之后，该作用域就会被销毁，这就是局部作用域。全局作用域直到网页关闭或程序退出后才被销毁。内部环境可以通过作用域链来访问外部环境的属性和方法，外部无法访问到内部。
  2. 闭包：能够访问其他函数内部变量的函数。闭包可以理解为定义在一个函数内部的函数，它是将外部函数和内部函数连接起来的一座桥梁。
  3. 闭包的作用：
    1. 闭包可以用来修改和访问外部函数的内部变量。
    2. 闭包中的参数和变量不会被垃圾回收机制所回收。
  4. 立即执行函数：不必去调用，自动就可以执行的函数，在一次执行完之后，立即被释放，一般用于初始化工作，常常与闭包配合使用。

  • window对象和document对象

  1. window对象：指当前浏览器窗口，是JS的顶级对象。
  2. document对象：HTML文档，是window对象的一部分，通过window.document可以访问。

  • 生成随机数公式

Math.floor(Math.random() * 可能值的个数 + 最小值)

  • 有关数字的方法

  1. Math.ceil(x)：向上取整。
  2. Math.floor(x)：向下取整。
  3. Math.random()：随机数（0~1）。
  4. Math.round(x)：四舍五入。
  5. Math.max(x,y)：返回较大值。
  6. Math.min(x,y)：返回较小值。
  7. Math.pow(x,y)：返回x的y次幂。
  8. Math.sqrt(x)：返回x的平方根。
  9. Math.abs(x)：返回x的绝对值。

  • 有关数组的常用方法（注意：红色标注的方法会改变原数组）

  1. Array.isArray(x)：检测x是否为数组。
  2. join()：用指定的分割符分割数组元素，返回一个字符串。
  3. toString()：将数组字符串化。
  4. filter()：过滤数组。接收一个函数为参数，返回一个满足过滤条件的数组。
  5. every()：接收一个函数为参数，如果数组的所有元素都满足条件，则返回true，否则返回false。
  6. some()：接收一个函数为参数，如果数组中有一个元素满足条件，则返回true，否则返回false。
  7. map()：映射方法。接收一个函数为参数，对数组的每个元素都运行给定函数，返回每次函数返回结果组成的数组。
  8. forEach()：遍历方法。接收一个函数为参数，对数组进行遍历操作。
  9. reduce()：归并方法。接收两个参数，第一个参数为归并函数，第二个参数是一个可选的初始值。
  10. reduceRight()：与reduce一样，只不过是反方向遍历。
  11. indexOf()：查找元素。接收两个参数，第一个为要查找的元素，第二个是一个可选的起始查找位置。找到则返回元素的所在位置，找不到返回-1。
  12. lastIndexOf()：反向查找元素。
  13. concat()：这个方法会先创建一个当前数组的副本，如果传入了参数，则会将参数依次添加到副本的末尾，并返回副本数组。如果没有参数，则直接返回副本数组，属于浅复制。
  14. slice()：截取数组。接收两个参数，第一个是起始位置，第二个是可选的结束位置。如果省略第二个参数，则一直截取到数组末尾。注意：返回的数组不包括结束位置的元素。
  15. splice()：可实现数组的删除、插入、替换。接收两个（）及以上的参数。第一个参数为操作的起始位置，第二个参数为要删除的元素个数，后续传参为要插入的元素。注意：此方法返回的是被删除的元素组成的数组，而不是删除后的数组。
  16. sort()：数组元素排序。接收一个可选的比较函数。没有参数则默认按升序排序。
  17. reverse()：反转数组元素。
  18. push()：接收多个参数，将他们依次添加到数组末尾，返回修改后的数组长度。属于栈方法。
  19. pop()：将数组的最后一个元素弹出（删除）。返回弹出元素。属于栈方法。
  20. unshift()：接收多个参数，将他们添加到数组的开头，返回修改后的数组长度。属于队列方法。
  21. shift()：将数组的第一个元素弹出（删除）。返回弹出元素。属于队列方法。
  22. Array.from()：ES6新增方法。接收一个类数组（arguments、Set等）为参数，将其转换为数组并返回。

  • 有关字符串的方法（注意：下列方法都不会改变原字符串）

  1. charAt()：接收一个位置（数字）为参数。返回该位置的字符。
  2. charCodeAt()：参数与charAt()方法一样，但是返回的是该位置字符的字符编码。
  3. indexOf()：查找字符，用法同数组。接收两个参数，第一个为要查找的字符（串），第二个是一个可选的起始查找位置。找到则返回字符（串）的所在位置，找不到返回-1。
  4. lastIndexOf()：反向查找。
  5. concat()：接收一个字符串为参数，将其拼接在原字符串之后，返回一个新的字符串。
  6. trim()：去掉字符两端的空格。返回一个新的字符串。
  7. substr()：截取字符串。接收两个参数，第一个为起始位置，第二个为可选的截取长度。
  8. substring()：截取字符串。接收两个参数，第一个为起始位置，第二个为可选的结束位置。注意：不包含结束位置的字符。
  9. slice()：截取字符串。用法与substring()方法相同。它们的区别在于两个方法在处理负数参数时不同（https://blog.csdn.net/Zerofishcoding/article/details/78300439）。
  10. toUpperCase()：将字符串转化为纯大写。返回一个新的字符串。
  11. toLowerCase()：将字符串转化为纯小写。返回一个新的字符串。
  12. split()：接收一个分割符（字符（串），可以为空字符串）为参数。将分割后的字符串 (  一定注意：这里是字符串，即便是 数字 也会转换为字符串放入数组  ) 放入一个数组，并返回这个数组。注意：如果未传入参数，会将整个字符串当做一个元素放入数组中。
  13. replace()：接收两个参数。第一个参数为要被替换的字符串或一个正则表达式，第二个为替换字符串或一个函数。注意：若的一个参数是一个字符串，则只会替换第一次出现的字符串。若想替换所有出现的字符串，必须使用正则。
  14. search()：接收一个字符串或正则表达式为参数。返回其在原字符串中的位置，找不到返回-1。
  15. match()：接收一个正则表达式为参数，将符合的字符串放入一个数组，并返回这个数组。
  16. includes()：ES6新增方法。接收两个参数，第一个为一个字符串，第二个为一个可选的起始位置。包含则返回true，否则返回false。
  17. startswith()：ES6新增方法。参数与includes方法相同。若参数出现在字符串的开始位置，就返回true，否则返回false。
  18. endswith()：ES6新增方法。参数与includes方法相同。若参数出现在字符串的结束位置，就返回true，否则返回false。
  19. repeat()：ES6新增方法。接收一个数字为参数。返回一个把原字符串重复指定次数后的新字符串。

  • setTimeout()和setInterval()

  1. setTimeout()：在指定毫秒后，调用回调函数。返回一个定时器ID。
  2. setInterval()：每隔指定毫秒后，调用回调函数。返回一个定时器ID。
  3. clearTimeout(id)和clearInterval(id)：用来清除指定的定时器。
  4. 建议使用setTimeout()代替setInterval()，因为使用setInterval()时，后一个间歇调用可能在前一个间歇调用未执行完之前就开始。

  • JS的预解析

JS文件在正式开始执行之前，会将带有var和function声明的变量和函数在内存中排好，通过var声明的，不管是变量还是函数，它的值最初都是undefined。重名时，函数名优先级高于变量名。预解析是在程序进入一个新的环境时，把该环境里的变量或函数预解析到它们能调用的环境中。即每一次预解析的单位是一个执行环境。

  • 事件流

  1. 冒泡型事件流（推荐）：由IE提出。事件的传播从最特定的事件目标到最不特定的事件目标。
  2. 捕获型事件流：由Netspace提出。事件的传播是从最不特定的事件目标到最特定的事件目标。
  3. 标准的事件流（三个阶段）：事件捕获阶段、处于目标阶段、事件冒泡阶段。
  4. focus和blur时间只有事件捕获阶段和处于目标阶段。
  5. 阻止冒泡和捕获进一步传播的方法：
    1. 旧版IE：window.event.cancelBubble = true
    2. 其他浏览器：event.stopPropagation()
  6. 取消默认事件的方法：
    1. 旧版IE：window.event.returnValue = false
    2. 其他浏览器：event.preventDefault()

  • 事件委托

  1. 事件委托是值将事件绑定到目标元素的父级或更高级元素上，利用冒泡机制触发事件。
  2. 优点：
    1. 减少事件的注册，节省内存。
    2. 添加子元素时，无需再重复添加事件绑定。

  • JS的垃圾回收机制

  1. 标记清除：大部分浏览器所使用的机制。当变量进入执行环境时，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候，将其标记为“离开环境”。垃圾回收器在运行时会给内存中所有变量都加上标记（任意方式），然后去掉处在环境中的变量以及被环境中的变量引用的变量标记。而在此之后剩下的带有标记的变量被视为要删除的变量。
  2. 引用计数：低版本的IE所使用的机制。当声明一个变量并将一个引用类型赋值给该变量的时候，这个变量的引用次数加一，当此变量又取得了另一个值时，其引用次数减一，当引用次数为0的时候，就可以回收了。但是这种回收机制有一个缺点：循环引用的时候，引用次数无法变为0，也就无法回收，导致内存泄漏，必须得手动解除引用才行。

  • DOM操作

  1. creatElement()：创建一个具体的元素。
  2. creatTextNode()：创建一个文本节点。
  3. appendChild()：添加子元素。
  4. removeChild()：删除子元素。
  5. replaceChid()：替换子元素。
  6. insertBefore()：插入元素。
  7. getElementById()：返回指定ID元素。
  8. getElementsByTagName()：返回指定标签名的所有节点。(返回一个类数组)
  9. getElementsByClassName()：返回指定类名的所有节点。（返回一个类数组）
  10. getAttribute()：返回指定属性值。
  11. setAttribute()：修改指定属性值。

  • Object.defineProperty(obj,prop,descriptor)方法

  1. 对象属性的四大特性：
    1. value：值。
    2. configurable：是否可配置（不可逆）。
    3. wirtable：是否可写。
    4. enumerable：是否可枚举。
  2. Object.defineProperty()：用于修改现有对象属性的特性。如果属性不存在，则添加该属性。
  3. Object.defineProperties()：修改多个对象属性的特性。
  4. 注意：不是用Object.defineProperties()定义的对象属性，三大特性的默认值都是true，而用Object.defineProperties()定义的对象属性，三大特性的默认值都是false。value特性的默认值始终是undefined。
  5. Object.getOwnPropertyDescriptor(obj,prop)：返回指定对象属性的描述符。

  • EventLoop事件循环机制

  1. 同步任务：在主线程上排队执行的任务，只有前一个任务执行完之后，才能执行下一个任务。
  2. 异步任务：不进入主线程，而是进入一个“任务队列”，只有等待主线程上的任务全部执行完毕后，“任务队列”才去通知主线程，请求执行任务，然后才能进入主线程执行。
  3. 异步任务的分类：分为宏任务和微任务。先执行宏任务，后执行微任务。
    1. 宏任务：setTimeOut()、setInterval()
    2. 微任务：Promise.then()、process.nextTick()
  4. 事件执行顺序：同步事件进入主线程，异步事件的回调函数进入任务队列（宏任务和微任务有不同的任务队列）等待主线程任务执行完毕，从任务队列中去读取事件放入主线程执行（先执行宏任务后执行微任务），然后循环上述操作。

  • forEach、for...in、for...of的区别

  1. forEach：
    1. 用于循环遍历数组。不可以使用break或return进行中断处理。
    2. 使用形式：arr.forEach((value,index,arr)=>{ ... })。
  2. for...in：
    1. 用于循环对象，也可以循环数组（不推荐），输出的顺序不定。
    2. 使用形式：for (let key in obj){ ... }
  3. for...of：
    1. 用于循环数组、类数组、字符串、Set、Map等，不能循环对象，可以进行中断处理。
    2. 使用形式：for(let value of arr){ ... }、for(let letter of str){ ... }、for(let [key,value] of map){ ... }

  • 最简单的数组去重方法（可深度去重）

function quchong(arr){
    let set = new Set(arr.map(e=>JSON.stringify(e)));
    let transferArr = [...set]
    let returnArr = transferArr.map(e=>JSON.parse(e))
    return returnArr;
}

  • 退出循环的三种方法

  1. continue：退出当前循环，进行下一次循环。
  2. break：退出整个循环。
  3. return：只能出现在函数体内。如果在函数体内的循环语句中出现，则退出整个循环，并函数体内语句的执行。

  • keydown、keyup 和 keypress的区别

  1. keypress 只能捕获单个字符。而 keydown 和 keyup 可以捕获组合键。
  2. keypress 将每个字符的大、小写形式作为不同的键代码解释，即作为两种不同的字符（区分大小写）。keydown 、keyup 不能判断键值字母的大小写。
  3. keypress 不区分小键盘和主键盘的数字字符。keydown 、keyup 区分小键盘和主键盘的数字字符。
  4. 当键盘一直处于按下状态时，keypress、keydown会一直触发。

  • JS处理浮点数的精度问题

  1. JS中 0.1 + 0.2 = 0.30000000000000004：由于计算机只能识别二进制数（0,1），因此在进行数值计算时，会先将数值转换为二进制数，再进行运算。0.1 => 0.0001 1001 1001 1001…（无限循环），0.2 => 0.0011 0011 0011 0011…（无限循环）。对于无限循环的小数，计算机会进行舍入处理。进行双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串二进制数字：0.0100110011001100110011001100110011001100110011001100 因浮点数小数位的限制而截断的二进制数字，这时候，我们再把它转换为十进制，就成了 0.30000000000000004。
  2. 解决方法：把需要计算的数字升级（乘以10的n次幂）成计算机能够精确识别的整数，等计算完毕再降级（除以10的n次幂）。

  • JS中整数的范围

  1. 范围：-Math.pow(2,53) ~ Math.pow(2,53)。超出这个范围的整数精度就不准确了。
  2. 判断：Number.isSafeInteger(x)用来判断一个整数（浮点数无论多大都返回false）是否落在这个范围之内。注意：Number.isSafeInteger(Math.pow(2,53))和Number.isSafeInteger(-Math.pow(2,53)) 均为 false。

  • JS声明二进制、八进制、十六进制

  1. 二进制：0b或0B开头。例：let x = 0b11
  2. 八进制：0o或0O开头。例：let x = 0o77
  3. 十六进制：0x或0X开头。例：let x = 0xff

  • DOM元素的 offsetTop / offsetLeft 、 clientTop / clientLeft 和 clientHeight / clientWidth属性

  1. offsetTop / offsetLeft：用来获取当前元素的 上/左 边框 相对于定位容器（position不为static）的位置。注意：如果所有祖先元素都是静态定位（position为static），则表示与文档最 上/左 方的距离。
  2. clientTop / clientLeft：不要被名字误导。clientTop / clientLeft 是指当前元素的 上/左 边框的宽度 的 整数值（浮点数会进行标准 四舍五入）。
  3. clientHeight / clientWidth：指当前元素的 高度 / 宽度（包括content和padding，不包括border） 的 整数值（浮点数会进行标准 四舍五入）。

  • JS的鼠标位置属性 screenX / screenY 和 clientX / clientY

  1. screenX / screenY：表示当前鼠标相对于 显示器（屏幕）的位置。
  2. clientX / clientY：表示当前鼠标相对于 浏览器窗口（文档）的位置。

  • 滚动条位置属性 window.scrollX / window.scrollY

window.scrollX / window.scrollY指全局滚动条距离文档 左侧和顶部 位置。

  • JS防抖、节流

  1. 防抖：将几次操作合并为一此操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。代码如下： 
        function debounce(func,wait){
        let timeId;
        return function(){
            let that = this;
            let args = arguments;
            if(timeId){
                clearTimeout(timeId)
            }
            timeId= setTimeout(() => {
                func.apply(that,args)
            }, wait);
        }
    }

     

  2. 节流：一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。代码如下： 
        function throttle(func,wait){
        let pre = 0;
        return function(){
            let that = this;
            let args = arguments;
            let now = Date.now();
            if(now - pre > wait){
                func.apply(that,args);
                pre = now;
            }
        }
    }
  3. 应用场景：
    1. 用户输入搜索时，在不断输入值时，用防抖来节约请求资源。停止输入后才搜索。
    2. 页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求。这个可以使用节流技术来实现。

  • JS的getter 和 setter

  1. 对象属性是由名字、值和一组特性构成的。在ES5中，属性值可以用一个或两个方法替代，这两个方法就是getter和setter。由getter和setter定义的属性称做 "存储器属性"，它不同于 "数据属性"，数据属性就是一个简单的值。
  2. getter：当程序查询存取器属性的值时，JS调用 getter方法（无参数）。这个方法的返回值就是属性存取表达式的值。
  3. setter：当程序设置一个存取器属性的值时，JS调用 setter方法（有参数），将赋值表达式右侧的值当做参数传入setter。从某种意义上讲，这个方法负责 "设置"属性值。JS会忽略setter方法的返回值（即忽略return）。
  4. 和数据属性不同，存取器属性本身不具有可写性（即无法给自身赋值）。
    1. 如果属性同时具有getter和setter，那么它是一个读/写属性。
    2. 如果它只有getter方法，那么它是一个只读属性。
    3. 如果它只有setter方法，那么它是一个只写属性（数据属性中有一些例外）。读取只写属性总是返回undefined.
  5. 代码示例： 
    let obj = {
    _name: 'wang',
    get name(){
        return this._name;
    },
    set name(arg){
        this._name = arg;
    }
}
obj.name = 'zhang';

console.log(obj.name);    // zhang

  • 函数的内置属性和方法 

  1. 属性：
    1. name：返回本函数的函数名。
    2. length：返回本函数参数个数（使用ES6的rest参数时，length会失真）。
    3. prototype：这个属性指向一个对象的引用，这个对象称做原型对象(prototype object)。每一个函数都包含不同的原型对象。将函数用做构造函数时，新创建的对象会从原型对象上继承属性。
    4. caller（废弃）：指向调用当前函数的函数。若无调用函数，则为null。
  2. 方法：
    1. call：用于改变this指向。
    2. apply：用于改变this指向。
    3. bind：用于改变this指向。会返回一个函数。

  • 函数的arguments对象

  1. arguments对象是所有（非箭头）函数中都可用的局部变量。可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数（注意：此处的参数是实参，不是形参）。
  2. arguments对象不是一个数组。它是一个类数组，但除了length属性和索引元素之外没有任何数组属性。
  3. arguments.length：返回传递给当前函数的参数数量（实参可能与形参个数不同）。
  4. arguments.callee：指向当前执行的函数。（建议总是使用这种方式调用函数自身，而不是使用函数名调用自身。）

  • JS中的URL编码（解码）方法：

  1. escape() 和 unescape()：对除ASCII字母、数字、标点符号  @  *  _  +  -  .  /   以外的其他字符进行编码。
  2. encodeURI() 和 decodeURI()：Javascript中真正用来对URL编码（解码）的函数，用于对整个URL进行编码。返回编码为有效的统一资源标识符 (URI) 的字符串，不会被编码的字符有 ! @ # $ & * ( ) = : / ; ? + '
  3. encodeURIComponent() 和 decodeURIComponent()：对URL的组成部分进行个别编码，而不用于对整个URL进行编码。他会编码   ; / ? : @ & = + $ , #  这些特殊字符。例如 想要传递带&符号的网址，就要用encodeURIComponent()编码。

  • JS的事件

  1. UI事件：
    1. load：会在window， object 以及 img上面触发(注意：IE8和IE8之前的script标签不支持load, 但是支持onreadystatechange, IE家族中所有元素都支持这个状态属性)。
    2. unload：window.onunload、 object.onunload ，图像不触发onunload。
    3. resize： 把窗口拉大拉小, 最大化和最小化会触发这个事件(在移动端上的onoritatinochange反应很慢,就可以用resize代替),而且火狐的低版本是等到用户停止resize才会执行事件函数。
    4. scroll：滚动事件,主要是window.onscroll这个事件。
    5. error：当一个js代码执行发生错误的时候触发，或者img, object, script等需要请求远程资源的标签没有请求到, 就会触发这个事件, 这个事件实际工作中用的不多。
    6. abort：用户停止下载(用户问题)或者内容没有加载完毕(服务器问题), 就会触发。
  2. 焦点事件：
    1. focus：获取焦点的时候触发，不冒泡。
    2. blur：失去焦点的时候触发，不冒泡。
    3. focusin：冒泡的获取焦点事件。
    4. focusout：冒泡的失去焦点事件;
  3. 鼠标和滚轮事件：
    1. click：一般是点击左键触发这个事件，点击右键是触发右键菜单。如果当前的元素获得焦点，那么我们按回车(enter)也会触发click事件。
    2. dblclick：鼠标双击的时候触发、 如果dblclick触发了也会触发click的事件;
    3. mousedown：鼠标（左键或者右键）按下时触发。不能通过键盘触发。
    4. mouseup：鼠标（左键或者右键）被释放弹起时触发。不能通过键盘触发。
    5. mousemove：鼠标在元素内部移动时不断触发。不能通过键盘触发。
    6. mouseover：鼠标移入目标元素上方时触发。鼠标移到其后代元素上时会触发（该事件支持冒泡）。
    7. mouseout：鼠标移出目标元素上方时触发（该事件支持冒泡）。
    8. mouseenter：鼠标移入元素范围内触发（该事件不冒泡）。
    9. mouseleave：鼠标移出元素范围时触发（该事件不冒泡）。
    10. mousewheel：鼠标滚轮在垂直方向上滚动页面时（无论向上还是向下）触发。
  4. 键盘事件：
    1. keypress：键盘按键按下时触发。(如果用户按住不放会重复触发，而且这个键有点延迟。)
    2. ​​​keydown：键盘按键按下时触发。(如果用户按住不放会重复触发，而且这个键有点延迟。)
    3. keyup：键盘按键弹起时触发。
  5. 变动事件：
    1. input：该事件在 或