关于前端:20道JavaScript经典面试题

该篇文章整顿了一些前端经典面试题，附带详解，波及到 JavaScript 多方面知识点，满满都是干货～倡议珍藏浏览

如果这篇文章有帮忙到你，❤️关注 + 点赞❤️激励一下作者，文章公众号首发，关注 前端南玖 第一工夫获取最新的文章～

其中有 7 种根本数据类型：

ES5 的 5 种：Null，undefined，Boolean，Number，String，

ES6 新增：Symbol 示意举世无双的值

ES10 新增：BigInt 示意任意大的整数

一种援用数据类型：

Object（实质上是由一组无序的键值对组成）

蕴含 function,Array,Date 等。JavaScript 不反对创立任何自定义类型的数据，也就是说 JavaScript 中所有值的类型都是下面 8 中之一。

根本数据类型：间接存储在栈内存中，占据空间小，大小固定，属于被频繁应用的数据。
援用数据类型：同时存储在栈内存与堆内存中，占据空间大，大小不固定。援用数据类型将指针存在栈中，将值存在堆中。当咱们把对象值赋值给另外一个变量时，复制的是对象的指针，指向同一块内存地址。

相同点：

Undefined 和 Null 都是根本数据类型，这两个根本数据类型别离都只有一个值，就是 undefined 和 null

不同点：

undefined 代表的含意是未定义，null 代表的含意是空对象。
typeof null 返回 ’object’，typeof undefined 返回 ’undefined’

null == undefined  // true
null === undefined // false

其实 null 不是对象，尽管 typeof null 会输入 object，然而这只是 JS 存在的一个悠久 Bug。在 JS 的最后版本中应用的是 32 位零碎，为了性能思考应用低位存储变量的类型信息，000 结尾代表是对象，然而 null 示意为全零，所以将它谬误的判断为 object。尽管当初的外部类型判断代码曾经扭转了，然而对于这个 Bug 却是始终流传下来。

2. 说说 JavaScript 中判断数据类型的几种办法

typeof
typeof个别用来判断根本数据类型，除了判断 null 会输入 ”object”，其它都是正确的

typeof判断援用数据类型时，除了判断函数会输入 ”function”, 其它都是输入 ”object”

console.log(typeof 6);               // 'number'
console.log(typeof true);            // 'boolean'
console.log(typeof 'nanjiu');        // 'string'
console.log(typeof []);              // 'object'     []数组的数据类型在 typeof 中被解释为 object
console.log(typeof function(){});    // 'function'
console.log(typeof {});              // 'object'
console.log(typeof undefined);       // 'undefined'
console.log(typeof null);            // 'object'     null 的数据类型被 typeof 解释为 object

对于援用数据类型的判断，应用 typeof 并不精确，所以能够应用 instanceof 来判断援用数据类型

Instanceof 能够精确的判断援用数据类型，它的原理是检测构造函数的 prototype 属性是否在某个实例对象的原型链上

原型知识点具体能够看我之前的文章：你肯定要懂的 JavaScript 之原型与原型链

语法：

