20道JavaScript经典面试题
<blockquote><p>该篇文章整理了一些前端经典面试题，附带详解，涉及到JavaScript多方面知识点，满满都是干货～建议收藏阅读</p>
</blockquote>
<h2 id="前言">前言</h2>
<p>如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 <strong>前端南玖</strong> 第一时间获取最新的文章～</p>
<h3 id="1说一说javascript的数据类型以及存储方式">1.说一说JavaScript的数据类型以及存储方式</h3>
<h4 id="javascript一共有8种数据类型">JavaScript一共有8种数据类型</h4>
<p><strong>其中有7种基本数据类型：</strong></p>
<p>ES5的5种：<code>Null</code>，<code>undefined</code>，<code>Boolean</code>，<code>Number</code>，<code>String</code>，</p>
<p>ES6新增：<code>Symbol</code> 表示独一无二的值</p>
<p>ES10新增：<code>BigInt</code> 表示任意大的整数</p>
<p><strong>一种引用数据类型：</strong></p>
<p><code>Object</code>（本质上是由一组无序的键值对组成）</p>
<p>包含<code>function</code>,<code>Array</code>,<code>Date</code>等。JavaScript不支持创建任何自定义类型的数据，也就是说JavaScript中所有值的类型都是上面8中之一。</p>
<h4 id="存储方式">存储方式</h4>
<ul>
<li>基本数据类型：直接存储在<strong>栈</strong>内存中，占据空间小，大小固定，属于被频繁使用的数据。</li>
<li>引用数据类型：同时存储在<strong>栈</strong>内存与<strong>堆</strong>内存中，占据空间大，大小不固定。引用数据类型将指针存在<strong>栈</strong>中，将值存在<strong>堆</strong>中。当我们把对象值赋值给另外一个变量时，复制的是对象的指针，指向同一块内存地址。</li>
</ul>
<h4 id="null-与-undefined的异同">null 与 undefined的异同</h4>
<p><strong>相同点：</strong></p>
<ul>
<li>Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null</li>
</ul>
<p><strong>不同点：</strong></p>
<ul>
<li>
<p>undefined 代表的含义是未定义， null 代表的含义是空对象。</p>
</li>
<li>
<p>typeof null 返回'object'，typeof undefined 返回'undefined'</p>
</li>
<li>
<pre><code class="language-js">null == undefined// true
null === undefined // false
</code></pre>
</li>
<li>
<p>其实 null 不是对象，虽然 typeof null 会输出 object，但是这只是 JS 存在的一个悠久 Bug。在 JS 的最初版本中使用的是 32 位系统，为了性能考虑使用低位存储变量的类型信息，000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来。</p>
</li>
</ul>
<h3 id="2说说javascript中判断数据类型的几种方法">2.说说JavaScript中判断数据类型的几种方法</h3>
<h4 id="typeof">typeof</h4>
<ul>
<li><code>typeof</code>一般用来判断基本数据类型，<strong>除了判断null会输出"object"，其它都是正确的</strong></li>
<li><code>typeof</code>判断引用数据类型时，<strong>除了判断函数会输出"function",其它都是输出"object"</strong></li>
</ul>
<pre><code class="language-js">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
</code></pre>
<p>对于引用数据类型的判断，使用<code>typeof</code>并不准确，所以可以使用<code>instanceof</code>来判断引用数据类型</p>
<h4 id="instanceof">instanceof</h4>
<blockquote>
<p>Instanceof 可以准确的判断引用数据类型，它的原理是检测构造函数的<code>prototype</code>属性是否在某个实例对象的原型链上</p>
</blockquote>
<p>原型知识点具体可以看我之前的文章：你一定要懂的JavaScript之原型与原型链</p>
<p><strong>语法：</strong></p>
<pre><code class="language-js">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
</code></pre>
<h4 id="constructor构造函数">constructor(构造函数)</h4>
<p>当一个函数被定义时，JS引擎会为函数添加<code>prototype</code>属性，然后在<code>prototype</code>属性上添加一个<code>constructor</code>属性，并让其指向该函数。</p>
<p><img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c32adc71f9364473ad9002e4be1887cd~tplv-k3u1fbpfcp-watermark.image?" alt="constructor1.png" loading="lazy"><br>
当执行 <code>let f = new F()</code>时，F被当成了构造函数，f是F的实例对象，此时F原型上的constructor属性传递到了f上，所以<code>f.constructor===F</code></p>
<pre><code class="language-js">function F(){}
let f = new F()
f.constructor === F // true
</code></pre>
<pre><code class="language-js">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
</code></pre>
<p><strong>⚠️注意：</strong></p>
<ul>
<li>null和undefined是无效的对象，所以他们不会有constructor属性</li>
<li>函数的construct是不稳定的，主要是因为开发者可以重写prototype，原有的construction引用会丢失，constructor会默认为Object</li>
</ul>
<pre><code class="language-js">function F(){}
F.prototype = {}
let f = new F()
f.constructor === F // false
console.log(f.constructor) //function Object(){..}
</code></pre>
<p>为什么会变成Object？</p>
<p>因为<code>prototype</code>被重新赋值的是一个<code>{}</code>，<code>{}</code>是<code>new Object()</code>的字面量，因此 <code>new Object() </code>会将 Object 原型上的<code> constructor</code> 传递给 { }，也就是 Object 本身。</p>
<p>因此，为了规范开发，在重写对象原型时一般都需要重新给 constructor 赋值，以保证对象实例的类型不被篡改。</p>
<h4 id="objectprototypetostringcall"><strong>Object.prototype.toString.call()</strong></h4>
<p>toString() 是 Object 的原型方法，调用该方法，默认返回当前对象的 [] 。这是一个内部属性，其格式为 ，其中 Xxx 就是对象的类型。</p>
<p>对于 Object 对象，直接调用 toString() 就能返回 。而对于其他对象，则需要通过 call / apply 来调用才能返回正确的类型信息。</p>
<pre><code class="language-js">Object.prototype.toString.call('') ; //
Object.prototype.toString.call(1) ; //
Object.prototype.toString.call(true) ; //
Object.prototype.toString.call(Symbol()); //
Object.prototype.toString.call(undefined) ; //
Object.prototype.toString.call(null) ; //
Object.prototype.toString.call(new Function()) ; //
Object.prototype.toString.call(new Date()) ; //
Object.prototype.toString.call([]) ; //
Object.prototype.toString.call(new RegExp()) ; //
Object.prototype.toString.call(new Error()) ; //
Object.prototype.toString.call(document) ; //
Object.prototype.toString.call(window) ; // window 是全局对象 global 的引用
</code></pre>
<h3 id="3js数据类型转换">3.js数据类型转换</h3>
<p>在JavaScript中类型转换有三种情况：</p>
<ul>
<li>转换为数字（调用Number(),parseInt(),parseFloat()方法）</li>
<li>转换为字符串（调用.toString()或String()方法）</li>
<li>转换为布尔值（调用Boolean()方法）</li>
</ul>
<p><strong>null、undefined没有.toString方法</strong></p>
<h4 id="转换为数字">转换为数字</h4>
<ul>
<li>Number()：可以把任意值转换成数字，如果要转换的字符串中有不是数字的值，则会返回<code>NaN</code></li>
</ul>
<pre><code>Number('1') // 1
Number(true)// 1
Number('123s') // NaN
Number({})//NaN
</code></pre>
<ul>
<li>parseInt(string,radix)：解析一个字符串并返回指定基数的十进制整数，radix是2-36之间的整数，表示被解析字符串的基数。</li>
</ul>
<pre><code class="language-js">parseInt('2') //2
parseInt('2',10) // 2
parseInt('2',2)// NaN
parseInt('a123')// NaN如果第一个字符不是数字或者符号就返回NaN
parseInt('123a')// 123
</code></pre>
<ul>
<li>parseFloat(string)：解析一个参数并返回一个浮点数</li>
</ul>
<pre><code class="language-js">parseFloat('123a')
//123
parseFloat('123a.01')
//123
parseFloat('123.01')
//123.01
parseFloat('123.01.1')
//123.01
</code></pre>
<ul>
<li>隐式转换</li>
</ul>
<pre><code class="language-js">let str = '123'
let res = str - 1 //122
str+1 // '1231'
+str+1 // 124
</code></pre>
<h4 id="转换为字符串">转换为字符串</h4>
<ul>
<li>.toString() <strong>⚠️注意：null,undefined不能调用</strong></li>
</ul>
<pre><code class="language-js">Number(123).toString()
//'123'
[].toString()
//''
true.toString()
//'true'
</code></pre>
<ul>
<li>String() 都能转</li>
</ul>
<pre><code class="language-js">String(123)
//'123'
String(true)
//'true'
String([])
//''
String(null)
//'null'
String(undefined)
//'undefined'
String({})
//''
</code></pre>
<ul>
<li>隐式转换：当+两边有一个是字符串，另一个是其它类型时，会先把其它类型转换为字符串再进行字符串拼接，返回字符串</li>
</ul>
<pre><code class="language-js">let a = 1
a+'' // '1'
</code></pre>
<h4 id="转换为布尔值">转换为布尔值</h4>
<p><strong>0, ''(空字符串), null, undefined, NaN会转成false，其它都是true</strong></p>
<ul>
<li>Boolean()</li>
</ul>
<pre><code class="language-js">Boolean('') //false
Boolean(0) //false
Boolean(1) //true
Boolean(null) //false
Boolean(undefined) //false
Boolean(NaN) //false
Boolean({}) //true
Boolean([]) //true
</code></pre>
<ul>
<li>条件语句</li>
</ul>
<pre><code class="language-js">let a
if(a) {
//... //这里a为undefined，会转为false，所以该条件语句内部不会执行
}
</code></pre>
<ul>
<li>隐式转换 !!</li>
</ul>
<pre><code class="language-js">let str = '111'
console.log(!!str) // true
</code></pre>
<h3 id="4和的valueof和tostring的返回结果">4.{}和[]的valueOf和toString的返回结果？</h3>
<ul>
<li>valueOf：返回指定对象的原始值</li>
</ul>
<table>
<thead>
<tr>
<th style="text-align: left"><strong>对象</strong></th>
<th style="text-align: left"><strong>返回值</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">Array</td>
<td style="text-align: left">返回数组对象本身。</td>
</tr>
<tr>
<td style="text-align: left">Boolean</td>
<td style="text-align: left">布尔值。</td>
</tr>
<tr>
<td style="text-align: left">Date</td>
<td style="text-align: left">存储的时间是从 1970 年 1 月 1 日午夜开始计的毫秒数 UTC。</td>
</tr>
<tr>
<td style="text-align: left">Function</td>
<td style="text-align: left">函数本身。</td>
</tr>
<tr>
<td style="text-align: left">Number</td>
<td style="text-align: left">数字值。</td>
</tr>
<tr>
<td style="text-align: left">Object</td>
<td style="text-align: left">对象本身。这是默认情况。</td>
</tr>
<tr>
<td style="text-align: left">String</td>
<td style="text-align: left">字符串值。</td>
</tr>
<tr>
<td style="text-align: left"></td>
<td style="text-align: left">Math 和 Error 对象没有 valueOf 方法。</td>
</tr>
</tbody>
</table>
<ul>
<li>toString：返回一个表示对象的字符串。默认情况下，<code>toString()</code> 方法被每个 <code>Object</code> 对象继承。如果此方法在自定义对象中未被覆盖，<code>toString()</code> 返回 ""，其中 <code>type</code> 是对象的类型。</li>
</ul>
<pre><code class="language-js">({}).valueOf() //{}
({}).toString()//''
[].valueOf() //[]
[].toString() //''
</code></pre>
<h3 id="5letconstvar的区别">5.let,const,var的区别？</h3>
<ul>
<li>变量提升：let,const定义的变量不会出现变量提升，而var会</li>
<li>块级作用域：let,const 是块作用域，即其在整个大括号 {} 之内可见，var：只有全局作用域和函数作用域概念，没有块级作用域的概念。</li>
<li>重复声明：同一作用域下let,const声明的变量不允许重复声明，而var可以</li>
<li>暂时性死区：let,const声明的变量不能在声明之前使用，而var可以</li>
<li>const 声明的是一个只读的常量，不允许修改</li>
</ul>
<h3 id="6javascript作用域与作用域链">6.JavaScript作用域与作用域链</h3>
<h4 id="作用域">作用域：</h4>
<blockquote>
<p>简单来说，作用域是指程序中定义变量的区域，它决定了当前执行代码对变量的访问权限</p>
</blockquote>
<h4 id="作用域链">作用域链：</h4>
<blockquote>
<p>当可执行代码内部访问变量时，会先查找当前作用域下有无该变量，有则立即返回，没有的话则会去父级作用域中查找...一直找到全局作用域。我们把这种作用域的嵌套机制称为<code>作用域链</code></p>
</blockquote>
<p>详细知识可以看我之前的文章：JavaScript深入之作用域与闭包</p>
<h3 id="7如何正确的判断this指向">7.如何正确的判断this指向？</h3>
<p>this的绑定规则有四种：默认绑定，隐式绑定，显式绑定，new绑定.</p>
<ol>
<li>函数是否在 new 中调用(new绑定)，如果是，那么 this 绑定的是new中新创建的对象。</li>
<li>函数是否通过 call,apply 调用，或者使用了 bind (即硬绑定)，如果是，那么this绑定的就是指定的对象。</li>
<li>函数是否在某个上下文对象中调用(隐式绑定)，如果是的话，this 绑定的是那个上下文对象。一般是 obj.foo()</li>
<li>如果以上都不是，那么使用默认绑定。如果在严格模式下，则绑定到 undefined，否则绑定到全局对象。</li>
<li>如果把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind, 这些值在调用时会被忽略，实际应用的是默认绑定规则。</li>
<li>箭头函数没有自己的 this, 它的this继承于上一层代码块的this。</li>
</ol>
<p>详细知识可以看我之前的文章:this指向与call,apply,bind</p>
<h3 id="8forofforinforeachmap的区别">8.for...of,for..in,forEach,map的区别？</h3>
<h4 id="forof不能遍历对象">for...of（不能遍历对象）</h4>
<blockquote>
<p>在可迭代对象（具有 iterator 接口）（Array，Map，Set，String，arguments）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句，不能遍历对象</p>
</blockquote>
<pre><code class="language-js">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)
}
// 南玖 18 上海
</code></pre>
<h4 id="forin">for...in</h4>
<blockquote>
<p>for...in循环：遍历对象自身的和继承的可枚举的属性, 不能直接获取属性值。可以中断循环。</p>
</blockquote>
<pre><code class="language-js">let person={name:"南玖",age:18,city:"上海"}
let text=""
for (let i in person){
text+=person
}
// 输出：南玖18上海
//其次在尝试一些数组
let arry=
for (let i in arry){
console.log(arry)
}
//1 2 3 4 5
</code></pre>
<h4 id="foreach">forEach</h4>
<blockquote>
<p>forEach: 只能遍历数组，不能中断，没有返回值(或认为返回值是undefined)。</p>
</blockquote>
<pre><code class="language-js">let arr=;
const res = arr.forEach(item=>{
console.log(item*3)
})
// 3 6 9
console.log(res) //undefined
console.log(arr) //
</code></pre>
<h4 id="map">map</h4>
<blockquote>
<p>map: 只能遍历数组，不能中断，返回值是修改后的数组。</p>
</blockquote>
<pre><code class="language-js">let arr=;
const res = arr.map(item=>{
return res+1
})
console.log(res) //
console.log(arr) //
</code></pre>
<h4 id="总结">总结</h4>
<ul>
<li>forEach 遍历列表值,不能使用 break 语句或使用 return 语句</li>
<li>for in 遍历对象键值(key),或者数组下标,不推荐循环一个数组</li>
<li>for of 遍历列表值,允许遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等.在 ES6 中引入的 for of 循环，以替代 for in 和 forEach() ，并支持新的迭代协议。</li>
<li>for in循环出的是key，for of循环出的是value；</li>
<li>for of是ES6新引入的特性。修复了ES5的for in的不足；</li>
<li>for of不能循环普通的对象，需要通过和Object.keys()搭配使用。</li>
</ul>
<h3 id="9说说你对原型链的理解">9.说说你对原型链的理解？</h3>
<p>每个函数（类）天生自带一个属性<code>prototype</code>，属性值是一个对象，里面存储了当前类供<code>实例</code>使用的属性和方法 <strong>「（显示原型）」</strong></p>
<p>在浏览器默认给原型开辟的堆内存中有一个<code>constructor</code>属性：存储的是当前类本身（⚠️注意：自己开辟的堆内存中默认没有<code>constructor</code>属性，需要自己手动添加）<strong>「（构造函数）」</strong></p>
<p>每个对象都有一个<code>__proto__</code>属性，这个属性指向当前实例所属类的<code>原型</code>（不确定所属类，都指向<code>Object.prototype</code>）<strong>「（隐式原型）」</strong></p>
<p>当你试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的隐式原型<code>__proto__</code>（也就是它的构造函数的显示原型<code>prototype</code>）中查找。<strong>「（原型链）」</strong></p>
<p>详细知识可以看我之前的文章：你一定要懂的JavaScript之原型与原型链</p>
<h3 id="10说一说三种事件模型">10.说一说三种事件模型？</h3>
<h4 id="事件模型">事件模型</h4>
<p><strong>DOM0级模型：</strong> ，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js属性来指定监听函数。这种方式是所有浏览器都兼容的。</p>
<p><strong>IE 事件模型：</strong> 在该事件模型中，一次事件共有两个过程，事件处理阶段，和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。</p>
<p><strong>DOM2 级事件模型：</strong> 在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。</p>
<h4 id="事件委托">事件委托</h4>
<p>事件委托指的是把一个元素的事件委托到另外一个元素上。一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。</p>
<h4 id="事件传播三个阶段">事件传播（三个阶段）</h4>
<ol>
<li>捕获阶段–事件从 window 开始，然后向下到每个元素，直到到达目标元素事件或event.target。</li>
<li>目标阶段–事件已达到目标元素。</li>
<li>冒泡阶段–事件从目标元素冒泡，然后上升到每个元素，直到到达 window。</li>
</ol>
<h4 id="事件捕获">事件捕获</h4>
<p>当事件发生在 DOM 元素上时，该事件并不完全发生在那个元素上。在捕获阶段，事件从window开始，一直到触发事件的元素。<code>window----> document----> html----> body ---->目标元素</code></p>
<h4 id="事件冒泡">事件冒泡</h4>
<p>事件冒泡刚好与事件捕获相反，<code>当前元素---->body ----> html---->document ---->window</code>。当事件发生在DOM元素上时，该事件并不完全发生在那个元素上。在冒泡阶段，事件冒泡，或者事件发生在它的父代，祖父母，祖父母的父代，直到到达window为止。<br>
<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44f3f89d86344aacb901cd841620bbff~tplv-k3u1fbpfcp-watermark.image?" alt="事件传播.jpeg" loading="lazy"></p>
<h4 id="如何阻止事件冒泡">如何阻止事件冒泡</h4>
<p>w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。例如：</p>
<pre><code class="language-js">window.event?window.event.cancelBubble = true : e.stopPropagation();
</code></pre>
<p>return false也可以阻止冒泡。</p>
<h3 id="11js延迟加载的方式">11.JS延迟加载的方式</h3>
<p>JavaScript会阻塞DOM的解析，因此也就会阻塞DOM的加载。所以有时候我们希望延迟JS的加载来提高页面的加载速度。</p>
<ul>
<li>把JS放在页面的最底部</li>
<li>script标签的defer属性：脚本会立即下载但延迟到整个页面加载完毕再执行。该属性对于内联脚本无作用 (即没有 <strong>「src」</strong> 属性的脚本）。</li>
<li>Async是在外部JS加载完成后，浏览器空闲时，Load事件触发前执行，标记为async的脚本并不保证按照指定他们的先后顺序执行，该属性对于内联脚本无作用 (即没有 <strong>「src」</strong> 属性的脚本）。</li>
<li>动态创建script标签，监听dom加载完毕再引入js文件</li>
</ul>
<h3 id="12说说什么是模块化开发">12.说说什么是模块化开发？</h3>
<blockquote>
<p>模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。</p>
</blockquote>
<h4 id="几种模块化方案">几种模块化方案</h4>
<ul>
<li>
<p>第一种是<code> CommonJS</code> 方案，它通过 <code>require</code> 来引入模块，通过 <code>module.exports</code> 定义模块的输出接口。</p>
</li>
<li>
<p>第二种是 <code>AMD</code> 方案，这种方案采用异步加载的方式来加载模块，模块的加载不影响后面语句的执行，所有依赖这个模块的语句都定义在一个回调函数里，等到加载完成后再执行回调函数。require.js 实现了 AMD 规范。</p>
</li>
<li>
<p>第三种是 <code>CMD</code> 方案，这种方案和 <code>AMD</code> 方案都是为了解决异步模块加载的问题，<code>sea.js</code> 实现了 CMD 规范。它和<code>require.js</code>的区别在于模块定义时对依赖的处理不同和对依赖模块的执行时机的处理不同。</p>
</li>
<li>
<p>第四种方案是<code> ES6</code> 提出的方案，使用 <code>import</code> 和 <code>export</code> 的形式来导入导出模块。</p>
</li>
</ul>
<h4 id="commonjs">CommonJS</h4>
<p><code>Node.js</code>是<code>commonJS</code>规范的主要践行者。这种模块加载方案是服务器端的解决方案，它是以同步的方式来引入模块的，因为在服务端文件都存储在本地磁盘，所以读取非常快，所以以同步的方式加载没有问题。但如果是在浏览器端，由于模块的加载是使用网络请求，因此使用异步加载的方式更加合适。</p>
<pre><code class="language-js">// 定义模块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岁，欢迎关注我～
</code></pre>
<h4 id="amd与requirejs">AMD与require.js</h4>
<p>AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用<code>require.js</code>实现<code>AMD</code>规范的模块化：用<code>require.config()</code>指定引用路径等，用<code>define()</code>定义模块，用<code>require()</code>加载模块。</p>
<h4 id="cmd与seajs">CMD与sea.js</h4>
<p>CMD是另一种js模块化方案，它与AMD很类似，不同点在于：AMD 推崇依赖前置、提前执行，CMD推崇依赖就近、延迟执行。此规范其实是在sea.js推广过程中产生的。</p>
<h4 id="es6-module">ES6 Module</h4>
<p>ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：<code>export</code>和<code>import</code>。<code>export</code>命令用于规定模块的对外接口，<code>import</code>命令用于输入其他模块提供的功能。</p>
<pre><code class="language-js">// 定义模块a.js
var title = '前端';
function say(name, age) {
console.log(`我是${name},今年${age}岁，欢迎关注我～`);
}
export { //在这里写上需要向外暴露的函数、变量
say,
title
}
// 引用自定义的模块时，参数包含路径，可省略.js
import {say,title} from "./a"
say('南玖', 18); //我是南玖，今年18岁，欢迎关注我～
</code></pre>
<h4 id="commonjs-与-es6-module-的差异">CommonJS 与 ES6 Module 的差异</h4>
<p><strong>CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。</strong></p>
<ul>
<li>CommonJS 模块输出的是值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。</li>
<li>ES6 模块的运行机制与 CommonJS 不一样。JS 引擎对脚本静态分析的时候，遇到模块加载命令<code>import</code>，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。换句话说，ES6 的<code>import</code>有点像 Unix 系统的“符号连接”，原始值变了，<code>import</code>加载的值也会跟着变。因此，ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。</li>
</ul>
<p><strong>CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。</strong></p>
<ul>
<li>运行时加载: CommonJS 模块就是对象；即在输入时是先加载整个模块，生成一个对象，然后再从这个对象上面读取方法，这种加载称为“运行时加载”。</li>
<li>编译时加载: ES6 模块不是对象，而是通过 <code>export</code> 命令显式指定输出的代码，<code>import</code>时采用静态命令的形式。即在<code>import</code>时可以指定加载某个输出值，而不是加载整个模块，这种加载称为“编译时加载”。</li>
</ul>
<p><strong>CommonJS 加载的是一个对象（即<code>module.exports</code>属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。</strong></p>
<p>推荐阅读前端模块化理解</p>
<h3 id="13说说js的运行机制">13.说说JS的运行机制</h3>
<p>推荐阅读探索JavaScript执行机制</p>
<h3 id="14如何在javascript中比较两个对象">14.如何在JavaScript中比较两个对象？</h3>
<p>对于两个非基本类型的数据，我们用<code>==</code>或<code>===</code>都指示检查他们的引用是否相等，并不会检查实际引用指向的值是否相等。</p>
<p>例如，默认情况下，数组将被强制转换成字符串，并使用逗号连接所有元素</p>
<pre><code class="language-js">let a =
let b =
let c = "1,2,3"
a == b // false
a == c // true
b == c // true
</code></pre>
<p>一般比较两个对象会采用递归来比较</p>
<h3 id="15说说你对闭包的理解以及它的原理和应用场景">15.说说你对闭包的理解，以及它的原理和应用场景？</h3>
<p>一个函数和对其周围（词法环境）的引用捆绑在一起（或者说函数被引用包围），这样一个组合就是闭包（<strong>「closure」</strong>）</p>
<h4 id="闭包原理">闭包原理</h4>
<p>函数执行分成两个阶段(预编译阶段和执行阶段)。</p>
<ul>
<li>在预编译阶段，如果发现内部函数使用了外部函数的变量，则会在内存中创建一个“闭包”对象并保存对应变量值，如果已存在“闭包”，则只需要增加对应属性值即可。</li>
<li>执行完后，函数执行上下文会被销毁，函数对“闭包”对象的引用也会被销毁，但其内部函数还持用该“闭包”的引用，所以内部函数可以继续使用“外部函数”中的变量</li>
</ul>
<p>利用了函数作用域链的特性，一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中，函数执行完毕，其执行作用域链销毁，但因内部函数的作用域链仍然在引用这个活动对象，所以其活动对象不会被销毁，直到内部函数被烧毁后才被销毁。</p>
<h4 id="优点">优点</h4>
<ol>
<li>可以从内部函数访问外部函数的作用域中的变量，且访问到的变量长期驻扎在内存中，可供之后使用</li>
<li>避免变量污染全局</li>
<li>把变量存到独立的作用域，作为私有成员存在</li>
</ol>
<h4 id="缺点">缺点</h4>
<ol>
<li>对内存消耗有负面影响。因内部函数保存了对外部变量的引用，导致无法被垃圾回收，增大内存使用量，所以使用不当会导致内存泄漏</li>
<li>对处理速度具有负面影响。闭包的层级决定了引用的外部变量在查找时经过的作用域链长度</li>
<li>可能获取到意外的值(captured value)</li>
</ol>
<h4 id="应用场景">应用场景</h4>
<ul>
<li>模块封装，防止变量污染全局</li>
</ul>
<pre><code class="language-js">var Person = (function(){
var name = '南玖'
function Person() {
console.log('work for qtt')
}
Person.prototype.work = function() {}
return Person
})()
</code></pre>
<ul>
<li>循环体中创建闭包，保存变量</li>
</ul>
<pre><code class="language-js">for(var i=0;i<5;i++){
(function(j){
setTimeOut(() => {
console.log(j)
},1000)
})(i)
}
</code></pre>
<p>推荐阅读：JavaScript深入之作用域与闭包</p>
<h3 id="16objectis与比较操作符的区别">16.Object.is()与比较操作符<code>==</code>、<code>===</code>的区别？</h3>
<ul>
<li><code>==</code>会先进行类型转换再比较</li>
<li><code>===</code>比较时不会进行类型转换，类型不同则直接返回false</li>
<li><code>Object.is()</code>在<code>===</code>基础上特别处理了<code>NaN</code>,<code>-0</code>,<code>+0</code>,保证-0与+0不相等，但NaN与NaN相等</li>
</ul>
<h4 id="操作符的强制类型转换规则"><code>==</code>操作符的强制类型转换规则</h4>
<ul>
<li>字符串和数字之间的相等比较，将字符串转换为数字之后再进行比较。</li>
<li>其他类型和布尔类型之间的相等比较，先将布尔值转换为数字后，再应用其他规则进行比较。</li>
<li>null 和 undefined 之间的相等比较，结果为真。其他值和它们进行比较都返回假值。</li>
<li>对象和非对象之间的相等比较，对象先调用 ToPrimitive 抽象操作后，再进行比较。</li>
<li>如果一个操作值为 NaN ，则相等比较返回 false（ NaN 本身也不等于 NaN ）。</li>
<li>如果两个操作值都是对象，则比较它们是不是指向同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true，否则，返回 false。</li>
</ul>
<pre><code class="language-js">'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
</code></pre>
<h3 id="17call与applybind的区别">17.call与apply、bind的区别？</h3>
<p>实际上call与apply的功能是相同的，只是两者的传参方式不一样，而bind传参方式与call相同，但它不会立即执行，而是返回这个改变了this指向的函数。</p>
<p>推荐阅读：this指向与call,apply,bind</p>
<h3 id="18说说你了解哪些前端本地存储">18.说说你了解哪些前端本地存储？</h3>
<p>推荐阅读：这一次带你彻底了解前端本地存储</p>
<h3 id="19说说javascript数组常用方法">19.说说JavaScript数组常用方法</h3>
<h5 id="向数组添加元素的方法">向数组添加元素的方法：</h5>
<ol>
<li>push：向数组的末尾追加 返回值是添加数据后数组的新长度，改变原有数组</li>
<li>unshift：向数组的开头添加返回值是添加数据后数组的新长度，改变原有数组</li>
<li>splice：向数组的指定index处插入返回的是被删除掉的元素的集合，会改变原有数组</li>
</ol>
<h5 id="向数组删除元素的方法">向数组删除元素的方法：</h5>
<ol>
<li>pop()：从尾部删除一个元素返回被删除掉的元素，改变原有数组</li>
<li>shift()：从头部删除一个元素返回被删除掉的元素，改变原有数组</li>
<li>splice：在index处删除howmany个元素返回的是被删除掉的元素的集合，会改变原有数组</li>
</ol>
<h5 id="数组排序的方法">数组排序的方法：</h5>
<ol>
<li>reverse()：反转，倒置 改变原有数组</li>
<li>sort()：按指定规则排序 改变原有数组</li>
</ol>
<h5 id="数组迭代方法">数组迭代方法</h5>
<p>参数: 每一项上运行的函数， 运行该函数的作用域对象（可选）</p>
<p><strong>every()</strong></p>
<p>对数组中的每一运行给定的函数，如果该函数对每一项都返回true,则该函数返回true</p>
<pre><code class="language-js">var arr =
var result = arr.every((item,index,arr)=>{
return item>3
})
console.log(result)//false
</code></pre>
<p><strong>some()</strong><br>
对数组中的每一运行给定的函数，如果该函数有一项返回true,就返回true，所有项返回false才返回false</p>
<pre><code class="language-js">var arr2 =
var result2 = arr2.some((item,index,arr)=>{
return item<10
})
console.log(result2)//false
</code></pre>
<p><strong>filter()</strong></p>
<p>对数组中的每一运行给定的函数，会返回满足该函数的项组成的数组</p>
<pre><code class="language-js">// filter返回满足要求的数组项组成的新数组
var arr3 =
var result3 = arr3.filter((item,index,arr)=>{
return item > 3
})
console.log(result3)//
</code></pre>
<p><strong>map()</strong></p>
<p>对数组中的每一元素运行给定的函数,返回每次函数调用的结果组成的数组</p>
<pre><code class="language-js">// map返回每次函数调用的结果组成的数组
var arr4 =
var result4 = arr4.map((item,index,arr)=>{
return `<span>${item}</span>`
})
console.log(result4)
/*[ '<span>1</span>',
'<span>2</span>',
'<span>3</span>',
'<span>4</span>',
'<span>5</span>',
'<span>6</span>' ]*/
</code></pre>
<p><strong>forEach()</strong></p>
<p>对数组中的每一元素运行给定的函数,没有返回值，常用来遍历元素</p>
<pre><code class="language-js">// forEach
var arr5 =
var result5 = arr5.forEach((item,index,arr)=>{
console.log(item)
})
console.log(result5)
/*
10
20
30
undefined 该方法没有返回值
*/
</code></pre>
<p><strong>reduce()</strong></p>
<p><code>reduce()</code>方法对数组中的每个元素执行一个由你提供的reducer函数（升序执行），将其结果汇总为单个返回值</p>
<pre><code class="language-js">const array =
const reducer = (accumulator, currentValue) => accumulator + currentValue;
// 1 + 2 + 3 + 4
console.log(array1.reduce(reducer));
</code></pre>
<h3 id="20javascript为什么要进行变量提升它导致了什么问题">20.JavaScript为什么要进行变量提升，它导致了什么问题？</h3>
<p>变量提升的表现是，在变量或函数声明之前访问变量或调用函数而不会报错。</p>
<h4 id="原因">原因</h4>
<p>JavaScript引擎在代码执行前有一个解析的过程（预编译），创建执行上线文，初始化一些代码执行时需要用到的对象。</p>
<p>当访问一个变量时，会到当前执行上下文中的作用域链中去查找，而作用域链的首端指向的是当前执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它包含了函数的形参、所有的函数和变量声明，这个对象的是在代码解析的时候创建的。</p>
<p>首先要知道，JS在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。</p>
<ul>
<li>
<p><strong>在解析阶段</strong></p>
<p>JS会检查语法，并对函数进行预编译。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似，不过函数执行上下文会多出this、arguments和函数的参数。</p>
<ul>
<li>全局上下文：变量定义，函数声明</li>
<li>函数上下文：变量定义，函数声明，this，arguments</li>
</ul>
</li>
<li>
<p><strong>在执行阶段</strong>，就是按照代码的顺序依次执行。</p>
</li>
</ul>
<p><strong>那为什么会进行变量提升呢？主要有以下两个原因：</strong></p>
<ul>
<li>提高性能</li>
<li>容错性更好</li>
</ul>
<p><strong>（1）提高性能</strong> 在JS代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了提高性能，如果没有这一步，那么每次执行代码前都必须重新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会改变，解析一遍就够了。</p>
<p>在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计声明了哪些变量、创建了哪些函数，并对函数的代码进行压缩，去除注释、不必要的空白等。这样做的好处就是每次执行函数时都可以直接为该函数分配栈空间（不需要再解析一遍去获取代码中声明了哪些变量，创建了哪些函数），并且因为代码压缩的原因，代码执行也更快了。</p>
<p><strong>（2）容错性更好</strong> 变量提升可以在一定程度上提高JS的容错性，看下面的代码：</p>
<pre><code class="language-js">a = 1
var a
console.log(a) //1
</code></pre>
<p>如果没有变量提升，这段代码就会报错</p>
<h4 id="导致的问题">导致的问题</h4>
<pre><code class="language-js">var tmp = new Date();
function fn(){
console.log(tmp);
if(false){
var tmp = 'hello nanjiu';
}
}
fn();// undefined
</code></pre>
<p>在这个函数中，原本是要打印出外层的tmp变量，但是因为变量提升的问题，内层定义的tmp被提到函数内部的最顶部，相当于覆盖了外层的tmp，所以打印结果为undefined。</p>
<pre><code class="language-js">var tmp = 'hello nanjiu';
for (var i = 0; i < tmp.length; i++) {
console.log(tmp);
}
console.log(i); // 13
</code></pre>
<p>由于遍历时定义的i会变量提升成为一个全局变量，在函数结束之后不会被销毁，所以打印出来13。</p>
<h4 id="总结-1">总结</h4>
<ul>
<li>解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间</li>
<li>声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行</li>
<li>函数是一等公民，当函数声明与变量声明冲突时，变量提升时函数优先级更高，会忽略同名的变量声明</li>
</ul>
<p><strong>觉得文章不错，可以点个赞呀<sup>_</sup> 欢迎关注南玖～</strong></p>
</div>
<div id="MySignature" role="contentinfo">
<div style="color: blueviolet">
<div>作者：前端南玖</div>
<div>出处：https://www.cnblogs.com/songyao666/
</div>
<div>每日面试题：Github</div>
<p>-------------------------------------------</p>
<p>如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注 前端南玖 第一时间获取最新的文章～</p>
<p>扫描下方二维码关注公众号，回复进群，拉你进前端学习交流群</p>
<div style="display:flex">
<img src="https://blog-static.cnblogs.com/files/songyao666/nanjiu.gif?t=2" alt="逐梦wx" width="380" height="190"/>
</div>
</div><br><br>
来源：https://www.cnblogs.com/songyao666/p/15761500.html
頁:
[1]