object instanceof constructor
console.log(6 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('nanjiu' instanceof String);                // false  
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true

当一个函数被定义时，JS 引擎会为函数增加 prototype 属性，而后在 prototype 属性上增加一个 constructor 属性，并让其指向该函数。

当执行 let f = new F()时，F 被当成了构造函数，f 是 F 的实例对象，此时 F 原型上的 constructor 属性传递到了 f 上，所以f.constructor===F

function F(){}
let f = new F()
f.constructor === F // true

new Number(1).constructor === Number //true
new Function().constructor === Function // true
true.constructor === Boolean //true
''.constructor === String // true
new Date().constructor === Date // true
[].constructor === Array

⚠️留神：

null 和 undefined 是有效的对象，所以他们不会有 constructor 属性
函数的 construct 是不稳固的，次要是因为开发者能够重写 prototype，原有的 construction 援用会失落，constructor 会默认为 Object
```
function F(){}
F.prototype = {}
let f = new F()
f.constructor === F // false
console.log(f.constructor) //function Object(){..}
```
为什么会变成 Object？

因为 prototype 被从新赋值的是一个 {}，{} 是new Object()的字面量，因而 new Object() 会将 Object 原型上的 constructor 传递给 {}，也就是 Object 自身。

因而，为了标准开发，在重写对象原型时个别都须要从新给 constructor 赋值，以保障对象实例的类型不被篡改。

Object.prototype.toString.call()

toString() 是 Object 的原型办法，调用该办法，默认返回以后对象的 [[Class]]。这是一个外部属性，其格局为 [object Xxx]，其中 Xxx 就是对象的类型。

对于 Object 对象，间接调用 toString() 就能返回 [object Object]。而对于其余对象，则须要通过 call / apply 来调用能力返回正确的类型信息。
```
Object.prototype.toString.call('') ;   // [object String]
Object.prototype.toString.call(1) ;    // [object Number]
Object.prototype.toString.call(true) ; // [object Boolean]
Object.prototype.toString.call(Symbol()); //[object Symbol]
Object.prototype.toString.call(undefined) ; // [object Undefined]
Object.prototype.toString.call(null) ; // [object Null]
Object.prototype.toString.call(new Function()) ; // [object Function]
Object.prototype.toString.call(new Date()) ; // [object Date]
Object.prototype.toString.call([]) ; // [object Array]
Object.prototype.toString.call(new RegExp()) ; // [object RegExp]
Object.prototype.toString.call(new Error()) ; // [object Error]
Object.prototype.toString.call(document) ; // [object HTMLDocument]
Object.prototype.toString.call(window) ; //[object global] window 是全局对象 global 的援用
```
3.js 数据类型转换

在 JavaScript 中类型转换有三种状况：
转换为数字（调用 Number(),parseInt(),parseFloat()办法）
转换为字符串（调用.toString()或 String()办法）
转换为布尔值（调用 Boolean()办法）

null、undefined 没有.toString 办法

转换为数字
Number()：能够把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回NaN
```
Number('1')   // 1
Number(true)  // 1
Number('123s') // NaN
Number({})  //NaN
```

parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix 是 2 -36 之间的整数，示意被解析字符串的基数。

parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2)  // NaN
parseInt('a123')  // NaN  如果第一个字符不是数字或者符号就返回 NaN
parseInt('123a')  // 123

parseFloat(string)：解析一个参数并返回一个浮点数

parseFloat('123a')
//123
parseFloat('123a.01')
//123
parseFloat('123.01')
//123.01
parseFloat('123.01.1')
//123.01

隐式转换

let str = '123'
let res = str - 1 //122
str+1 // '1231'
+str+1 // 124

.toString() ⚠️留神：null,undefined 不能调用

Number(123).toString()
//'123'
[].toString()
//''
true.toString()
//'true'

String() 都能转

String(123)
//'123'
String(true)
//'true'
String([])
//''
String(null)
//'null'
String(undefined)
//'undefined'
String({})
//'[object Object]'

隐式转换：当 + 两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串
```
let a = 1
a+''//'1'
```
转换为布尔值

0, ”(空字符串), null, undefined, NaN 会转成 false，其它都是 true

Boolean()

Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true

条件语句

let a
if(a) {//...   // 这里 a 为 undefined，会转为 false，所以该条件语句外部不会执行}

隐式转换 !!
```
let str = '111'
console.log(!!str) // true
```
4.{}和 [] 的 valueOf 和 toString 的返回后果？

valueOf：返回指定对象的原始值

对象	返回值
Array	返回数组对象自身。
Boolean	布尔值。
Date	存储的工夫是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。
Function	函数自身。
Number	数字值。
Object	对象自身。这是默认状况。
String	字符串值。
	Math 和 Error 对象没有 valueOf 办法。

toString：返回一个示意对象的字符串。默认状况下，toString() 办法被每个 Object 对象继承。如果此办法在自定义对象中未被笼罩，toString() 返回 “[object type]”，其中 type 是对象的类型。
```
({}).valueOf()   //{}
({}).toString()  //'[object Object]'
[].valueOf()    //[]
[].toString()   //''
```
5.let,const,var 的区别？
变量晋升：let,const 定义的变量不会呈现变量晋升，而 var 会
块级作用域：let,const 是块作用域，即其在整个大括号 {} 之内可见，var：只有全局作用域和函数作用域概念，没有块级作用域的概念。
反复申明：同一作用域下 let,const 申明的变量不容许反复申明，而 var 能够
暂时性死区：let,const 申明的变量不能在申明之前应用，而 var 能够
const 申明的是一个只读的常量，不容许批改

6.JavaScript 作用域与作用域链

作用域：

简略来说，作用域是指程序中定义变量的区域，它决定了以后执行代码对变量的拜访权限

作用域链：

当可执行代码外部拜访变量时，会先查找以后作用域下有无该变量，有则立刻返回，没有的话则会去父级作用域中查找 … 始终找到全局作用域。咱们把这种作用域的嵌套机制称为 作用域链

具体常识能够看我之前的文章：JavaScript 深刻之作用域与闭包

7. 如何正确的判断 this 指向？

this 的绑定规定有四种：默认绑定，隐式绑定，显式绑定，new 绑定.
函数是否在 new 中调用(new 绑定)，如果是，那么 this 绑定的是 new 中新创建的对象。
函数是否通过 call,apply 调用，或者应用了 bind (即硬绑定)，如果是，那么 this 绑定的就是指定的对象。
函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this 绑定的是那个上下文对象。个别是 obj.foo()
如果以上都不是，那么应用默认绑定。如果在严格模式下，则绑定到 undefined，否则绑定到全局对象。
如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind, 这些值在调用时会被疏忽，理论利用的是默认绑定规定。

箭头函数没有本人的 this, 它的 this 继承于上一层代码块的 this。

具体常识能够看我之前的文章:this 指向与 call,apply,bind

在可迭代对象（具备 iterator 接口）（Array，Map，Set，String，arguments）上创立一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，不能遍历对象

let arr=["前端","南玖","ssss"];
  for (let item of arr){console.log(item)
  }
// 前端 南玖 ssss
// 遍历对象
let person={name:"南玖",age:18,city:"上海"}
for (let item of person){console.log(item)
}
// 咱们发现它是不能够的 咱们能够搭配 Object.keys 应用
for(let item of Object.keys(person)){console.log(person[item])
}
// 南玖 18 上海

for…in 循环：遍历对象本身的和继承的可枚举的属性, 不能间接获取属性值。能够中断循环。

let person={name:"南玖",age:18,city:"上海"}
 let text=""
 for (let i in person){text+=person[i]
 }
 // 输入：南玖 18 上海
// 其次在尝试一些数组
 let arry=[1,2,3,4,5]
 for (let i in arry){console.log(arry[i])
  }
//1 2 3 4 5

forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是 undefined)。

let arr=[1,2,3];
const res = arr.forEach(item=>{console.log(item*3)
})
// 3 6 9
console.log(res) //undefined
console.log(arr) // [1,2,3]

map: 只能遍历数组，不能中断，返回值是批改后的数组。

let arr=[1,2,3];
const res = arr.map(item=>{return res+1})
console.log(res) //[2,3,4]
console.log(arr) // [1,2,3]

forEach 遍历列表值, 不能应用 break 语句或应用 return 语句
for in 遍历对象键值(key), 或者数组下标, 不举荐循环一个数组
for of 遍历列表值, 容许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（汇合）等可迭代的数据结构等. 在 ES6 中引入的 for of 循环，以代替 for in 和 forEach()，并反对新的迭代协定。
for in 循环出的是 key，for of 循环出的是 value；
for of 是 ES6 新引入的个性。修复了 ES5 的 for in 的有余；
for of 不能循环一般的对象，须要通过和 Object.keys()搭配应用。

9. 说说你对原型链的了解？

每个函数（类）天生自带一个属性 prototype，属性值是一个对象，外面存储了以后类供 实例 应用的属性和办法 「（显示原型）」

在浏览器默认给原型开拓的堆内存中有一个 constructor 属性：存储的是以后类自身（⚠️留神：本人开拓的堆内存中默认没有 constructor 属性，须要本人手动增加）「（构造函数）」

每个对象都有一个 __proto__ 属性，这个属性指向以后实例所属类的 原型（不确定所属类，都指向Object.prototype）「（隐式原型）」

当你试图获取一个对象的某个属性时，如果这个对象自身没有这个属性，那么它会去它的隐式原型__proto__（也就是它的构造函数的显示原型prototype）中查找。「（原型链）」

具体常识能够看我之前的文章：你肯定要懂的 JavaScript 之原型与原型链

10. 说一说三种事件模型？

事件模型

DOM0 级模型：，这种模型不会流传，所以没有事件流的概念，然而当初有的浏览器反对以冒泡的形式实现，它能够在网页中间接定义监听函数，也能够通过 js 属性来指定监听函数。这种形式是所有浏览器都兼容的。

IE 事件模型： 在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行指标元素绑定的监听事件。而后是事件冒泡阶段，冒泡指的是事件从指标元素冒泡到 document，顺次查看通过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来增加监听函数，能够增加多个监听函数，会按程序顺次执行。

DOM2 级事件模型： 在该事件模型中，一次事件共有三个过程，第一个过程是事件捕捉阶段。捕捉指的是事件从 document 始终向下流传到指标元素，顺次查看通过的节点是否绑定了事件监听函数，如果有则执行。前面两个阶段和 IE 事件模型的两个阶段雷同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数能够指定事件是否在捕捉阶段执行。

事件委托

事件委托指的是把一个元素的事件委托到另外一个元素上。一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到须要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，而后在外层元素下来执行函数。

事件流传（三个阶段）
捕捉阶段–事件从 window 开始，而后向下到每个元素，直到达到指标元素事件或 event.target。
指标阶段–事件已达到目标元素。
冒泡阶段–事件从指标元素冒泡，而后回升到每个元素，直到达到 window。

事件捕捉

当事件产生在 DOM 元素上时，该事件并不齐全产生在那个元素上。在捕捉阶段，事件从 window 开始，始终到触发事件的元素。window----> document----> html----> body ----> 指标元素

事件冒泡

事件冒泡刚好与事件捕捉相同，以后元素 ---->body ----> html---->document ---->window。当事件产生在 DOM 元素上时，该事件并不齐全产生在那个元素上。在冒泡阶段，事件冒泡，或者事件产生在它的父代，祖父母，祖父母的父代，直到达到 window 为止。

如何阻止事件冒泡

w3c 的办法是 e.stopPropagation()，IE 则是应用 e.cancelBubble = true。例如：
```
window.event?window.event.cancelBubble = true : e.stopPropagation();
```
return false 也能够阻止冒泡。

11.JS 提早加载的形式

JavaScript 会阻塞 DOM 的解析，因而也就会阻塞 DOM 的加载。所以有时候咱们心愿提早 JS 的加载来进步页面的加载速度。
把 JS 放在页面的最底部
script 标签的 defer 属性：脚本会立刻下载但提早到整个页面加载结束再执行。该属性对于内联脚本无作用 (即没有 「src」 属性的脚本）。
Async 是在内部 JS 加载实现后，浏览器闲暇时，Load 事件触发前执行，标记为 async 的脚本并不保障依照指定他们的先后顺序执行，该属性对于内联脚本无作用 (即没有 「src」 属性的脚本）。
动态创建 script 标签，监听 dom 加载结束再引入 js 文件

12. 说说什么是模块化开发？

模块化的开发方式能够进步代码复用率，不便进行代码的治理。通常一个文件就是一个模块，有本人的作用域，只向外裸露特定的变量和函数。

几种模块化计划
第一种是 CommonJS 计划，它通过 require 来引入模块，通过 module.exports 定义模块的输入接口。
第二种是 AMD 计划，这种计划采纳异步加载的形式来加载模块，模块的加载不影响前面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载实现后再执行回调函数。require.js 实现了 AMD 标准。
第三种是 CMD 计划，这种计划和 AMD 计划都是为了解决异步模块加载的问题，sea.js 实现了 CMD 标准。它和 require.js 的区别在于模块定义时对依赖的解决不同和对依赖模块的执行机会的解决不同。
第四种计划是 ES6 提出的计划，应用 import 和 export 的模式来导入导出模块。

CommonJS

Node.js是 commonJS 标准的次要践行者。这种模块加载计划是服务器端的解决方案，它是以同步的形式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取十分快，所以以同步的形式加载没有问题。但如果是在浏览器端，因为模块的加载是应用网络申请，因而应用异步加载的形式更加适合。
```
// 定义模块 a.js
var title = '前端';
function say(name, age) {console.log(` 我是 ${name}, 往年 ${age}岁，欢送关注我～`);
}
module.exports = { // 在这里写上须要向外裸露的函数、变量
say: say,
title: title
}
// 援用自定义的模块时，参数蕴含门路，可省略.js
var a = require('./a');
a.say('南玖', 18); // 我是南玖，往年 18 岁，欢送关注我～
```
AMD 与 require.js

AMD 标准采纳异步形式加载模块，模块的加载不影响它前面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载实现之后，这个回调函数才会运行。这里介绍用 require.js 实现 AMD 标准的模块化：用 require.config() 指定援用门路等，用 define() 定义模块，用 require() 加载模块。

CMD 与 sea.js

CMD 是另一种 js 模块化计划，它与 AMD 很相似，不同点在于：AMD 推崇依赖前置、提前执行，CMD 推崇依赖就近、提早执行。此标准其实是在 sea.js 推广过程中产生的。

ES6 Module

ES6 在语言规范的层面上，实现了模块性能，而且实现得相当简略，旨在成为浏览器和服务器通用的模块解决方案。其模块性能次要由两个命令形成：export和 import。export 命令用于规定模块的对外接口，import命令用于输出其余模块提供的性能。
```
// 定义模块 a.js
var title = '前端';
function say(name, age) {console.log(` 我是 ${name}, 往年 ${age}岁，欢送关注我～`);
}
export { // 在这里写上须要向外裸露的函数、变量
say,
title
}
// 援用自定义的模块时，参数蕴含门路，可省略.js
import {say,title} from "./a"
say('南玖', 18); // 我是南玖，往年 18 岁，欢送关注我～
```
CommonJS 与 ES6 Module 的差别

CommonJS 模块输入的是一个值的拷贝，ES6 模块输入的是值的援用。
CommonJS 模块输入的是值的拷贝，也就是说，一旦输入一个值，模块外部的变动就影响不到这个值。
ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本动态剖析的时候，遇到模块加载命令 import，就会生成一个只读援用。等到脚本真正执行时，再依据这个只读援用，到被加载的那个模块外面去取值。换句话说，ES6 的import 有点像 Unix 零碎的“符号连贯”，原始值变了，import加载的值也会跟着变。因而，ES6 模块是动静援用，并且不会缓存值，模块外面的变量绑定其所在的模块。

CommonJS 模块是运行时加载，ES6 模块是编译时输入接口。
运行时加载: CommonJS 模块就是对象；即在输出时是先加载整个模块，生成一个对象，而后再从这个对象下面读取办法，这种加载称为“运行时加载”。
编译时加载: ES6 模块不是对象，而是通过 export 命令显式指定输入的代码，import时采纳动态命令的模式。即在 import 时能够指定加载某个输入值，而不是加载整个模块，这种加载称为“编译时加载”。

CommonJS 加载的是一个对象（即 module.exports 属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种动态定义，在代码动态解析阶段就会生成。

举荐浏览前端模块化了解

13. 说说 JS 的运行机制

举荐浏览摸索 JavaScript 执行机制

14. 如何在 JavaScript 中比拟两个对象？

对于两个非根本类型的数据，咱们用 == 或===都批示查看他们的援用是否相等，并不会查看理论援用指向的值是否相等。

例如，默认状况下，数组将被强制转换成字符串，并应用逗号连贯所有元素
```
let a = [1,2,3]
let b = [1,2,3]
let c = "1,2,3"
a == b // false
a == c // true
b == c // true
```
个别比拟两个对象会采纳递归来比拟

15. 说说你对闭包的了解，以及它的原理和利用场景？

一个函数和对其四周（词法环境）的援用捆绑在一起（或者说函数被援用突围），这样一个组合就是闭包（「closure」）

闭包原理

函数执行分成两个阶段(预编译阶段和执行阶段)。
在预编译阶段，如果发现外部函数应用了内部函数的变量，则会在内存中创立一个“闭包”对象并保留对应变量值，如果已存在“闭包”，则只须要减少对应属性值即可。
执行完后，函数执行上下文会被销毁，函数对“闭包”对象的援用也会被销毁，但其外部函数还持用该“闭包”的援用，所以外部函数能够持续应用“内部函数”中的变量

利用了函数作用域链的个性，一个函数外部定义的函数会将蕴含内部函数的流动对象增加到它的作用域链中，函数执行结束，其执行作用域链销毁，但因外部函数的作用域链依然在援用这个流动对象，所以其流动对象不会被销毁，直到外部函数被烧毁后才被销毁。

长处
能够从外部函数拜访内部函数的作用域中的变量，且拜访到的变量长期驻扎在内存中，可供之后应用
防止变量净化全局
把变量存到独立的作用域，作为公有成员存在

毛病
对内存耗费有负面影响。因外部函数保留了对外部变量的援用，导致无奈被垃圾回收，增大内存使用量，所以使用不当会导致内存透露
对处理速度具备负面影响。闭包的层级决定了援用的内部变量在查找时通过的作用域链长度
可能获取到意外的值(captured value)

利用场景

模块封装，避免变量净化全局

var Person = (function(){
    var name = '南玖'
  function Person() {console.log('work for qtt')
  }
Person.prototype.work = function() {}
 return Person
})()

循环体中创立闭包，保留变量
```
for(var i=0;i<5;i++){(function(j){setTimeOut(() => {console.log(j)
 },1000)
})(i)
}
```
举荐浏览：JavaScript 深刻之作用域与闭包

16.Object.is()与比拟操作符 ==、=== 的区别？
==会先进行类型转换再比拟
===比拟时不会进行类型转换，类型不同则间接返回 false
Object.is()在 === 根底上特地解决了NaN,-0,+0, 保障 - 0 与 + 0 不相等，但 NaN 与 NaN 相等

==操作符的强制类型转换规定
字符串和数字之间的相等比拟，将字符串转换为数字之后再进行比拟。
其余类型和布尔类型之间的相等比拟，先将布尔值转换为数字后，再利用其余规定进行比拟。
null 和 undefined 之间的相等比拟，后果为真。其余值和它们进行比拟都返回假值。
对象和非对象之间的相等比拟，对象先调用 ToPrimitive 形象操作后，再进行比拟。
如果一个操作值为 NaN，则相等比拟返回 false（NaN 自身也不等于 NaN）。
如果两个操作值都是对象，则比拟它们是不是指向同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回 true，否则，返回 false。
```
'1' == 1 // true
'1' === 1 // false
NaN == NaN //false
+0 == -0 //true
+0 === -0 // true
Object.is(+0,-0) //false
Object.is(NaN,NaN) //true
```
17.call 与 apply、bind 的区别？

实际上 call 与 apply 的性能是雷同的，只是两者的传参形式不一样，而 bind 传参形式与 call 雷同，但它不会立刻执行，而是返回这个扭转了 this 指向的函数。

举荐浏览：this 指向与 call,apply,bind

18. 说说你理解哪些前端本地存储？

举荐浏览：这一次带你彻底理解前端本地存储

19. 说说 JavaScript 数组罕用办法

向数组增加元素的办法：
push：向数组的开端追加返回值是增加数据后数组的新长度，扭转原有数组
unshift：向数组的结尾增加返回值是增加数据后数组的新长度，扭转原有数组
splice：向数组的指定 index 处插入返回的是被删除掉的元素的汇合，会扭转原有数组

向数组删除元素的办法：
pop()：从尾部删除一个元素返回被删除掉的元素，扭转原有数组
shift()：从头部删除一个元素返回被删除掉的元素，扭转原有数组
splice：在 index 处删除 howmany 个元素返回的是被删除掉的元素的汇合，会扭转原有数组

数组排序的办法：
reverse()：反转，倒置扭转原有数组
sort()：按指定规定排序扭转原有数组

数组迭代办法

参数: 每一项上运行的函数，运行该函数的作用域对象（可选）

every()

对数组中的每一运行给定的函数，如果该函数对每一项都返回 true, 则该函数返回 true
```
var arr = [10,30,25,64,18,3,9]
var result = arr.every((item,index,arr)=>{return item>3})
console.log(result) //false
```
some()
对数组中的每一运行给定的函数，如果该函数有一项返回 true, 就返回 true，所有项返回 false 才返回 false
```
var arr2 = [10,20,32,45,36,94,75]
var result2 = arr2.some((item,index,arr)=>{return item<10})
console.log(result2) //false
```
filter()

对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组
```
// filter 返回满足要求的数组项组成的新数组
var arr3 = [3,6,7,12,20,64,35]
var result3 = arr3.filter((item,index,arr)=>{return item > 3})
console.log(result3) //[6,7,12,20,64,35]
```
map()

对数组中的每一元素运行给定的函数, 返回每次函数调用的后果组成的数组
```
// map 返回每次函数调用的后果组成的数组
var arr4 = [1,2,3,4,5,6]
var result4 = arr4.map((item,index,arr)=>{return `${item}`
})
console.log(result4) 
/*[ '1',
'2',
'3',
'4',
'5',
'6' ]*/
```
forEach()

对数组中的每一元素运行给定的函数, 没有返回值，罕用来遍历元素
```
// forEach 
var arr5 = [10,20,30]
var result5 = arr5.forEach((item,index,arr)=>{console.log(item)
})
console.log(result5)
/*
10
20
30
undefined 该办法没有返回值
*/
```
reduce()

reduce()办法对数组中的每个元素执行一个由你提供的 reducer 函数（升序执行），将其后果汇总为单个返回值
```
const array = [1,2,3,4]
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
```
20.JavaScript 为什么要进行变量晋升，它导致了什么问题？

变量晋升的体现是，在变量或函数申明之前拜访变量或调用函数而不会报错。

起因

JavaScript 引擎在代码执行前有一个解析的过程（预编译），创立执行上线文，初始化一些代码执行时须要用到的对象。

当拜访一个变量时，会到以后执行上下文中的作用域链中去查找，而作用域链的首端指向的是以后执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它蕴含了函数的形参、所有的函数和变量申明，这个对象的是在代码解析的时候创立的。

首先要晓得，JS 在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。
在解析阶段

JS 会查看语法，并对函数进行预编译。解析的时候会先创立一个全局执行上下文环境，先把代码中行将执行的变量、函数申明都拿进去，变量先赋值为 undefined，函数先申明好可应用。在一个函数执行之前，也会创立一个函数执行上下文环境，跟全局执行上下文相似，不过函数执行上下文会多出 this、arguments 和函数的参数。
- 全局上下文：变量定义，函数申明
- 函数上下文：变量定义，函数申明，this，arguments
在执行阶段，就是依照代码的程序顺次执行。

那为什么会进行变量晋升呢？次要有以下两个起因：
进步性能
容错性更好

（1）进步性能 在 JS 代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了进步性能，如果没有这一步，那么每次执行代码前都必须从新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会扭转，解析一遍就够了。

在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计申明了哪些变量、创立了哪些函数，并对函数的代码进行压缩，去除正文、不必要的空白等。这样做的益处就是每次执行函数时都能够间接为该函数调配栈空间（不须要再解析一遍去获取代码中申明了哪些变量，创立了哪些函数），并且因为代码压缩的起因，代码执行也更快了。

（2）容错性更好 变量晋升能够在肯定水平上进步 JS 的容错性，看上面的代码：
```
a = 1
var a
console.log(a) //1
```
如果没有变量晋升，这段代码就会报错

导致的问题
```
var tmp = new Date();
function fn(){console.log(tmp);
 if(false){var tmp = 'hello nan jiu';}
}
fn(); // undefined
```
在这个函数中，本来是要打印出外层的 tmp 变量，然而因为变量晋升的问题，内层定义的 tmp 被提到函数外部的最顶部，相当于笼罩了外层的 tmp，所以打印后果为 undefined。
```
var tmp = 'hello nan jiu';
for (var i = 0; i < tmp.length; i++) {console.log(tmp[i]);
}
```


因为遍历时定义的 i 会变量晋升成为一个全局变量，在函数完结之后不会被销毁，所以打印进去 13。#### 总结

- 解析和预编译过程中的申明晋升能够进步性能，让函数能够在执行时事后为变量调配栈空间
- 申明晋升还能够进步 JS 代码的容错性，使一些不标准的代码也能够失常执行
- 函数是一等公民，当函数申明与变量申明抵触时，变量晋升时函数优先级更高，会疏忽同名的变量申明

** 感觉文章不错，能够点个赞呀 ^_^ 欢送关注南玖～**

关于前端:20道JavaScript经典面试题

前言

1. 说一说 JavaScript 的数据类型以及存储形式

JavaScript 一共有 8 种数据类型

存储形式

null 与 undefined 的异同

2. 说说 JavaScript 中判断数据类型的几种办法

typeof

instanceof

constructor(构造函数)

Object.prototype.toString.call()

3.js 数据类型转换

转换为数字

转换为字符串

转换为布尔值

4.{}和 [] 的 valueOf 和 toString 的返回后果？

5.let,const,var 的区别？

6.JavaScript 作用域与作用域链

作用域：

作用域链：

7. 如何正确的判断 this 指向？

8.for…of,for..in,forEach,map 的区别？

for…of（不能遍历对象）

for…in

forEach

map

总结

9. 说说你对原型链的了解？

10. 说一说三种事件模型？

事件模型

事件委托

事件流传（三个阶段）

事件捕捉

事件冒泡

如何阻止事件冒泡

11.JS 提早加载的形式

12. 说说什么是模块化开发？

几种模块化计划

CommonJS

AMD 与 require.js

CMD 与 sea.js

ES6 Module

CommonJS 与 ES6 Module 的差别

13. 说说 JS 的运行机制

14. 如何在 JavaScript 中比拟两个对象？

15. 说说你对闭包的了解，以及它的原理和利用场景？

闭包原理

长处

毛病

利用场景

16.Object.is()与比拟操作符 ==、=== 的区别？

==操作符的强制类型转换规定

17.call 与 apply、bind 的区别？

18. 说说你理解哪些前端本地存储？

19. 说说 JavaScript 数组罕用办法

向数组增加元素的办法：

向数组删除元素的办法：

数组排序的办法：

数组迭代办法

20.JavaScript 为什么要进行变量晋升，它导致了什么问题？

起因

导致的问题

Just My Socks（注册教程 内含优惠码）

16.Object.is()与比拟操作符 `==`、`===` 的区别？

`==`操作符的强制类型转换规定

Just My Socks（注册教程内含优惠码）